When the user mentions a certain brand's design style, you need to:
- Identify the brand name and map it to the correct slug
- Via
npx getdesign@latest add <slug>fetch the complete DESIGN.md specification - Read the content and use it as design context to generate UI code
Brand Slug Registry
Tech / AI Products
| What the user might say | Slug |
|---|---|
| Apple | apple |
| Claude、Anthropic、Claude AI | claude |
| Cursor, AI editor | cursor |
| ElevenLabs, 11Labs, voice AI | elevenlabs |
| Figma, design tool | figma |
| Framer, website builder | framer |
| Lovable | lovable |
| Meta、Facebook | meta |
| MiniMax | minimax |
| Mintlify, documentation platform | mintlify |
| Mistral、Mistral AI | mistral.ai |
| Notion, note-taking tool | notion |
| Ollama | ollama |
| OpenCode | opencode.ai |
| PostHog | posthog |
| Raycast | raycast |
| Replicate | replicate |
| Resend | resend |
| Runway, RunwayML, AI video | runwayml |
| Sanity、CMS | sanity |
| Sentry | sentry |
| Supabase | supabase |
| Superhuman, email client | superhuman |
| Together AI、together | together.ai |
| Vercel | vercel |
| VoltAgent | voltagent |
| Warp, terminal | warp |
| Webflow | webflow |
| X.AI、Grok | x.ai |
| Zapier | zapier |
Developer Tools / Infrastructure
| What the user might say | Slug |
|---|---|
| Airtable | airtable |
| Cal.com、Cal | cal |
| Clay | clay |
| ClickHouse | clickhouse |
| Cohere | cohere |
| Composio | composio |
| Expo | expo |
| HashiCorp | hashicorp |
| IBM | ibm |
| Intercom | intercom |
| Linear, project management | linear.app |
| Miro, online whiteboard | miro |
| MongoDB | mongodb |
| NVIDIA | nvidia |
pinterest |
|
| Stripe, payments | stripe |
Finance / Crypto
| What the user might say | Slug |
|---|---|
| Binance | binance |
| Coinbase | coinbase |
| Kraken | kraken |
| Revolut | revolut |
| Wise | wise |
Consumer Goods / Automotive
| What the user might say | Slug |
|---|---|
| Airbnb | airbnb |
| BMW | bmw |
| Ferrari | ferrari |
| Lamborghini | lamborghini |
| Nike | nike |
| Renault | renault |
| Shopify | shopify |
| SpaceX | spacex |
| Spotify | spotify |
| Tesla | tesla |
| Uber | uber |
Steps
Step 1: Identify the brand
Identify the brand name from the user's input, and find the corresponding slug by referring to the registry above.
- The user says "Apple style" → slug =
apple - The user says "that Notion kind of feel" → slug =
notion - The user says "make it Stripe's minimalist style" → slug =
stripe - The user says "BMW + Linear mashup" → slugs =
bmw,linear.app(multi-brand mashup)
If the brand name cannot be identified, tell the user directly and list the available brands.
Step 2: Fetch DESIGN.md
Run the following command in the terminal (execute it in a temporary directory to avoid polluting the user's project):
cd /tmp && mkdir -p design-md-tmp && cd design-md-tmp && npx getdesign@latest add <slug> 2>&1
Then read the generated DESIGN.md file:
cat /tmp/design-md-tmp/DESIGN.md
If it is a multi-brand mashup, fetch each brand's DESIGN.md in turn and merge the key design tokens.
Step 3: Parse the design specification
Extract key information from DESIGN.md:
- Color system: background color, text color, accent color, border color
- Typography specification: font family, font size hierarchy, font weight, line height, letter spacing
- Component styles: specific CSS values for buttons, cards, navigation, input fields
- Spacing system: base unit and scale
- Border radius system: border-radius values for each component
- Shadow system: box-shadow values for each level
Step 4: Generate UI
Based on the extracted design specifications, generate the UI code requested by the user (HTML/CSS/React/Vue, etc.).
Strictly follow the specific values in the specifications, do not improvise or substitute approximate values. If the specification says rgba(0,0,0,0.95) then do not use #000000, if the letter spacing is -2.125px then do not round it.
Mixing style guides
When the user requests mixing multiple brand styles:
- Retrieve each brand's DESIGN.md separately
- Use the user-specified primary brand as the base
- Extract the specified dimensions (color/typography/layout/components) from the secondary brands for fusion
- In the generated code, add comments explaining which part comes from which brand
Example mixing logic:
- "Notion warm colors + Linear minimalist typography" → use Notion's color tokens + Linear's font typography rules
- "Apple whitespace + Claude warm orange accent color" → use Apple's spacing system + Claude's
#d97757accent color
Output format
- By default, output a complete single-file HTML (with inline CSS)
- When the user explicitly specifies React/Vue, output the corresponding format
- Comment the brand source and key design tokens at the top of the code for easier future maintenance
- Optional: whether to save DESIGN.md to the user's project directory (ask the user)
Error handling
- npx command fails: prompt the user to confirm the Node.js environment, or manually visit https://getdesign.md to view the specifications
- Brand does not exist: list all available brands and suggest the closest alternatives
- Network issues: use the brief descriptions in the brand registry as a fallback design direction
Quick reference: one-sentence description of each brand's style
apple → 极致留白 + SF Pro + 电影质感
notion → 暖色极简 + 衬线标题 + 柔和表面
claude → 赭石强调色 + 编辑排版 + 温暖智识感
stripe → 紫色渐变 + 300 字重优雅 + 精致细节
linear → 超级极简 + 精准 + 紫色强调
figma → 多彩活泼 + 专业 + 协作感
cursor → 深色 + 渐变强调 + AI原生
spotify → 深色底 + 荧光绿 + 音乐封面驱动
tesla → 激进减法 + 全屏摄影 + 近零UI
ferrari → 黑底电影感 + Ferrari红 + 奢华排版
vercel → 黑白精准 + Geist字体 + 极简
supabase → 深色翠绿 + 代码优先 + 开发者感
raycast → 深色铬面 + 渐变强调 + 效率感
airbnb → 珊瑚暖色 + 摄影驱动 + 圆润UI
stripe → 紫色渐变 + 精致 + 金融质感
nike → 单色 + 大写字体 + 全出血摄影
bmw → 深色溢价面 + 精准德式美学
shopify → 深色电影感 + 荧光绿 + 超细字重