awesome-design-md

What this skill does

```markdown
---
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)

```bash
# 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](https://github.com/VoltAgent/awesome-design-md#collection) for all 55 sites.

---

## What's Inside Each DESIGN.md

Every file follows the [Stitch DESIGN.md format](https://stitch.withgoogle.com/docs/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

```bash
# 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:

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

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

```html
<!-- 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;