awesome-design-md

Awesome DESIGN.md

A 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.

What is DESIGN.md?

DESIGN.md 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.

How to Use

1. User says "make it look like [brand]" → Find the matching reference file below
2. Read the reference file from references/{site-name}.md
3. Copy the DESIGN.md content into the user's project root as DESIGN.md
4. Use the design tokens (colors, typography, spacing, components) when generating UI code

Available Design Systems

AI & Machine Learning

Site	Reference	Style
Claude	references/claude.md	Warm terracotta accent, clean editorial layout
Cohere	references/cohere.md	Vibrant gradients, data-rich dashboard aesthetic
ElevenLabs	references/elevenlabs.md	Dark cinematic UI, audio-waveform aesthetics
Minimax	references/minimax.md	Bold dark interface with neon accents
Mistral AI	references/mistral.ai.md	French-engineered minimalism, purple-toned
Ollama	references/ollama.md	Terminal-first, monochrome simplicity
OpenCode AI	references/opencode.ai.md	Developer-centric dark theme
Replicate	references/replicate.md	Clean white canvas, code-forward
RunwayML	references/runwayml.md	Cinematic dark UI, media-rich layout
Together AI	references/together.ai.md	Technical, blueprint-style design
VoltAgent	references/voltagent.md	Void-black canvas, emerald accent, terminal-native
xAI	references/x.ai.md	Stark monochrome, futuristic minimalism

Developer Tools & Platforms

Site	Reference	Style
Cursor	references/cursor.md	Sleek dark interface, gradient accents
Expo	references/expo.md	Dark theme, tight letter-spacing, code-centric
Linear	references/linear.app.md	Ultra-minimal, precise, purple accent
Lovable	references/lovable.md	Playful gradients, friendly dev aesthetic
Mintlify	references/mintlify.md	Clean, green-accented, reading-optimized
PostHog	references/posthog.md	Playful hedgehog branding, developer-friendly dark UI
Raycast	references/raycast.md	Sleek dark chrome, vibrant gradient accents
Resend	references/resend.md	Minimal dark theme, monospace accents
Sentry	references/sentry.md	Dark dashboard, data-dense, pink-purple accent
Supabase	references/supabase.md	Dark emerald theme, code-first
Superhuman	references/superhuman.md	Premium dark UI, keyboard-first, purple glow
Vercel	references/vercel.md	Black and white precision, Geist font
Warp	references/warp.md	Dark IDE-like interface, block-based command UI
Zapier	references/zapier.md	Warm orange, friendly illustration-driven

Infrastructure & Cloud

Site	Reference	Style
ClickHouse	references/clickhouse.md	Yellow-accented, technical documentation style
Composio	references/composio.md	Modern dark with colorful integration icons
HashiCorp	references/hashicorp.md	Enterprise-clean, black and white
MongoDB	references/mongodb.md	Green leaf branding, developer documentation focus
Sanity	references/sanity.md	Red accent, content-first editorial layout
Stripe	references/stripe.md	Signature purple gradients, weight-300 elegance

Design & Productivity

Site	Reference	Style
Airtable	references/airtable.md	Colorful, friendly, structured data aesthetic
Cal.com	references/cal.md	Clean neutral UI, developer-oriented simplicity
Clay	references/clay.md	Organic shapes, soft gradients, art-directed layout
Figma	references/figma.md	Vibrant multi-color, playful yet professional
Framer	references/framer.md	Bold black and blue, motion-first, design-forward
Intercom	references/intercom.md	Friendly blue palette, conversational UI patterns
Miro	references/miro.md	Bright yellow accent, infinite canvas aesthetic
Notion	references/notion.md	Warm minimalism, serif headings, soft surfaces
Pinterest	references/pinterest.md	Red accent, masonry grid, image-first
Webflow	references/webflow.md	Blue-accented, polished marketing site aesthetic

Fintech & Crypto

Site	Reference	Style
Coinbase	references/coinbase.md	Clean blue identity, trust-focused, institutional feel
Kraken	references/kraken.md	Purple-accented dark UI, data-dense dashboards
Revolut	references/revolut.md	Sleek dark interface, gradient cards, fintech precision
Wise	references/wise.md	Bright green accent, friendly and clear

