design-md

Files (1)

• SKILL.md

SKILL.md (first lines)

# /design-md: Brand Design Systems on Demand

Fetch a pre-built DESIGN.md from the [awesome-design-md](https://github.com/VoltAgent/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

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

If the fetch fails, fall back to the GitHub raw URL:
```bash
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:

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

From xingfanxia/ax-claude-config-public, MIT.

More from xingfanxia/ax-claude-config-public