# Video Sync · PM Feedback 第二轮（Cap + Remove）复盘（2026-05-25）

> **目的**：内部分享 — 跟 AI 用 `@TVU mockup` 处理 PM 第二轮 feedback 的真实过程复盘 + 高效对话建议。
> **场景**：PM Ahmed 在 Slack 提两个新问题（per-PP slot 上限 + multi-PP 切换隔离），UX 设计师 Nancy 用 Claude Code 把方案 mockup 落地 + 改进设计 walkthrough 流程。

---

## TL;DR

- **总轮次**：~30 轮 user feedback + 25+ use_figma calls
- **最终交付**：M-Cap-Full 新 frame（8/8 边界态）+ M-Remove-Dialog 新 frame（OFF/ON variants）+ Remove 控件 fan-out 到 7 帧 + Design Rules card 11→14 条 + 全 page Syncing/Inactive 术语统一（34 处文本 + 4 处 frame 重命名）
- **核心 process gap**：design-walkthrough skill **漏了 CRUD 完整性检查**，到 PM raise cap 限制时才暴露「list 无限增长 vs cap 不可释放」的死锁
- **关键 insight**：**「propagate to all related frames」反复出错是 file-local component 没抽的硬代价**。本 session 3 次跨帧 fan-out（chip / Match,Hover / Remove），3 次都漏过 frame 被 user 抓到要补

---

## 1. Session 概览

### 任务起点

PM Ahmed 在 Slack 两个 follow-up 问题：
1. 同 PP 上 sync sessions 数量是否需要上限？因为单 PP 最多 8 路 output
2. 多 PP session 并存时 video sync 界面如何展示（每个 PP 独立 list）

### 最终落地

**Figma**：
- M-Cap-Full 新 frame（`4464:2326`）：8 rows + 满额 chip + 禁用 Add row
- M-Remove-Dialog 新 frame（`4503:5337` 附近）：用 TVU `Notification` `theme=dark, status=pop confirm` master，OFF + ON 双 variant
- 7 帧 propagate：chip / Match,Hover bg / Remove 控件 / state-label 文案
- Design Rules card 13→14 条（新增 slot cap + Remove interaction）

**Process artifacts**：
- 1 个 handoff doc（[2026-05-25](../handoffs/2026-05-25-video-sync-next-session-pickup.md)）
- 4 条待回流 TVU 真源 backlog（M-LIFECYCLE-CRUD / M-FANOUT-CHECKLIST / icon+component keywords / design-walkthrough skill rule 补一行）
- 1 条 PM Slack 回复定稿

---

## 2. 时间线 / 主要迭代

| # | 阶段 | 用户 feedback / 触发 | 改动量 |
|---|---|---|---|
| 1 | PM Q 解读 | 翻译 PM 两个问题 + 给中文回复建议 | 纯对话 |
| 2 | 设计走查 | 触发 design-walkthrough skill 走查 cap rule + Remove 缺失 | 出 walkthrough report |
| 3 | CRUD 缺口暴露 | user "Session 只有增删，没有 Delete，这对吗？" → cap 模型死锁 | 反思 walkthrough skill 漏检查 |
| 4 | Remove 设计探索 | A/B/C 三方案（row level / list level / row top-right）→ 选 row top-right | 文案改 Rule 7/13/14 |
| 5 | Mockup 落地 | M3 加 Remove + M1/Cap-Full chip + 新建 Cap-Full / Remove-Dialog | 4 mockup |
| 6 | UI compliance | "用错组件了，不是 TVU UX Design System" → 改用 Notification master | dialog 重建 |
| 7 | Variable token | Chip text → Tips var / icon → Icon/Default var / row → Brand/Hover var | 9+ tokens 绑定 |
| 8 | 视觉调优 | "BRAND Hover 太亮 → 改 Match,Hover"  | rebind 全 selected rows |
| 9 | Fan-out 漏检 | "Delete 没更新到所有 Frame" + "M4 row 也没更新" | propagate audit + 补 7 帧 |
| 10 | 状态规则修订 | "list=1 时 Remove hidden 不是 disabled" | Rule 14 + M0 state-label 改 |
| 11 | 视觉简化 | "Cap chip 红色误传 alarm，统一 Tips 灰" | chip 文案 + token 改 |
| 12 | 术语统一 | "ON/OFF 应改 Syncing/Inactive 跟 UI 一致" | 34 处文本 + 4 个 frame 重命名 |
| 13 | PM 回复定稿 | "回复太长，简短 Slack 版" → 删 Q(b) 因 cap 模型已经解释清楚 | Slack 回复定稿 |

