How to give your AI coding agent a real design system (Cursor, Claude Code, v0, Lovable, Bolt)

The fix for generic AI-built UI is to give the agent a concrete design system to build against — not a longer prompt. A model with no specific target falls back to the average of everything it has seen (too much purple, default shadows, rounded everything). Give it exact tokens and rules, and that disappears.

Here is the workflow.

1. Pick a design you want to build in

Browse the duply library and choose a product whose look fits yours — say Linear for restrained dev-tool minimalism, Stripe for polished fintech, or Vercel for clean monochrome.

2. Copy its DESIGN.md

Each entry is documented as a DESIGN.md — the tokens (colors, typography, spacing, radius) plus the written rules (layout, elevation, do's and don'ts). Copy the file, or grab the clean markdown straight from the …/design-md/raw endpoint.

3. Hand it to your agent

Paste the DESIGN.md into your tool and be explicit:

"Use the design system in this DESIGN.md. Apply the tokens (don't invent colors or sizes), follow the spacing scale and the do's and don'ts. Build the [page/component] in this visual language."

Tool notes:

• Cursor / Claude Code — drop the DESIGN.md into the repo (e.g. at the project root) so it's in context for every prompt, then reference it.
• v0 — paste it into the prompt; v0 also ingests design tokens directly, so the token sets help it match without manual overrides.
• Lovable / Bolt — paste the DESIGN.md at the start of the build and tell it to treat the tokens as the source of truth.

4. Keep the agent honest

As you iterate, hold it to the system: "use the spacing scale," "that's not in the palette — use color.action." Because the rules are written down, you can point at them instead of re-explaining your taste every prompt.

Why this works

Screenshots tell the agent what something looks like; it still guesses every value. Raw tokens are precise but have no usage rules. A DESIGN.md gives it both — exact values and the rules for applying them — which is what produces consistent, on-brand output instead of correct-but-random UI.

FAQ

Does this work with any AI tool? Yes — it's plain markdown, so it works in Cursor, Claude Code, v0, Lovable, Bolt, or a general ChatGPT/Claude chat.

Where do I put the file in Cursor or Claude Code? Keep a DESIGN.md in the repo (root or a /docs folder) so it stays in the agent's context, and reference it in prompts.

Where do I get a DESIGN.md? Browse the duply library, pick a design, and copy it.