About brand-design-md
brand-design-md is a skill that retrieves design tokens for 62 documented brands and applies them to a project's CSS variables or Tailwind config. It is intended for brand-matched demos, pitch materials, and prototypes using an existing identity.
Key features
- 01Tokens for 62 documented brands
- 02Colors, typography, spacing, radii, and shadows
- 03Applies tokens to CSS variables or Tailwind config
- 04Installation guidance for global or project scope
Use cases
- 01Creating a prototype that follows an existing brand
- 02Preparing brand-matched demos or pitch materials
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/brand-design-mdin Claude Code to confirm it loaded.
Bundled filesstub.yaml
Details
From the project READMEbrand-design-md
Catalogue stub — full skill: zephyrwang6/brand-design-md
Decision tree
-
Is the full skill already installed? Check whether the skill at this location still has a
das:block:- Global:
grep -q "^das:" ~/.agents/skills/brand-design-md/SKILL.md 2>/dev/null && echo "pointer" || echo "installed" - Project:
grep -q "^das:" .agents/skills/brand-design-md/SKILL.md 2>/dev/null && echo "pointer" || echo "installed" - No
das:block → full skill installed, invoke it and proceed das:block present → go to step 2
- Global:
-
Detect scope, then install:
To detect scope:
[ -e ~/.agents/skills/brand-design-md ] && echo "global" || echo "project"Global (installed with
-g):npx skills add zephyrwang6/brand-design-md --skill brand-design-md -g -yProject (installed without
-g):npx skills add zephyrwang6/brand-design-md --skill brand-design-md -yClaude Code: send either command as a chat message starting with
!to run it without leaving the conversation.
Invoke after install
- Skill name:
brand-design-md - Trigger phrases: "brand tokens", "brand design", "match Stripe design", "62 brands", "brand-design-md"
What it does
At runtime, fetches the precise design tokens — primary and accent colors, type weights, letter-spacing, border-radius, and shadow values — for any of 62 documented world-class brands including Stripe, Linear, Apple, Figma, Notion, Vercel, Airbnb, and Nike. Once fetched, applies those tokens to the current project's CSS variables or Tailwind config so the output accurately reflects the chosen brand's visual language. Useful for building demos, pitch materials, or brand-matched prototypes quickly without manual research.
When NOT to use
- When you need to develop a custom brand identity from scratch (this skill matches existing brands, not creates new ones)
- When none of the 62 brands match your target (use
design-consultationto build a bespoke system) - When brand token accuracy is legally or contractually sensitive (always verify tokens against official brand guidelines)