Using with v0

v0 (Vercel) generates React + Tailwind components from prompts. By default it leans on its training prior — generic shadcn-flavored UI. Pasting DESIGN.md into the context flips that.

The basic flow

1. Open a v0 chat at v0.dev.
2. In your first message, paste the contents of DESIGN.md.
3. Add an instruction line: "Use these tokens for every component you generate."
4. Prompt for the component you want.

The pasted DESIGN.md becomes part of the chat history v0 references for the rest of the conversation.

Tailwind preset is faster

v0 outputs Tailwind. Paste the theme.css Tailwind v4 export instead of (or alongside) DESIGN.md and v0 will use the named token classes directly:

@theme {
  --color-primary: #635bff;
  --color-ink: #0a2540;
  /* ... */
}

Now bg-primary, text-ink, border-line work out of the box in the v0-generated code — and your repo's Tailwind config already understands the same names, so paste-into-repo Just Works.

Limitations

v0 doesn't read files from a connected repo (yet). You have to paste tokens into each chat. Two workarounds:

1. Save a v0 chat that already has DESIGN.md in the history; clone it for new prompts. Saves the paste step.
2. Keep DESIGN.md short — under 200 lines is the sweet spot. If yours is longer, paste only the Colors + Typography + Patterns sections; the agent can usually infer the rest.

After generation

Bring the generated code into your repo via the v0 CLI:

npx v0 add component-name

Then validate it against DESIGN.md:

designdrop validate

If the validator catches a token drift (v0 invented a value not in your scale), edit the component to use the right token before committing.