# BM-1047 Multi-Seat Subscription Mockup · Internal Share Retrospect

> Closure date (mockup phase v1): 2026-06-02
> Session span: 2026-05-29 (Jira ticket assigned) → 2026-06-02 (UX response posted, waiting on PM)
> Final deliverable: Figma `< BM-1047 > Multi-Seat Subscription for Token Portal 20260529` page, 6 popup states + state-labels + connectors + PRD spec + Jira annotation
> Status: ⏳ blocked on Devansh/Justin's reply to token-as-currency proposal

---

## 1. TL;DR

- **总轮次**：~30 轮用户 feedback × ~50+ use_figma 调用 × 3 大结构 refactor (Plan E baseline / checkbox-stepper merge / InputNumber 整套替换)
- **最终交付**：6 popup states + 6 bilingual state-labels + 3 flow connectors + 1 design note (S3b +N more click) + PRD spec section + Jira annotation w/ hyperlink
- **核心 process gap 数**：4（详 §4）
- **关键 insight**：本次最深的发现不是任何具体 UI 调整，而是 **"token 是个 phantom currency"** —— 这个根本性的 UX 诊断只有在 PM 第 3 轮反馈循环里才浮现，理论上应该在 PRD 阶段就被识别。

---

## 2. Session 概览

- **任务起点**：Jira BM-1047 (Devansh) — Micro-App Token Portal subscription UI 需替换为 multi-seat 模式。原描述说"复用 Home 共享组件"。
- **PRD 实质**：通过 3 轮 PM 沟通（Nancy 主动追问 5 个差异维度），实际方向澄清为 "不是简单复用 Home，而是 Micro-Apps 自有 popup + multi-seat 扩展 + 跨产品共享化"。
- **最终落地**：
  - Figma 文件：`Micro-Apps-20250923` (fileKey `DtZcMkhNy6qh6jbQQnhreQ`)
  - 新 page：`< BM-1047 > Multi-Seat Subscription for Token Portal 20260529` (node `4731:85`)
  - 6-state section：`Mockup States · 6 frames (S1 → S5 + S3b)` (node `4783:580`)
  - PRD spec：node `4742:85`
  - Jira annotation：node `4760:116`（带 hyperlink → https://tvunetworks.atlassian.net/browse/BM-1047）
- **Process artifacts**：
  - 同步回流到 TVU repo：`mockup-conventions.md` 新增 **M-DISCIPLINE umbrella** + retrospect 文件 `2026-06-01-rule-execution-discipline-gap.md`（commit `8d133205`，已 push origin/master）
  - 当前文件：AI-用户协作过程复盘（不入 TVU repo，留在 MicroApps consumer repo）

---

## 3. 时间线 / 主要迭代表

| # | 阶段 | 用户 feedback 触发 | 改动量 |
|---|---|---|---|
| 1 | Jira PRD 分析 + 5 差异澄清 | Devansh 把"用 Home UI"改成"Home + Micro-Apps 信息保留"（multi-round） | 纯 Jira 评论 5 轮 |
| 2 | PRD spec 写入 Figma | Nancy "采用双语支持" | 1 spec card, ~6 sections |
| 3 | Phase 0 + 5 states 初版 | "开始画吧" | 5 frames clone from Plan E + alerts |
| 4 | 第一次 walkthrough | "checkbox 和数量加减不要混用" | 整个 License card 重构（去 checkbox + 去 Add License 按钮 + stepper 移入卡片右上） |
| 5 | 第二次 walkthrough | "只 2 个模块 / assigned-to 放哪 / 未指定状态没覆盖" | 加 assigned-seats row + 拆 S3 → S3 + S3b + S5 alert |
| 6 | M32 + M-COLOR 纪律检查 | "分割线没用 token / →没用图标 / stepper 没用库" | 分割线绑库变量 + Arrow/Right_1 icon × 12 + InputNumber × 12 |
| 7 | +N more 截断态 | "这个 Case 没有覆盖" | S3b 新加（show 5 + "+N more" link） |
| 8 | UX 交付完整性 | "UX 交付说明比较少 / 流程上没有连线" | 6 state-labels + 3 connector arrows (S1→S2→S3→S3b) |
| 9 | 间距 + Total 数字 wrap | "Mockup 之间间距太挤" + "Total 那行要展示 Seat 价格和数量" | gap 60→160 + Total Payment 行改 "License (N × $98)" + S3b $1,057 修 wrap |
| 10 | 默认规则未遵循复盘 | "为什么没用默认的 JIRA+PRD+UX 交付说明+流程线连接" | 写 retrospect + M-DISCIPLINE umbrella 回流 TVU |
| 11 | PM 第 3 轮反馈（token vs $ 付款选择） | Devansh/Justin 提 A/B 两个 binary 选项 | UX 第三路径（token-as-currency）提议，posted to Jira |

