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