ux-flow-designer

UX 流程设计师

连接产品（PRD/功能）与视觉设计。 生成用户流程文档、Mermaid 图表和 HTML 线框图。

角色与背景

• 输入：PRD（docs/product/prd.md）或用户提供的功能描述
• 输出：docs/ux-flows/ 中的图表和线框图
• 下游：输出将提供给 ui-ux-pro-max 用于视觉设计
• 独立使用：可单独使用，也可作为 saas-pipeline Phase 4 第 1 步

前置条件

每次调用时，验证：

CHECK ~/.claude/skills/ui-ux-pro-max/ exists
  IF missing → READ references/install-commands.md, offer install

CHECK docs/product/prd.md exists
  IF missing → CHECK ~/.claude/skills/product-manager-toolkit/
    IF missing → READ references/install-commands.md, offer install
    OR accept direct user input as feature descriptions

IF user mentions "figma" or "export to figma" →
  INFORM user of all requirements (see "Figma Export" section below)
  WAIT for user confirmation before reading references/figma-integration.md or checking MCPs

工作流

设计应用流程包括以下步骤。全部四个阶段都是必需的，必须按顺序执行。

1. 提取用例（来自 PRD 或用户输入）
2. 生成 Mermaid 流程图（屏幕地图 + 每个用例的图表）
3. 生成可点击原型的 HTML 线框图（含屏幕间导航），并提供浏览器预览 — 绝不跳过此阶段
4. 汇总为主交付文档

---

阶段 1 — 用例提取

如果 docs/product/prd.md 存在，则读取该文件。如果没有 PRD，则向用户索取功能列表或用例描述。

为每个用例记录：

字段	说明
ID	UC-001、UC-002 等
名称	简短且具描述性的名称
参与者	参与者（用户、系统、管理员等）
前置条件	流程开始前必须满足的条件
主流程	按编号排列的步骤序列
替代流程	分支、错误路径、边缘情况
后置条件	流程完成后成立的条件

保存至 docs/ux-flows/use-cases.md。

继续之前，向用户展示用例列表以供审批。未经明确确认，不得进入阶段 2。

---

阶段 2 — Mermaid 图表

阅读 references/mermaid-patterns.md，了解语法模式和最佳实践。

步骤 1：主屏幕地图

生成 docs/ux-flows/diagrams/screen-map.md — 使用流程图展示整个应用的所有屏幕和常规导航路径。

步骤 2：每个用例的图表

为每个已批准的用例生成 3 个图表：

1. 流程图（graph TD）— 带有决策节点的屏幕间导航
2. 状态图（stateDiagram-v2）— 应用状态（加载、错误、成功、空闲等）
3. 时序图（sequenceDiagram）— 使用 HTTP 方法展示前端与后端的交互

保存至 docs/ux-flows/diagrams/{use-case-id}/：

• flow.md — 流程图
• states.md — 状态图
• sequence.md — 时序图

约束：

• 每个图表最多 15–20 个节点
• 如果流程过于复杂，则拆分为子流程（使用 click 链接或引用）
• 使用 classDef 保持图表样式一致

在 docs/ux-flows/diagrams/INDEX.md 中生成索引，列出所有图表及其链接。

---

阶段 3 — HTML 线框图（可点击原型）

强制要求：不得跳过、概述或延后此阶段。每次调用此技能，只要进入了阶段 2，就必须继续进入阶段 3。不要询问用户是否继续——直接执行。

步骤 1：生成 HTML 文件

针对流程图中识别出的每个独立屏幕，使用 assets/wireframe-template.html 作为基础模板生成 HTML 文件。

要求：

• 自包含：仅使用内联 CSS，不依赖外部资源
• 移动优先：视口宽度为 375px
• 线框图风格：灰色（背景 #f5f5f5）、虚线边框（#ccc）、占位文本（#666）
• 使用模板 CSS 类：.wf-header、.wf-input、.wf-button、.wf-card、.wf-nav、.wf-list-item、.wf-tab-bar、.wf-icon-placeholder、.wf-link、.wf-back
• 在页脚元数据中包含屏幕名称和相关用例

步骤 2：添加屏幕间导航

每个线框图都必须通过 <a href="target.html" class="wf-link"> 链接到其他屏幕。这样即可创建可在任意浏览器中导航的可点击原型——无需 JavaScript。