---

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

### Gap 1 — Currency model 没在 PRD 阶段 surface

- **实证**：第 11 轮 PM 才讨论"$ vs token 付款选择"，Nancy 用"phantom currency"诊断指出根本问题在所有 in-app 价格都用 $ 显示。这个洞察理论上应该在 PRD 阶段的"5 差异澄清"里就被发现——当时 Devansh 答 Q3 "$98 现金 OR token 等值，统一为 token 扣减" 已经埋了伏笔，但 Nancy/AI 都只把它理解成"backend 实现层细节"，没拉到 UX 层做诊断。
- **返工成本**：如果方向落实 token-as-currency，6 frames 的所有 $ 数字都要改 token，Service Price 表也要全改。属于"标签级"改动但数量大（~30+ text nodes 改）。**幸亏结构不动**。
- **回流落点**：建议加到 `design-process.md § Pre-Phase 0 Step A Intake Gate` —— 当 PRD 含跨产品 billing model + 新 currency 概念时，**强制做 currency-display 诊断**（不光记录 backend 模型，要拉到 UI 层："用户看到的单位是 $ 还是 token？为什么？")

### Gap 2 — 8 步流程默认执行率 37.5%

- **实证**：BM-1047 起手协议读完 `design-process.md` 8 步 Jira 关联型流程，实际执行命中 3/8。M45 / M23.8 / M23 / M23.6 / audit 全部靠用户走查时提醒补。
- **返工成本**：5 步返工，按"加完所有 mockup frame 才发现要补 state-label + connector"算，约 2-3 轮 walkthrough 的额外迭代。
- **回流落点**：已回流 → TVU `mockup-conventions.md` **M-DISCIPLINE umbrella**（commit `8d133205`）。后续候选：`tvu-design-mockup` skill 起手协议加 "Step 8.5: TodoWrite list 8 步" 强制指令。

### Gap 3 — Checkbox + stepper 混用没在 brainstorming 阶段否决

- **实证**：v1 License row 我直接照搬 Plan E 的 checkbox + Add License button 结构，仅在右下加一个独立 Seats stepper row。第一次 walkthrough 用户立即指出"复选框和数量加减不要混合一起用"——stepper=0 已经能表达"未订阅"。
- **返工成本**：整个 License card 结构 refactor（去 checkbox + 去 button + stepper 移位 + 加 separator + assigned-seats row），约 8-10 个 use_figma calls。
- **回流落点**：候选 `mockup-conventions.md` 新 rule "M-AFFORDANCE-DEDUP" or fold into M35 —— 同一动作（"选/不选" vs "数量"）的多个 affordance 共存时，**必须能解释每个 affordance 的独有语义**，否则去掉冗余。

### Gap 4 — 跨产品共享 popup 的 implication 在 PRD 阶段被低估

- **实证**：Devansh 在 PRD 阶段说"其他 apps/Home 也可以用这个 popup"，Nancy/AI 当时按"单一 popup 共享" hint 处理，但没扩展到"如果 Home 用户从来不接触 token，他看 $98/月还是 9,800 tokens/月？"这种边界问题。直到 PM 第 11 轮反馈才意识到 currency 显示要跨产品统一。
- **返工成本**：直接和 Gap 1 重叠。如果在 PRD 阶段就引入"跨产品 currency 统一性"维度，token-as-currency 提议会更早出现。
- **回流落点**：同 Gap 1。

---