---

## 3. Top 5 process gap（按返工成本排序）

### Gap 1: **design-walkthrough skill 漏了 CRUD 完整性检查**

**实证**：M-CARDINALITY (b) 项写的是 "state count + lifecycle"，我读成"状态机几个状态"，没读成"实体 lifecycle 是否有 Create/Read/Update/Delete 完整 4 件套"。结果走查时 Add ✅ / Edit ✅ / Read ✅ 都打勾，**Delete 没问** — 直到 PM 提 cap 限制时才暴露死锁（list 无限增长 vs cap 不可释放 = 用户永远无法新建第 9 个）。

**返工成本**: ~3 轮重新讨论 Delete 入口位置 + Rule 14 反复改文案（disabled → hidden）+ M0 Remove 视觉处理。

**原因**：walkthrough skill 的 Rule Compliance table 没有显式 CRUD 完整性那一行，只覆盖 cardinality (a)-(e)。

**✅ 解决方案**：
- **当下修复**：Rule 14 落地 + M0 视觉 hidden + propagate 到 7 帧
- **长期防护**：新规则 **M-LIFECYCLE-CRUD** — 任何 first-class entity 必须显式回答 C/R/U/D 4 件套，任一项"故意没有"必须写明 rationale
- **真源落地**：⏳ M-LIFECYCLE-CRUD 待回流到 `tvu-design-system/docs/internal/design-process.md`（本 session 单例触发，但 logic 通用，建议直接 promote）+ design-walkthrough skill Rule Compliance table 加一行

---

### Gap 2: **跨帧 fan-out 反复漏检**

**实证**：本 session 同样的"加到 M1 → 用户抓到 M3 漏 → 修 M3 → 用户抓到 M4 漏 → 修 M4 → 用户抓到 M0/M2/PlanB 漏 → 全帧 propagate"循环出现 **3 次**：
1. Slot counter chip 初次只加 M1，后才发现要 7 帧都有
2. Selected row Match,Hover bg 第一轮只改 M1/M3/Cap，M0/M2/M4/PlanB 漏
3. Remove 控件初次只加 M3，6 帧全漏

**返工成本**: ~7-8 轮 fan-out 补丁 + 多次 audit script 验证

**原因**：没有 file-local component master，所有视觉都靠 clone + manual fan-out；AI 没有"任何视觉/交互改动都触发 propagate 清单"的强制 step。

**✅ 解决方案**：
- **当下修复**：3 次 audit + page-wide 扫描全部 propagate 到位（用 `findAll` + 变量 binding scan）
- **长期防护**：候选规则 **M-FANOUT-CHECKLIST** — 任何视觉/交互改动 → propagate 清单：M0 / M1 / M2 / M3 / M4 / PlanB / Cap-Full + Design Rules card + state-label 各一条
- **真源落地**：⏳ 落到 `mockup-conventions.md` 或 figma-use skill 起手协议

---

### Gap 3: **用错 component library（用了 popup confirm 而非 TVU 真源 Notification）**

**实证**：建 confirm dialog 时，我直接从 primitives 拼 → user 指出"不是 TVU UX Design System 库"。第二次我搜到 TVU UX Library 的 `popup confirm`（旧库 ≠ 真源 Design System）→ user 再指出 "TVU UX Design System 里也有这个组件"。第三次才找到真源 `Notification` component set（命名误导：实际包含 dialog/confirm 模式，`status=pop confirm` 变体自带红色 destructive Delete 按钮）。

