aradotso/skills/awesome-design-md

---
name: awesome-design-md
description: Use curated DESIGN.md files from popular websites to give AI coding agents instant design system context for building pixel-perfect UI.
triggers:
  - use a design system from a real website
  - add a DESIGN.md to my project
  - make my UI look like Stripe/Vercel/Linear
  - give my agent design context
  - apply a design system to my project
  - build UI matching a popular website style
  - use awesome-design-md design tokens
  - drop in a DESIGN.md file for my agent
---

# Awesome Design MD

> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.

A curated collection of `DESIGN.md` files reverse-engineered from 55+ popular developer-focused websites. Drop one into your project root and any AI coding agent instantly understands your target visual style — colors, typography, components, spacing, and more — without Figma exports or JSON schemas.

---

## What DESIGN.md Does

`DESIGN.md` is a plain-text design system document (introduced by [Google Stitch](https://stitch.withgoogle.com/docs/design-md/overview/)) that AI agents read to generate consistent UI. It is the design equivalent of `AGENTS.md`:

| File | Who reads it | What it defines |
|------|-------------|-----------------|
| `AGENTS.md` | Coding agents | How to build the project |
| `DESIGN.md` | Design agents | How the project should look and feel |

Markdown is the format LLMs read best — no parsing, no tooling, no configuration required.

---

## Installation

### Option 1: Clone the full repo

```bash
git clone https://github.com/VoltAgent/awesome-design-md.git

Option 2: Download a single DESIGN.md (curl)

# Example: Vercel design system
curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/vercel/DESIGN.md

# Example: Stripe design system
curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/stripe/DESIGN.md

# Example: Linear design system
curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/linear.app/DESIGN.md

Option 3: Copy via GitHub UI

1. Browse to the site folder: https://github.com/VoltAgent/awesome-design-md/tree/main/design-md/<site>/
2. Open DESIGN.md
3. Click Raw, then save as DESIGN.md in your project root

---

Repository Structure

awesome-design-md/
└── design-md/
    └── <site-name>/
        ├── DESIGN.md          # The design system (what agents read)
        ├── preview.html       # Visual catalog — light surfaces
        └── preview-dark.html  # Visual catalog — dark surfaces

---

Available Design Systems (55 total)

AI & Machine Learning

| Site | Style | |------|-------| | claude | Warm terracotta accent, clean editorial | | elevenlabs | Dark cinematic, audio-waveform aesthetic | | mistral.ai | French minimalism, purple-toned | | ollama | Terminal-first, monochrome simplicity | | replicate | Clean white canvas, code-forward | | runwayml | Cinematic dark, media-rich layout | | voltagent | Void-black canvas, emerald accent | | x.ai | Stark monochrome, futuristic minimalism |

Developer Tools

| Site | Style | |------|-------| | cursor | Sleek dark, gradient accents | | linear.app | Ultra-minimal, precise, purple accent | | mintlify | Clean, green-accented, reading-optimized | | posthog | Playful dark UI, developer-friendly | | raycast | Sleek dark chrome, vibrant gradients | | resend | Minimal dark, monospace accents | | supabase | Dark emerald theme, code-first | | vercel | Black and white precision, Geist font |

Enterprise & Consumer

| Site | Style | |------|-------| | apple | Premium white space, SF Pro, cinematic | | airbnb | Warm coral, photography-driven, rounded | | spotify | Vibrant green on dark, bold type | | stripe | Signature purple gradients, weight-300 | | notion | Warm minimalism, serif headings | | figma | Vibrant multi-color, playful professional |

See full collection for all 55 sites.

---

What's Inside Each DESIGN.md

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

| # | Section | What it captures | |---|---------|-----------------| | 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, nav with states | | 5 | Layout Principles | Spacing scale, grid, whitespace | | 6 | Depth & Elevation | Shadow system, surface hierarchy | | 7 | Do's and Don'ts | Design guardrails, anti-patterns | | 8 | Responsive Behavior | Breakpoints, touch targets | | 9 | Agent Prompt Guide | Quick color reference, ready prompts |

---

Usage with AI Coding Agents

Step 1: Copy DESIGN.md to your project root

# Pick a style that matches your target aesthetic
cp awesome-design-md/design-md/vercel/DESIGN.md ./DESIGN.md

Step 2: Tell your agent to use it

Claude Code:

Build me a landing page hero section. Follow the DESIGN.md in the project root for all styling decisions.

Cursor:

Create a dashboard layout. Use DESIGN.md for colors, typography, and component patterns.

GitHub Copilot / Codex:

Implement a pricing table component. Refer to DESIGN.md for the design system.

Google Stitch: DESIGN.md is natively supported — Stitch reads it automatically when present in the project.

---

Code Examples

Example: Building a button using Vercel DESIGN.md

After copying design-md/vercel/DESIGN.md to your project:

<!-- The agent will infer these styles from DESIGN.md -->
<button class="btn-primary">Deploy</button>

<style>
  /* Agent generates this from Vercel DESIGN.md tokens */
  .btn-primary {
    background-color: #000000;       /* --color-foreground */
    color: #ffffff;                  /* --color-background */
    font-family: 'Geist', sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .btn-primary:hover {
    opacity: 0.85;
  }
</style>

Example: Stripe-style card component

<!-- After: cp design-md/stripe/DESIGN.md ./DESIGN.md -->
<!-- Prompt: "Create a pricing card. Use DESIGN.md." -->

<div class="pricing-card">
  <div class="pricing-card__badge">Most Popular</div>
  <h3 class="pricing-card__title">Pro</h3>
  <div class="pricing-card__price">
    <span class="pricing-card__amount">$12</span>
    <span class="pricing-card__period">/month</span>
  </div>
  <button class="pricing-card__cta">Get started</button>
</div>

<style>
  /* Stripe DESIGN.md: purple gradients, weight-300 elegance */
  .pricing-card {
    background: linear-gradient(135deg, #6772e5 0%, #9b59b6 100%);
    border-radius: 12px;
    padding: 32px;
    color: #ffffff;
    font-family: 'Sohne', -apple-system, sans-serif;
    font-weight: 300;
    max-width: 320px;
  }
  .pricing-card__title {
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 16px;
  }
  .pricing-card__amount {
    font-size: 48px;
    font-weight: 300;
  }
  .pricing-card__cta {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    color: #ffffff;
    border-radius: 6px;
    padding: 12px 24px;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    margin-top: 24px;
    backdrop-filter: blur(4px);
  }
</style>

Example: Supabase-style dark dashboard layout

<!-- After: cp design-md/supabase/DESIGN.md ./DESIGN.md -->
<!-- Prompt: "Build a sidebar nav layout. Follow DESIGN.md." -->

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Supabase DESIGN.md: dark emerald theme, code-first */
    :root {
      --bg-primary: #1c1c1c;
      --bg-secondary: #242424;
      --bg-surface: #2a2a2a;
      --accent: #3ecf8e;
      --text-primary: #ededed;
      --text-muted: #8a8a8a;
      --border: #333333;
    }
    body {
      background: var(--bg-primary);
      color: var(--text-primary);
      font-family: 'Inter', sans-serif;
      margin: 0;
      display: flex;
      min-height: 100vh;
    }
    .sidebar {
      width: 240px;
      background: var(--bg-secondary);
      border-right: 1px solid var(--border);
      padding: 16px 0;
    }
    .sidebar-item {
      padding: 8px 16px;
      font-size: 13px;
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .sidebar-item.active {
      color: var(--accent);
      background: rgba(62, 207, 142, 0.08);
    }
    .main-content {
      flex: 1;
      padding: 32px;
    }
    .stat-card {
      background: var(--bg-surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 20px;
      display: inline-block;
      min-width: 180px;
    }
    .stat-value {
      font-size: 28px;
      font-weight: 600;
      color: var(--accent);
    }
    .stat-label {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 4px;
    }
  </style>
</head>
<body>
  <nav class="sidebar">
    <div class="sidebar-item active">📊 Dashboard</div>
    <div class="sidebar-item">🗄️ Database</div>
    <div class="sidebar-item">🔐 Auth</div>
    <div class="sidebar-item">📦 Storage</div>
    <div class="sidebar-item">⚡ Edge Functions</div>
  </nav>
  <main class="main-content">
    <h1>Project Overview</h1>
    <div style="display:flex;gap:16px;flex-wrap:wrap;margin-top:24px;">
      <div class="stat-card">
        <div class="stat-value">2.4M</div>
        <div class="stat-label">Database Rows</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">12.8k</div>
        <div class="stat-label">Active Users</div>
      </div>
      <div class="stat-card">
        <div class="stat-value">99.9%</div>
        <div class="stat-label">Uptime</div>
      </div>
    </div>
  </main>
</body>
</html>

Example: Programmatically selecting a DESIGN.md

#!/bin/bash
# select-design.sh — pick a design system by category

REPO="https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md"

select_design() {
  local site=$1
  echo "Downloading DESIGN.md for: $site"
  curl -fsSL "$REPO/$site/DESIGN.md" -o DESIGN.md
  echo "✓ DESIGN.md ready. Tell your agent: 'Use DESIGN.md for all styling.'"
}

# Usage examples
case "$1" in
  vercel)   select_design "vercel" ;;
  stripe)   select_design "stripe" ;;
  linear)   select_design "linear.app" ;;
  supabase) select_design "supabase" ;;
  notion)   select_design "notion" ;;
  apple)    select_design "apple" ;;
  spotify)  select_design "spotify" ;;
  *)
    echo "Available: vercel, stripe, linear, supabase, notion, apple, spotify"
    echo "Usage: ./select-design.sh <site>"
    ;;
esac

---

Viewing Previews Locally

Each design system ships with an HTML preview showing the actual color swatches, type scale, buttons, and cards:

# Open light preview
open design-md/stripe/preview.html

# Open dark preview
open design-md/stripe/preview-dark.html

# Or serve locally
cd design-md/vercel && python3 -m http.server 8080
# Visit http://localhost:8080/preview.html

---

Agent Prompt Patterns

These prompts work reliably across Claude Code, Cursor, and Codex when DESIGN.md is in the project root:

Landing page

Build a SaaS landing page hero with headline, subheadline, CTA button, and 
feature grid. Follow DESIGN.md strictly for all colors, fonts, spacing, 
and component styles.

Dashboard

Create a responsive dashboard with sidebar navigation, stat cards, and a 
data table. Use the design tokens and component patterns from DESIGN.md.

Component library

Generate a component file with: primary button, secondary button, input field, 
card, and badge. All styles must match the DESIGN.md specification exactly.

Dark mode page

Build a dark-mode marketing page for a developer tool. Apply the dark surface 
colors, accent palette, and typography hierarchy defined in DESIGN.md.

Specific component

Create a pricing table with 3 tiers. Use the card component styles, color 
roles, and button variants from DESIGN.md. The middle tier should use the 
primary accent color as the highlight.

---

Choosing the Right DESIGN.md

| Your goal | Recommended site | |-----------|-----------------| | Clean developer tool / SaaS | vercel, linear.app, resend | | Dark developer dashboard | supabase, posthog, cursor | | Premium / luxury product | apple, stripe, bmw | | Playful / friendly product | figma, lovable, zapier | | AI / ML product | voltagent, replicate, mistral.ai | | E-commerce / marketplace | airbnb, pinterest | | Fintech / crypto | stripe, revolut, coinbase | | Documentation site | mintlify, hashicorp | | Media / content | spotify, runwayml | | Enterprise SaaS | ibm, hashicorp, sentry |

---

Contributing a New DESIGN.md

git clone https://github.com/VoltAgent/awesome-design-md.git
cd awesome-design-md

# Create folder for the new site
mkdir -p design-md/newsite.com

# Follow the format spec:
# https://stitch.withgoogle.com/docs/design-md/format/
# Include all 9 sections listed in the README

# Add your files
touch design-md/newsite.com/DESIGN.md
touch design-md/newsite.com/preview.html
touch design-md/newsite.com/preview-dark.html

# Submit PR
git checkout -b add-newsite-design
git add design-md/newsite.com/
git commit -m "feat: add newsite.com design system"
git push origin add-newsite-design

---

Troubleshooting

Agent ignores DESIGN.md

• Ensure the file is named exactly DESIGN.md (uppercase) in the project root
• Explicitly reference it in your prompt: "Refer to the DESIGN.md file in the project root"
• Some agents need the file added to context manually — drag it into the chat window

Styles look generic / off

• The agent may be hallucinating styles. Add: "Do not use any colors, fonts, or spacing values not defined in DESIGN.md"
• Check the preview.html to verify you have the right design system
• Try a more specific prompt referencing exact section names, e.g. "Use the Color Palette section of DESIGN.md"

Wrong site's DESIGN.md

• Run head -5 DESIGN.md to confirm which site's system is loaded
• Each DESIGN.md starts with the site name and theme description

Preview HTML won't open

• These are static files — open directly in browser or serve with python3 -m http.server
• No build step or dependencies required

Design tokens don't match the live site

• These are reverse-engineered approximations, not official design systems
• For official tokens, check each company's public design system documentation
• Open an issue at github.com/VoltAgent/awesome-design-md/issues

---

Links

• Repo: https://github.com/VoltAgent/awesome-design-md
• DESIGN.md Format Spec: https://stitch.withgoogle.com/docs/design-md/format/
• Google Stitch Overview: https://stitch.withgoogle.com/docs/design-md/overview/
• VoltAgent Framework: https://github.com/VoltAgent/voltagent
• Discord: https://s.voltagent.dev/discord
• License: MIT