| name | design-md |
| description | Fetch a pre-made DESIGN.md from the awesome-design-md collection (66 brands). Drop a known brand's design system into your project. Triggers: design-md, get design md, use vercel design, brand design system. |
/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
- Show the user a summary of the fetched design system (aesthetic direction, key colors, fonts, vibe)
- 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:
| Vibe | Brands |
|---|
| Clean, developer-focused | vercel, linear.app, raycast, resend |
| Bold, consumer-facing | airbnb, nike, spotify, uber |
| Data-dense, professional | posthog, sentry, hashicorp, clickhouse |
| Luxury, premium feel | apple, bmw, tesla, superhuman |
| Playful, creative | figma, framer, clay, notion |
| Fintech, trust-signaling | stripe, wise, revolut, coinbase |
| Editorial, content-first | theverge, wired |
| AI-native, cutting-edge | claude, cursor, mistral.ai, cohere |
Rules
- Never modify the fetched DESIGN.md silently. Show what you're applying. If the user wants changes, make them explicit.
- 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?"
- Credit the source. Add a comment at the top of applied files:
<!-- Source: awesome-design-md / {brand} — https://github.com/VoltAgent/awesome-design-md -->
- File organization. DESIGN.md goes to project root. References go to
docs/design/reference/.
