Ui Requirements Doc

UI需求文档生成器

将需求文档或前端代码转换为结构化的UI需求文档，供UI设计师制作设计稿使用。

输入类型

类型A：需求文档输入

• PRD文档（产品需求文档）
• 功能规格书
• 业务需求描述
• 用户故事

类型B：前端代码输入

• Vue/React/Angular组件代码
• 页面模板文件
• 现有前端项目代码

输出内容

生成的UI需求文档包含以下核心部分：

1. 页面布局

• 整体布局结构（header、sidebar、main、footer）
• 区块划分和位置关系
• 响应式设计要求（如有）

2. 字段详情表

每个表单/列表/详情区域的字段规格：

字段类型枚举：

• 文本输入（单行/多行）
• 数字输入
• 下拉选择
• 单选/多选
• 日期选择
• 开关/切换
• 文件上传
• 富文本

3. 交互行为

• 按钮操作及触发条件
• 页面跳转逻辑
• 表单提交流程
• 数据刷新机制
• 状态切换说明

4. 弹窗/抽屉

• 触发方式（按钮点击、自动触发）
• 内容结构（标题、表单、按钮）
• 操作类型（确认、取消、关闭）
• 尺寸建议（宽度、高度）

5. 提示信息

• 成功/失败提示文案
• 确认对话框内容
• 空状态提示
• 加载状态提示
• 错误提示位置

工作流程

Phase 1：输入分析

需求文档分析： 1. 读取需求文档，识别页面清单 2. 提取每个页面的功能描述 3. 整理数据结构和字段信息 4. 梳理交互流程和业务规则

前端代码分析： 1. 识别页面组件结构 2. 提取表单字段定义 3. 分析事件处理逻辑 4. 解析弹窗/抽屉组件

Phase 2：页面清单确认

输出页面清单表格，等待用户确认：

页面类型：

• list：列表页（表格+搜索+操作）
• form：表单页（新建/编辑）
• detail：详情页（信息展示）
• dashboard：仪表盘（数据统计）

Phase 3：逐页生成文档

对每个页面生成详细的UI需求文档：

步骤： 1. 描述页面整体布局结构 2. 列出所有字段及其规格 3. 说明按钮和交互行为 4. 描述弹窗、抽屉、提示等元素 5. 添加设计建议（如有必要）

Phase 4：输出文档

生成Markdown格式的完整UI需求文档。

文档模板

# [页面名称] UI需求文档

## 1. 页面概述
**页面类型**：[list/form/detail/dashboard]
**用途说明**：[简述页面功能]
**入口路径**：[如何访问此页面]

---

## 2. 页面布局

### 2.1 整体结构
[描述页面整体布局，如：顶部导航+左侧筛选+右侧主内容区]

### 2.2 区块划分
| 区块名称 | 位置 | 内容说明 |
|---------|-----|---------|
| 搜索区 | 顶部 | 筛选条件输入 |
| 数据区 | 中央 | 表格数据展示 |
| 操作区 | 右侧 | 操作按钮列 |

---

## 3. 字段详情

### 3.1 搜索字段
| 字段名称 | 字段类型 | 是否必填 | 备注 |
|---------|---------|---------|------|

### 3.2 表格列/表单字段
| 字段名称 | 字段类型 | 是否必填 | 备注 |
|---------|---------|---------|------|

### 3.3 详情信息
| 信息项 | 展示方式 | 数据来源 |
|--------|---------|---------|

---

## 4. 交互行为

### 4.1 主要操作
| 操作名称 | 触发方式 | 结果说明 |
|---------|---------|---------|
| 新建 | 点击按钮 | 打开新建弹窗 |
| 编辑 | 点击操作列 | 打开编辑抽屉 |
| 删除 | 点击按钮 | 确认后删除 |

### 4.2 流程说明
[描述关键业务流程的用户操作步骤]

---

## 5. 弹窗/抽屉

### 5.1 [弹窗名称]
- **触发方式**：[如何打开]
- **尺寸建议**：[宽度x高度]
- **内容结构**：
  - 标题：[弹窗标题]
  - 字段：[列出字段]
  - 按钮：[确认/取消等]

### 5.2 [抽屉名称]
[同上格式]

---

## 6. 提示信息

### 6.1 操作反馈
- 成功提示：「操作成功」
- 失败提示：「操作失败，请重试」
- 删除确认：「确定删除该记录吗？删除后不可恢复」

### 6.2 状态提示
- 空数据：[空状态文案]
- 加载中：[加载提示]
- 错误：[错误提示]

输出目录

• 默认目录：workplace/{版本号}/prototypes
• 命名规则：ui-req-{页面名称}.md
• 汇总文档：ui-req-all.md（所有页面汇总）

设计建议补充

根据需要，可添加以下设计建议：

• 推荐的视觉风格（如卡片式、扁平化）
• 关键区域的视觉强调
• 操作按钮的优先级区分
• 响应式适配建议

约束说明

• 语言：中文
• 组件库：通用描述，不绑定特定UI库
• 格式：Markdown
• 受众：UI设计师
• 目标：可直接用于制作设计稿

执行检查点

• [ ] 页面清单是否完整？
• [ ] 布局结构是否清晰？
• [ ] 字段信息是否完整？
• [ ] 交互行为是否明确？
• [ ] 弹窗抽屉是否详细？
• [ ] 提示文案是否规范？