DESIGN.md: put your design taste in the repo so AI-built UIs stop looking generic
TL;DR
DESIGN.md is a Markdown file describing a design system (colors, typography, spacing, elevation, responsive rules) for coding agents to read while building UI. VoltAgent/awesome-design-md and getdesign.md provide hundreds of references. Use them as starting points, not as a way to copy someone else's brand.
What a DESIGN.md usually contains
| Section | Example content |
|---|---|
| Colors | Primary, surface, text, border + light/dark tokens |
| Typography | Fonts, scale, line-height, weights for headings/body |
| Spacing & layout | 4/8px scale, max-width, grid |
| Components | Button, card, input — hover/focus/disabled states |
| Motion & elevation | Shadows, radius, animation durations |
Using it with Claude Code
- Pick a reference close to your target style on getdesign.md.
- Copy it into your repo as
DESIGN.mdand adapt colors, fonts and names to your own brand. - Add to CLAUDE.md: “For any UI work, follow DESIGN.md”.
- Ask the agent to self-review the UI against DESIGN.md before reporting done.
References: getdesign.md · VoltAgent/awesome-design-md