--- marp: true theme: tvu-dark paginate: true size: 16:9 header: 'Video Sync Mockup 复盘 · 2026-05-19 → 05-20' footer: 'Nancy Zeng × Claude Opus 4.7 · 内部分享' --- # Video Sync Multi-Session Mockup ## 复盘：AI × UX 协作真实过程 **Nancy Zeng** · UX Designer **Claude Opus 4.7** · AI 协作伙伴 2026-05-20 --- ## 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） | 轮 | 关键 feedback | 触发改动 | |---|---|---| | 2 | "你这是 TVU 规范吗？" | v0 全 file-local 暴露 → 推翻重做 | | 4 | "没参考 Micro Apps 布局" | LEFT/RIGHT 硬规则 §5.5 + 删 sub-header | | 5 | "状态只 2 个不是 5 个" | 5-state → ON/OFF | | 6 | "Parameters 应该 per-session" | RIGHT panel header BRAND 绑定 | | 7 | "之前的任务没看到" | OFF rows 加历史 meta | | 9 | 7 项 batch | 一轮做全 + 200+ 节点改动 | | 13 | "ON/OFF 还是太像按钮" | Badge → State Pill | | 17 | "你自查走查过吗？" | 触发 design walkthrough | --- # Top 5 Process Gap ## 按返工成本排序 --- ## 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 --- # 高效对话 10 条建议 ## 给 UX · AI · Review 三方 --- ## 给 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 条** | 类 | 规则 | |---|---| | Figma 技术 | Q9 / Q10 / Q11 / Q12 | | Mockup 约定 | M36 / M37 / M38 / M-FONT / M-TXT-ICON-AUDIT | | Code 镜像 | R17 / R18 / R19 | **⏳ 待回流 5 条**：`M-PRD-EG` · `M-CARDINALITY` · `M-IA-FIRST` · Badge Extension 增补 · §5.5 reference 改 --- ## Model 选型推荐 | 模型 | 适合场景 | |---|---| | **Opus 4.7** | 主对话 / 架构推理 / 自审 / 多轮 pushback / 跨文件回流 | | **Sonnet 4.6** | 执行 batch 改动（已 plan）/ probe / 简单 swap | | **Haiku 4.5** | probe / 简单查询（不适合主对话） | **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 --- # Thank You **完整复盘文档** `docs/retrospects/2026-05-20-video-sync-mockup-retrospect-internal-share.md` **真源规则** `tvu-design-system` repo · mockup-conventions.md · code-conventions.md · figma-technical-reference.md **反馈 / 讨论** Nancy Zeng (TVU UX team)