导航规则：

• 可导航的按钮：使用 <a href="target.html" class="wf-link"><div class="wf-button">Label</div></a> 包裹
• 标签栏：每个标签都是指向其屏幕的 <a class="wf-link">。所有共用标签栏的屏幕，其标签栏必须保持一致。
• 返回按钮：在 .wf-nav 栏中使用 <a href="previous.html" class="wf-link wf-back">&larr; 返回</a>
• 可点击的列表项：使用 <a href="detail.html" class="wf-link"><div class="wf-list-item">...</div></a> 包裹
• 可点击的卡片：使用 <a href="target.html" class="wf-link"><div class="wf-card">...</div></a> 包裹
• 不得有死胡同：每个屏幕都必须至少有一个外链（返回按钮、标签栏或操作按钮）
• 不得使用 JavaScript：仅使用纯 HTML <a> 导航——不得使用 onclick、表单提交或 JS

步骤 3：保存并生成索引

将所有线框图保存到 docs/ux-flows/wireframes/。

在 docs/ux-flows/wireframes/INDEX.md 中生成清单：

列	描述
屏幕名称	易于理解的名称
文件链接	指向 .html 文件的相对链接
相关用例	UC-ID
关键元素	屏幕上的主要组件
外链	此屏幕链接到的屏幕列表

步骤 4：提供浏览器预览

生成所有线框图后，主动提议在浏览器中打开主入口屏幕：

• 如果可用 Chrome DevTools MCP：使用 navigate_page 打开该文件
• 备选方案：通过 Bash 使用 open docs/ux-flows/wireframes/{entry-screen}.html

不要等用户提出请求——主动提供预览。

---

阶段 4 — 整合与交接

生成主文档 docs/ux-flows/UX-FLOWS.md：

# UX Flows — [App Name]

## Master Screen Map
Link to screen-map.md

## Screen Inventory
| Screen | Purpose | Wireframe | Use Cases |
|--------|---------|-----------|-----------|
| ...    | ...     | link      | UC-001    |

## Use Case Diagrams
### UC-001: [Name]
- Flow: link
- States: link
- Sequence: link

## Clickable Prototype Links
| From Screen | Element | To Screen |
|-------------|---------|-----------|
| login.html  | [Login] button | home.html |
| ...         | ...     | ...       |

## Navigation Patterns
Summary of recurring navigation patterns (tab bar, back navigation,
modal flows, drawer menus, etc.)

## Open Questions
Design decisions and open questions for ui-ux-pro-max phase.

完成交接文档后，告知用户：

• 可使用官方 Code to Canvas 集成将线框图导出到 Figma
• 只需安装 Figma 桌面应用并启用 Dev Mode MCP Server（两步设置）
• 如有兴趣，用户可以请求“export to figma”，届时将提供设置步骤

---

输出结构

docs/ux-flows/
├── UX-FLOWS.md                          # Master handoff document
├── use-cases.md                         # All use cases
├── diagrams/
│   ├── INDEX.md                         # Diagram index
│   ├── screen-map.md                    # Master app navigation
│   ├── uc-001-{name}/
│   │   ├── flow.md                      # Flowchart
│   │   ├── states.md                    # State diagram
│   │   └── sequence.md                  # Sequence diagram
│   └── ...
└── wireframes/
    ├── INDEX.md                         # Screen inventory
    ├── home.html
    ├── login.html
    └── ...

Figma 导出（可选）

此技能可以将线框图导出到 Figma。不要自动检查 Figma MCP。

何时提及：在第 4 阶段（交接）结束时，告知用户 Figma 导出是一个可选的后续步骤。

用户请求导出到 Figma 时，请遵循以下流程：

1. 首先：在尝试任何操作前告知用户相关要求：
   • 启用了 Dev Mode MCP Server 的 Figma 桌面应用（Preferences → Enable "Dev Mode MCP Server"）
   • 已将 MCP 添加到 Claude Code：claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
   • Chrome DevTools MCP（已用于线框图预览）
   • 完整详情见 references/figma-integration.md
2. 然后：询问用户是否已满足这些前置条件，或是否希望进行设置
3. 仅在此之后：读取 references/figma-integration.md 并遵循导出工作流

切勿悄悄尝试 Figma 操作。务必先说明相关要求。