用途
design-system-builder 用于从参考 UI 图片中系统化地提取设计系统，并生成可直接用于实现的 UI 设计提示词。当用户提供 UI 截图、原型图或设计参考，希望提取配色、字体、间距等设计要素，或希望基于视觉示例生成设计系统文档、构建与参考风格一致的 MVP UI、按统一设计原则创建多个 UI 变体时，可使用该技能。
主要能力
该技能通过多步骤工作流完成工作：分析视觉模式 → 生成设计系统文档 → 创建 PRD → 产出可直接实现的 UI 提示词。
具体步骤包括：
-
收集输入：向用户索取参考图片目录（包含 UI 截图/原型图的文件夹路径）、项目想法文件（描述产品概念与目标的文档），以及可选的现有 PRD（若已有 PRD 则跳过第 3 步）。
-
从图片中提取设计系统：使用 Task 工具配合通用子代理，提供 assets/design-system.md 中的提示词模板，分析配色方案（主色、辅助色、强调色、功能色）、提取字体（字体族、字号、字重、行高）、识别组件样式（按钮、卡片、输入框、图标）、记录间距系统、记录动画/过渡模式，并在存在时包含深色模式变体。将参考图片附加到子代理上下文。输出为遵循模板格式的完整设计系统 markdown，保存至 documents/designs/{image_dir_name}_design_system.md。
-
生成 MVP PRD（若未提供）：使用 Task 工具配合通用子代理，提供 assets/app-overview-generator.md 中的提示词模板，将 {项目背景} 替换为项目想法文件的内容。模板引导完成：电梯演讲、问题陈述、目标受众、独特卖点、功能列表、UX/UI 考量。与用户交互以细化和澄清产品需求。输出为结构化 PRD markdown，作为第 4 步的变量保存（可选保存至 documents/prd/）。
-
组合最终 UI 实现提示词：使用 assets/vibe-design-template.md 将设计系统与 PRD 结合。替换 {项目设计指南} → 第 2 步的设计系统，{项目MVP PRD} → 第 3 步的 PRD 或提供的 PRD 文件。结果为完整、可直接实现的提示词，包含设计美学原则、项目专属配色/字体指南、应用概览与功能需求、实现任务（多个 UI 变体、组件结构）。保存至 documents/ux-design/{idea_file_name}design_prompt{timestamp}.md。
-
验证 React 环境：检查现有 React 项目，命令为：find . -name "package.json" -exec grep -l "react" {} ;。若未找到，告知用户执行：npx create-react-app my-app；cd my-app；npm install -D tailwindcss postcss autoprefixer；npx tailwindcss init -p；npm install lucide-react。
-
实现 UI：使用第 4 步组合的最终提示词在 React 项目中实现 UI。提示词指示创建多个设计变体（移动端 3 个，网页端 2 个），组织为独立组件：[solution-name]/pages/[page-name].jsx，并在展示页中汇总所有变体。
模板资源
- assets/design-system.md：用于提取视觉设计模式的模板，包含配色方案（主色、辅助色、强调色、功能色、背景色）、字体（字体族、字重、文本样式）、组件样式（按钮、卡片、输入框、图标）、间距系统（4dp-48dp 尺度）、动画（时长、缓动曲线）、深色模式变体等部分。
- assets/app-overview-generator.md：用于协作式 PRD 生成的模板，引导完成电梯演讲、问题陈述与目标受众、独特卖点、平台目标、带用户故事的功能列表、每个屏幕的 UX/UI 考量，设计用于与用户交互式细化需求。
- assets/vibe-design-template.md：结合设计系统与 PRD 的最终实现提示词模板，包含美学原则（极简主义、留白、色彩理论、字体层级）、实际需求（Tailwind CSS、Lucide 图标、响应式设计）、任务规格（多个变体、组件组织）。该模板产出的提示词无需进一步修改即可用于 UI 实现。
使用方式
用户提供参考图片目录（如 reference-images/saas-dashboard/，含 5 张截图）和项目想法文件（如 ideas/project-management-app.md）后，执行工作流：读取图片 → 使用 Task 工具与 design-system.md 模板分析图片 → 保存设计系统 → 使用 Task 工具与 app-overview-generator.md 结合项目概念 → 通过用户交互细化 PRD → 使用 vibe-design-template.md 组合设计系统与 PRD → 保存最终提示词 → 检查 React 环境并在需要时告知用户 → 使用最终提示词实现 UI。
适用场景
- 用户提供 UI 截图、原型图或设计参考
- 需要从现有设计中提取配色、字体、间距
- 希望从视觉示例生成设计系统文档
- 构建应与参考美学一致的 MVP UI
- 按统一设计原则创建多个 UI 变体
限制与注意事项
这是一个高自由度工作流，可根据上下文调整步骤。模板提供结构，但鼓励深入分析而非机械填充。PRD 生成期间的用户交互对质量至关重要。最终提示词质量直接影响 UI 实现效果。应保留所有中间输出以便迭代和细化。
最佳实践方面：图片分析时应先读取所有图片再开始分析，寻找跨多个屏幕的模式，记录显式样式（颜色、字体）与隐式原则（间距、层级），在参考中存在时捕获深色模式。设计系统提取应系统化覆盖所有模板部分，使用具体值（十六进制色码、px 尺寸）而非泛泛描述，在可推断时记录设计选择的“原因”，包含变体（悬停状态、禁用状态）。PRD 生成应交互式与用户澄清歧义，基于问题理解建议功能，确保 MVP 范围现实可行，记录每个屏幕/交互的 UX 考量。输出组织方面，设计系统应使用描述性文件名（基于图片目录名），最终提示词应带时间戳以便版本追踪，所有输出保存在 documents/ 目录下便于参考，保留中间输出以便迭代。