starchild-ai-agent/@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

| 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:

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