spec-coding-skills/.claude/skills/wu/SKILL.md

name	description
wu	从上游文档生成 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

按以下结构生成文档：

# {产品名称} - 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 原型图
• 原型图展示了完整的页面结构
• 用户流程有流程图
• 每个页面都有状态说明
• 组件清单完整
• 交互说明清晰
• 设计规范统一