TL;DR

• 轮次：~15+ 轮 user feedback（Plan A HTML PoC + Plan B Vue）
• 交付：Plan A microapps-console-demo.html 2300 行 + Plan B vue-app/ (241KB / gzip 71KB) + cloudflared 公网链接
• 规则回流：5 条（code-conventions R1-R5 诞生）
• 核心 insight：

UX 设计师用 AI 写 code 不是"AI 自动生成 demo"，而是"用代码 probe 设计决策" — 列排序刚需 / Empty 语义 / Topbar 公共组件约束都是写 code 时被代码逼出来的产品决策

起点 & 落地

起点：Figma mockup 完成后需要可演示 / 可分享 PM 的 demo

Plan A — 单 HTML PoC（~2300 行）：

• 17 个 inline <symbol> 全 sourced from TVU dist/icons/svg/
• Topbar 3 列 grid + Action 列锚位 + ≥1920 media query
• New Session 用 Blob URL（替代被 Chrome 拦截的 data: URL）

Plan B — Vue + Vite：

• Sidebar 280px + 折叠态 + Overview status chip
• TVU Topbar 公共组件规则 + Empty 三分语义
• 5 列 sort + cloudflared 公网托管给 PM

时间线（精选 7 个转折点）

Gap 1 · 没约束图标来源

实证：Plan A 起手用 inline SVG "看起来对"造图标 — 没去 TVU dist/icons/svg/ 翻真源。用户元提醒：「TVU 设计库应约束图标来源」
返工：17 个 symbol swap + 500+ 行规则文件诞生
原因：@TVU code skill 之前只约束 mockup 层（M 系列），code 层没有平行约束

解决方案：

• 当下修复：17 个 inline <symbol> 全部 swap 为 TVU dist/icons/svg/ source（health / Search / Edit/Copy / share / open-link / Menu / Waffle）
• 长期防护：新建 code-conventions.md R1-R5 与 mockup-conventions 平级硬约束（R1 图标 / R2-R3 字体颜色 token / R4 不"先实现再问" / R5 Handoff Convention）
• 真源落地： 已落 TVU code-conventions.md R1-R5 + user global memory feedback_tvu-icons-mandatory.md

Gap 2 · MC / MS filter parity bug

实证：FilterBar 加了 showActiveSegment prop 让 MC 显示 radio MS 不显示。用户指出：「MC 和 MS 的 filter bar 应保持一致，仅 search placeholder 不同」
返工：~3 处代码改 + bug 跨整 PoC 暴露用户验收时
原因：AI 在数值 / 结构问题上不 probe，凭印象推断"哪页有 / 没有" — R4 反模式真实实证

解决方案：

• 当下修复：FilterBar 移除 showActiveSegment prop 条件分支；filteredApps 中 activeOnly 过滤去掉 currentPage === 'master-console' 页面门
• 长期防护："哪页有 / 没有 X"类结构问题写代码前强制 probe Figma 两页节点真值（get_metadata 对比 children）— 不允许凭"我记得 mockup 是 X"
• 真源落地： 已落 TVU code-conventions.md R4 + phase0-ledger entry 实证

Gap 3 · TVU Topbar 是公共组件，我改了它

实证：Plan B Vue 起手把 persona / admin pill 直接塞进 TVU Topbar 右侧 cluster。用户纠正：「TVU Topbar 是公共组件，左右两侧 cluster 固定不可改」
返工：Topbar slot 重构 + sub-header 新建容器 + 元素 reorder
原因：AI 对"公共组件 = 跨产品共享 = 不能改"没默认意识

解决方案：

• 当下修复：persona/admin pill 从 TVU Topbar 拆出 → 新建 sub-header 容器；排序原则定型「固定内容（AutoRefresh）外侧 + 变化内容（New Session）内侧」
• 长期防护：消费产品 code 起手必须识别组件层级三分 — 公共组件（TVU 库提供，cluster 不可改）/ 产品级（跨页复用）/ 页面级；动公共组件 cluster 前必须 user 确认
• 真源落地： 本产品 spec plan-b-spec.md §Topbar； 待累积 2+ 例上 TVU code-conventions.md

