PROMPT GUIDE
v0 (from Vercel) is the best-in-class UI generator — Next.js, Tailwind, and shadcn/ui out of the box. It rewards prompts that describe screens like a designer briefing a developer: layout, components, every state. Here is how to write those, plus a free generator that engineers them for you.
Generate your prompt — free, no sign-up
v0 is strongest at a single screen or component. Generate the dashboard, iterate, then the settings screen. Multi-screen prompts blur into one muddled design.
"A centered card, max width 480, with the title on top, a two-column list below, and a sticky footer bar." v0 places things exactly as described — vague placement gets vague placement.
Empty, loading, error, success — for every dynamic element. v0 builds every state you list and skips every state you don't.
Do not assume it. "Fully responsive: single column on mobile, three columns on desktop" produces exactly that.
State your mode preference in the first prompt and v0 keeps it consistent across the session — mixing modes later means regenerating screens.
Build a [SCREEN] using Next.js + Tailwind + shadcn/ui. Layout: [concrete placement — columns, alignment, spacing]. Components: Card, Button, Input, [shadcn components]. States: - Empty: [what shows with no data] - Loading: skeleton for [element] - Error: inline message with retry Fully responsive (single column on mobile). [Light/dark] mode. Match a clean, modern look.
v0 places what you describe — nothing more. Concretely name the layout (centered card, two columns, sticky footer) and the shadcn components you expect. The free generator turns your plain description into that level of specificity.
It is strongest at screens and components. Use v0 for the UI, and describe data behavior as props it should expect — then wire the backend in your builder of choice.
Attach a screenshot. With a free VibePilot account, the generator studies the image and writes a v0 prompt that reproduces the visible layout, components, and styling.