DESIGN.md 品牌 UI 设计系统

问题背景

让 AI 写前端界面时，常见结果是「每个页面一套配色」：token 随手编、圆角和间距不统一，和真实产品视觉对不上。Figma 或 JSON 设计 token 能约束人类和工具链，但对纯对话式 Agent 往往太重，还要额外同步。

Google Stitch 提出的 DESIGN.md 把设计系统写成项目根目录里的一份 Markdown：和 AGENTS.md（教 Agent 怎么构建）并列，DESIGN.md 专门描述项目应该长什么样。Agent 读文档即可对齐色彩、字体、组件与布局，而不是凭印象猜。

技能如何工作

本技能围绕 npx getdesign@latest 与品牌目录（brand-catalog.md，66+ 品牌）组织 Agent 行为：

• 意图判断：用户点名品牌则直接安装；只描述风格（暗色科技感、支付风、数据仪表盘等）则按决策树推荐 2～3 个品牌并附风格说明；需求模糊则先问场景。
• 安装前约束：确认项目根路径；若已存在 DESIGN.md 须告知将被覆盖；同一项目禁止叠多套品牌文档。
• 安装后流程：读取根目录 DESIGN.md，按九章节结构（视觉基调、色板、字体、组件、布局、层级、Do's/Don'ts、响应式、Agent 参考）生成或改 UI。
• 生成硬规则：颜色、字号、间距等必须从文档提取的精确值使用，禁止编造 token；除非用户明确要求定制，不要擅自改已安装的 DESIGN.md。

适用边界

• 适合「要像 Stripe / Notion / Vercel 某类产品」或已有品牌倾向的界面生成与改版。
• 不适合在同一仓库混装多个品牌 DESIGN.md；也不适合在无文档时让 Agent 自由发挥视觉规范。
• npx 失败、品牌名拼写错误、或用户未确认覆盖已有文件时，应按技能中的错误处理流程停步并说明，而不是静默覆盖或猜测品牌。