DESIGN.md: stop your AI from building generic UI

Why AI UI looks generic: "clean" and "minimal" are vibes, not specs, so the model fills in the average of the web: purple gradients, the same cards, fake stats. A DESIGN.md gives it exact values and rules to follow.

How it works

1. 1Pick a style. Open styles.refero.design and pick a style close to your product.
2. 2Copy it. Open the DESIGN.md tab and copy or download it (or take the Tailwind v4 theme or CSS variables).
3. 3Save it. Save it as DESIGN.md in your project root.
4. 4Prompt. "Build (or restyle) <X>. Use DESIGN.md in this folder." Or reference it from CLAUDE.md / AGENTS.md so every run follows it.
5. 5Review and iterate. Use the design language, not the identity: don't copy another brand's logo or trademarks.

Example

Build a landing page for Stride, a habit-tracking app

Without DESIGN.md:
  purple gradients, generic cards
With Linear's DESIGN.md:
  near-black surfaces, one acid-lime
  accent, hairline borders

My test from the reel: same model, same prompt, run once without and once with Linear's DESIGN.md. A summary of what came out, not the full output.

Good to know

• Works with Claude Code, Codex, Cursor, v0 and Lovable, or any tool that can read a file in your project.
• As of October 1, 2026, viewing and copying styles needed no login or payment. Check the site for current terms.
• An independent guide by @copilot_shogo. Not affiliated with Refero or with the brands whose styles are listed.