## 5. 高效对话建议（按 ROI）

### 给 UX/PM 提需求方（Devansh / Wen Xing / 客户侧）

1. **跨产品共享组件需求**首次提出时，明确告知**单位统一性**约束（$ vs token? 各产品 currency model 是否一致？）。否则 UX 会按"局部最优"画 mockup，后期跨产品对齐时返工。
2. **PRD 阶段如果涉及 backend billing model 改动**（如本次"统一为 token 扣减"），不要只描述实现层，要 explicit 写**UI 端用户看到的单位**。
3. PM 自己之间有不同立场时（如 Devansh 想 token-pay / Justin 想简化），**ping 设计师之前先达成 2-PM 共识**，否则设计师在两个 PM 中间反复调和成本高。

### 给 AI 协作流程（针对 Claude / 其他 AI）

1. **起手协议读完规则后必跑 TodoWrite 物化** —— 已回流为 M-DISCIPLINE 硬规则。
2. **PRD 阶段做"5 维度诊断"**：访问控制 / 折扣机制 / 付款方式 / 共存性 / 权限。**新增第 6 维度候选**：currency-display unit。
3. 用户给 binary 选项时（A or B），**主动 propose option C** 是高 ROI 行为。本 session 的 token-as-currency 提议就是 case in point —— 跳出 Devansh/Justin 给的 A/B 框架，根本性 reframe 问题。
4. 多轮 walkthrough 时**保持结构稳定，调标签即可** —— 本次 6 frames 在第 4 轮重构后基本没动 structure，只在 InputNumber 替换、间距调整、Total 行重新计算等"标签级"层面迭代。这种稳定性大幅降低 dev handoff 风险。

### 给 PM / Stakeholder review 方

1. **第一次 walkthrough 优先看"模块边界"和"affordance 唯一性"** —— 这两点改起来最伤筋动骨，越早抓越好。本次 v1 的 "checkbox + stepper 混用" 就是边界问题。
2. **数字/labels/icons 的细节可以放到第 2-3 轮**，第 1 轮专注结构。

---

## 6. 已回流 / 待回流的新规则清单

| # | 规则 | 真源文件 | 状态 | 简述 |
|---|---|---|---|---|
| 1 | **M-DISCIPLINE umbrella** | `tvu-design-system/docs/internal/mockup-conventions.md` | ✅ 已回流 (commit `8d133205`) | "AI 读了规则但不执行" 兜底 umbrella，起手协议后必 TodoWrite 物化规则 checklist |
| 2 | **Currency-display unit diagnosis** | `tvu-design-system/docs/internal/design-process.md` § Pre-Phase 0 Step A | ⏳ 候选 | PRD 阶段含 billing model 改动时，强制做 currency-display 诊断（不光记 backend 模型，要拉到 UI 层） |
| 3 | **M-AFFORDANCE-DEDUP** (拟) | `tvu-design-system/docs/internal/mockup-conventions.md` | ⏳ 候选（需 2+ 实证） | 同一动作的多个 affordance 共存时，每个 affordance 必须有独有语义，否则去冗余 |
| 4 | **R-DISCIPLINE** (镜像) | `tvu-design-system/docs/internal/code-conventions.md` | ⏳ 候选 | M-DISCIPLINE 的 code 镜像 —— AI 起手读了 R-rules 但执行时不贯彻 |
| 5 | **meta-rules.md 触发器 F** | `tvu-design-system/docs/meta-rules.md` § 6 | ⏳ 候选 | meta 层 cross-cutting "读 ≠ 做" 反模式 |

---

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

- **本次实际用**：Claude Opus 4.7（默认）—— 适合**长 session 跨多轮 walkthrough**的 mockup 任务，能 hold 住跨轮 context（如"上一轮的 design 决策为什么是这样"）。
- **适合的任务类型**：
  - PRD 多维度澄清（5 差异 / token 诊断）—— Opus 强项
  - Figma `use_figma` 多步骤 refactor —— Opus 能持续读 + 写 + verify，rollback 错误成本低
  - 跨语言双语 UX 交付注释 —— Opus 中英双语风格更自然
