@1892/design Md

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.

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

1. Pick a design system from the catalog below
2. Download the DESIGN.md file into your project root
3. Tell your AI agent: "Use this DESIGN.md to build the UI"
4. 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

Quickstart

When the user wants to apply a design system:

1. 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)
2. Download the DESIGN.md from https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/{site}/
3. Place it in the project root
4. Pass it to the coding agent: "Build the UI following this DESIGN.md"

Resources

• Google Stitch DESIGN.md Overview
• DESIGN.md Format Spec
• awesome-design-md GitHub
• Request a DESIGN.md