**返工成本**: ~2 轮 dialog 重建 + 字体加载失败 → detach instance 妥协 → 加 source annotation 文档化

**原因**：(1) 我没在画 dialog 前先 `search_design_system('dialog confirm modal')`；(2) TVU `Notification` 组件 description 缺 keywords，搜 "dialog" 命中不到。

**✅ 解决方案**：
- **当下修复**：dialog 用 Notification pop-confirm variant + detach + 加 source annotation
- **长期防护**：figma-use skill 起手协议加一条 — 画任何 UI primitive 之前 mandatory `search_design_system`
- **真源落地**：⏳ TVU `Notification` 组件 description 加 keywords "dialog, modal, alert, confirmation, confirm dialog, popup"；`icon/Edit/Delete` description 加 "trash, remove, garbage, bin"

---

### Gap 4: **Match,Hover token 选错版本（初次选 BRAND/Hover 太亮）**

**实证**：user 说"选中 row 背景改成 BRAND Hover" → 我用 `UX/Brand/Hover` (`eab4ef3b...`)，render 出来是亮 lime green，row 内文字被吃掉。user 再说 "BRAND Match"  → 改 `UX/Brand/Match,Hover` (`00a000b6...`)，深暗绿，文字可读。

**返工成本**: ~2 轮 rebind 全 7 帧（先 Hover 再 Match,Hover）+ page-wide scan

**原因**：TVU 真源同一组 token 不同语义版本（Hover vs Match,Hover）我没逐个 preview 颜色，直接挑了 "Hover"。

**✅ 解决方案**：
- **当下修复**：page-wide `findAll` + 扫所有 fill bound to BRAND_HOVER_ID → rebind 到 Match,Hover
- **长期防护**：选 variable token 前应该 inline preview 颜色值（如 `figma.variables.getVariableById(key).valuesByMode[mode]`），而不是单看 name

---

### Gap 5: **UI label vs 内部状态模型术语混用**

**实证**：spec / state-label / rule 文案里到处用 "ON / OFF" 描述状态，但 UI State Pill 实际显示 "Syncing / Inactive"。直到 PM Slack 回复 review 时 user 指出 "ON+OFF 应改 Syncing+Inactive"，全 page 文档需要术语统一。

**返工成本**: 1 轮 page-wide regex 替换 — 34 处文本 + 4 个 frame 重命名

**原因**：内部状态模型（ON / OFF）和 UI label（Syncing / Inactive）从一开始就分离，但文档 / spec 早期都用内部术语写，没在术语 freeze 阶段 sync。