Enterprise & Consumer

Site	Reference	Style
Airbnb	references/airbnb.md	Warm coral accent, photography-driven, rounded UI
Apple	references/apple.md	Premium white space, SF Pro, cinematic imagery
BMW	references/bmw.md	Dark premium surfaces, precise German engineering aesthetic
IBM	references/ibm.md	Carbon design system, structured blue palette
NVIDIA	references/nvidia.md	Green-black energy, technical power aesthetic
SpaceX	references/spacex.md	Stark black and white, full-bleed imagery, futuristic
Spotify	references/spotify.md	Vibrant green on dark, bold type, album-art-driven
Uber	references/uber.md	Bold black and white, tight type, urban energy

What Each DESIGN.md Contains

Every file follows the Google Stitch DESIGN.md format with 9 sections:

1. Visual Theme & Atmosphere — Mood, density, design philosophy
2. Color Palette & Roles — Semantic name + hex + functional role
3. Typography Rules — Font families, full hierarchy table
4. Component Stylings — Buttons, cards, inputs, navigation with states
5. Layout Principles — Spacing scale, grid, whitespace philosophy
6. Depth & Elevation — Shadow system, surface hierarchy
7. Do's and Don'ts — Design guardrails and anti-patterns
8. Responsive Behavior — Breakpoints, touch targets, collapsing strategy
9. Agent Prompt Guide — Quick color reference, ready-to-use prompts

Workflow

1. User specifies a brand → Direct match

User: "Build me a landing page that looks like Stripe"
→ Read references/stripe.md
→ Copy content to user's project as DESIGN.md
→ Use the design tokens to generate UI code

2. User wants to browse → Filter and suggest

User: "Show me dark-themed design systems"
→ Suggest: Vercel, Cursor, ElevenLabs, Resend, Warp, Supabase, etc.
→ Let user pick, then load that reference

3. User doesn't specify a style → Smart recommendation

When the user asks to build a UI without mentioning any brand or style preference (e.g., "Build me a landing page", "Write a dashboard", "Build a SaaS website"), proactively recommend 3–5 design systems based on the project type:

Project Type	Recommended Styles	Why
SaaS website / Landing page	Stripe, Vercel, Linear	Classic high-conversion SaaS style, clean and professional
Developer tools / Technical products	Vercel, Cursor, Raycast, Supabase	Dark theme, code-friendly, geeky vibe
AI products / Chat UI	Claude, Mistral AI, ElevenLabs	AI-native design language, warm or futuristic feel
Fintech / Financial products	Stripe, Revolut, Coinbase	Sense of trust, precision, data-dense
Efficiency tools / Productivity products	Notion, Linear, Superhuman	Minimalist, high information density, keyboard-first
E-commerce / Consumer brands	Airbnb, Apple, Spotify	Visual-driven, large images, emotional design
Internal backend / Dashboard	Sentry, PostHog, ClickHouse	Data-intensive, dark dashboard
Creative / Design tools	Figma, Framer, Clay	Bold color schemes, full of energy
Enterprise-grade / B2B	IBM, HashiCorp, MongoDB	Steady, structured, mature Design System

Recommendation workflow:

User: "帮我做一个 AI 聊天产品的界面"
→ Agent: "推荐以下设计风格供你选择：
   1. 🟠 Claude — 温暖柔和的赤陶色调，编辑式布局，适合对话产品
   2. 🟣 Mistral AI — 法式工程极简，紫色调，优雅专业
   3. 🎬 ElevenLabs — 暗色电影感，波形美学，适合音频/多模态
   4. ⬛ Vercel — 黑白精准，极致简约
   5. 🟢 VoltAgent — 终端风格，翠绿高亮，适合技术型 AI
   选一个编号，我直接用对应的设计系统帮你生成。"
→ User picks one → Load reference → Generate UI

If the user says "whatever" or "you decide":

• Default to Vercel (safest all-rounder: clean, modern, professional)
• Mention the choice and offer to switch: "I'll start with the Vercel style (minimalist black and white); if you don't like it, we can switch anytime."