Plan your app

This page brings everything together. You'll take an app idea and turn it into a plan an AI builder can follow, one small step at a time.

What is a build plan?

Think of planning a road trip. You pick a destination, decide who's coming, choose the stops, and list them in order. Then you drive one stop at a time.

A build plan is the same for an app. It's the list of small steps, in order, that takes your idea to a working app.

Step by step

1. Idea

Write your idea in one sentence. If you can't, the idea is still too fuzzy. Example: "A simple web app to track daily habits and streaks."

2. Users

Who will use it, and what do they need? "Beginners who want 2 to 5 simple habits without clutter."

3. Features

List everything you'd like, then cut it down to the 4 to 6 must-haves for version 1. Move the rest to "Out of scope".

4. Screens

A screen is one page of your app. List each one and what's on it. "Home: today's habits with checkboxes. Progress: a weekly chart."

5. Data

Data is the information your app needs to remember. Think of it as the columns in a spreadsheet.

Habit: name, emoji, created date
Check-in: which habit, which date, done (yes/no)

6. PRD

Put steps 1 to 5 into a PRD, as you learned on the previous pages. Add your notes file for the AI too.

7. Build prompts

Break the PRD into small build steps. Each step becomes one prompt. Each prompt should add one thing you can see and test.

Breaking the build into small steps

For example, here's how a simple habit tracker app splits into build prompts:

# Build plan: Habit Tracker

- [ ] 1. Create the home screen layout with a header and empty habit list
- [ ] 2. Add a form to create a habit (name + emoji)
- [ ] 3. Show habits in the list and save them so they survive a refresh
- [ ] 4. Add a checkbox to mark each habit done for today
- [ ] 5. Calculate and show the streak for each habit
- [ ] 6. Add edit and delete for habits
- [ ] 7. Add the weekly progress chart screen
- [ ] 8. Polish: colors, spacing, mobile layout

And here's what one build prompt looks like:

Read docs/PRD.md for the full plan.
We are on step 2 of docs/build-plan.md.
Add a form on the home screen to create a habit with a name and an optional emoji.
Don't build any other features yet.
When you're done, tell me how to test it.

Let's break this down:

• It points to the PRD, so the AI knows the big picture.
• It names the exact step, so the AI doesn't jump ahead.
• "Don't build any other features yet" is a scope guardrail.
• "Tell me how to test it" makes checking easy.

Organizing your docs folder

Keep your planning files together in a docs folder. Your README and AI notes sit in the main folder, where tools look for them.

habit-tracker/
├── README.md          ← what the project is
├── CLAUDE.md          ← notes for your AI
└── docs/
    ├── PRD.md         ← what to build
    ├── build-plan.md  ← steps, in order
    └── prompts.md     ← prompts that worked

Your planning checklist

Before you start building, check that you can tick every box:

- [ ] My idea fits in one sentence
- [ ] I know who the users are
- [ ] Version 1 has 4 to 6 features
- [ ] I've listed what's out of scope
- [ ] I've listed every screen
- [ ] I know what data the app saves
- [ ] My PRD is written and saved
- [ ] My notes for the AI are written
- [ ] My build plan has small, testable steps

Common mistakes

• Skipping planning because it feels slow. It saves hours of fixing later.
• Making steps too big, like "add all the features".
• Jumping to the next step before testing the current one.
• Not ticking off finished steps, then losing track of where you are.
• Changing the plan in chat but not in the PRD. Update the document too.

What's next?

Your plan is ready. Before you build, let's learn how web apps actually work, so you understand what your AI builder is creating.