# 2026-05-09 — MicroApps Master Console / My Sessions mockup 复盘

> **Session 性质**：在 `Micro-Apps-20250923` 产品文件（fileKey `DtZcMkhNy6qh6jbQQnhreQ`）画 MicroApps 监控台的多角色多分辨率 mockup。
>
> **交付**：4 frame（MC/MS × 1920/1440）+ 8 file-local 组件 + 多份 annotation card + UX Delivery Spec。
>
> **复盘焦点**：plan owner 在本次 session 暴露的 8 类反复出现的方法论错误 + 3 个 root cause + 10 条硬规则（已落 [`mockup-conventions.md`](../mockup-conventions.md) M11–M20）+ 库债 backlog（已落 [`backlog.md`](../backlog.md) BRIDGE-MOCKUP-001/002/003）。

---

## 一、交付清单

### 4 frame mockup（page `Monitor for all of Micro Apps 20260430`）

| 名称 | id | 尺寸 |
|---|---|---|
| MicroApps · Master Console / 1920 | `3278:1835` | 1920 × ~1480 |
| MicroApps · Master Console / 1440 | `3289:2530` | 1440 × ~1480 |
| MicroApps · My Sessions / 1920 | `3289:2726` | 1920 × ~1480 |
| MicroApps · My Sessions / 1440 | `3289:2922` | 1440 × ~1480 |

### 8 个 file-local 组件（section `MicroApps Monitor — Local Components` id `3261:1467`）

| 组件名 | id | Variants |
|---|---|---|
| MicroApp State Pill | `3261:1480` | 4（Inactive / Preview / On-air / Analyzing）|
| MicroApp Counter Pill | `3264:1484` | 4（kind=4 状态）|
| MicroApp Action Cluster (Bidirectional) | `3267:1510` | 3（state=Inactive/Preview/On-air）|
| MicroApp Action Cluster (Analyzer) | `3268:1517` | 2（state=Inactive/Analyzing）|
| MicroApp Action Cluster (Generator) | `3268:1528` | 2（state=Inactive/On-air）|
| MicroApp Card Header | `3272:1821` | 6（pipeline × status）|
| MicroApp Table Header | `3273:1889` | 3（role=Super/Enterprise/Self）|
| MicroApp Auto-refresh Widget | `3274:1856` | 2（state=Running/Paused）|

### 库引用合规

Top bar / Button/dark M / Tab/Item / radio / input box/line / Tooltips / Drop down List / Sort icon / Add icon / Edit icon / Copy icon / Live icon / Play icon / Record-stop icon / Open link icon / Menu/More icon — 全部 import 自 TVU UX Design System library。

### 列宽策略（混合 FIXED/FILL — M20 实证）

- **FIXED**：# (40) / Company (110) / Owner (140) / State (220) / Actions (130)
- **FILL grow=1**：Object ID（responsive truncation 大屏多显示字符）/ Event Name / Input URL / Output URL

### Annotation cards

角色矩阵 / Filter & Counter 口径 / Auto-refresh 行为 / Paused 触发 User Flow / 响应式断点 / Tooltip Reference / UX Delivery Spec / Library Promotion 提案。

---

## 二、本次 session 反复出现的 8 类错误

按出现频次排序：

| # | 错误模式 | 暴露次数 | 典型场景 |
|---|---|---|---|
| 1 | **Gestalt 截图自查** | 4+ | State Pill opacity / 列对齐 / Copy icon clipping 都是肉眼漏掉、probe 才看出 |
| 2 | **参考当硬抄**（原 mockup 没经过新需求验证就照搬）| 3+ | Inline divider 误读为线 / 0.18 opacity 硬编码 / Drop down List 默认 placeholder |
| 3 | **Library mental model lazy** | 3 | Radio 大小写错过 / Msg-bg 漏列 / Tooltips 复数搜不到 |
| 4 | **组件搬来不修改** | 2 | Drop down List 空 placeholder / "+ New Session" 用文字 "+" 当 add icon |
| 5 | **Forward bias > Backward audit** | 多次 | 每次自查报告都是前向 TODO，零 backward bug 识别 |
| 6 | **Figma silent API quirk 没察觉** | 3 | setBoundVariableForPaint 重置 opacity / clone 传染 instance override / textAutoResize 写不进 |
| 7 | **M9 / 规则僵化解读** | 2 | 把"icon 配文字"理解成必须永远显示文字 → 错过 icon-only + tooltip |
| 8 | **写完规则立刻违反规则** | 2 | M10.1 写完下一条验证就 gestalt 通过 / M10.5 把 ObjID 错分类成"定长" |

---

## 三、3 个 root cause

### A — "Adequate" 当 "Done"

完成度阈值设低了。"看起来对"就停，不去逐元素 diff、不去 probe 数值确认。**质量阈值由我自己默认设定，而不是由"产物能否直接交付"决定**。

**具体表现**：
- 每次截图给用户后立刻说"对齐了"，不附 probe 数值
- 1024 px 缩图把 4 px 列宽错位、200 px 文字裁剪、opacity 1 vs 0.18 全糊掉，肉眼判断假阳性
- 自查走 gestalt judgement，零 element-by-element diff

### B — Lazy mental model on library + reference

我把 TVU 库和原 mockup 当 lookup table，不是需要先建立完整 mental model 才能用好的 system。

