Design Md

/design-md: Brand Design Systems on Demand

Fetch a pre-built DESIGN.md from the awesome-design-md collection and apply it to the current project. Each file captures a real brand's visual identity — colors, typography, components, layout, responsive rules — in the 9-section Stitch format that AI coding agents consume natively.

Usage

/design-md              — list categories + browse
/design-md vercel       — fetch Vercel's DESIGN.md
/design-md stripe       — fetch Stripe's DESIGN.md
/design-md "like linear" — find the closest match

Available Brands

AI / LLM Platforms

claude, cohere, mistral.ai, ollama, opencode.ai, replicate, together.ai, x.ai, xai, minimax, elevenlabs

Developer Tools

cursor, expo, hashicorp, lovable, raycast, sentry, warp, posthog, mintlify, runwayml

Design Tools

figma, framer, webflow, clay, miro

Databases / DevOps

clickhouse, mongodb, supabase, sanity

SaaS / Productivity

airtable, cal, intercom, linear.app, notion, superhuman, zapier, semrush, composio, resend

Fintech / Crypto

coinbase, kraken, revolut, stripe, wise

E-Commerce / Consumer

airbnb, nike, shopify, pinterest, spotify, uber

Media / Publishing

theverge, wired, meta, playstation

Automotive

bmw, bugatti, ferrari, lamborghini, renault, spacex, tesla

Meta

voltagent (the repo creators), apple, ibm, nvidia

Workflow

Step 1: Resolve brand

If the user provided a brand name:

• Normalize to lowercase slug (e.g., "Linear" -> "linear.app", "Vercel" -> "vercel")
• If ambiguous or misspelled, suggest the closest match from the list above

If no brand specified:

• Show the categorized list above
• Ask: "Which brand's design system do you want? Or describe the vibe you're going for and I'll recommend one."

Step 2: Fetch DESIGN.md

curl -fsSL "https://getdesign.md/design-md/{brand}/DESIGN.md"

If the fetch fails, fall back to the GitHub raw URL:

curl -fsSL "https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/{brand}/DESIGN.md"

If both fail, report the error and suggest checking the brand name.

Step 3: Review and apply

1. Show the user a summary of the fetched design system (aesthetic direction, key colors, fonts, vibe)
2. Ask: Apply as-is, customize first, or just save for reference?

Apply options:

• A) Apply as-is — write to ./DESIGN.md in the project root
• B) Customize first — user can tweak colors, fonts, etc. before saving. Hand off to /design-consultation with the fetched file as a starting point.
• C) Save as reference — write to docs/design/reference/{brand}-DESIGN.md for inspiration without committing to it

Step 4: Post-apply (only if option A or B)

Check if CLAUDE.md exists in the project root. If it does, check whether it already has a "Design System" section. If not, append:

## Design System
Always read DESIGN.md before making any visual or UI decisions.
All font choices, colors, spacing, and aesthetic direction are defined there.
Do not deviate without explicit user approval.

Report what was written and where.

Vibe Matching

When the user describes a vibe instead of naming a brand (e.g., "something clean and developer-focused"), recommend 2-3 brands that match:

Rules

1. Never modify the fetched DESIGN.md silently. Show what you're applying. If the user wants changes, make them explicit.
2. Respect existing DESIGN.md. If one already exists, ask before overwriting: "You already have a DESIGN.md. Replace it, merge, or save this one as reference?"
3. Credit the source. Add a comment at the top of applied files: <!-- Source: awesome-design-md / {brand} — https://github.com/VoltAgent/awesome-design-md -->
4. File organization. DESIGN.md goes to project root. References go to docs/design/reference/.