112 lines
5.0 KiB
Markdown
112 lines
5.0 KiB
Markdown
---
|
|
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`
|