Inside Vercel v0's System Prompt: How 'Don't' Rules Guarantee Consistent Frontend Generation

Overview

v0 is Vercel's AI frontend generation tool that produces runnable Next.js pages from a single user sentence. Its leaked system prompt (~6,000 characters, April 2025) uses zero external tools — the code block output itself is the tool. The prompt's design philosophy for this extremely vertical product is not "guide how to do it" but "define clear boundaries — what to do, what not to do." It locks the tech stack (Next.js App Router + React + TypeScript + Tailwind + shadcn/ui), forbids model improvisation (no indigo/blue, no hand-written SVG icons, no config files), and uses interactive components (AddIntegration, AddEnvironmentVariables) to front-load user decisions. The core principle: trade rules for consistency, consistency for user experience.

Overall Prompt Structure

The prompt comprises six layers:

Tech Stack Lock (2 segments): Next.js App Router + React + TS + Tailwind + shadcn/ui.

Environment Constraints (4 segments): No config files, no duplicate components, default files not rewritten, SVG via lucide-react.

Design Aesthetic Rules (3 segments): Avoid indigo/blue, built-in placeholder.svg with hardcoded query, responsive design mandatory.

Interaction Component Rules (3 segments): AddIntegration, AddEnvironmentVariables, follow-up action suggestions.

Output Specifications (3 segments): Complete runnable code, fixed refusal message, tsx file= syntax contract.

Tech Selection Whitelist (1 segment): AI SDK via 'ai'/'@ai-sdk' only; ban langchain, openai-edge, edge runtime.

Layers 1–3 ensure output is correct, good-looking, and consistent; layer 4 front-loads user decisions to avoid rework; layer 5 guarantees directly usable output. Nearly every rule is a "don't" — vertical products use prohibition lists to raise the quality floor.

Detailed Analysis

① Tech Stack Lock

Prompt fragment:

Unless you can infer otherwise from the conversation or other context, v0 defaults to the Next.js App Router; other frameworks may not work in the v0 preview.

Analysis: The phrasing "defaults to" rather than "must use" shifts the constraint from a moral injunction to an environmental fact: "other frameworks may not work in the v0 preview." This matters because v0's product positioning is generating projects deployable to Vercel; if the model emitted Vue or Svelte, the user couldn't run them. Vertical agents prioritize consistency over flexibility — all outputs share one stack so the user experience stays uniform.

Prompt fragment:

v0 tries to use the shadcn/ui library unless the user specifies otherwise. Only create custom implementations if the existing components cannot fulfill the requirements.

Analysis: "Tries to use" is not a hard lock — user-specified libraries win. The exception condition is explicit: custom code only when existing components fall short. This guarantees UI style unity (every button, card, dialog looks the same) and saves tokens.

② Environment Constraints

Prompt fragment:

It does not support a package.json; npm modules are inferred from the imports. Do NOT output next.config.js file, it will NOT work.

Analysis: v0 runs in a browser sandbox where dependencies are auto-inferred from import statements — no package.json needed. next.config.js simply doesn't work in this environment; generating it would confuse users (why is there a package.json but no node_modules?). The rule is a hard technical constraint, not a style suggestion.

Prompt fragment:

Do NOT write the shadcn components, just import them from "@/components/ui".

Analysis: All shadcn/ui components are pre-installed. Rewriting them wastes tokens and risks style drift. A single import line replaces 50 lines of component code.

Prompt fragment (default file manifest & token throttling):

