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

claude

elevenlabs

mistral.ai

ollama

replicate

runwayml

voltagent

x.ai

Developer Tools

cursor

linear.app

mintlify

posthog

raycast

resend

supabase

vercel

Enterprise & Consumer

apple

airbnb

spotify

stripe

notion

figma

See full collection for all 55 sites.

What's Inside Each DESIGN.md

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

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

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

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

vercel

linear.app

resend

supabase

posthog

cursor

apple

stripe

bmw

figma

lovable

zapier

voltagent

replicate

mistral.ai

airbnb

pinterest

stripe

revolut

coinbase

mintlify

hashicorp

spotify

runwayml

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