/pdlc-ui-design

name: pdlc-ui-design
description: UI/UX 设计
argument-hint: <功能描述 | 页面名>
allowed-tools: Read, Write, Edit, Glob, Grep, Bash
layer: 3
stage: design
produces:
  - docs/02_design/ui-ux/**
requires: []
next_step: null
terminal_state: null

UI/UX 设计

<!-- @include templates/prompts/iron-law.md -->

根据需求文档，生成 UI/UX 设计方案，包含页面布局、交互流程、组件规范。

PDLC 前置检查（必须执行，不可跳过）

1. 从用户输入中提取功能名称关键词 2. 在 `docs/01_requirements/prd/` 目录下搜索包含该关键词的 PRD 文档

• 匹配新格式：`F<日期>-<编号>-*<关键词>*-prd.md`
• 匹配旧格式：`YYYYMMDD-*<关键词>*-prd.md`
• 同时检查文件内容中是否包含该关键词

3. **未找到** → 输出以下信息后**立即停止，不继续执行**：

   ⛔ PDLC 守卫：未找到与「<功能名>」相关的 PRD 文档。
   UI 设计必须基于已有的 PRD。请先运行：
   👉 /pdlc-prd <需求描述>

4. **找到** → 提取功能ID（如 `F20260326-090000`），读取该 PRD 内容，继续执行

工作流程

1. **阅读需求**: 阅读找到的 PRD 文档 2. **分析用户旅程**: 梳理核心用户操作路径，绘制用户旅程图 3. **页面结构设计**: 为每个页面输出 ASCII 线框图（Wireframe） 4. **交互流程设计**: 描述页面间跳转逻辑、状态变化 5. **组件清单**: 列出所需的 UI 组件及其属性 6. **输出设计文档**: 在 `docs/02_design/ui-ux/` 下创建 UI 设计文档

文档内容

• **文件名格式**: `<功能ID>-<功能名>-ui.md`（如 `F20260326-090000-user-auth-ui.md`）
• 若 PRD 为旧格式无功能ID，则使用旧格式 `YYYYMMDD-<功能名>-ui.md`
• **文档顶部必须包含 PDLC 追溯头**：

  <!-- PDLC-TRACE -->
  <!-- 功能ID: F20260326-090000 -->
  <!-- 功能名称: user-auth -->
  <!-- 阶段: 设计 -->
  <!-- 前置文档: docs/01_requirements/prd/F20260326-090000-user-auth-prd.md -->

• 页面列表与层级关系
• 每个页面的 ASCII 线框图
• 交互状态说明（加载中、空状态、错误状态、成功状态）
• 响应式适配方案（如需要）
• 组件复用清单（标注哪些组件可复用已有组件）

线框图示例格式

┌─────────────────────────────────┐
│  顶部导航栏          [用户头像]  │
├─────────────────────────────────┤
│  侧边栏  │   主内容区域          │
│  ┌─────┐ │   ┌──────────────┐   │
│  │菜单1│ │   │  表格/列表    │   │
│  │菜单2│ │   │              │   │
│  │菜单3│ │   └──────────────┘   │
│  └─────┘ │   [分页器]           │
├─────────────────────────────────┤
│  底部信息栏                      │
└─────────────────────────────────┘

要求

<!-- @include templates/prompts/output-language.md -->

• 每个页面必须考虑 4 种状态：正常、加载中、空数据、异常
• 标注交互细节：按钮点击后的反馈、表单校验时机、确认弹窗等
• 如果是前端应用，同步在 `frontend/<分类>/<应用名>/docs/` 下放一份副本

设计目标: $ARGUMENTS

<!-- @include templates/prompts/handoff.md -->

**本命令的 handoff 输出：**

✅ UI/UX 设计文档 完成
📦 产出：docs/02_design/ui-ux/<功能ID>-<功能名>-ui.md
👉 下一步：（本次流程结束，无后续）