Updated 2026-07-05 · 6 min read
v0 is at its best generating components, not pages. Prompt it like you'd write a component spec: name, props, variants, states, context. Scope down and the output gets remarkably clean.
Generate a [component] in React + Tailwind (shadcn/ui conventions). Props: [list with types]. Variants: [default, outline, ghost…]. States: default, hover, focus-visible, disabled, loading. Used in: [context — a pricing page, a data table row]. Design tokens: [colors, radius, font]. Accessible (labels, keyboard, ARIA where needed).
Two parts do most of the work. States force completeness — models skip disabled/loading/focus unless asked. Context ("used in a marketing pricing section") makes sizing, spacing and hierarchy come out right.
v0 defaults to Tailwind's stock palette and shadcn's neutral look. Unstyled, everything you make will look like everything everyone makes. Paste your tokens into each prompt — or better, keep a tokens block you reuse:
bg #ffffff, text #111827, muted #6b7280, accent #0f766e (primary actions only), radius 10px, font Inter, shadows: none — 1px borders instead.
When you do want a full page, still think in parts: generate the hero, then the feature grid, then the pricing table — reviewing each. Chained scoped prompts beat one mega-prompt because errors stay local and you keep what works.
They all share one trait: output quality tracks prompt specificity. The same measured design spec — exact hexes, type scale, radius, constraints — lifts all three. That's what the per-site prompts in our library are built to provide.
It can, but quality drops with scope. Generate section by section and compose. For a complete site in one pass, Lovable is the better fit.
Include your tokens (colors, font, radius, shadow policy) in every prompt, and state negative constraints like "no gradients, no stock Tailwind blue".
Only if prompted. Ask explicitly for focus-visible states, keyboard navigation and ARIA labels, then verify — generated ARIA is sometimes decorative.