---
name: brand-design
description: Install and apply brand-inspired DESIGN.md files from the awesome-design-md collection. Use when the user wants their UI to look like a specific brand (Stripe, Linear, Apple, etc.) or wants to browse available brand design systems.
---

# Brand Design — Install & Apply Brand Design Systems

**Type:** Rigid — follow the workflow steps exactly.

## When to Use

- User says "make it look like [brand]" or "use the [brand] design"
- User says `/brand-design`
- User wants to apply a specific brand's design language to their project
- User asks "what design systems are available?"

## Available Brands (59+)

| Category | Brands |
|----------|--------|
| **AI / LLM** | `claude`, `cohere`, `elevenlabs`, `minimax`, `mistral.ai`, `ollama`, `opencode.ai`, `replicate`, `runwayml`, `together.ai`, `voltagent`, `x.ai` |
| **Dev Tools** | `cursor`, `expo`, `lovable`, `raycast`, `superhuman`, `vercel`, `warp` |
| **Backend / DB** | `clickhouse`, `composio`, `hashicorp`, `mongodb`, `posthog`, `sanity`, `sentry`, `supabase` |
| **Productivity** | `cal`, `intercom`, `linear.app`, `mintlify`, `notion`, `resend`, `zapier` |
| **Design Tools** | `airtable`, `clay`, `figma`, `framer`, `miro`, `webflow` |
| **Fintech** | `binance`, `coinbase`, `kraken`, `mastercard`, `revolut`, `stripe`, `wise` |
| **E-commerce** | `airbnb`, `meta`, `nike`, `shopify` |
| **Media / Consumer** | `apple`, `ibm`, `nvidia`, `pinterest`, `playstation`, `spacex`, `spotify`, `theverge`, `uber`, `vodafone`, `wired` |
| **Automotive** | `bmw`, `bugatti`, `ferrari`, `lamborghini`, `renault`, `tesla` |

## Workflow

### Step 1: Identify the Brand

If the user specified a brand, use it. If not, present the table above and ask which brand they want.

Validate the brand name against the available list. Common aliases:
- "linear" → `linear.app`
- "mistral" → `mistral.ai`
- "together" → `together.ai`
- "opencode" → `opencode.ai`
- "xai" → `x.ai`
- "the verge" → `theverge`

### Step 2: Install the DESIGN.md

Run the CLI in the **project root** directory:

```bash
npx getdesign@latest add <brand>
```

This creates a `DESIGN.md` file in the current working directory.

### Step 3: Read and Internalize

Read the generated `DESIGN.md` file completely. It contains 9 sections:

1. **Visual Theme & Atmosphere** — mood, density, philosophy
2. **Color Palette & Roles** — every hex code with semantic name and function
3. **Typography Rules** — font families, full size/weight/spacing hierarchy
4. **Component Stylings** — buttons, cards, inputs, badges, nav with exact values
5. **Layout Principles** — spacing system, grid, containers, whitespace
6. **Depth & Elevation** — shadow levels, surface hierarchy
7. **Do's and Don'ts** — brand-specific guardrails
8. **Responsive Behavior** — breakpoints, touch targets, collapse strategy
9. **Agent Prompt Guide** — quick reference and ready-to-use prompts

### Step 4: Report to User

After reading, give the user a brief summary:
- Brand name and visual vibe (1 sentence from Section 1)
- Primary colors (accent + background + text)
- Font stack
- Key design principles (2-3 bullets from Do's and Don'ts)

Then ask: **"Ready to apply this to your project? Which page/component should I start with?"**

### Step 5: Apply to Code

When building UI with this DESIGN.md active:

1. **Colors** — Use exact hex codes and rgba values from Section 2. No approximations.
2. **Typography** — Match font family, weight, size, line-height, and letter-spacing per the hierarchy table in Section 3.
3. **Components** — Follow the exact specs from Section 4 (backgrounds, borders, radii, shadows, padding).
4. **Layout** — Use the spacing system and grid from Section 5.
5. **Depth** — Apply the elevation model from Section 6.
6. **Guardrails** — Obey every rule in Section 7 (Do's and Don'ts).
7. **Responsive** — Follow breakpoints and collapse strategy from Section 8.
8. **Quick ref** — Use Section 9 for fast component-level lookups during implementation.

## Precedence Rules

When a brand DESIGN.md is active:

- **DESIGN.md overrides** generic design skills (stitch-design, taste-skill, soft-skill, etc.) for colors, typography, spacing, shadows, and component patterns
- **Generic skills still apply** for: motion choreography, performance guardrails, anti-patterns (no emojis, no generic content), responsive collapse patterns (unless DESIGN.md specifies its own)
- **User instructions always win** over both DESIGN.md and generic skills

## Multiple Brands

If the user wants to combine elements from multiple brands:
1. Install both: `npx getdesign@latest add stripe` then rename to `DESIGN-stripe.md`
2. Install second: `npx getdesign@latest add linear.app` then rename to `DESIGN-linear.md`
3. Ask the user which aspects to take from each (e.g., "Stripe colors + Linear typography")
4. Create a merged `DESIGN.md` with clear attribution

## Request a Custom Brand

If the brand isn't in the list, tell the user they can request one at:
`https://getdesign.md/request`