- **可换 Haiku 的子任务**：
  - 单一 text label 修改（如 "$294" → "$980"）—— 机械任务
  - Jira 评论翻译（中→英 / 英→中）—— 已用 `role-translator` skill 走 Haiku
- **不建议**：本次未尝试 Sonnet，但理论上 Sonnet 在 mockup 多轮重构上应该和 Opus 接近，可下次实证。

---

## 8. Action Items + 附录

### Action items

| # | Item | Owner | 时机 |
|---|---|---|---|
| A1 | 等 Devansh + Justin 回复 token-as-currency 提议（评论 ID 244773） | PM | 当前 blocked |
| A2 | 如果方向通过 → 更新 mockup（6 frames 所有 $ 数字替换为 token + Service Price 表 token-anchored） | AI / Nancy | 等 A1 |
| A3 | 如果方向通过 → 与 Justin 对齐 token 换算率（建议 token-anchored 圆数，$ 从换算推导） | PM | 等 A1 |
| A4 | 候选 rule 回流 #2 (Currency-display diagnosis) → `design-process.md` Step A | AI / 用户拍板 | 等下一次同类病灶第 2 实证 |
| A5 | 候选 rule 回流 #3 (M-AFFORDANCE-DEDUP) → `mockup-conventions.md` | AI / 用户拍板 | 等下一次同类病灶第 2 实证 |
| A6 | walkthrough 走完后，跑 `audit-mockup-integrity.mjs` + `audit-mockup-colors.mjs`（M-DISCIPLINE Acceptance 第 3 条） | AI | mockup token relabel 完成后 |

### 附录：use_figma 改动统计

- 总 use_figma calls：~50+（多轮 refactor + alignment fix + structural changes）
- 创建的 Figma nodes（不完全统计）：
  - 6 popup state frames (S1, S2, S3, S3b, S4, S5)
  - 6 state-label frames
  - 3 connector arrows + 3 trigger labels
  - 1 design note (S3b "+5 more" click)
  - 1 Jira annotation instance
  - 1 PRD spec section + multiple cards
  - 12 InputNumber instances (library)
  - 12 icon/Arrow/Right_1 instances (library)
  - 1 icon/Menu/More instance (later removed, replaced by 5-name truncation)
  - 6 icon/mark/star instances (premium gold prefix)
  - 2 Notification (pop confirm) instances
- 关键 library imports：
  - `Jira requirement` (variant: Priority=High) — key `e8604a08a31c8c17cb8aec35d7692e88965485e7`
  - `icon/Arrow/Right_1` — key `a135a5138dda4900963d0c6c69823c5523d96f80`
  - `icon/mark/star` — key `77bce94c6a90058e3142cc8c4dd6b477c244b5f7`
  - `icon/Menu/More` — key `47afb54c12b4b4f401e4ed0b6b3425d6c430bbdb`
  - `InputNumber` (variant: Default) — key `341d2e6bb0aed59796af4e54443233fc8cc89d3c`
  - `Notification` (variant: theme=dark, status=pop confirm) — cloned from existing instances

### 当前 Figma 主要 node IDs（pickup reference）

- Page: `4731:85` （`< BM-1047 > Multi-Seat Subscription for Token Portal 20260529`）
- Spec section: `4742:85`
- Mockup section (6 frames): `4783:580`
- States: S1 `4768:2608` / S2 `4790:576` / S3 `4790:759` / S3b `4798:584` / S4 `4790:942` / S5 `4790:1125`
- Jira annotation: `4760:116`
- Design note (+5 more click): `4811:763`

---

## 关键 quote 摘录（供分享时 hook 用）

> "Token 在当前 UI 里是一个 phantom currency（幽灵货币）—— 用户用 $ 买进来，又得在脑子里换回 $ 才看得懂任何价格。"

> "AI 起手读了规则但执行时反复 path-of-least-resistance 跳步——规则在上下文里**消极存在**，没有**主动 enforce 机制**。" (M-DISCIPLINE 实证抽象)

> "用户给 binary 选项时（A or B），主动 propose option C 是高 ROI 行为。" (本次 token-as-currency 提议跳出 Devansh/Justin 给的 A/B 框架)