Phase 0: Vibe Coding Fundamentals · 45-60 min · Claude Code, Cursor, Lovable, v0, Bolt.new, Replit Agent, or similar
Objective
Your mission
You're going to build something real, right now, in one sitting. Plan it, build it with AI, review it, ship it to a live URL. Output: a working app + first_build.md.
You need: An AI coding tool (Lovable, v0, Bolt.new, or similar browser app builder).
Time: 45-60 minutes.
Step 1: choose something small enough (5 min)
The #1 mistake: choosing a project too big. "Build me a social network" won't finish today. "Build me a tip calculator" will.
Pick one:
- Landing page — hero section, 3 feature cards, contact form
- Calculator — tip, BMI, mortgage
- List app — todo, reading list, movie watchlist with add/delete, saved in the browser
- Timer — pomodoro, countdown
Rule: if you can describe it in 3-4 sentences, it's small enough.
Write in your file:
## My Project
[Name your project and describe it in 3-4 sentences]
Step 2: write the build description (10 min)
Before opening any tool, write the full description. Use the five-part framework from The Mental Model: Director, Not Typist: what it is, who it's for, what it does, what it looks like, and what you don't want.
Example — Tip Calculator:
Build a tip calculator as a single-page app. Clean, modern UI, mobile-first, light mode with green accent (#10b981).
Features:
- Enter bill amount (number input with $ prefix)
- Select tip percentage (buttons: 15%, 18%, 20%, 25% — clickable, highlight selected)
- Enter number of people (number input, default 1)
- Show tip amount per person and total per person, updating live as inputs change
- Round to 2 decimal places
No backend, no database, no user accounts. Everything in the browser. No animations except subtle hover on tip buttons.
Write your description in your file:
## Build Description
[Your full description — be specific about features, UI, colors, and what NOT to include]
Step 3: build it (10 min)
Open your tool. Paste your description. Watch it build.
If this is your first build, use a browser app builder — zero setup:
- Lovable (lovable.dev) — all-in-one
- v0 (v0.dev) — great for UI
- Bolt.new (bolt.new) — fastest to live URL
Never used one? Pick Bolt.new or Lovable, sign up with Google or email, and click New Project. The free plan is enough for this; nothing to install and no card needed. Phase 1 compares the tools properly.
Step 4: review against your spec (10 min)
Don't accept yet. Check each feature from your description:
- Does each feature work? Go through your list one by one.
- Does it look right? Layout, colors, mobile view?
- Edge cases: What happens with 0? Empty input? Very large numbers?
- Anything suspicious? No API keys, passwords, or tokens visible.
Write in your file:
## Review
What works: [list]
What's wrong: [list]
What's missing: [list]
Step 5: correct and iterate (10 min)
Give specific corrections — not "fix it":
Bad: "Fix the layout" Good: "Make the tip buttons a horizontal row of pills, not a vertical list. Selected button: green background, white text. Unselected: white background, green border. Remove the Calculate button — totals should update live as I type."
Write in your file:
## Corrections Applied
1. [Specific change 1]
2. [Specific change 2]
Apply them. Check the result.
Step 6: ship it (5 min)
Deploy. Most browser app builders have a "Deploy" or "Publish" button. Click it.
If your tool doesn't have built-in deploy, use Vercel or Netlify (free tier, deploy from GitHub or drag a folder).
Write in your file:
## Live URL
[Your deployed URL here]
The pattern is the point
The specific thing you built doesn't matter as much as the pattern: plan (write the spec) → build (feed it to AI) → review (check against spec) → ship (deploy). Every phase in this course repeats this pattern with increasingly complex projects. By the capstone, you'll do it without thinking about the steps — but the cycle stays the same.
Which project could you realistically build and ship in one sitting, per the lesson's rule?
If you can describe it in three or four sentences, it is small enough to plan, build, review and deploy in one go. Too big a project is the number-one mistake.