design-system-builder

UI 设计师

概述

此技能通过多步骤工作流，从 UI 参考图像中系统地提取设计系统：分析视觉模式 → 生成设计系统文档 → 创建 PRD → 编写可直接用于实现的 UI 提示词。

使用场景

• 用户提供 UI 截图、模型图或设计参考
• 需要从现有设计中提取调色板、字体排版和间距
• 希望根据视觉示例生成设计系统文档
• 构建的 MVP UI 需要符合参考设计的美学风格
• 创建多个遵循一致设计原则的 UI 变体

工作流

步骤 1：收集输入

向用户请求：

• 参考图像目录：包含 UI 截图/模型图的文件夹路径
• 项目构想文件：描述产品概念和目标的文档
• 现有 PRD（可选）：如果已有 PRD，则跳过步骤 3

步骤 2：从图像中提取设计系统

使用 Task 工具和通用子 Agent，并提供：

来自 assets/design-system.md 的提示词模板：

• 分析调色板（主色、次要色、强调色、功能色）
• 提取字体排版（字体系列、字号、字重、行高）
• 识别组件样式（按钮、卡片、输入框、图标）
• 记录间距系统
• 记录动画/过渡效果模式
• 如有深色模式，请一并纳入其变体

将参考图像附加到子 Agent 上下文中。

输出：遵循模板格式的完整设计系统 Markdown 文档

保存到：documents/designs/{image_dir_name}_design_system.md

步骤 3：生成 MVP PRD（如果尚未提供）

使用 Task 工具和通用子 Agent，并提供：

来自 assets/app-overview-generator.md 的提示词模板：

• 将 {项目背景} 替换为项目构想文件中的内容
• 模板将引导完成：电梯推介、问题陈述、目标受众、USP、功能列表和 UX/UI 考量

与用户互动，完善并明确产品需求

输出：结构化的 PRD Markdown 文档

保存为变量，供步骤 4 使用（也可选择保存到 documents/prd/）

步骤 4：编写最终 UI 实现提示词

使用 assets/vibe-design-template.md 合并设计系统和 PRD：

替换项：

• {项目设计指南} → 步骤 2 中的设计系统
• {项目MVP PRD} → 步骤 3 中的 PRD 或用户提供的 PRD 文件

结果：完整且可直接用于实现的提示词，包含：

• 设计美学原则
• 项目专属的颜色/字体排版指南
• 应用概述和功能需求
• 实现任务（多个 UI 变体、组件结构）

保存到：documents/ux-design/{idea_file_name}_design_prompt_{timestamp}.md

步骤 5：验证 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

步骤 6：实现 UI

使用步骤 4 编写的最终提示词，在 React 项目中实现 UI。

提示词要求：

• 创建多个设计变体（移动端 3 个，Web 端 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 实现，无需进一步修改。

最佳实践

图像分析

• 开始分析前先阅读所有图像
• 查找多个屏幕之间的模式
• 记录明确的样式（颜色、字体）和隐含原则（间距、层级）
• 如果参考图中有深色模式，也要记录

设计系统提取

• 系统化地覆盖模板中的所有部分
• 使用具体数值（十六进制色值、px 尺寸），不要使用笼统描述
• 在可以推断时，记录设计选择背后的原因
• 包含各种状态（悬停状态、禁用状态）

PRD 生成

• 与用户互动，澄清模糊之处
• 根据对问题的理解提出功能建议
• 确保 MVP 的范围切实可行
• 记录每个屏幕/交互的 UX 考量

输出整理

• 使用描述性文件名保存设计系统（根据图像目录名称命名）
• 使用时间戳保存最终提示词，以便追踪版本
• 将所有输出保存在 documents/ 目录中，方便查阅
• 保留所有中间输出，以便迭代

示例用法

用户提供：

• reference-images/saas-dashboard/（5 张屏幕截图）
• ideas/project-management-app.md（项目构想）

执行工作流：

1. 阅读 reference-images/saas-dashboard/ 中的 5 张图像
2. 使用 Task 工具 → design-system.md 模板 → 分析图像
3. 保存到 documents/designs/saas-dashboard_design_system.md
4. 使用 Task 工具 → app-overview-generator.md 和项目构想
5. 通过与用户互动来完善 PRD
6. 使用 vibe-design-template.md 整合设计系统与 PRD
7. 保存到 documents/ux-design/project-management-app_design_prompt_20251025_153000.md
8. 检查 React 环境；如果需要配置，告知用户
9. 使用最终提示词实现 UI

说明

• 这是一个自由度很高的工作流，可根据具体情况调整步骤
• 模板提供了结构，但鼓励深入分析，而非机械填充
• 在生成 PRD 时与用户互动，对质量至关重要
• 最终提示词的质量会直接影响 UI 实现效果
• 保留所有中间输出，以便迭代和优化