**具体表现**：
- 同一个库我搜了 N 次还在找（早期搜 "Tooltip" 没结果，后期补搜 "Tooltips" 找到）
- 同一个原 mockup 抄了对的也抄了错的（没先理解全图设计意图就动手）
- 主观断言"库没有 X" 被用户纠正过 ≥3 次（Radio / Operation List / Add icon）

### C — "Rule writing" ≠ "Rule executing"

写规则时大脑能识别错误模式，执行时大脑回到 reflexive 默认路径（快/省/简）。**M10.1 写完下一秒违反**就是最尖锐的证据——刚写"自查必须 element-by-element"立刻又给 gestalt 结论。

**具体表现**：
- 规则放进 conventions 文档不等于会被执行
- 没有外部触发器（脚本检查 / checklist / user push）就被 reflexive habits 覆盖
- 自我意识到"该 probe"和"实际 probe"是两个不同的认知模式

---

## 四、对应的 10 条硬规则（已落 [`mockup-conventions.md`](../mockup-conventions.md) M11–M20）

按 root cause 分组：

### 反 A（Adequate 阈值）

- **M11.1 — Probe-based 自查**（原 M11 — 禁止 gestalt 自查）：必须 4 步走 — probe reference + probe my impl + 字段级 diff + mismatch 解释
- **M11.2 — 截图 literacy**（原 M12）：2× scale 截图 / probe 数值二次确认 / 1024 px 缩图禁止做 spec 判断
- **M11.3 — Inverse-question 视觉元素**（原 M13）：删掉它会有 visible 损失吗？答"看不出"→重新审视

### 反 B（Lazy mental model）

- **M14 — 复刻原 mockup 任一元素前必问适配性**：原 mockup 是参考输入，不是 spec
- **M15 — 库未实证不得宣告"不存在"**：多 casing / 多同义词 / ≥3 词搜索
- **M16 — Library 组件不可裸用**：必须改 placeholder text / icon swap / variant property 适配
- **M17 — 1px tall/wide 节点必须 probe `.fills`**：禁止凭几何尺寸猜视觉性质

### 反 C（Silent API + Rule execution）

- **M18 — 绑变量与设 opacity 分两步**：单步合并必失败（Figma API quirk）
- **M19 — Master 改完 instance 用 force-sync**：不能依赖继承（instance override 静默 stick）
- **M20 — Column 宽度策略：FIXED vs FILL 按内容类型分类**：禁止"全 FIXED / 全 FILL"一刀切；定长 / 真变长 / responsive-display 三类分别处理

---

## 五、库债 backlog（已登记）

入 [`backlog.md`](../backlog.md) BRIDGE-MOCKUP-* 段：

- **BRIDGE-MOCKUP-001**：TVU 库需补 4 个 dark-mode `Msg-bg-dark` 软背景 token（Red / Brand / Blue / Grey）
- **BRIDGE-MOCKUP-002**：TVU 库 `icon/Arrow/Sorting` 需补 Ascending / Descending variants
- **BRIDGE-MOCKUP-003**：提议库 promotion — `Pill/Status` + `Pill/Counter`（去产品化命名）

库 owner 在下一个 design system 迭代周期内消化即可，**不阻塞当前 mockup 交付**。

---

## 六、Plan owner 行为约束（个人 standing rule，跨 session 持续）

不进 conventions 文档（因为不是项目级规则），但是 plan owner 自己的 reflex training：

1. **每次 user 说"自查 / 复盘 / 找还能优化"** → 触发 M11.1–M11.3 流程，**不是输出 forward TODO list**
2. **每次需要库组件** → 先 enumerate library 全部相关 component（多关键字 + 列出来），再决定用哪个；**不要现搜现用**
3. **每次截图给 user 看** → 附 probe 关键字段值（不只截图）
4. **遇到 user 问"为什么 X 是这样"** → 先讲推理路径，再讲修法 — "为什么"比"修了"更有价值
5. **任何 "we're done" 类断言前** → 必须先输出 probe 数值，**禁止直接给视觉结论**

---

## 七、最大的元教训

> **写下一条规则的下一秒，我违反了它**。
>
> 这暴露的不是认知问题，是 **execution discipline 问题**。规则不会自动 enforce 自己。
>
> 下次起 session，**让 self-check 变成必经流程而不是可选 enhancement**——任何 "we're done" 类断言前必须先输出 probe 数值，禁止直接给视觉结论。

这条不能写进文档，因为它需要的不是规则文字，而是反射性习惯。文档只能 capture rule，没法 capture discipline。所以这份复盘文件的真正价值不是被读，而是**作为下次 session 起手时的 onboarding artifact**——让起手的 plan owner 看到自己上次踩坑的具体记录，激发 vigilance。

---

## 八、关联

- [`mockup-conventions.md`](../mockup-conventions.md) M11–M20（本次产物）
- [`backlog.md`](../backlog.md) BRIDGE-MOCKUP-001 / 002 / 003（本次产物）
- 上一份 mockup 复盘历史：mockup-conventions.md「历史背景」段
  - 2026-04-30 Session Dashboard v1（M1–M6 由来）
  - 2026-05-06 Session Dashboard v2（M7–M9 由来）
  - 2026-05-09 MicroApps mockup（**本次复盘 — M11–M20 由来**）