The Code Project contains these files by default: app/layout.tsx, components/theme-provider.tsx, components/ui/* (including accordion, alert, avatar, button, card, dropdown-menu, etc.), hooks/use-mobile.tsx, hooks/use-toast.ts, lib/utils.ts (includes cn function to conditionally join class names), app/globals.css (default shadcn styles), next.config.mjs, tailwind.config.ts (default shadcn configuration), package.json, tsconfig.json. When providing solutions: DO NOT regenerate any of these files. Assume you can import from these paths (e.g., '@/components/ui/button'). Only create custom implementations if the existing components cannot fulfill the requirements. When suggesting code, omit these components from the Code Project unless a custom implementation is absolutely necessary. Focus exclusively on new files the user needs.

Analysis: This "environment snapshot" technique enumerates the default file tree so the model doesn't guess project structure. "DO NOT regenerate" + "Focus exclusively on new files" enforces minimal-delta output — a token-economy discipline. The exception clause ("only if existing components cannot fulfill") keeps it from being a dead ban. Together with the shadcn-import rule, it forms a complete "output minimum increment" engineering practice.

Prompt fragment:

v0 DOES NOT output <svg> for icons. v0 ALWAYS uses icons from the "lucide-react" package.

Analysis: Model-drawn SVGs tend to be ugly (wrong proportions, rough details). lucide-react is pre-installed, consistent, and offers thousands of icons. Forcing the library guarantees icon quality and saves tokens (one import line vs. dozens of SVG lines).

⑥ Tech Selection Whitelist

Prompt fragment:

v0 ONLY uses the AI SDK via 'ai' and '@ai-sdk'. v0 answers AI related questions with javascript instead of python and avoids libraries which are not part of the '@ai-sdk', for example avoid 'langchain' or 'openai-edge'. v0 NEVER uses runtime = 'edge' in API routes when using the AI SDK

Analysis: This downgrades tech selection from "model's free play" to a fixed whitelist, preventing generation of code that won't run in v0's sandbox. Explicitly naming langchain and openai-edge blocks the flood of LangChain tutorials in training data. Mandating JavaScript over Python reflects the Next.js sandbox's inability to run Python. The runtime = 'edge' ban addresses a concrete incompatibility between AI SDK and certain providers on edge runtime — a model would otherwise emit export const runtime = 'edge' from training memory. The whitelist mindset ("ONLY via 'ai' and '@ai-sdk'") mirrors the rest of the prompt: vertical products don't chase "best practices," only "what runs in this environment."

③ Design Aesthetic Rules

Prompt fragment:

v0 avoids using indigo or blue colors unless specified in the user's request.

Analysis: "Avoids unless specified" is a default-avoidance, not a command. The inferred design motive: indigo/blue is the high-frequency default in AI-generated UIs, creating a generic "AI slop" look. This rule lifts the default aesthetic out of the safe-but-boring blue-purple zone.

Prompt fragment (built-in placeholder service):

v0 uses `/placeholder.svg?height={height}&width={width}&query={query}` for placeholder images, where {height} and {width} are the dimensions of the desired image in pixels. The {query} is an optional explanation for the image. v0 uses the query to generate a placeholder image. IMPORTANT: v0 MUST HARD CODE the query in the placeholder URL and always write the full URL without doing any string concatenation.

Analysis: The placeholder is not a random image but a real-time backend service: the query parameter becomes text rendered on the SVG. The hard-code requirement ("MUST HARD CODE... without doing any string concatenation") blocks the model's tendency to write ?query={title} template strings — the preview environment won't execute JS to interpolate them. This is a classic "pre-seal the model's likely mistake" rule. It also reveals vertical product engineering: the product builds infrastructure (the /placeholder.svg endpoint) so the model only needs to compose URLs.

Prompt fragment: v0 MUST generate responsive designs. Analysis: A single hard constraint with no implementation detail — the "how" is left to the model, only the result is locked. "MUST" admits no exceptions. Like the indigo and placeholder rules, it belongs to the "output quality floor" checklist. Modern web development demands responsiveness, but models naturally produce fixed-width layouts, so the rule must be explicit.

④ Interaction Component Rules

Prompt fragment (AddIntegration trigger):

v0 MUST include category="database" in component props if the user asks for a database integration without specifying which one. If the user needs an integration and does not have it, v0 MUST render AddIntegration before other blocks.

Analysis: When the user says "add a database" without naming one, v0 doesn't invent a Supabase config; it renders an integration picker component. This is "don't hard-code when user decision is needed" — database choice is a product decision, not a technical one. "MUST render before other blocks" sequences the workflow: pick integration first, then write code, avoiding throwaway work.

Prompt fragment (AddEnvironmentVariables trigger):

If v0 outputs code that relies on environment variable(s), v0 MUST ask for the environment variables BEFORE outputting the code so it can render correctly.

Analysis: If the user wants an AI chat app but lacks an API key, v0 renders an env-var input component first. Writing code first would show broken (red) output due to missing vars — poor UX. Ask first, then generate — code runs immediately. This mirrors "install dependencies before coding."

Prompt fragment (follow-up actions):

After responding, v0 suggests 3-5 relevant follow-up actions. Actions directly relate to the completed task or user's query. Actions are ranked by ease and relevance. Use the Actions and the Action components to suggest actions concisely.

Analysis: Post-generation, v0 auto-suggests 3–5 next steps ("add dark mode," "generate hero section," "add a form"). This is product interaction design, not a generic prompt trick. Users often don't know what's possible; suggestions deepen engagement, turning "generate one page" into "iteratively refine this page," increasing dwell time.

⑤ Output Specifications

Prompt fragment:

v0 must only create one Code Project per response, and it MUST include all the necessary React Components or edits in that project. v0 MUST maintain the same project ID across Code Project blocks unless working on a completely different project.

Analysis: Output must be complete, working code — no partial snippets, no "you fill in the rest." Copy-paste direct usability is the product's baseline; if code doesn't run, the product fails.

Prompt fragment (code block metadata syntax):

v0 uses the tsx file="file_path" syntax to create a React Component in the Code Project. NOTE: The file MUST be on the same line as the backticks. 1. v0 MUST use kebab-case for file names, ex: login-form.tsx.

Analysis: This is the concrete syntax of "output is the tool." v0 doesn't parse natural language "create a file"; it expects tsx file="login-form.tsx" on the same line as the opening backticks. The backend parses this metadata to write real files into the sandbox. The same-line requirement exists because the parser matches line-by-line; a line break breaks recognition. Kebab-case naming ( login-form.tsx not LoginForm.tsx) enforces consistent file naming so "add to codebase" exports don't create naming chaos. Such "syntax contracts" distinguish vertical agents (code must be parsable by the pipeline) from general agents (code just needs to be correct).

Prompt fragment (fixed refusal message):

REFUSAL_MESSAGE = "I'm sorry. I'm not able to assist with that." When refusing, v0 MUST NOT apologize or provide an explanation for the refusal.

Analysis: Opposite of ChatGPT's verbose safety explanations. v0 refuses with one sentence, no apology, no reasoning. It's a tool — users come to generate UI, not attend a safety lecture. "MUST NOT apologize or explain" is absolute, not "keep it brief." Product positioning dictates this: general assistants need safety communication; vertical tools need minimal friction.

Key Takeaway

For an extremely vertical product, the prompt's core isn't "guide how to do it" but "define clear boundaries — what to do, what not to do." General agents need flexibility; vertical agents need consistency. Every "don't" in v0's prompt raises the output quality floor — UI won't be ugly, won't be chaotic, won't be inconsistent. The vertical agent design philosophy: trade rules for consistency, consistency for user experience.