After this lesson you'll know
- How to describe an app to AI so it builds what you actually want
- The step-by-step process of going from idea to working app
- How to review and refine what AI builds
- What a real vibe coding session looks and feels like
We are building a gratitude journal app.
Here is the plan: a simple web app where you write three things you are grateful for each day, see your past entries, and feel good scrolling through them. It is small enough to build in 10 minutes but real enough to actually use.
We are going to walk through this step by step. You will see the exact prompts, the decisions you make along the way, and how the conversation with AI unfolds. Follow along in your own AI coding tool if you want to build it live.
The vibe coding process, live.
Start with one clear sentence about what you are building. Do not over-explain. Just the core idea.
Build a gratitude journal web app. Each day, the user
writes 3 things they are grateful for. They can scroll
through past entries. Clean, minimal design with a
warm color palette. Store entries in the browser's
local storage.That is it. Five lines. No technical jargon. Just a clear description of what you want. The AI takes this and generates a complete working app — HTML, CSS, JavaScript, the whole thing.
Look at the result. Open it in the preview. Does it look right? Does it work? Click around. Try adding an entry. You are the quality checker here. Not the coder — the user.
The first version is rarely perfect. That is normal. Now you refine. Each follow-up prompt makes it better.
Make the text input bigger and add placeholder text
that says "What are you grateful for today?"
Add the date as a header for each day's entries.
Add a small animation when a new entry is saved —
something gentle, like a fade-in.
The background color is too bright. Use a soft cream
or warm off-white instead.Add a few entries. Refresh the page — are your entries still there? Try it on your phone. Show it to someone. Does it make sense to a person who has never seen it before?
The vibe coding loop: describe, review, refine.
Every vibe coding session follows the same pattern. Once you internalize this, you can build anything.
1. DESCRIBE what you want (plain English)
|
v
2. AI BUILDS a first version
|
v
3. YOU REVIEW the result (use it, click around)
|
v
4. REFINE with specific feedback
|
v
(repeat 3-4 until it is right)
|
v
5. DONE - you have a working app
Most apps take 3-5 rounds of this loop. Each round gets you closer. The better you get at describing what you want, the fewer rounds you need.
What makes a first prompt great vs garbage.
Good vs Bad First Prompts
BAD: "Make me an app." Why this fails:
BAD: "Build a React app using Next.js with Tailwind CSS, a PostgreSQL database, Prisma ORM, and deploy to Vercel with edge functions." Why this fails:
GOOD: "Build a tip calculator. The user enters the bill amount and number of people. Show the tip and per-person total. Simple, clean, mobile-friendly." Why this works:
GOOD: "Build a recipe saver app. Users paste a URL, the app extracts the recipe, and saves it without all the blog nonsense. Display just ingredients and steps." Why this works:
The key insight: You do not need to get it perfect on the first prompt. Describe, review, refine. Three to five rounds and you have a working app. The magic is in the iteration, not the initial description.
Lock it in.
Quiz
1What is the vibe coding loop?
2How should your first prompt describe an app?
3How many rounds of refinement does a typical vibe-coded app take?