TL;DR

• 总轮次：~25 轮 user feedback · ~50+ use_figma calls · ~3 MB Figma 节点变化
• 最终交付：1 PRD + Plan A (4 frames + 11 条 Design Rules) + Plan B 替代方案
• 规则回流：13 条新规则写入 TVU 设计真源
• 核心 insight：

架构决策一旦错，后续每一轮都返工成本累积
前 3 轮内确认对象 cardinality + 状态模型，能避开 60% 返工

1 · Session 概览

起点：bein sports 客户需要在 Video Sync 界面内直接看多 session 状态 + 实时差值

最终落地（Figma DtZcMkhNy6qh6jbQQnhreQ）：

• PRD spec section（5 卡片双语）
• Plan A mockup（4 frames + 双语 Design Rules 11 条）
• Plan B mockup（Switch alt 独立 section）

Process 产物：1 handoff doc · 1 pickup doc · 13 条新规则回流 · ~10 条 phase0-ledger

2 · 时间线（17 轮关键 feedback）

Gap 1 · 没在前 3 轮确认对象 cardinality

4 个 cardinality 错全部一轮一改：

• PP-to-Session：1:N（不是 per-session）— v0-v2 错 → LEFT panel 推翻
• Sessions 状态数：2 不是 5 — v0-v2 错 → 删一半视觉
• Parameters：per-session 不是 page-shared — v0-v3 错 → RIGHT panel 重做
• Sessions persistence：含历史不只 running — v0-v3.2 错 → OFF meta 重写

返工成本：~12 轮 use_figma calls
前置 5 个 cardinality 问题成本：0

回流 → M-CARDINALITY 起手必问 5 问题

Gap 2 · 没在画图前先做 IA 文本确认

实证：v0-v3 直接画 Figma，每轮看到画了才发现"不对"

第 8 轮 user 明确说：

"先用文本的方式呈现页面布局，确认后再去画图"

之后效率显著上升。

返工成本：前 8 轮所有 Figma 改动如先走 IA 文本确认，能减少 50%

回流 → M-IA-FIRST workflow（mockup skill 起手协议）

Gap 3 · 把 @TVU mockup skill 当 polish-pass

v0 anti-pattern 集合：

• 全 file-local Badge / Button / Tab / icon
• 全自造 hex（不在 TVU palette）
• Unicode → ↓ ↑ ✓ 当 icon 用

"v0 file-local OK，dev 阶段 swap" — 违反 M32 + 硬规则 #4

第 2 轮 user 直接点破。

返工成本：~6 轮 use_figma 重做全部视觉

回流 → M-FONT (textStyle grid) + M-TXT-ICON-AUDIT

Gap 4 · 没分析用户给的参考图就开始造

实证：User 给 Plan B Default + Standard Conversion 两张截图

我没结构化提取 layout contract（LEFT/RIGHT 分栏 / sub-header 模式 / page label 模式），自己造了 sub-header strip

第 4 轮 user 点破："统一布局没有 sub-header"

返工成本：sub-header 整段删 + 重建（~3 轮）

回流 → M37 / R18 Reference-image probe（5-row 强制 deliverable）

Gap 5 · 多页重复模块没抽 file-local component

实证：

• session row 模式在 M0/M1/M2/M3/M4/Plan B 6 帧重复 clone（非 instance）
• State Pill 反向实证：文件内既有 State Pill component，我自画 Badge 没看 → user 抓

潜在成本：6 帧 clone 后任何改动 ×6（BRAND swap、Tag swap、text swap）

回流 → M36 / R17 Multi-page reuse → file-local component → TVU promotion audit

给 UX / PM（提需求方）

(1) 起手 1 段话用 5 问题 brief AI

直接贴 PRD 后：cardinality / 状态数 / 持久化语义 / PP 切换行为

(2) PRD 用 "例如/e.g." 时显式说 "其中 X 和 Y 是 in-scope"

反例：R3 写 "例如：Syncing / In Progress / Done / Failed / Idle" → AI 当全 mandatory

(3) 给参考图同时说 "先 probe 提取布局合同再画"

(4) 大 redesign 先要 IA 文本提案再画

一句话指令能减少 前几轮 50% 返工

给 AI 协作流程

(5) 任何 mockup 任务起手 dispatch Opus 做架构推理

Opus 更能自审、跨文件回流、检测 cardinality 不一致

(6) 用户给 feedback 时 AI 必须先 probe → 反问 → 确认

反模式："好的我改" + 改错方向

(7) AI post-build 必须自走查 6 项 audit

Layout / Library / Font grid / Text-as-icon / Component reuse / Selected indicator

(8) 用户 pushback 要承认根因，不只 surface fix

修复同时反思根因 → 转化为可回流的规则（本 session 13 条规则全这样来）

给 PM / Stakeholder（review 方）

(9) 用 checklist review 而不是凭感觉

UX walkthrough + AI 走查共用 6 项 audit：

• [ ] 布局符合 §5.5（LEFT 1216 / RIGHT 680）
• [ ] 状态视觉一致（selected = 1-side left rail）
• [ ] Badge 文字跟 RIGHT 按钮语义对齐
• [ ] OFF rows 历史 meta 可见
• [ ] PRD 客户场景全覆盖
• [ ] 库合规（无 self-built Badge/Button/Icon/Color）

(10) PRD 加 "Out of scope" 显式枚举 — 避免 AI 把"PRD 没说的"当"PRD 没禁止"

13 条规则回流 · TVU 真源

已落 9 条

待回流 5 条：M-PRD-EG · M-CARDINALITY · M-IA-FIRST · Badge Extension 增补 · §5.5 reference 改

Model 选型推荐

Hybrid 最佳：Opus 做 plan owner（决策 + 回流），Sonnet subagent 做 executor

纯 Sonnet 推算：返工轮数 × token 反而更高

给团队的 3 个 Action Items

1. PRD 模板增 "架构 brief" 段

填 cardinality + state count + 持久化语义 → 直接节省 3-4 轮 AI 纠错

2. @TVU mockup skill 协议增起手 5 问题 + IA-first 选项

确保 AI 在大 redesign 默认走文本 IA 路径

3. TVU 库 maintainer 收集本 session 未抽出的 component 候选

session row pattern · Stream A/B column · Add session placeholder · Toast 自建 frame