SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsdesign-md

design-md

Design & creation

View repository

Updated 10-16 10:02

About this skill

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

  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