| name | space-brand-ui-design |
| description | 根据品牌名称从 getdesign.md 自动获取设计规范并生成匹配风格的 UI 代码。支持 62 个顶级品牌风格（苹果/Apple、Notion、Claude、Stripe 等），支持中英文品牌名、混搭风格。当用户提到"XX风格"、"做成XX的感觉"、"参考XX设计"时触发。 |
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 → 深色电影感 + 荧光绿 + 超细字重
