awesome-design-md ✔ security-verified · 2 models

# awesome-design-md — Curated DESIGN.md collection for AI UI generation

A curated collection of DESIGN.md files extracted from real brand design systems. Each file contains analyzed design tokens, patterns, and rules for high-quality UI generation.

## What is DESIGN.md?

DESIGN.md is a concept introduced by Google Stitch. It is a plain-text design system document that AI agents read to generate consistent UI.

It's just a markdown file. No Figma exports, no JSON schemas, no special tooling. Drop it into your project root and any AI coding agent or Google Stitch instantly understands how your UI should look. Markdown is the format LLMs read best, so there's nothing to parse or configure.

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

## When to use

- You want an AI agent to generate UI that matches a specific brand's design language
- You need consistent visual identity across multiple projects or pages
- You want to give an AI agent a design system without Figma exports or JSON schemas
- You want to quickly prototype a page in a specific brand's style
- You need design tokens (colors, typography, spacing) in a format AI can consume

## How to use

### Step 1: Pick a brand

Browse the collection at [github.com/voltagent/awesome-design-md](https://github.com/voltagent/awesome-design-md). Brands are organized by category:

- **AI & LLM Platforms** — Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, Runway, Together AI, VoltAgent, xAI
- **Developer Tools & IDEs** — Cursor, Expo, Lovable, Raycast, Superhuman, Vercel, Warp
- **Backend, Database & DevOps** — ClickHouse, Composio, HashiCorp, MongoDB, PostHog, Sanity, Sentry, Supabase
- **Productivity & SaaS** — Cal.com, Intercom, Linear, Mintlify, Notion, Resend, Zapier
- **Design & Creative Tools** — Airtable, Clay, Figma, Framer, Miro, Webflow
- **Fintech & Crypto** — Binance, Coinbase, Kraken, Mastercard, Revolut, Stripe, Wise
- **E-commerce & Retail** — Airbnb, Meta, Nike, Shopify, Starbucks

### Step 2: Copy the DESIGN.md file

Clone the repo and copy the desired brand's `.md` file into your project root:

```bash
git clone https://github.com/voltagent/awesome-design-md.git
cp awesome-design-md/design-md/<brand>/DESIGN.md ./DESIGN.md
```

### Step 3: Tell your AI agent

Ask your AI coding agent:

> "Read the DESIGN.md file in the project root and build me a landing page that follows this design system."

The agent reads the tokens (colors, typography, spacing, components, rules) and generates UI that matches the brand's visual identity.

## What's inside each DESIGN.md

Each file contains:

- **YAML front matter** — machine-readable design tokens (colors, typography, spacing, border radius, components)
- **Markdown body** — human-readable rationale organized into canonical sections:
  1. Overview / Brand & Style
  2. Colors
  3. Typography
  4. Layout & Spacing
  5. Elevation & Depth
  6. Shapes
  7. Components
  8. Do's and Don'ts

## DESIGN.md token format

```yaml
---
version: alpha
name: Heritage
description: Architectural minimalism meets journalistic gravitas.
colors:
  primary: "#1A1C1E"
  secondary: "#6C7278"
  tertiary: "#B8422E"
  neutral: "#F7F5F2"
typography:
  h1:
    fontFamily: Public Sans
    fontSize: 3rem
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.02em"
  body-md:
    fontFamily: Public Sans
    fontSize: 1rem
rounded:
  sm: 4px
  md: 8px
  lg: 16px
spacing:
  sm: 8px
  md: 16px
  lg: 24px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#FFFFFF"
    rounded: "{rounded.sm}"
    padding: 12px
---
```

## Related tools

- **Google Stitch** — the platform that introduced the DESIGN.md concept
- **@google/design.md CLI** — lint, diff, and export DESIGN.md files to Tailwind or W3C DTCG JSON
- **VoltAgent** — AI agent engineering platform that maintains this collection

## Pitfalls

1. **DESIGN.md is alpha spec** — the format may change. Watch for breaking changes.
2. **Token references use dotted paths** — `{colors.primary}` works; `{primary}` does not.
3. **Hex colors must be quoted strings** — YAML chokes on unquoted `#` values.
4. **Negative dimensions need quotes** — `letterSpacing: "-0.02em"` not `-0.02em`.
5. **Component variants are separate entries** — `button-primary-hover` as a sibling, not nested.
6. **Section order is enforced** — present sections must appear in canonical order.

## Reference

- Repository: https://github.com/voltagent/awesome-design-md
- Stars: 99.4k
- License: MIT
- DESIGN.md spec: https://github.com/google-labs-code/design.md (Apache-2.0)
- CLI: `npx @google/design.md lint DESIGN.md`