v0 is Vercel's tool for generating working apps from prompts. You can refine the design visually and publish straight to Vercel. These prompts use its screenshot uploads, Design Mode, project settings, and publishing.
Copy the prompt, paste it into the tool's chat, and replace everything in [BRACKETS] with your own details.
1 Turn a Screenshot into a Starting Point
What it's for: Using an image of a layout you like as the starting point for your own UI.
When to use it: You have a sketch, a mockup, or a reference screenshot. Attach it with the attachment icon or by dragging it into the chat.
Use the attached image as a layout reference for [PAGE, e.g. my pricing page].
My product: [WHAT IT DOES]
Keep: [e.g. "the three-column layout", "the big headline"]
Change: [e.g. "use my colors: #0F172A and #22C55E"]
Don't copy any logos or text from the image. Use my product details, or clearly marked placeholders where I haven't given you any.
Tips: High-resolution screenshots give better results. Crop tightly if you only want one section.
What it's for: Making small visual fixes (spacing, type, colors) without rewriting the whole page.
When to use it: The page is close but looks slightly off. Open Design Mode from the preview toolbar and select an element.
[Type into the Design Mode instruction box with an element selected]
Make this match the style of [OTHER ELEMENT, e.g. "the card above"]: same padding, corner radius, and heading size. Don't change the content or what it does.
Tips: Combine panel tweaks with instructions, then click Apply. Each apply creates a new chat version you can review or revert.
What it's for: Adding a backend through v0's integrations with your keys kept out of the chat.
When to use it: Your app needs to save data or have user logins.
Connect my app to [Supabase / Neon] so it can [WHAT IT NEEDS TO STORE].
Please:
1. Tell me which environment variables are needed (names only).
2. Make sure secret keys are only used in server code, never in the browser.
3. If I use Supabase, turn on Row Level Security for every table, with policies so users only see their own rows.
4. Explain how to test it with two different accounts.
Tips: Store keys in the project's environment variables, not in prompts. The v0 preview can only see Development environment variables.
What it's for: Finding the cause of an error before v0 rewrites more code.
When to use it: The preview shows an error or a blank screen, or a fix just made things worse.
The preview is broken: [ERROR OR WHAT YOU SEE]
It started after: [LAST CHANGE]
Don't rewrite anything yet. Explain the error in plain English, give me the 3 most likely causes, and fix only the most likely one. Then tell me exactly what you changed.
Tips: Every change is a new chat version, so you can revert to the last working one and try a smaller step.
What it's for: Publishing your app and making sure the live version works like the preview.
When to use it: You're ready to share your app. Use Publish in the chat header.
I'm about to publish. Before I do:
1. List every environment variable the app needs, and tell me which environments (Production, Preview) each should be set for in my Vercel project.
2. Find any hard-coded localhost URLs or test keys.
3. If the app has login, tell me which redirect URLs I need to add for my live domain.
4. Give me a short checklist to test the live site in a private window.
Tips: Changes to environment variables only apply to new deployments, so publish again after you change them. Add a custom domain on first publish or under Project settings → Domains.
