Brand Design MD Skill

当用户提到某个品牌的设计风格，你需要：

识别品牌名称并映射到正确的 slug
通过 npx getdesign@latest add <slug> 获取完整的 DESIGN.md 规范
读取内容，作为设计上下文生成 UI 代码

品牌 Slug 注册表

科技 / AI 产品

用户可能说的	Slug
苹果、Apple	`apple`
Claude、Anthropic、Claude AI	`claude`
Cursor、AI编辑器	`cursor`
ElevenLabs、11Labs、语音AI	`elevenlabs`
Figma、设计工具	`figma`
Framer、建站工具	`framer`
Lovable	`lovable`
Meta、Facebook	`meta`
MiniMax	`minimax`
Mintlify、文档平台	`mintlify`
Mistral、Mistral AI	`mistral.ai`
Notion、笔记工具	`notion`
Ollama	`ollama`
OpenCode	`opencode.ai`
PostHog	`posthog`
Raycast	`raycast`
Replicate	`replicate`
Resend	`resend`
Runway、RunwayML、AI视频	`runwayml`
Sanity、CMS	`sanity`
Sentry	`sentry`
Supabase	`supabase`
Superhuman、邮件客户端	`superhuman`
Together AI、together	`together.ai`
Vercel	`vercel`
VoltAgent	`voltagent`
Warp、终端	`warp`
Webflow	`webflow`
X.AI、Grok	`x.ai`
Zapier	`zapier`

开发者工具 / 基础设施

用户可能说的	Slug
Airtable	`airtable`
Cal.com、Cal	`cal`
Clay	`clay`
ClickHouse	`clickhouse`
Cohere	`cohere`
Composio	`composio`
Expo	`expo`
HashiCorp	`hashicorp`
IBM	`ibm`
Intercom	`intercom`
Linear、项目管理	`linear.app`
Miro、在线白板	`miro`
MongoDB	`mongodb`
NVIDIA、英伟达	`nvidia`
Pinterest	`pinterest`
Stripe、支付	`stripe`

金融 / 加密

用户可能说的	Slug
Binance、币安	`binance`
Coinbase	`coinbase`
Kraken	`kraken`
Revolut	`revolut`
Wise	`wise`

消费品 / 汽车

用户可能说的	Slug
Airbnb、爱彼迎	`airbnb`
BMW、宝马	`bmw`
Ferrari、法拉利	`ferrari`
Lamborghini、兰博基尼	`lamborghini`
Nike、耐克	`nike`
Renault、雷诺	`renault`
Shopify	`shopify`
SpaceX	`spacex`
Spotify	`spotify`
Tesla、特斯拉	`tesla`
Uber	`uber`

操作步骤

Step 1：识别品牌

从用户的输入中识别品牌名称，对照上方注册表找到对应的 slug。

用户说「苹果风格」→ slug = apple
用户说「Notion 那种感觉」→ slug = notion
用户说「做成 Stripe 的极简风」→ slug = stripe
用户说「BMW + Linear 混搭」→ slugs = bmw, linear.app（多品牌混搭）

如果品牌名无法识别，直接告知用户并列出可用品牌列表。

Step 2：获取 DESIGN.md

在终端运行以下命令（在临时目录中执行，避免污染用户项目）：

cd /tmp && mkdir -p design-md-tmp && cd design-md-tmp && npx getdesign@latest add <slug> 2>&1

然后读取生成的 DESIGN.md 文件：

cat /tmp/design-md-tmp/DESIGN.md

如果是多品牌混搭，依次获取每个品牌的 DESIGN.md，合并关键设计 token。

Step 3：解析设计规范

从 DESIGN.md 中提取关键信息：

颜色系统：背景色、文字色、强调色、边框色
字体规范：字体家族、字号层级、字重、行高、字间距
组件样式：按钮、卡片、导航、输入框的具体 CSS 值
间距系统：基础单位和比例
圆角体系：各组件的 border-radius 值
阴影系统：各层级的 box-shadow 值

Step 4：生成 UI

根据提取的设计规范，生成用户请求的 UI 代码（HTML/CSS/React/Vue 等）。

严格执行规范中的具体数值，不要自由发挥或用近似值替代。如果规范中写的是 rgba(0,0,0,0.95) 就不要用 #000000，如果字间距是 -2.125px 就不要四舍五入。

混搭风格指南

当用户要求混搭多个品牌风格时：

分别获取各品牌的 DESIGN.md
以用户指定的主品牌为基础
从副品牌中提取指定维度（颜色/排版/布局/组件）进行融合
在生成代码中注释说明哪部分来自哪个品牌

示例混搭逻辑：

"Notion 暖色 + Linear 极简排版" → 用 Notion 的颜色 token + Linear 的字体排版规则
"Apple 留白 + Claude 暖橙强调色" → 用 Apple 的间距系统 + Claude 的 #d97757 强调色

输出格式

默认输出完整的单文件 HTML（含内联 CSS）
用户明确指定 React/Vue 时输出对应格式
代码顶部注释品牌来源和关键设计 token，方便后续维护
可选：是否将 DESIGN.md 保存到用户的项目目录（询问用户）

错误处理

npx 命令失败：提示用户确认 Node.js 环境，或手动访问 https://getdesign.md 查看规范
品牌不存在：列出所有可用品牌，建议最相近的替代方案
网络问题：使用品牌注册表中的简要描述作为降级设计方向

快速参考：各品牌风格一句话描述

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    → 深色电影感 + 荧光绿 + 超细字重

space-brand-ui-design

Installation

Summary

Similar popular skills

Also in this package

Agent compatibility

Repository health

Skill metadata

Package contents

History

SKILL.md