v0 Vibecoding Guide
You finished the course. You have a website. Now you're going to want to build another one. This page is a cheat sheet for the next time you sit down with v0.
No video on this one. Bookmark it.
The seven habits
1. Be specific, then specify more
Vague prompts get vague results. The more you tell v0, the more it can do for you.
| OK | Better |
|---|---|
| "build me a website" | "build a plant store website for Green Thumb Goods with a hero, about section, product grid, and contact form" |
| "make it look nicer" | "tighten the hero spacing, shorten the headline to 5 words, and use a darker green for buttons" |
2. Show, don't just tell
v0 reads images well. A screenshot, a sketch, even a phone photo of a napkin drawing can guide a layout faster than three paragraphs of description.
use this screenshot as a reference for the navbar
use this drawing to set the layout of the contact section
3. Iterate, don't redo
Once you have a working base, keep refining it. Don't start over from a blank prompt every time you want a change. Talk to the site you have.
4. Batch the small, isolate the big
Stack small visual fixes into one numbered prompt. Save big behavioral changes for their own.
Good batch prompt:
A few quick fixes:
1. shorten the hero headline
2. swap the order of the about and products sections
3. make the buttons use a rounded corner
Save for its own prompt:
make the contact form save submissions to a database
5. Establish vocabulary early
Once you call something "the hero" or "the contact form," v0 remembers. Future prompts that reference those names will land in the right place.
in the hero, add a small subheadline under the main heading
6. Reinforce when v0 misses
If a change didn't take, don't shrug. Restate the ask, attach an annotated screenshot, and describe the expected behavior.
the sidebar is still not collapsible. when I click the panel button on the
top left, the sidebar should hide entirely. when I hover the left edge of
the screen, it should reappear temporarily.
7. Versions are your safety net
Every change is a new version. Try wild stuff. If it goes sideways, drop into the version dropdown and roll back. No work is lost.
Copy-pasteable starter prompts
Starting a new site
Create a [type] website for [business name].
It should have:
- [section 1]
- [section 2]
- [section 3]
- [section 4]
Use a [color] color scheme. Style: [modern / playful / minimal / bold].
Asking v0 to write copy
I like "[draft headline]" but can you give me three other options to choose from?
Describing a fix that v0 missed
[Feature] still isn't working. Specifically, when I [action], I expect
[expected behavior], but I'm seeing [actual behavior]. Use this screenshot
for reference.
Connecting a service
how can I make [feature] work? I want to [outcome].
Then let v0 walk you through the integration. Supabase, Resend, Stripe, others all install through this same flow.
When to roll back vs. push through
If two prompts in a row haven't moved you closer, roll back. The version dropdown is right there. It's almost always faster than trying to undo a bad path with more prompts.
If v0 is almost there and just got one thing wrong, reinforce. Restate the ask with more specifics or attach a screenshot.
The trick is noticing the difference. You'll get a feel for it.
One last thing
The site you built in this course is a starting point, not a finish line. Come back to v0 anytime. Add a feature. Try a redesign. Wire up a new integration. The vibe is iteration. Keep going.
Was this helpful?