---
name: tvu-design-pipeline
description: TVU 需求→产品设计→交付 全流程编排器。唤醒词：@TVU 设计全流程 / @TVU 产品设计全流程 / @TVU 需求/产品设计全流程 / 走全套 / full design pass。一句话串起 用户体验地图 → IA 验证 → 全状态 mockup → UX 交付层(状态说明/流程连线/留白间距) → 设计走查 F1 → 角色测试 F2 → PRD+Jira 同步 → handoff gate。当单个 mockup 已无法示意完整用户流程、需要把所有状态 + 全套交付物一次做齐时触发。
---

# TVU 设计全流程编排 (Design Delivery Pipeline)

> 本 skill 只做 **trigger + 编排指路**，不复述规则内容；每个阶段的真源在对应 skill / conventions 内。任何细节冲突以那些真源为准。

## 触发词

`@TVU 设计全流程`（主）/ `@TVU 产品设计全流程` / `@TVU 需求/产品设计全流程` / `走全套` / `full design pass`

**适用**：需求/PRD 方向已明确，要把**完整用户流程的所有状态 mockup + 全套交付物**一次做齐 —— 即"单个 mockup 已经不能示意整条流程"的场景。

**不适用**：单状态微调（→ 直接 `tvu-design-mockup` US-5）、只做某一环（→ 直接调对应 skill）。

## 流水线（按序，每阶段调对应 skill；每阶段产出后 checkpoint 截图给用户）

| # | 阶段 | 调用 | 产出 / 门槛 |
|---|---|---|---|
| 0 | Intake | — | 收 PRD/Jira/方向 → 列**完整状态清单**（这条流程有哪几个状态/分支） |
| 1 | 用户体验地图 | `design-discovery` | journey map + IA + feature list + 数据可行性 audit |
| 2 | IA 验证 | `design-qa-loop` Phase 1 (F2-early) | 0 🔴 缺口、🟡 均有决策才进下一步 |
| 3 | 全状态 mockup | `tvu-design-mockup` | 所有状态同一 pattern；遵守全部 active M-* 规则；分批 build 每批 verify |
| 4 | UX 交付层 | `tvu-design-mockup`（M23 / M23.6 / M33） | 每态 **state-label 状态说明** + 状态间**流程连线箭头** + **Section 四周 120px 留白** + mockup 间距按布局规范足够开 |
| 5 | 设计走查 + 角色测试 | `design-qa-loop` Phase 2 (F1 auto-fix loop + F2-late) | F1 + F2-late 均 0 🔴 |
| 6 | PRD + Jira 同步 | — | 更新 Figma PRD spec card + Jira 评论（含需 PM/stakeholder 拍板项，醒目标注） |
| 7 | Handoff Gate | `design-qa-loop` | Dev Handoff checklist 全绿 |

## ⚠ 布局先行 (Layout-first — 硬规则，最易犯)

**Stage 3 摆第一张 frame 之前，先定整个 section 的流程版图**，不要把 mockup 挤成"建图方便"的紧凑网格、把 state-label/连线/间距推到 Stage 4 再补 —— 那样 Stage 4 必然要**重新挪位 + 返工连线**（本规则因反复返工而立）。

落第一张图前必须先定：
- **frame 按用户流程顺序排**（左→右 / 行进方向 = flow 方向），不是按建图顺序堆。
- **frame 之间预留连线间距**（足够画箭头 + trigger label，≥ ~200px），不是紧贴。
- **每张 frame 上方预留 state-label 位**（双语 UX 状态说明）。
- **Section 四周 120px 留白**。

即：Stage 3 就把版图按 Stage 4 的需要排好；Stage 4 只往**预留空位**填 label + 连线，**零挪位**。

## 起手协议

1. **先 load `tvu-design-mockup` 起手协议**（cwd 检查 / 环境健康 / 真源 library fileKey / catalog 轻索引 / ledger / task classify）—— 全流程同样受这些前置约束。
2. **M-DISCIPLINE**：起手即 TodoWrite 把上表 8 阶段物化成 checklist。
3. **布局先行**（见上）：Stage 3 摆 frame 即按 flow 版图（预留连线间距 + label 位 + 120px 留白）。
4. 按表逐阶段执行；状态多时**分批 build、每批 verify + 截图**。
5. 收尾走 `tvu-design-mockup` 的 wrap up（消费产品 handoff / 更新 `STATUS.md` / retrospect 触发判断 / AI-用户协作复盘）。

## 关键交付规范（本流程强制；具体编号/数值查 `mockup-conventions.md` 真源）

- **Section 四周留白 120px**；mockup 之间间距按布局规范（足够开，不要挤）。
- **每个状态都带 state-label 状态说明**；状态间画**流程连线**（Figma design 模式禁用 Connector 节点 → 用 Line / 箭头矢量 + trigger label）。
- mockup pattern 跨状态一致；UX 注释语言与产品 UI 语言隔离（M33）。
- 货币/单位等产品级显示规则以本任务 PRD + conventions 为准（如 token-as-currency：token 为主、cash-in 才出 $、足额 Confirm / 需付现 Pay Now 且 Total 转 $ 等）。

> **回流候选**：本流程引入的具体数值（Section 120px 留白、mockup 间距标准）若经多次验证稳定，回流到 `mockup-conventions.md` 作为 layout 硬规则（走 M-rule 编号或并入既有 umbrella）。