AI Agents
DESIGN.md for v0
How to use DESIGN.md with Vercel v0 to generate UI, prototypes, and full-stack app surfaces that match your real product design system.
Why v0 and DESIGN.md fit together
v0 is built for turning prompts into real code, UI, prototypes, and app surfaces. It is especially useful for product managers, designers, engineers, and marketers who want to move from idea to interactive output quickly. But high-fidelity generation still needs high-fidelity instructions. A screenshot helps, a Figma file helps, and a clear prompt helps, but DESIGN.md gives v0 a reusable written model of the design system. It can describe the rules behind the screenshot: why a card is compact, how buttons behave, which colors are semantic, how typography scales, and what a generated page should never do.
Prompting with a design file
A good v0 workflow starts by pasting the relevant DESIGN.md sections into the prompt or linking to a public file when available. Ask v0 to follow the file as a constraint, not just as inspiration. For example: "Generate a settings page using this DESIGN.md. Keep the interface quiet and operational. Use the defined tokens, type scale, form spacing, button variants, and empty-state rules. Avoid hero copy, decorative background effects, and oversized cards." This is much more useful than asking for a "modern settings page" because it gives v0 a concrete target to implement.
Use it for design systems, not only pages
v0 can produce single components, full pages, and richer app flows. DESIGN.md helps across all three. For a component, it tells v0 how variants, disabled states, focus states, and density should work. For a page, it tells v0 how sections should stack, where actions belong, and what the hierarchy should be. For a full app surface, it creates continuity between routes. That is important when you generate a dashboard today, a billing screen tomorrow, and an onboarding flow later. Without a shared visual brief, each generation can look like a different product.
Review loop
After v0 generates output, compare the result against DESIGN.md. If the UI violates a rule, give v0 a targeted correction: "The file says cards should be 8px radius and dense; reduce radius and vertical padding." If the generated code reveals a missing rule, update DESIGN.md. This turns the design system into a living prompt asset. The point is not to make v0 less creative. The point is to aim that creativity at your product language so the generated UI can move closer to production instead of stopping at a nice-looking demo.
Use DESIGN.md with a real product reference
Browse curated DESIGN.md examples from product teams, design systems, developer tools, SaaS dashboards, and AI-native apps. Use them as references before your agent builds the next screen.
Related guides
DESIGN.md for Kiro
How to use DESIGN.md with Kiro, the AWS agentic IDE built around specs, steering, hooks, and production-minded implementation.
DESIGN.md for Windsurf
How to use DESIGN.md with Windsurf and Cascade so AI edits follow your product design system instead of default editor taste.
DESIGN.md for Bolt
How DESIGN.md helps bolt.new generate full-stack browser apps with stronger UI direction, cleaner components, and less generic styling.