Skip to main content

​
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, 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.
In real projects, be more detailed. But for learning, simple works great!

​
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, or let the AI generate one.

​
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.
First build takes longer because Xcode needs to compile the entire project. Future builds are much faster.

​
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: iOS Simulator

Your app running on a virtual iPhone. You can interact with it just like a real phone. 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:
“Change the plus button to green and minus to red”
“Add a subtle scale animation when the number changes”
“Save the count so it persists when I close and reopen the app”
“Don’t let the count go above 100 or below 0”
“Play a click sound when buttons are tapped”

​
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

  • 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
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.
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)“

​
Next Steps

Todo App Tutorial

Build a full task manager with data storage

Chat Interface Guide

Master the Nativeline workspace

Prompt Writing

Learn to write effective prompts

Using Images

Use screenshots to guide the AI