---
name: design-system-builder
description: 从参考 UI 图片中提取设计系统，并生成可直接用于实现的 UI 设计提示词。当用户提供 UI 截图/设计稿并希望创建统一风格的设计、生成设计系统或构建与参考审美一致的 MVP 界面时使用。
---

# UI Designer

## 概述

本技能支持通过多步骤工作流，从参考 UI 图片中系统性地提取设计系统：分析视觉模式 → 生���设计系统文档 → 创建 PRD → 产出可直接用于实现的 UI 提示词。

## 何时使用

- 用户提供 UI 截图、设计稿或设计参考
- 需要从现有设计中提取调色板、排版、间距
- 希望从视觉示例生成设计系统文档
- 构建与参考审美风格一致的 MVP 界面
- 创建遵循统一设计原则的多个 UI 变体

## 工作流程

### 步骤 1：收集输入

向用户请求以下内容：
- **参考图片目录**：包含 UI 截图/设计稿的文件夹路径
- **项目构想文件**：描述产品概念和目标的文档
- **现有 PRD**（可选）：如果 PRD 已存在，则跳过步骤 3

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

**使用 Task 工具配合通用型子代理**，提供以下内容：

**提示模板**来自 `assets/design-system.md`：
- 分析调色板（主色、辅色、强调色、功能色）
- 提取排版信息（字族、字号、字重、行高）
- 识别组件样式（按钮、卡片、输入框、图标）
- 记录间距系统
- 记录动画/过渡模式
- 如果存在深色模式变体，一并包含

**将参考图片附加**到子代理上下文中。

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

**保存至**：`documents/designs/{图片目录名}_design_system.md`

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

**使用 Task 工具配合通用型子代理**，提供以下内容：

**提示模板**来自 `assets/app-overview-generator.md`：
- 将 `{项目背景}` 替换为项目构想文件中的内容
- 模板引导生成：电梯演讲、问题陈述、目标用户、独特卖点、功能列表、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/{构想文件名}_design_prompt_{时间戳}.md`

### 步骤 5：验证 React 环境

检查是否存在已有的 React 项目：
```bash
find . -name "package.json" -exec grep -l "react" {} \;
```

如果未找到，告知用户：
```bash
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 实现的成败
- 保留所有中间输出，便于迭代和完善