v0 Prompt
Generator.
Ship production UI faster. Structured prompts for v0.dev with states, stack preferences, and accessibility wired in by default.
Works in v0.dev, Bolt.new, Lovable, and Claude Artifacts. Free. No sign-up.
# Goal Generate a Landing page for: [describe what this UI is for] # Structure Build a landing page with these sections in order: sticky nav, hero (headline + subhead + primary CTA + hero visual), social-proof logo strip, 3-column feature grid, one long-form feature block with image, testimonials, pricing or CTA section, footer. Everything responsive, mobile-first. # Style Style direction: Modern minimalist (Linear, Vercel). Typography: sans-serif system stack unless the style calls for serif. Generous whitespace. Avoid cramped grids. # Stack & components Target stack: Next.js + Tailwind + shadcn/ui (default). Use shadcn/ui primitives (Button, Card, Input, Dialog, Table, Sheet) rather than raw elements. Import icons from lucide-react. # States Include a skeleton / spinner loading state for async data. Don't ship a flash of blank content. # Accessibility & quality - All interactive elements keyboard-accessible with visible focus states. - Text contrast meets WCAG AA (4.5:1 for body, 3:1 for large text). - Touch targets at least 44px on mobile. - Semantic HTML: header, nav, main, section, footer where appropriate. - No placeholder text like "Lorem ipsum" — use realistic, sensible copy.
Paste into v0.dev. The structure also works with Claude Artifacts, Bolt.new, and Lovable with minor tweaks.
Prompt anatomy
What makes a v0 prompt actually produce shippable UI.
Name every section you expect in order. 'Hero, logo strip, 3-col features, long-form feature, testimonials, pricing, footer' is a night-and-day better prompt than 'landing page'.
Happy-path UI is a demo. Loading, empty, and error states are what ship. Tell v0 which states you want and it'll render all of them — skipping three rounds of 'but what if…'.
'shadcn/ui + Tailwind + Next.js App Router' yields different output than 'React + Tailwind'. Lock the stack and v0 stops inventing components that won't compile in your repo.
The workflow
From idea to shippable in three prompts.
- 1.Scaffold. Use this generator to produce the initial prompt. Paste into v0.dev. You'll get a structurally complete UI with the right sections, states, and stack — not perfect, but 70% of the way there.
- 2.Refine copy + layout. Second v0 message: rewrite headlines in our voice, tighten the pricing table, move testimonials above the feature grid. v0 keeps context, so you only name deltas.
- 3.Polish states + edge cases. Third v0 message: show the loading skeleton you actually want, add the empty-state illustration, tighten the error copy. Then hit 'Add to codebase' and you're done.
Related tools
Keep going.
FAQ
Questions about v0 prompts.
Why do v0 prompts need to look different from general prompts?+
v0.dev is a UI generator, not a chatbot. It responds strongly to three things: structural requirements (what sections, in what order), stack-level specificity (shadcn/ui vs raw Tailwind vs Next.js App Router), and explicit state requirements (loading, empty, error). A general 'build me a landing page' prompt leaves all three to guesswork; a structured v0 prompt nails them up front.
Does this work with Claude Artifacts, Bolt.new, and Lovable too?+
Yes, with minor adjustments. The prompt structure (Goal, Structure, Style, Stack, States, Must-include, Avoid, Accessibility) is model-agnostic. v0 responds best when shadcn/ui is specified; Bolt.new handles full-stack Next.js; Lovable is tuned for Supabase backends; Claude Artifacts does everything but doesn't have npm / file-system access. Swap the 'Stack' field accordingly.
Why specify empty and error states?+
The #1 thing that separates production UI from demoware is the states users actually see when data is missing or something breaks. Asking v0 for 'happy path only' gives you a demo. Asking for loading, empty, and error states gives you something you can ship. The cost is maybe 15% more generation time; the payoff is usually 2–3 skipped revisions.
Should I pass a brand color? Does it matter?+
It helps. v0 uses it for primary CTAs, focus rings, and active states — not for walls of color, which is the right call. If your brand is already in the page you're extending, pass the hex so the new UI matches. If you're prototyping, leave it blank and let v0 pick defaults.
Can I use this for v0 refinement prompts, not just initial generation?+
Yes — the same structure works for 'v2' prompts. Keep the Goal, Structure, Style, and Stack sections, and add a 'Changes from v1' section describing what to modify. v0 keeps context across the conversation, so you only need to name the deltas.
Is this free? Any limits?+
The generator is completely free, runs in your browser, and has no per-prompt limit. You'll still need a v0.dev account (or another code-gen tool) to actually produce the UI, and v0 has its own usage tiers. Nothing we do here touches Vercel's limits.