Phase 2: Describing What You Want · 30 min · Any vibe coding tool

Plan First, Then Build

Ask the AI to outline before it builds. A 2-minute plan review saves a 20-minute rebuild.

Real-world application: What changes when you use this: you catch architecture and scope issues before code is written — which means fewer rebuilds and cleaner builds.

What you will learn

Use the plan-first prompt pattern to get an outline before code
Review an AI's plan for scope and architecture issues
Know when to approve, modify, or reject a plan
Understand the cost of skipping the plan step

Objective

Your mission

Use the plan-first prompt pattern to get an architecture plan from the AI before it builds. Review, approve/modify/reject, then build. Output: plan_first_build.md.

You need: Any AI coding tool. A text editor.

Time: 30 minutes.

Step 1: write a spec with the plan-first sentence (5 min)

Write a spec for a small app using the 5-part framework from Lesson 01. Then add this sentence at the end:

"Before you write any code, outline your approach: what files you'll create, what each file does, what technologies you'll use, and what the page structure will be. Wait for my approval before building."

This transforms the interaction from spec → code to spec → plan → (your review) → code.

Write in your file:

## My Spec
[Your 5-part spec]

## Plan-First Sentence
[The sentence above, pasted at the end of your spec]

Step 2: review the AI's plan (10 min)

The AI should return something like:

Approach:
index.html — single page with all content
styles.css — all styling, mobile-first
app.js — app logic
Structure:
Header with title
Input form
List display
Data in localStorage
Technologies: Vanilla HTML/CSS/JS. No frameworks. No backend.

Check for:

Scope — Building too much? Too little?
Technology choices — Using a framework when you wanted vanilla? A database when you wanted localStorage?
Page structure — Layout matches what you described?
File organization — Makes sense for the project size?

Write in your file:

## AI's Plan
[paste or summarize the plan]

## My Review
- Scope: [right / too much / too little]
- Technology: [right / wrong — what would you change?]
- Structure: [right / needs changes]
- File organization: [right / needs changes]

Step 3: approve, modify, or reject (5 min)

Approve: "Looks good, go ahead and build."
Modify: "Close, but two changes: (1) use localStorage, not a database. (2) Put everything in a single index.html file. Then build."
Reject: "This isn't what I described. I said single-page with localStorage, but you're planning a multi-page app with a database. Reread my spec and try again."

Write in your file:

## My Decision: [Approve / Modify / Reject]
[What you said to the AI]

The cost of skipping the plan
When you skip the plan step, the AI makes architecture decisions without your input. If those decisions are wrong, fixing them means asking the AI to restructure — harder than building from scratch. A 2-minute plan review catches architecture issues before they become code. The plan step is the cheapest correction point in the entire build cycle.

Step 4: build and compare (10 min)

Let the AI build after your approval/modification. Compare the result to what you expected.

Write in your file:

## Result
Did the plan review catch anything that would have been harder to fix after building? [yes/no — what?]
Did the build match the plan? [yes/no]
What would have gone wrong if you'd skipped the plan step? [specific scenario]

The AI's plan for your localStorage-only list app includes a database and three pages. What's the cheapest fix?

The plan is the cheapest correction point. Fixing architecture after the code exists means restructuring, which is harder than building from scratch.

Key Terms & Next

You're done

Save your plan_first_build.md. You now have the plan-first pattern as a permanent part of your build workflow.

That's the whole lesson. Now do the lab.

Its hands-on lab, and the lessons after it, open with a free account — the opening phases of 29 of 35 courses are free, no credit card.