**✅ 解决方案**：
- **当下修复**：page-wide 替换 + frame 重命名（M3 OFF Row → Inactive Row 等）
- **长期防护**：mockup-conventions.md 加一条 — UI 可见的状态 label 必须跟 spec / state-label / rule 文案完全一致；内部状态模型术语用反引号包起来 (\`internal-ON\`) 区分

---

## 4. 高效对话 10 条建议（按 ROI 排序）

1. **PM 提模糊问题先要求翻译 + 拆解** — 本 session 起手 user 直接转 PM 英文，我先翻译 + 拆 4 个子问题，比上来画图省 2 轮
2. **任何 cap / quota 设计先问"释放路径"** — cap 模型必须配套 release 机制（delete / auto-archive / replace）才不死锁
3. **任何 first-class entity 走完 CRUD 4 件套再开始 mockup** — 见 Gap 1
4. **画 UI primitive 之前 mandatory `search_design_system`** — 见 Gap 3
5. **选 token 之前 inline preview 颜色** — 见 Gap 4
6. **跨 frame propagation 用 page-wide audit script，不靠"我以为都改了"** — `findAll` + binding ID 比较
7. **AI 给出 fan-out 改动后追加自检 "我改了哪几个 frame？还有哪些 frame 没改？"** — 主动 surface 漏检
8. **术语 freeze 阶段 sync UI label / spec / state-label** — 见 Gap 5
9. **复杂 UI 改动先给文字版 layout 草图，user 确认后再开画** — 本 session 4 mockup 信息布局图 + user "差不多" 才动 figma，省 2-3 轮
10. **PM 回复初稿先长，user 砍短 → 内部草稿对自己更好** — 长稿 surface 所有 open question，短稿砍 noise，两阶段比一次写短稿好

---

## 5. 待回流真源的新规则清单

| # | 规则 | 触发 session | 拟落位置 |
|---|---|---|---|
| (e) | TVU `icon/Edit/Delete` + `Notification` description 加 keywords | 本 session Gap 3 | TVU UX Design System file（跨 file 工作）|
| (f) | M-LIFECYCLE-CRUD（Create/Read/Update/Delete 完整性 self-check） | 本 session Gap 1 | `tvu-design-system/docs/internal/design-process.md` |
| (g) | design-walkthrough skill Rule Compliance 加 M-LIFECYCLE-CRUD 一行 | 本 session Gap 1 | `MicroApps/.claude/skills/design-walkthrough/SKILL.md` |
| (h) | M-FANOUT-CHECKLIST（候选）— 跨帧 propagate 强制清单 | 本 session Gap 2 | `tvu-design-system/docs/internal/mockup-conventions.md` 或 figma-use skill |

---

## 6. Model 选型推荐（基于本 session 实证）

- **Sonnet** for mockup + propagation 工作：本 session 全程 Sonnet，~50 轮 use_figma calls + 反复 audit 不掉链
- **Haiku** for 术语 propagation / 文字替换批量 task：page-wide regex 替换不需要架构思考
- **Opus 1M context** for 长 session retrospect 阶段：本 retrospect 写在 session 末尾，1M context 装得下所有 30 轮上下文不丢

---

## 7. 给团队的 3 个 action items

| # | Action | 责任人 | 截止 |
|---|---|---|---|
| 1 | TVU 真源加 component keywords（`Notification`, `icon/Edit/Delete`）| Nancy | 下次 TVU 真源工作 window |
| 2 | `design-process.md` 写 M-LIFECYCLE-CRUD 规则 + design-walkthrough skill 同步加一行 | Nancy | 本周内 |
| 3 | 把 M-FANOUT-CHECKLIST 落到 mockup-conventions.md（或 figma-use skill 起手协议）| Nancy | 累积 2 例后回流 |

---

## 8. 附录：本 session use_figma 实际改动统计

| Category | 数量 |
|---|---|
| Frame 新建 | 2 (M-Cap-Full, M-Remove-Dialog) |
| Frame 重命名 | 4 (M3 / Plan B / 2 state-label) |
| state-label 新建 | 1 (M-Cap-Full) |
| state-label 文案 update | 5 (M1/M2/M3/M4/PlanB) |
| Design Rules card 新条目 | 2 (Rule 13 slot cap, Rule 14 Remove interaction) |
| Design Rules card 修订 | 4 (Rule 3 state model / Rule 5 button / Rule 7 persistence / Selection rule) |
| Fan-out clone 操作 | 7 (chip × 5 + Remove × 6 + reuse) |
| Variable token rebind | 9+ tokens 累计 (Tips × 7 / Icon Default × 9 shapes / Match,Hover × 7 / Brand Hover → Match,Hover × N / Disable × 多处) |
| ON/OFF → Syncing/Inactive 替换 | 34 处文本 + 4 处 frame 重命名 |
| Dialog 重建 | 3 次（primitives → popup confirm → Notification pop confirm）|
| audit script 运行 | 5+ 次（chip 状态 / row 选中 / Brand/Hover 扫描 / state-label 文字 / Remove 控件分布）|