DESIGN.md

Curated collection of DESIGN.md files that capture real design systems from popular websites. Drop one into your project and let coding agents build matching UI.

design-md

What is DESIGN.md?

A plain-text design system document that AI coding agents read to generate consistent UI. No Figma exports, no JSON schemas — just a markdown file with colors, typography, components, and layout rules. Follows the Google Stitch DESIGN.md format.

Every file includes:

Visual Theme & Atmosphere — mood, density, design philosophy
Color Palette & Roles — semantic names + hex + functional roles
Typography Rules — font families, full hierarchy
Component Stylings — buttons, cards, inputs, navigation with states
Layout Principles — spacing scale, grid, whitespace philosophy
Depth & Elevation — shadow system, surface hierarchy
Do's and Don'ts — design guardrails
Responsive Behavior — breakpoints, touch targets
Agent Prompt Guide — ready-to-use prompts

How It Works

Pick a design system from the catalog below
Download the DESIGN.md file into your project root
Tell your AI agent: "Use this DESIGN.md to build the UI"
The agent reads it and generates matching styles, components, and layouts

Design System Catalog

🏢 Developer Tools & AI

Cursor — AI code editor. Dark, minimal, developer-focused
Claude — AI assistant. Clean, warm, conversational
Cohere — Enterprise AI. Bold, modern, data-driven
Mistral AI — Open AI models. Technical, clean, European
MiniMax — AI platform. Futuristic, bold gradients
x.ai — Grok/AI. Minimal, dark, elegant
Together AI — AI infrastructure. Technical, clean
OpenCode — Open-source AI coding. Dev-first, terminal-inspired
Lovable — AI app builder. Friendly, colorful, approachable
Replicate — AI model hosting. Dark, technical, model-focused
Ollama — Local LLMs. Minimal, terminal-aesthetic
ElevenLabs — AI voice. Polished, modern, warm
Runway — AI creative tools. Bold, cinematic, dark
Expo — React Native framework. Clean, developer-friendly
Warp — AI terminal. Dark, technical, command-focused
VoltaAgent — Agent framework. Developer-first, dark

🛠️ Infrastructure & Platforms

Vercel — Frontend cloud. Minimal, monochrome, fast
Supabase — Open-source Firebase. Green accent, clean
HashiCorp — Infrastructure tools. Purple, enterprise, structured
MongoDB — Database platform. Green, data-focused
ClickHouse — Analytics DB. Bold, technical, performance-focused
Sentry — Error tracking. Red accent, developer-focused
PostHog — Product analytics. Open-source, playful
Composio — Agent integrations. Modern, developer-friendly
Raycast — Productivity launcher. Dark, fast, macOS-native feel

🎨 Design & Creative

Figma — Design tool. Colorful, creative, collaborative
Framer — Web design tool. Bold, modern, animation-heavy
Sanity — Headless CMS. Playful, colorful, content-focused
Webflow — No-code builder. Professional, polished
Mintlify — Documentation platform. Clean, mint-green, dev-focused
Notion — Workspace. Minimal, monochrome, content-first
Miro — Whiteboard. Colorful, collaborative, playful
Airtable — Database-spreadsheet. Clean, structured, approachable

💰 Finance & Commerce

Stripe — Payments. Gradient-rich, polished, industry standard
Coinbase — Crypto exchange. Blue, trustworthy, clean
Kraken — Crypto exchange. Dark, technical, trading-focused
Revolut — Digital bank. Bold, modern, vibrant
Wise — Money transfers. Clean, green, trustworthy

🚀 Productivity & Communication

Linear — Issue tracking. Dark, fast, minimal — the gold standard for dev tools
Cal.com — Scheduling. Clean, friendly, accessible
Intercom — Customer messaging. Blue, conversational, friendly
Superhuman — Email client. Premium, fast, keyboard-first
Zapier — Automation. Orange, approachable, workflow-focused
Clay — CRM. Clean, modern, relationship-focused

🏭 Enterprise & Industrial

Apple — Consumer tech. Ultra-minimal, premium, whitespace-heavy
IBM — Enterprise tech. Structured, accessible, Carbon Design System
NVIDIA — GPU/AI. Green-black, powerful, technical
SpaceX — Aerospace. Dark, cinematic, mission-focused
BMW — Automotive. Premium, dark, luxurious

🌐 Consumer & Lifestyle

Spotify — Music streaming. Dark, vibrant, media-rich
Pinterest — Visual discovery. Masonry grid, red accent, image-first
Airbnb — Travel/hospitality. Warm, coral accent, card-based
Uber — Mobility. Bold black and white, tight type, urban energy
Resend — Email API. Clean, developer-focused, minimal

Skill Selection Guide

Task	What to Do
Apply a design system to a project	Download the `DESIGN.md` and `preview.html` from the site's folder, place in project root
Build UI matching a brand's style	Tell the coding agent: "Use this DESIGN.md as the design system"
Compare design systems	Read multiple `DESIGN.md` files and compare color palettes, typography, component patterns
Request a new design system	Open an issue at the awesome-design-md repo

Quickstart

When the user wants to apply a design system:

Ask which brand/style they want to match (or suggest based on context — e.g., "Stripe" for polished SaaS, "Linear" for dev tools, "Apple" for minimal premium)
Download the DESIGN.md from https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/{site}/
Place it in the project root
Pass it to the coding agent: "Build the UI following this DESIGN.md"

@1892/design-md