DESIGN.md for v0

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.

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. This is much more useful than asking for a "modern settings page" because it gives v0 a concrete target to implement.

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.
 
--- DESIGN.md ---
[paste the relevant sections here]

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.

After v0 generates output, compare the result against DESIGN.md. 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.

The file says cards should be 8px radius and dense;
reduce radius and vertical padding to match DESIGN.md.