메뉴
根据品牌名称从 getdesign.md 自动获取设计规范并生成匹配风格的 UI 代码。支持 62 个顶级品牌风格（苹果/Apple、Notion、Claude、Stripe 等），支持中英文品牌名、混搭风格。当用户提到"XX风格"、"做成XX的感觉"、"参考XX设计"时触发。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | space-brand-ui-design |
| description | 根据品牌名称从 getdesign.md 自动获取设计规范并生成匹配风格的 UI 代码。支持 62 个顶级品牌风格（苹果/Apple、Notion、Claude、Stripe 等），支持中英文品牌名、混搭风格。当用户提到"XX风格"、"做成XX的感觉"、"参考XX设计"时触发。 |
当用户提到某个品牌的设计风格，你需要：
npx getdesign@latest add <slug> 获取完整的 DESIGN.md 规范| 用户可能说的 | 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 | |
| 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 |
从用户的输入中识别品牌名称，对照上方注册表找到对应的 slug。
applenotionstripebmw, linear.app（多品牌混搭）如果品牌名无法识别，直接告知用户并列出可用品牌列表。
在终端运行以下命令（在临时目录中执行，避免污染用户项目）：
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。
从 DESIGN.md 中提取关键信息：
根据提取的设计规范，生成用户请求的 UI 代码（HTML/CSS/React/Vue 等）。
严格执行规范中的具体数值，不要自由发挥或用近似值替代。如果规范中写的是 rgba(0,0,0,0.95) 就不要用 #000000，如果字间距是 -2.125px 就不要四舍五入。
当用户要求混搭多个品牌风格时：
示例混搭逻辑：
#d97757 强调色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 → 深色电影感 + 荧光绿 + 超细字重
Generates professional slide deck images from content. Creates outlines with style instructions, generates individual slide images, and exports PPTX/PDF. Includes a brand design system mode using 60+ getdesign.md brand styles: auto-matches content to brand-inspired slide styles, recommends 5 matched styles plus 1 smart match, or uses an explicitly requested brand style. Use when user asks to "create slides", "make a presentation", "generate deck", "slide deck", "PPT", "design slide", "brand style PPT", or wants content turned into a designed presentation.
分析文章结构并批量生成AI配图，调用Gemini API为每个段落创建专业逻辑图/概念图。当用户说"批量配图"、"给文章配图"、"生成文章插图"、"为这篇文章配图"时触发。支持两种风格：简约手绘风和建筑蓝图编辑风。自动保存到Obsidian图片目录并插入文档。
创建专业、支持深色/浅色双主题切换的系统架构图，输出为独立的 HTML 文件（内含 SVG 图形）。当用户需要系统架构图、基础设施拓扑图、云架构可视化、安全架构图、网络拓扑图，或任何展示系统组件及其关系的技术图表时使用此技能。支持中文标注和说明，内置主题切换按钮。
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
AI 全能图表生成器（扩展版）。一键生成 35+ 种设计美观的图表 HTML 文件，涵盖技术架构、流程逻辑、业务战略、数据可视化、信息展示 5 大类别。支持 3 种内置视觉风格（黑白简约、深色暗调、Claude 暖色）+ 品牌风格扩展。 触发词："画个 XX 图"、"生成 XX 图"、"做个架构图/流程图/思维导图/时序图/甘特图/漏斗图/桑基图/用户旅程/商业模式画布/SWOT/竞品分析/产品路线图/组织架构/ER 图/C4 图/BPMN/状态机/决策树/泳道图/部署图/网络拓扑/威胁建模/价值链/OKR 树/韦恩图/热力图/KPI 看板/信息图/概念图"、"帮我可视化"、"XX 风格的图表"、"换成 XX 风格"。 当用户提供了一段描述并要求可视化、画图、生成图表时使用。当用户要求切换图表风格时也触发。
生成设计美观的图表 HTML 文件。支持 10 种图表类型：流程图、架构图、ER 图、商业模式画布、用户旅程图、思维导图、竞品分析图、SWOT 分析、产品路线图、组织架构图。支持 3 种内置视觉风格（黑白简约、深色暗调、Claude 暖色）+ 品牌风格扩展。 触发词："画个 XX 图"、"生成商业模式画布"、"做个架构图"、"画 ER 图"、"帮我画个流程图"、"生成用户旅程图"、"做个思维导图"、"竞品分析图"、"SWOT 分析图"、"产品路线图"、"组织架构图"、"商业模式画布"、"XX 风格的图表"、"帮我可视化"。 当用户提供了一段描述并要求可视化、画图、生成图表时使用。当用户要求切换图表风格时也触发。