🚀Your First App in 10 Minutes
From a blank prompt to a deployed app, with the exact prompts and the loop that makes it work.
What you'll get
- Write a first prompt that produces something usable
- Iterate three times to add real polish
- Recover gracefully when the AI gets stuck
- Publish to a live URL you can share
We'll build a tiny daily-quote app together: a hero, a button to roll a new quote, and a saved-favourites list. Small enough to finish in one sitting, big enough to feel like a real product. By the end you'll have a live URL and, more importantly, a workflow you can repeat for every future project.
- 10:00Open the builderBlank canvas, blank prompt.
- 20:30Send the opening promptOne outcome, one vibe.
- 32:00First preview appearsRead it, don't rewrite it.
- 44:00Polish promptTypography, spacing, motion.
- 57:00Add favouritesOne slice at a time.
- 69:00Hit publishCopy the URL, send to a friend.
Step 0 — The 60-second setup
Open your AI builder of choice and start a fresh project. Don't pick a template — templates short-circuit the part of vibe coding you most need to practise: turning a vague idea into a concrete prompt. A blank canvas is the whole point.
Before you type anything, take 60 seconds to picture the finished app in your head. Who uses it? What is the one thing they do? What does it feel like? You're not designing — you're just naming the vibe.
Step 1 — The anatomy of an opening prompt
A great opening prompt has four parts: the user, the outcome, the visual tone, and the constraint. Skip any of them and the AI will guess — usually wrong. Include all four and you get something close to usable on the first try.
Don't pre-optimise. Don't ask for auth, payments, and a database in the first message. One outcome, one vibe, hit send.
Build a one-page daily-quote app for designers. Big serif headline, soft pastel background, a 'New quote' button, and a list of saved favourites below. Quotes can be hard-coded for now.
Step 2 — React, don't rewrite
Once the AI produces something, resist the urge to rewrite the prompt from scratch. That's the single most common beginner mistake — every rewrite throws away what was already good and rolls the dice again.
Instead, send a small follow-up that names what to keep and what to change. This is called a diff prompt, and it is the workhorse of every vibe coder.
Keep the layout. Make the headline twice as large, add a subtle gradient behind it, and animate the quote change with a 200ms fade.
Step 3 — The iteration loop
Every change you make from here on follows the same tiny loop. You'll run it dozens of times in a single session. Eventually it becomes muscle memory.
- Read the preview as a real user would
- Pick the single most jarring problem
- Send a diff prompt for that one thing
- Wait, read, repeat
Step 4 — Add features one slice at a time
Now we add favourites. The instinct is to ask for 'favourites with localStorage persistence and a delete button' in one message. Don't. Three small prompts beat one big prompt every time, because each step is reviewable and reversible.
Add the favourites list. Confirm it works. Add persistence. Confirm it works. Add a delete button. Confirm it works. Three minutes of patience saves twenty minutes of debugging.
Step 5 — When the AI gets stuck
Sometimes the AI will get into a loop: every fix breaks something else. Don't fight it with longer prompts. Instead, do one of three things.
First, undo to the last good state. Most builders have a history — use it. Second, describe the bug as a user, not as an engineer: 'When I click New Quote twice quickly, the old quote flashes back for a second.' Third, if it's truly stuck, ask the AI to explain the relevant code in plain English. The act of explaining usually surfaces the fix.
Step 6 — Publish
Click publish. Copy the URL. Open it on your phone. Send it to a friend. You shipped.
The first publish is always a little embarrassing — that's the point. Shipping early is what separates people who finish projects from people who polish forever.
Prompt examples
Build a one-page daily-quote app for designers. Big serif headline, soft pastel background, a 'New quote' button, and a list of saved favourites below. Quotes can be hard-coded for now.
Increase the headline size, add a subtle gradient behind it, and animate the quote change with a fade.
Persist the favourites list to localStorage so it survives a reload. Don't change anything else.
- Trying to add auth, payments, and a database in the first prompt
- Not naming the visual feel ('warm', 'soft', 'editorial')
- Forgetting to test the published URL on your phone
- Rewriting the whole prompt instead of sending a diff
- One prompt = one outcome
- Always describe the user before describing the feature
- Publish early, even when you're embarrassed by the result
- Keep a notes file with the prompts that worked
Use the built-in publish button. Once you're happy, connect a custom domain — it takes about 2 minutes and makes the project feel real.