pdlc-ui-designlisted
Install: claude install-skill kanfu-panda/pdlc-skills
# UI/UX 设计
<!-- @include templates/prompts/iron-law.md -->
根据需求文档，生成 UI/UX 设计方案，包含页面布局、交互流程、组件规范。
## PDLC 前置检查（必须执行，不可跳过）
1. 从用户输入中提取功能名称关键词
2. 在 `docs/01_requirements/prd/` 目录下搜索包含该关键词的 PRD 文档
- 匹配新格式：`F<日期>-<NN>-*<关键词>*-prd.md`
- 匹配旧格式：`YYYYMMDD-*<关键词>*-prd.md`
- 同时检查文件内容中是否包含该关键词
3. **未找到** → 输出以下信息后**立即停止，不继续执行**：
```
⛔ PDLC 守卫：未找到与「<功能名>」相关的 PRD 文档。
UI 设计必须基于已有的 PRD。请先运行：
👉 /pdlc-prd <需求描述>
```
4. **找到** → 提取功能ID（如 `F20260326-01`），读取该 PRD 内容，继续执行
## 工作流程
1. **阅读需求**: 阅读找到的 PRD 文档
2. **分析用户旅程**: 梳理核心用户操作路径，绘制用户旅程图
3. **页面结构设计**: 为每个页面输出 ASCII 线框图（Wireframe）
4. **交互流程设计**: 描述页面间跳转逻辑、状态变化
5. **组件清单**: 列出所需的 UI 组件及其属性
6. **输出设计文档**: 在 `docs/02_design/ui-ux/` 下创建 UI 设计文档
## 文档内容
- **文件名格式**: `<功能ID>-<功能名>-ui.md`（如 `F20260326-01-user-auth-ui.md`）
- 若 PRD 为旧格式无功能ID，则使用旧格式 `YYYYMMDD-<功能名>-ui.md`
- **文档顶部必须包含 PDLC 追溯头**：
```
<!-- PDLC-TRACE -->
<!-- 功能ID: F20260326-01 -->
<!-- 功能名称: user-auth -->
<!-- 阶段: 设计 -->
<!-- 前置文档: docs/01_requirements/prd/F20260326-01-user-auth-prd.md -->
```
- 页面列表与层级关系
- 每个页面的 ASCII 线框图
- 交互状态说明（加载中、空状态、错误状态、成功状态）
- 响应式适配方案（如需要）
- 组件复用清单（标注哪些组件可复用已有组件）
## 线框图示例格式
```
┌─────────────────────────────────┐
│ 顶部导航栏 [用户头像] │
├─────────────────────────────────┤
│ 侧边栏 │ 主内容区域 │
│ ┌─────┐ │ ┌──────────────┐ │
│ │菜单1│ │ │ 表格/列表 │ │
│ │菜单2│ │ │ │ │
│ │菜单3│ │ └──────────────┘ │
│ └─────┘ │ [分页器] │
├─────────────────────────────────┤
│ 底部信息栏