--- marp: true theme: tvu-dark paginate: true size: 16:9 header: 'Video Sync Phase B 组件化 复盘 · 2026-05-26' footer: 'Nancy Zeng × Claude Opus 4.7 · 内部分享' --- # Video Sync Phase B ## AI × UX 协作复盘 ## 组件化 · Walkthrough · TVU DS 回流 **Nancy Zeng** · UX Designer **Claude Opus 4.7 (1M context)** · AI 协作伙伴 2026-05-26 --- ## TL;DR - **总轮次**：~45 轮 user feedback · 38+ `use_figma` calls · 12 处跨 3 文件回流 - **最终交付**：12-variant Session Row 组件集 + 11 个 frame (2×5 grid) + 11 条规则回流 TVU DS - **规则回流**：7 NEW + 4 mod 写入 TVU 真源 (commit `795bb2dc`) > **核心 insight**：规则 enforcement 是 5 偶然条件叠加 — **少一个就翻车**。今天拿对靠的是 MicroApps 多 session 积累，不是规则机制本身可靠。 --- ## 1 · Session 概览 **起点**："接 Video Sync Phase B" — PM cap=4 accordion 决策落地 **最终落地**： - 🎨 12-variant `Session Row` 组件集 (`4559:3148`) - 🎨 11 个 user-flow frame (M1-M10 + M-MultiExp) 按 2×5 reading-order grid - 📋 Design Rules card 14→18 条 - 🔀 M9 modal: 20% black scrim + blur 8 + TVU Notification 480×182 (user-validated) - 📚 TVU DS 11 处真源回流 **Process 产物**：3 篇 handoff · 1 篇 retrospect · memory 3 次更新 --- ## 2 · 时间线高光（精选 8 轮） | # | 用户原话 | 改动量 | |---|---|---| | 6 | "需要看看是不是有重叠和 Section 内容溢出的问题" | overflow audit 触发 | | 8 | "我把 Session 收起的高度手动调成 80px 了...你如何计算来的？" | 4 道追问 | | 9 | "M4 为什么没有 Add another sync Session 的入口？" | 补 Add row | | 10 | "为什么没有展示两个 Session 都一起展开的状态？" | 加 M-MultiExp | | 11 | "执行设计走查了吗？" | 触发 walkthrough | | 14 | "每个图之间的间距不够大...需要界限更清晰" | 重排 pitch 1280→1480 | | 15 | "M9 模拟用户真实看到的效果，只显示一个确认框" | 拆 dialog 重做 | | 18 | "另一个 consumer...没遵守 TVU DS 格式...你每次都拿对了" | 诊断 enforcement gap | 详细 20-row 时间线见长读版 MD。 --- # Top 5 Process Gap ## 按返工成本排序 --- ## Gap 1 · 缺「模拟真实用户态」sanity check **4 次同源违例**：M4 漏 Add CTA / M9 用 artifact 当用户态 / Frame 间距过挤 / Scrim 60% 太重 > "实际上只会有一个，应该模拟用户真实看到的效果" **返工**：4 use_figma + 用户 5 句关键纠正 + 1 条规则固化 **原因**：AI 把"按 spec 摆元素"等同"完成需求"，**没代入 user 视角再 check** **✅ 解决**： - **当下**：M4 + M9 + 间距 + scrim 4 处修复 - **长期**：每 user-flow frame 完成必跑 3 问 sanity check（user 看到稳定单态吗 / 入口齐吗 / 视觉权重对吗） - **真源**：✅ M41 (modal) + M16.1 (multi-state) + M-INTEGRITY I1.1 (grid pitch) --- ## Gap 2 · 漏主动 trigger walkthrough > "执行设计走查了吗？" **返工**：表面 0，深层 3 个 high 本该 in-flight 拦住却 ship 后才补 **原因**：`design-walkthrough` skill 触发是 opt-in，Phase-end 没强制 trigger 硬约束 **✅ 解决**： - **当下**：用户提示后立即跑 walkthrough + 修 3 highs - **长期**：skill 起手协议加 "Phase-End Gate" - **真源**：⏳ 待回流 `tvu-design-mockup/SKILL.md` 起手协议 --- ## Gap 3 · Clone Gate 盲点 > "A2 品牌色必须绑 var，已经有了规则，为什么还出现这个错误了？" **实证**：M0/M1 原 row stroke 是裸 hex → clone 5 anchors → 派生 12 variants → 全部继承 bug **返工**：1 use_figma 修 6 selected variants + 新增 M42 规则填盲区 **原因**：TVU 3 条 brand-color 规则**全部假设"写"前置 grep**，clone 不算"写" **✅ 解决**： - **当下**：6 selected variants stroke 全绑 `UX/Brand/Brand` - **长期**：clone() 起手必 probe 源元素 brand-color paint binding - **真源**：✅ M42 Clone Gate (NEW) + M-COLOR C1 扩 stroke wording + M21.1 派生 variant --- ## Gap 4 · Multi-state 缺 user override demo > "为什么没有展示两个 Session 都一起展开的状态？bein sports case 就需要 2 个 Sync 同时开" **实证**：原 spec §4.1 只列 default accordion (M5)，没列 user override 态 **返工**：3 use_figma 建 M-MultiExp + 重排 grid + 新增 M16.1 规则 **原因**：Spec writer 没意识到"规则默认态"vs"用户越权态"必须双覆盖 **✅ 解决**： - **当下**：加 M-MultiExp + 已有 M8 完成 default + override 双覆盖 - **长期**：含 state-machine 的 deliverable spec 必双覆盖 - **真源**：✅ M16.1 Multi-state spec mockup 双 frame 覆盖 --- ## Gap 5 · 跨 session enforcement 5 偶然叠加 > "为什么另一个 consumer 没遵守 TVU DS 格式？你每次都拿对了" **5 偶然条件**： 1. MicroApps 多 session memory 累积 2. handoff doc 链 3. Skill 在 plugin 4. 用户经常用唤醒词 5. Walkthrough audit 偶尔跑 **少 1 个就翻车**。 **✅ 解决**： - **长期**：把 enforcement 从 AI 自觉升级为强制 Gate - **真源**：⏳ 待回流 `setup-tvu-consumer` 默认生成 CLAUDE.md + skill Pre-Action Gate --- # 高效对话建议 ## ROI 排序 --- ## 给 UX / PM (提需求方) **(1) 明确说"模拟真实用户态"或"工作区物料"** - ✅ "M9 模拟用户真实看到的效果" - ❌ "M9 加个 dialog overlay"（歧义） **(2) 用 user 原话不要 AI paraphrase** - ✅ "看起来还是没有占满" - ❌ "row 内 vertical content density 不足"（AI 化术语漏 sanity check） **(3) Spec ≥3 例子的字段必声明 N** - "本期 in-scope: N 选 X"（呼应 M-PRD-EG） --- ## 给 AI 协作流程 **(4) Phase-end 必跑 walkthrough，不要等用户问** **(5) `clone()` 起手必 probe 源元素 brand-color paint binding** **(6) Multi-state spec 必双覆盖（default + override）** **(7) 规则盲点优先扩 wording 而非加新规则** - 14 候选中 4 条是扩现有规则，避免规则数量膨胀 --- ## 给 PM / Stakeholder (review 方) **(8) "user 态 vs artifact 态" checklist** - 看到一帧时先问 "这是 user 实际看到的吗，还是 design tool 的展示物料？" **(9) State-label 找 what + why + invariants 三段** - What (画了什么) + Why (业务场景需要) + Invariants (规则编号) - M23.7 规则化了 --- ## 规则回流 11 处 (commit `795bb2dc`) | 文件 | NEW | mod | |---|---|---| | `domain-tvu.md` | M10 / M11 | — | | `design-process.md` | M16.1 | M21.1 | | `mockup-conventions.md` | M39 / M40 / M41 / M42 | M-COLOR C1 / M38 / I1.1 / M23.7 | **亮点**： - **M42 Clone Gate** — 填规则盲点（"写"前置 grep 不 cover "clone propagate"） - **M-COLOR C1 扩 wording** — 从 "Icon path fill" → 所有 brand-color paint - **M41 含 user-validated 数值** — scrim 20% black + blur 8 + Notification 480×182 **⏳ 待回流（4 条）**：sanity check 3 问 / Phase-end walkthrough trigger / setup-tvu-consumer CLAUDE.md / skill Pre-Action Gate --- ## Model 选型实证 | 模型 | 本 session 起作用时刻 | |---|---| | **Opus 4.7** | 12 处跨 3 文件回流 / 5 偶然条件诊断 / Gap 1-5 抽象 | | **Sonnet 4.6** | `use_figma` 38+ 调用 / 节点 inspect / 11 frame 重排 | | **Haiku 4.5** | 不适合主对话 | **Hybrid 推荐**：Opus = plan owner（决策 + 抽象 + 回流），Sonnet subagent = executor **纯 Sonnet 风险估计**：60-80% 关键决策需用户介入纠正（Gap 1-5 深层洞察 + 跨文件回流推理） --- ## 给团队的 3 个 Action Items **1. 推 `setup-tvu-consumer` 默认生成 CLAUDE.md (enforcement ROI #1)** > 让新 consumer 任何 session start 自动加载 TVU 规则 **2. 推 `tvu-design-mockup` Pre-Action Gate (enforcement ROI #2)** > 起手协议加 mandatory step 强制声明应用的 M-rule 编号 **3. 跨 session 多产品规则同步审计** > 每周末 audit TVU DS 规则被消费产品实证使用情况 — 让真源演进有量化反馈 --- # Thank You **Nancy Zeng** (UX) × **Claude Opus 4.7** (AI) 真源文档全部在 `tvu-design-system` repo 内可查 长读版 MD：[2026-05-26-video-sync-phaseB-componentization-retrospect.md](./2026-05-26-video-sync-phaseB-componentization-retrospect.md) 2026-05-26