DESIGN.md is a pure Markdown design system specification file designed specifically for AI coding agents.awesome-design-md The repository contains pre-made DESIGN.md files for 58 well-known brands. Once placed in the project root directory, the AI agent can directly reference them when building UI components.
Workflow
Step 1 — Ask about the style direction
First ask the user which feel they want, offering the following options:
Which design style do you want? (A) Minimal / technical — dark background, monospace fonts, high information density (such as Linear, Vercel, Warp) (B) Warm / editorial — warm tones, reading-first, comfortable whitespace (such as Claude, Notion, Superhuman) (C) Professional / financial — trustworthy, crisp, serious (such as Stripe, Coinbase, IBM) (D) Luxurious / high-end — dark palette, strong contrast, refined details (such as Ferrari, Apple, Tesla) (E) Vibrant / product — highly saturated colors, lively, strong brand colors (such as Figma, Miro, Spotify) (F) Designer feel — refined typography, dynamic feel, creativity-first (such as Framer, Clay, Airbnb) (G) Developer tool feel — function-oriented, data-dense, dark IDE style (such as Supabase, Sentry, PostHog) (H) Let me browse all brands myself
After the user chooses:
- Choose A–G: Read
references/brands.md, filter out and list all brands corresponding to that style tag for the user to choose from - Choose H: Read
references/brands.md, list all 58 brands by their original categories
Step 2 — Confirm the save directory
Ask where to save the file; the default is the current project root directory (.). When the user says "right here" or does not specify, use .。
Step 3 — Download DESIGN.md
Use the download script:
bash /Users/wenjia/.claude/skills/awesome-design-setup/scripts/fetch_design.sh <path-key> <output-dir>
<path-key> from references/brands.md 's "path key" column.
Or use curl directly:
curl -fsSL -o <output-dir>/DESIGN.md \
https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/<path-key>/DESIGN.md
Step 4 — Confirm completion and explain how to use it
After a successful download, confirm the file location and tell the user:
"DESIGN.md is ready. When building UI components, tell me: 'Build [component name] with reference to DESIGN.md,' and I will automatically apply that design system."
Notes
- Using one DESIGN.md per project is the standard usage.
- When you need to compare two styles, download to a temporary file (such as
DESIGN.linear.md、DESIGN.stripe.md) for the user to compare before deciding. - All files follow the MIT license and can be committed to the repository.
- This repository does not automatically sync when brands update their design systems; treat it as a stable snapshot.