v0 Prompts

Act as a frontend developer. I have a screenshot of a landing page I like ([STYLE], for [PRODUCT]) and I need a working version in Next.js. Give me the v0 workflow: upload the screenshot and prompt 'recreate this landing page as a responsive React component using Tailwind and shadcn/ui; match the layout, spacing, and color palette; use Lucide icons'; then iterate in chat on the [NUMBER] things v0 gets wrong first try (usually [SPACING], [TYPOGRAPHY], [MOBILE LAYOUT]); then use the direct manipulation editor to drag and recolor elements without prompting. End with the export step (copy code or npx v0 add) into my repo at [PATH], and the accessibility checklist to run on the result.

Act as a founder who needs a marketing site for [PRODUCT] by [DATE]. Use v0's multi-page generation (June 2026 refresh): write one detailed prompt describing all five pages ([HOME], [FEATURES], [PRICING], [ABOUT], [CONTACT]) with a shared navigation and footer, the brand palette ([COLOR 1], [COLOR 2]), and the tone ([TONE]); generate; then review each page for consistency (nav links, footer, button styles). Include the follow-up prompts to fix the [NUMBER] most common inconsistencies, how to connect the contact form to [FORM BACKEND], and the one-click deploy to Vercel with the custom domain [DOMAIN].

Act as a design engineer. Our designer shipped a Figma frame for [COMPONENT] ([VARIANT COUNT] variants: [VARIANT 1], [VARIANT 2]) and I need clean React code. Walk through the v0 Figma import: attach the frame, prompt 'generate this as a shadcn/ui-based React component with props for [PROP 1] and [PROP 2]; keep it accessible (keyboard nav, aria labels)'; verify the output against the design tokens ([COLOR], [SPACING SCALE], [FONT]); then integrate it into our existing Next.js app via npx v0 add. Include the prop interface to request, the test to write ([TEST DESCRIPTION]), and how to handle the [NUMBER] design details v0 usually approximates (shadows, transitions).

Act as a frontend developer building an admin dashboard for [PRODUCT] ([USER ROLE] users). Prompt v0: 'build a dashboard layout with sidebar nav ([SECTIONS]), a KPI row ([METRIC 1], [METRIC 2], [METRIC 3]), and a shadcn/ui data table for [ENTITY] with sorting, filtering, and pagination over [NUMBER] rows of mock data'. Then: wire the table to my real API at [API ENDPOINT] (replace mock data, keep the UI); add the empty state and loading skeletons v0 skips; and verify responsive behavior at [BREAKPOINT]. Include the follow-up prompts for each wiring step so the UI stays intact while data goes live.

Act as an indie hacker. I want v0 to build [APP IDEA] end to end: the UI ([PAGES]), API Routes for [ENDPOINTS], Server Actions for [MUTATIONS], and a Supabase database with tables for [TABLE 1] and [TABLE 2]. Write the master prompt that gets v0's agentic mode to scaffold all of it, then the verification checklist: run the app locally, test each CRUD flow ([FLOW 1], [FLOW 2]), confirm the Supabase connection and row-level security basics. Include what to do when v0's backend assumptions clash with my schema ([RESOLUTION STEPS]) and the deploy sequence to Vercel with env vars ([VAR 1], [VAR 2]).

Act as an accessibility specialist. v0 generated [COMPONENT/PAGE] for [PRODUCT] and it looks great, but I need it to meet [WCAG LEVEL]. Build the audit workflow: prompt v0 'audit this component for accessibility: check color contrast ([COLOR PAIR]), keyboard navigation order, focus indicators, aria labels on [INTERACTIVE ELEMENTS], and screen-reader announcements for [DYNAMIC CONTENT]'; apply the fixes it suggests; then manually verify with [TOOL] and a keyboard-only pass. Include the five issues v0 most commonly leaves (missing labels, low contrast, [ISSUE 3]) and the exact follow-up prompt that fixes each one.

Act as a product designer who does not code. v0 generated the [PAGE] for [PRODUCT] and the layout is 80 percent right. Show me the no-prompt iteration workflow using the direct manipulation editor: select the [ELEMENT] and drag it from [POSITION A] to [POSITION B]; resize [COMPONENT] to [SIZE]; recolor the CTA button to [COLOR]; then ask v0 in chat to 'apply this spacing ([VALUE]) consistently to all cards'. Include when to stop dragging and start prompting (structural changes like [EXAMPLE]), and how to hand the result to a developer with the change list.

Act as a frontend lead. Our Next.js app at [REPO] needs [COMPONENT 1] and [COMPONENT 2], and I want v0's output without rebuilding the app. Detail the npx v0 add workflow: generate the components in v0 with our design constraints (Tailwind config at [PATH], shadcn/ui already installed, color tokens [TOKENS]); run npx v0 add [COMPONENT URL] in the repo; resolve the [NUMBER] typical conflicts (duplicate cn() util, Tailwind version mismatch, missing Lucide dependency); then write the integration test ([TEST]). Include the pre-flight checklist (Node version, shadcn version, Tailwind config) that prevents the common failures.

Act as a design systems lead at [COMPANY]. We need [NUMBER] components ([LIST]) sharing our tokens ([COLORS], [SPACING], [TYPE SCALE]). Design the v0 system workflow: create a master style prompt describing the tokens once; generate each component with 'follow the [DESIGN SYSTEM] style prompt'; review for token drift (v0 inventing off-palette colors); and assemble the Storybook-style showcase page. Include the governance: who approves a new component, where the canonical style prompt lives ([LOCATION]), and the monthly audit that regenerates [NUMBER] components to catch drift.

Act as a growth marketer for [PRODUCT]. Our landing page converts at [RATE] percent and I want to test [HYPOTHESIS]. Use v0 to generate [NUMBER] variants of the [SECTION] section: variant A emphasizes [ANGLE 1], variant B emphasizes [ANGLE 2], variant C tries [ANGLE 3]; keep the rest of the page identical (same nav, footer, and [COMPONENT]). Include the prompt for each variant, how to export all three cleanly, the test setup ([TOOL], traffic split [SPLIT], runtime [DAYS]), and the decision rule (ship the winner if lift exceeds [PERCENT] percent with [CONFIDENCE] confidence).