ac0f086821
- 完成 T-001A: 前端项目初始化 (Next.js 14 + TypeScript + Tailwind CSS) - 完成 T-001B: 后端项目初始化 (FastAPI + SQLAlchemy + asyncpg) - 完成 T-002: 数据库配置 (KolVideo 模型 + 索引 + 测试) - 完成 T-003: 基础 UI 框架 (Header/Footer 组件 + 品牌色系) - 完成 T-004: 环境变量配置 (前后端环境变量) Co-Authored-By: Claude <noreply@anthropic.com>
353 lines
13 KiB
Markdown
353 lines
13 KiB
Markdown
---
|
||
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 原型图**
|
||
- [ ] **原型图展示了完整的页面结构**
|
||
- [ ] **用户流程有流程图**
|
||
- [ ] 每个页面都有状态说明
|
||
- [ ] 组件清单完整
|
||
- [ ] 交互说明清晰
|
||
- [ ] 设计规范统一
|