ux-design — UX 规范编写

技能目的

为指定界面编写 UX 规范，使用模板引导式定义布局区域、界面状态、事件流与交互模式，确保界面设计有据可依且与 SRS 需求对齐。

参数说明

• [界面名]：目标界面名称，例如"登录页"、"仪表盘"、"设置面板"。

分阶段工作流

阶段 1：读取 SRS 并识别界面

• 输入：界面名参数
• 处理：
  1. 使用 Read 读取 docs/product-concept.md 获取产品上下文
  2. 使用 Glob 扫描 docs/srs/*.md 查找引用该界面的 SRS
  3. 使用 Read 读取相关 SRS 的用户故事与界面需求
  4. 使用 Glob 查找 .claude/docs/templates/ux-spec.md 模板
• 输出：界面需求集合 + 模板

阶段 2：定义布局区域

• 输入：界面需求集合
• 处理：
  1. 通过 AskUserQuestion 与用户讨论界面整体布局
  2. 定义主要区域（导航、内容、侧边栏、页脚等）
  3. 标注各区域的功能职责与响应式断点行为
  4. 定义区域间的层级与视觉权重
• 输出：布局区域定义

阶段 3：定义界面状态

• 输入：布局区域定义
• 处理：
  1. 定义每个区域的状态（空状态、加载中、已加载、错误、成功）
  2. 定义界面级状态切换条件
  3. 标注状态切换时的视觉反馈
• 输出：界面状态矩阵

阶段 4：定义事件流

• 输入：界面状态矩阵
• 处理：
  1. 为每个用户操作定义事件触发顺序
  2. 标注事件涉及的组件、服务调用、状态变更
  3. 定义异常事件处理流程
  4. 使用 AskUserQuestion 确认关键交互流程
• 输出：事件流定义

阶段 5：定义交互模式

• 输入：事件流定义
• 处理：
  1. 定义键盘导航支持
  2. 定义手势/触控交互
  3. 定义无障碍交互模式（ARIA、焦点管理）
  4. 引用设计系统规范中的组件与令牌
• 输出：交互模式定义

阶段 6：写入文件

• 输入：全部规范内容
• 处理：
  1. 基于模板填充各章节，向用户展示草稿
  2. 批准后使用 Write 写入 docs/design/ux/{界面名}.md
• 输出：UX 规范文件

协作协议引用

• 遵循 .claude/docs/templates/collaborative-protocols/design-agent-protocol.md 设计文档规范
• 参考 .claude/docs/templates/ux-spec.md 模板
• 引用 docs/design/design-system-spec.md 中的令牌与组件

推荐下一步

使用 /ux-review 验证 UX 规范的无障碍性与 SRS 对齐度。继续为其他界面编写 UX 规范。完成后进入 /api-spec 定义后端 API。