AI agent workflow

DESIGN.md for v0

v0 is built for turning prompts into real code and interactive UI. High-fidelity generation needs high-fidelity instructions. DESIGN.md gives v0 a reusable written model of your design system: the rules behind the visual style, how buttons behave, which colors are semantic, how typography scales, and what a generated page should never do.

Read the v0 guideBrowse v0 entries

Prompt v0 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. Ask v0 to follow the file as a constraint, not just inspiration: "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 far more useful than "a modern settings page" because it gives v0 a concrete target.

Use DESIGN.md across components, pages, and app flows

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 and where actions belong. For a full app surface, it creates continuity between routes — so a dashboard generated today and a billing screen generated tomorrow look like the same product.

Start here

Move from this landing page into deeper DESIGN.md references, examples, and guides.

Browse v0 entries

Find DESIGN.md files tagged for v0 in the catalog.

Open

Full v0 guide

Long-form guide for using DESIGN.md with v0.

Open

Browse DESIGN.md examples

Find example files to adapt for v0 projects.

Open

Frequently asked questions

What is DESIGN.md for v0?

DESIGN.md is a reusable written model of your design system that you give v0 before generating UI. It defines color roles, typography, spacing, component variants, and anti-patterns — so generated components and pages match your product design system rather than v0 default styles.

How do I use DESIGN.md with v0 prompts?

Paste the relevant DESIGN.md sections into your v0 prompt and ask it to follow the file as a constraint: "Generate a billing settings page using this DESIGN.md. Use the defined tokens, type scale, form spacing, button variants, and empty-state rules." This gives v0 a concrete target instead of a vague style direction.

What should a v0-ready DESIGN.md include?

Color roles, typography rules, spacing values, component variants for the most common elements, page layout patterns for the surfaces you generate most (dashboard, settings, forms), and anti-patterns. After v0 generates output, compare the result against DESIGN.md and update the file when a rule needs more specificity.

Search the catalog

design md for v0v0 vercel design system promptv0 ui design rules ai