Gap 4 · Empty state + icon 看起来像可点

实证：Plan A / 早期 Plan B 用 + icon 做 Empty state — 用户指出 + icon 看起来像可点 button，误导性强
返工：所有 Empty state icon 替换 + button 文字去 + 重复（"+ Create new" → "Create new"）
原因：AI 默认拿 + icon 当 empty state 万金油，没区分被动空 / 过滤空 / 创建动作三种语义

解决方案：

• 当下修复：图标三分语义 — i-empty-tray（被动，圆形 icon 背景）/ i-search（过滤无结果）/ i-add（仅 action button 内）；按钮文字去 + 前缀
• 长期防护：图标按 affordance 三分 — 被动状态用"空容器"语义 / 过滤态用 search / 创建动作用 add — 三者不能互换；按钮内已有 add icon 就不在文字加 +
• 真源落地： 本产品 spec 已落； 待累积 2+ 产品例上 TVU code-conventions.md 视觉语义段

Gap 5 · 列排序 — Phase 优先级判断错

实证：mockup 文档把列排序标 Phase 2 deferred — Plan A 跟着没做。用户反馈：「列排序得加，监控场景刚需」
返工：~1 轮新建 sort logic — 理念上是产品决策错位（监控页 P0 不是高级功能）
原因：Phase 优先级没考虑 page type vs feature priority 耦合 — 监控页和编辑页对同一功能优先级不同

解决方案：

• 当下修复：5 列可排序（Event Name / Object ID / Input URL / Output URL / State）3 状态循环 + 双三角 + aria-sort
• 长期防护：mockup → code 交接时 PRD 必须显式标 page type 元数据；监控页所有"找到目标 session"功能（排序 / 实时刷新 / Filter / 状态聚合）默认 P0，不接受 Phase 2 deferred
• 真源落地： 本产品 spec 18 节含排序规则表； 元规则待累积 3+ 例上 design-process.md

给 UX / PM（提需求方）

(1) 起手交付 TVU library 真源路径

"做个 MC + MS HTML demo"

"做个 MC + MS HTML demo，所有图标 source from tvu-design-system/dist/icons/svg/，禁止 inline 重画"

给 UX / PM（续）

(2) Page type 元数据要前置

让 AI 跟 mockup Phase 优先级走

"这是监控页，列排序 / 实时刷新 / Filter / 状态聚合都是 P0，不接受 Phase 2 deferred"

给 AI 协作流程

(3) @TVU code skill 起手强制 read code-conventions
不允许写一行 code 前没读 R1-R5。

(4) 结构问题必须 probe Figma 真值
不允许凭"我记得 mockup 是 X" 写代码。R4 反模式强 enforce。

给 PM / Stakeholder（review 方）

(5) Demo 验收 4 项 checklist

1. 图标是不是全从 TVU library？（grep <svg> source）
2. 公共组件（Topbar / Sidebar）cluster 结构有没有被改？
3. Empty state 用哪种语义图标？（被动 / 过滤 / 创建）
4. P0 监控功能（列排序 / 实时刷新 / 状态聚合）是否到位？

已落回流（5 条）

待回流（累积触发）

• 公共组件 cluster 不可修改（已 1 例）
• Empty state icon 语义三分（已 1 例）
• Phase 优先级按 page type 区分（已 1 例）

Opus vs Sonnet vs Haiku

纯 Sonnet 推算：

• 能完成 Plan A HTML demo
• 不会主动抽象出 R1-R5（Sonnet 倾向于"修这一个 case"而不是"上升到规则"）
• 不会主动设计 Session Handoff Protocol

规则工程化级的工作必须 Opus 做

Action Items

1. @TVU code skill 起手强制 read R1-R5

不允许写一行 code 前没读规则文件。skill SKILL.md 加 Phase 0 step。

2. Demo 验收 4 项 checklist 上墙

PM / UX review demo 时先过 4 问，不依赖事后发现。

3. Page type 元数据写进任务 prompt

每个 code task 第一句话标明"监控页 / 编辑页 / viewer / 设置页"，让 AI 据此判断 Phase 优先级。