1---
2name: awesome-design-md
3description: "Curated collection of 54 DESIGN.md files extracted from real developer-focused websites (Vercel, Stripe, Linear, Notion, Figma, etc.). Use when a user wants to build UI that matches a specific brand's design system, needs a DESIGN.md template, asks for design tokens/color palettes/typography of known products, or says 'make it look like [brand]'. Load the matching reference file and use it as the design spec."
4description_zh: "54 个知名网站设计系统模板，一键复用品牌级 UI 风格"
5description_en: "54 ready-to-use DESIGN.md files from top websites for instant brand-quality UI"
6homepage: https://github.com/VoltAgent/awesome-design-md
7allowed-tools: Read,Write,Bash
8---
9
10# Awesome DESIGN.md
11
12A curated collection of **54 DESIGN.md files** extracted from real, developer-focused websites. Each file is a complete design system specification that AI agents can read to generate pixel-perfect, brand-consistent UI.
13
14## What is DESIGN.md?
15
16[DESIGN.md](https://stitch.withgoogle.com/docs/design-md/overview/) is a concept introduced by Google Stitch — a plain-text design system document that AI agents read to generate consistent UI. It's just a markdown file. Drop it into your project root and any AI coding agent instantly understands how your UI should look.
17
18## How to Use
19
201. **User says "make it look like [brand]"** → Find the matching reference file below
212. **Read the reference file** from `references/{site-name}.md`
223. **Copy the DESIGN.md content** into the user's project root as `DESIGN.md`
234. **Use the design tokens** (colors, typography, spacing, components) when generating UI code
24
25## Available Design Systems
26
27### AI & Machine Learning
28
29| Site | Reference | Style |
30|------|-----------|-------|
31| Claude | `references/claude.md` | Warm terracotta accent, clean editorial layout |
32| Cohere | `references/cohere.md` | Vibrant gradients, data-rich dashboard aesthetic |
33| ElevenLabs | `references/elevenlabs.md` | Dark cinematic UI, audio-waveform aesthetics |
34| Minimax | `references/minimax.md` | Bold dark interface with neon accents |
35| Mistral AI | `references/mistral.ai.md` | French-engineered minimalism, purple-toned |
36| Ollama | `references/ollama.md` | Terminal-first, monochrome simplicity |
37| OpenCode AI | `references/opencode.ai.md` | Developer-centric dark theme |
38| Replicate | `references/replicate.md` | Clean white canvas, code-forward |
39| RunwayML | `references/runwayml.md` | Cinematic dark UI, media-rich layout |
40| Together AI | `references/together.ai.md` | Technical, blueprint-style design |
41| VoltAgent | `references/voltagent.md` | Void-black canvas, emerald accent, terminal-native |
42| xAI | `references/x.ai.md` | Stark monochrome, futuristic minimalism |
43
44### Developer Tools & Platforms
45
46| Site | Reference | Style |
47|------|-----------|-------|
48| Cursor | `references/cursor.md` | Sleek dark interface, gradient accents |
49| Expo | `references/expo.md` | Dark theme, tight letter-spacing, code-centric |
50| Linear | `references/linear.app.md` | Ultra-minimal, precise, purple accent |
51| Lovable | `references/lovable.md` | Playful gradients, friendly dev aesthetic |
52| Mintlify | `references/mintlify.md` | Clean, green-accented, reading-optimized |
53| PostHog | `references/posthog.md` | Playful hedgehog branding, developer-friendly dark UI |
54| Raycast | `references/raycast.md` | Sleek dark chrome, vibrant gradient accents |
55| Resend | `references/resend.md` | Minimal dark theme, monospace accents |
56| Sentry | `references/sentry.md` | Dark dashboard, data-dense, pink-purple accent |
57| Supabase | `references/supabase.md` | Dark emerald theme, code-first |
58| Superhuman | `references/superhuman.md` | Premium dark UI, keyboard-first, purple glow |
59| Vercel | `references/vercel.md` | Black and white precision, Geist font |
60| Warp | `references/warp.md` | Dark IDE-like interface, block-based command UI |
61| Zapier | `references/zapier.md` | Warm orange, friendly illustration-driven |
62
63### Infrastructure & Cloud
64
65| Site | Reference | Style |
66|------|-----------|-------|
67| ClickHouse | `references/clickhouse.md` | Yellow-accented, technical documentation style |
68| Composio | `references/composio.md` | Modern dark with colorful integration icons |
69| HashiCorp | `references/hashicorp.md` | Enterprise-clean, black and white |
70| MongoDB | `references/mongodb.md` | Green leaf branding, developer documentation focus |
71| Sanity | `references/sanity.md` | Red accent, content-first editorial layout |
72| Stripe | `references/stripe.md` | Signature purple gradients, weight-300 elegance |
73
74### Design & Productivity
75
76| Site | Reference | Style |
77|------|-----------|-------|
78| Airtable | `references/airtable.md` | Colorful, friendly, structured data aesthetic |
79| Cal.com | `references/cal.md` | Clean neutral UI, developer-oriented simplicity |
80| Clay | `references/clay.md` | Organic shapes, soft gradients, art-directed layout |
81| Figma | `references/figma.md` | Vibrant multi-color, playful yet professional |
82| Framer | `references/framer.md` | Bold black and blue, motion-first, design-forward |
83| Intercom | `references/intercom.md` | Friendly blue palette, conversational UI patterns |
84| Miro | `references/miro.md` | Bright yellow accent, infinite canvas aesthetic |
85| Notion | `references/notion.md` | Warm minimalism, serif headings, soft surfaces |
86| Pinterest | `references/pinterest.md` | Red accent, masonry grid, image-first |
87| Webflow | `references/webflow.md` | Blue-accented, polished marketing site aesthetic |
88
89### Fintech & Crypto
90
91| Site | Reference | Style |
92|------|-----------|-------|
93| Coinbase | `references/coinbase.md` | Clean blue identity, trust-focused, institutional feel |
94| Kraken | `references/kraken.md` | Purple-accented dark UI, data-dense dashboards |
95| Revolut | `references/revolut.md` | Sleek dark interface, gradient cards, fintech precision |
96| Wise | `references/wise.md` | Bright green accent, friendly and clear |
97
98### Enterprise & Consumer
99
100| Site | Reference | Style |
101|------|-----------|-------|
102| Airbnb | `references/airbnb.md` | Warm coral accent, photography-driven, rounded UI |
103| Apple | `references/apple.md` | Premium white space, SF Pro, cinematic imagery |
104| BMW | `references/bmw.md` | Dark premium surfaces, precise German engineering aesthetic |
105| IBM | `references/ibm.md` | Carbon design system, structured blue palette |
106| NVIDIA | `references/nvidia.md` | Green-black energy, technical power aesthetic |
107| SpaceX | `references/spacex.md` | Stark black and white, full-bleed imagery, futuristic |
108| Spotify | `references/spotify.md` | Vibrant green on dark, bold type, album-art-driven |
109| Uber | `references/uber.md` | Bold black and white, tight type, urban energy |
110
111## What Each DESIGN.md Contains
112
113Every file follows the [Google Stitch DESIGN.md format](https://stitch.withgoogle.com/docs/design-md/format/) with 9 sections:
114
1151. **Visual Theme & Atmosphere** — Mood, density, design philosophy
1162. **Color Palette & Roles** — Semantic name + hex + functional role
1173. **Typography Rules** — Font families, full hierarchy table
1184. **Component Stylings** — Buttons, cards, inputs, navigation with states
1195. **Layout Principles** — Spacing scale, grid, whitespace philosophy
1206. **Depth & Elevation** — Shadow system, surface hierarchy
1217. **Do's and Don'ts** — Design guardrails and anti-patterns
1228. **Responsive Behavior** — Breakpoints, touch targets, collapsing strategy
1239. **Agent Prompt Guide** — Quick color reference, ready-to-use prompts
124
125## Workflow
126
127### 1. User specifies a brand → Direct match
128
129```
130User: "Build me a landing page that looks like Stripe"
131→ Read references/stripe.md
132→ Copy content to user's project as DESIGN.md
133→ Use the design tokens to generate UI code
134```
135
136### 2. User wants to browse → Filter and suggest
137
138```
139User: "Show me dark-themed design systems"
140→ Suggest: Vercel, Cursor, ElevenLabs, Resend, Warp, Supabase, etc.
141→ Let user pick, then load that reference
142```
143
144### 3. User doesn't specify a style → Smart recommendation
145
146When the user asks to build a UI **without mentioning any brand or style preference** (e.g., "帮我做一个落地页", "写一个 dashboard", "做一个 SaaS 官网"), **proactively recommend** 3–5 design systems based on the project type:
147
148| Project Type | Recommended Styles | Why |
149|---|---|---|
150| **SaaS 官网 / Landing page** | Stripe, Vercel, Linear | 经典高转化 SaaS 风格，简洁专业 |
151| **开发者工具 / 技术产品** | Vercel, Cursor, Raycast, Supabase | 暗色系、代码友好、极客气质 |
152| **AI 产品 / Chat UI** | Claude, Mistral AI, ElevenLabs | AI 原生设计语言，温暖或未来感 |
153| **Fintech / 金融产品** | Stripe, Revolut, Coinbase | 信任感、精密感、数据密集 |
154| **效率工具 / 生产力产品** | Notion, Linear, Superhuman | 极简、信息密度高、键盘优先 |
155| **电商 / 消费品牌** | Airbnb, Apple, Spotify | 视觉驱动、大图、情感化设计 |
156| **内部后台 / Dashboard** | Sentry, PostHog, ClickHouse | 数据密集型、暗色仪表盘 |
157| **创意 / 设计工具** | Figma, Framer, Clay | 大胆配色、动感十足 |
158| **企业级 / B2B** | IBM, HashiCorp, MongoDB | 稳重、结构化、Design System 成熟 |
159
160**Recommendation workflow:**
161
162```
163User: "帮我做一个 AI 聊天产品的界面"
164→ Agent: "推荐以下设计风格供你选择：
165 1. 🟠 Claude — 温暖柔和的赤陶色调，编辑式布局，适合对话产品
166 2. 🟣 Mistral AI — 法式工程极简，紫色调，优雅专业
167 3. 🎬 ElevenLabs — 暗色电影感，波形美学，适合音频/多模态
168 4. ⬛ Vercel — 黑白精准，极致简约
169 5. 🟢 VoltAgent — 终端风格，翠绿高亮，适合技术型 AI
170 选一个编号，我直接用对应的设计系统帮你生成。"
171→ User picks one → Load reference → Generate UI
172```
173
174**If the user says "随便" or "你决定":**
175- Default to **Vercel** (safest all-rounder: clean, modern, professional)
176- Mention the choice and offer to switch: "我先用 Vercel 风格（简约黑白），不喜欢随时换。"
bighardperson