> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nativeline.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Your First App

> Build your first iOS app in 10 minutes

# Your First App

**⏱️ 10 minutes**

Let's build something! This tutorial walks you through creating your first iOS app with Nativeline. You'll go from idea to working app in the iOS Simulator in just minutes.

## What You'll Build

A simple counter app that:

* Shows a number
* Has buttons to increment and decrement
* Remembers the count

Simple, but you'll learn everything you need to build more complex apps.

***

## Step 1: Create a New App

Open Nativeline. On the Home Page, select **iPhone** from the platform selector. You'll see:

> **"Tell me about the app you're imagining..."**

Type your app description. For this tutorial, enter:

```
A simple counter app with a big number display and plus/minus buttons
```

Click **Create** or press Enter.

<Note>
  Enhanced mode is selected by default, which is great for most projects.
</Note>

<Tip>
  In real projects, be more detailed. But for learning, simple works great!
</Tip>

***

## Step 2: Complete the Wizard

Nativeline's wizard helps customize your app with a few quick questions:

### What feel do you want?

Choose **Simple & clean** — minimalist works well for a counter.

### Similar apps?

You can skip this or type "like Apple's calculator" for inspiration.

### Pick colors

Choose any palette you like. You can use the color wheel generator to create a custom palette, pick from presets, or let the AI generate one for you.

### Name your app

Enter: **Counter**

Click **Create App** to continue.

***

## Step 3: Watch It Build

Nativeline now creates your app:

1. **Setting up the project** — Creating the Xcode structure
2. **Writing the code** — Generating Swift/SwiftUI
3. **Building** — Compiling everything

This takes 30-60 seconds. You'll see a progress animation.

<Note>
  First build takes longer because Xcode needs to compile the entire project. Future builds are much faster.
</Note>

***

## Step 4: Explore Your Workspace

Once complete, you'll see the main workspace:

### Left Side: Chat Interface

* **Your messages** — What you ask for
* **AI responses** — What the AI is doing
* **Tool cards** — Files being created/edited
* **Todo list** — Current tasks

### Right Side: Embedded Simulator

Your app running on a virtual iPhone, embedded directly in the Nativeline workspace. You can interact with it just like a real phone — tap, scroll, and swipe right inside the app.

Try tapping the buttons in your counter app!

***

## Step 5: Make Your First Change

Let's customize the app. In the chat, type:

```
Make the number display larger and use a bold font
```

Watch the AI:

1. **Plan** the change
2. **Edit** the code
3. **Rebuild** the app
4. **Show** the result

Your counter now has a bigger number!

***

## Step 6: Add a Feature

Let's add something new. Type:

```
Add a reset button that sets the count back to zero
```

The AI will:

1. Create the button
2. Add the reset logic
3. Position it appropriately

Test it — tap reset and watch the count go to zero.

***

## Step 7: Polish the Design

Let's make it look better. Type:

```
Style the buttons with rounded corners, a blue background, and white text. Add some spacing between them.
```

Now you have a polished counter app!

***

## Experiment Further

Try these prompts to explore more:

<AccordionGroup>
  <Accordion title="Change the colors" icon="palette">
    "Change the plus button to green and minus to red"
  </Accordion>

  <Accordion title="Add animation" icon="wand-magic-sparkles">
    "Add a subtle scale animation when the number changes"
  </Accordion>

  <Accordion title="Add persistence" icon="database">
    "Save the count so it persists when I close and reopen the app"
  </Accordion>

  <Accordion title="Add a max limit" icon="ban">
    "Don't let the count go above 100 or below 0"
  </Accordion>

  <Accordion title="Add sound effects" icon="volume-high">
    "Play a click sound when buttons are tapped"
  </Accordion>
</AccordionGroup>

***

## What You Learned

Congratulations! You just:

* ✅ Created an app from a description
* ✅ Used the wizard to customize settings
* ✅ Made changes through natural language
* ✅ Added new features without coding
* ✅ Styled your app visually

You've got the basics down. Now let's build something more substantial.

***

## Common Issues

<AccordionGroup>
  <Accordion title="The Simulator isn't showing" icon="mobile">
    * Check if it's behind other windows
    * Look in other Spaces/Desktops (swipe on trackpad)
    * It may take 30-60 seconds to boot the first time
  </Accordion>

  <Accordion title="Build failed" icon="circle-xmark">
    Don't worry! Nativeline automatically:

    1. Detects the error
    2. Proposes a fix
    3. Rebuilds

    If it keeps failing, describe the issue in your own words.
  </Accordion>

  <Accordion title="App doesn't match what I asked for" icon="circle-question">
    Be more specific in your next prompt:

    * Instead of "make it bigger" → "make the font size 48pt"
    * Instead of "change the color" → "change to blue (#007AFF)"
  </Accordion>
</AccordionGroup>

***

<Tip>
  Want to build for iPad or Mac instead? See [Your First iPad App](/quick-start/your-first-ipad-app) or [Your First Mac App](/quick-start/your-first-mac-app).
</Tip>

## Next Steps

<CardGroup cols={2}>
  <Card title="Todo App Tutorial" icon="list-check" href="/quick-start/todo-app">
    Build a full task manager with data storage
  </Card>

  <Card title="Chat Interface Guide" icon="comments" href="/features/chat-interface">
    Master the Nativeline workspace
  </Card>

  <Card title="Prompt Writing" icon="pen" href="/guides/prompt-workshop">
    Learn to write effective prompts
  </Card>

  <Card title="Using Images" icon="image" href="/features/using-images">
    Use screenshots to guide the AI
  </Card>
</CardGroup>