skills/brand-design/SKILL.md

name	description
brand-design	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:

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