--- name: wu description: 从上游文档生成 UIDesign.md，覆盖所有用户界面设计。 --- # Write UIDesign > **文档定位**：UIDesign 是「界面蓝图」文档，用 ASCII 原型图精确传达页面布局、组件结构、交互流程，是前端开发的直接参考。 当用户调用 `/wu` 时，执行以下步骤： ## 1. 读取源文档 读取以下文件： 1. `doc/RequirementsDoc.md` - 必须存在 2. `doc/PRD.md` - 必须存在 3. `doc/FeatureSummary.md` - 必须存在 4. `doc/DevelopmentPlan.md` - 必须存在 如果文件不存在，提示用户： > 缺少上游文档，请确保所有上游文档存在。 如果已存在 `doc/UIDesign.md`，同时读取作为参考（保持风格一致）。 ## 2. 分析 UI 需求 从上游文档中提取以下信息： ### 2.1 页面需求 - 从 PRD 用户旅程分析所需页面 - 从 FeatureSummary 获取功能对应的界面 - 从 DevelopmentPlan 获取技术实现约束 ### 2.2 用户流程 - 主要用户旅程 - 页面跳转关系 - 交互流程 ## 3. 生成 UIDesign 按以下结构生成文档： ```markdown # {产品名称} - UI 设计文档 ## 文档信息 | 项目 | 内容 | |------|------| | 版本 | v1.0 | | 创建日期 | {YYYY-MM-DD} | | 来源文档 | DevelopmentPlan.md | ## 1. 设计概述 ### 1.1 设计原则 {UI 设计原则和规范} ### 1.2 页面总览 | 页面ID | 页面名称 | 描述 | 对应功能 | 优先级 | |--------|----------|------|----------|--------| | P-001 | {页面名} | {描述} | F-001 | P0 | ### 1.3 页面导航图 **【必须】使用导航图展示页面跳转关系：** ``` ┌─────────────┐ │ 首页 │ │ P-001 │ └──────┬──────┘ │ ┌───────────────┼───────────────┐ │ │ │ ▼ ▼ ▼ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ 功能A页 │ │ 功能B页 │ │ 设置页 │ │ P-002 │ │ P-003 │ │ P-004 │ └──────┬──────┘ └─────────────┘ └─────────────┘ │ ▼ ┌─────────────┐ │ 详情页 │ │ P-005 │ └─────────────┘ ``` ## 2. 页面设计 ### 2.1 P-001: {页面名称} **页面信息** | 属性 | 值 | |------|-----| | 页面ID | P-001 | | 对应功能 | F-001, F-002 | | 入口 | {从哪些页面可进入} | | 出口 | {可跳转到哪些页面} | **【必须】页面布局 - ASCII 原型图** ``` ┌────────────────────────────────────────────────────────┐ │ ┌─────────────────────────────────────────────────┐ │ │ │ Header │ │ │ │ [Logo] [Nav Item] [Nav Item] [用户]│ │ │ └─────────────────────────────────────────────────┘ │ ├────────────────────────────────────────────────────────┤ │ │ │ ┌──────────────────┐ ┌───────────────────────────┐ │ │ │ │ │ │ │ │ │ Sidebar │ │ Main Content │ │ │ │ │ │ │ │ │ │ • Menu Item 1 │ │ ┌─────────────────────┐ │ │ │ │ • Menu Item 2 │ │ │ Card 1 │ │ │ │ │ • Menu Item 3 │ │ │ [Title] │ │ │ │ │ │ │ │ [Description...] │ │ │ │ │ │ │ │ [Action Button] │ │ │ │ │ │ │ └─────────────────────┘ │ │ │ │ │ │ │ │ │ │ │ │ ┌─────────────────────┐ │ │ │ │ │ │ │ Card 2 │ │ │ │ │ │ │ └─────────────────────┘ │ │ │ │ │ │ │ │ │ └──────────────────┘ └───────────────────────────┘ │ │ │ ├────────────────────────────────────────────────────────┤ │ ┌─────────────────────────────────────────────────┐ │ │ │ Footer │ │ │ └─────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────┘ ``` **组件清单** | 组件ID | 组件名称 | 类型 | 说明 | 交互 | |--------|----------|------|------|------| | C-001 | Header | 导航栏 | 顶部固定 | 点击 Logo 回首页 | | C-002 | Sidebar | 侧边栏 | 左侧固定 | 点击菜单切换内容 | | C-003 | Card | 卡片 | 内容展示 | 点击进入详情 | **交互说明** | 触发 | 动作 | 结果 | |------|------|------| | 点击 Card | 跳转 | 进入详情页 P-005 | | 点击 Menu Item | 切换 | 更新 Main Content | **页面状态** | 状态 | 说明 | 展示 | |------|------|------| | 默认 | 正常加载完成 | 显示数据列表 | | 加载中 | 数据请求中 | 骨架屏/Loading | | 空状态 | 无数据 | 空状态插图+引导文案 | | 错误 | 请求失败 | 错误提示+重试按钮 | **空状态原型** ``` ┌─────────────────────────────────────┐ │ │ │ ┌─────────────┐ │ │ │ (空图标) │ │ │ └─────────────┘ │ │ │ │ 暂无数据 │ │ │ │ [去添加数据] │ │ │ └─────────────────────────────────────┘ ``` {重复以上结构覆盖所有页面} ## 3. 用户流程 ### 3.1 {流程名称} **【必须】使用流程图展示用户操作流程：** ``` ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ Step 1 │ ──▶ │ Step 2 │ ──▶ │ Step 3 │ ──▶ │ 完成 │ │ {操作} │ │ {操作} │ │ {操作} │ │ │ │ P-001 │ │ P-002 │ │ P-003 │ │ P-004 │ └─────────┘ └────┬────┘ └─────────┘ └─────────┘ │ ▼ 取消 ┌─────────┐ │ 返回 │ │ P-001 │ └─────────┘ ``` **流程步骤** | 步骤 | 页面 | 用户操作 | 系统响应 | |------|------|----------|----------| | 1 | P-001 | {操作} | {响应} | | 2 | P-002 | {操作} | {响应} | ## 4. 组件规范 ### 4.1 基础组件 **Button 按钮** ``` 主按钮: ┌──────────────┐ │ 确认提交 │ (填充色背景) └──────────────┘ 次按钮: ┌──────────────┐ │ 取消 │ (边框样式) └──────────────┘ 禁用态: ┌──────────────┐ │ 不可点击 │ (灰色) └──────────────┘ ``` **Input 输入框** ``` 默认态: ┌────────────────────────┐ │ 请输入... │ └────────────────────────┘ 聚焦态: ┌────────────────────────┐ │ 输入内容 │ (高亮边框) └────────────────────────┘ 错误态: ┌────────────────────────┐ │ 错误输入 │ (红色边框) └────────────────────────┘ ⚠ 错误提示信息 ``` ### 4.2 业务组件 {项目特有的业务组件} ## 5. 设计规范 ### 5.1 色彩规范 | 用途 | 色值 | 示例 | |------|------|------| | 主色 | #1890FF | 主按钮、链接 | | 成功 | #52C41A | 成功提示 | | 警告 | #FAAD14 | 警告提示 | | 错误 | #FF4D4F | 错误提示 | | 文字主色 | #262626 | 标题 | | 文字次色 | #8C8C8C | 描述 | ### 5.2 字体规范 | 用途 | 字号 | 字重 | |------|------|------| | 大标题 | 24px | Bold | | 标题 | 18px | Medium | | 正文 | 14px | Regular | | 辅助文字 | 12px | Regular | ### 5.3 间距规范 | 间距 | 值 | 用途 | |------|-----|------| | xs | 4px | 紧凑间距 | | sm | 8px | 小间距 | | md | 16px | 标准间距 | | lg | 24px | 大间距 | | xl | 32px | 特大间距 | ### 5.4 响应式断点 | 断点 | 宽度 | 布局说明 | |------|------|----------| | Mobile | < 768px | 单栏布局 | | Tablet | 768px - 1024px | 双栏布局 | | Desktop | > 1024px | 多栏布局 | ``` ## 4. 保存文档 将生成的 UIDesign 保存到 `doc/UIDesign.md`。 如果文件已存在，覆盖原文件（历史版本通过 git 追溯）。 ## 5. 输出摘要 向用户展示生成摘要： - UIDesign 文件路径 - 页面数量 - 用户流程数量 - 建议的下一步操作（运行 `/ru` 评审） --- ## 可视化输出要求 UIDesign 作为「界面蓝图」文档，**必须大量使用 ASCII 原型图**： | 章节 | 可视化形式 | 必要性 | |------|------------|--------| | 1.3 页面导航图 | 导航关系图（ASCII） | **必须** | | 2.x 页面布局 | **ASCII 原型图** | **必须（每页）** | | 2.x 空状态 | ASCII 原型图 | 建议 | | 3.x 用户流程 | 流程图（ASCII） | **必须** | | 4.x 组件规范 | 组件示意图 | **必须** | **ASCII 原型图要求**： - 每个页面**必须**有完整的布局原型图 - 原型图要体现：页面结构、组件位置、内容区域 - 使用 `┌ ┐ └ ┘ ─ │ ├ ┤ ┬ ┴ ┼` 等字符绘制边框 - 使用 `[ ]` 表示按钮 - 使用 `▼ ▶ ◀ ▲` 表示方向/展开 - 关键交互点要标注 ## 注意事项 - UI 设计必须覆盖 DevelopmentPlan 所有功能模块 - **每个页面必须有 ASCII 原型图** - 页面设计要考虑各种状态（默认、加载、空、错误） - 交互说明要清晰具体 - 设计规范要统一一致 - 页面 ID 格式：P-xxx - 组件 ID 格式：C-xxx ## 质量检查 生成 UIDesign 后，自查以下项目： - [ ] 覆盖 DevelopmentPlan 所有功能模块 - [ ] **页面导航图清晰展示页面关系** - [ ] **每个页面都有 ASCII 原型图** - [ ] **原型图展示了完整的页面结构** - [ ] **用户流程有流程图** - [ ] 每个页面都有状态说明 - [ ] 组件清单完整 - [ ] 交互说明清晰 - [ ] 设计规范统一