--- marp: true theme: tvu-dark paginate: true size: 16:9 header: 'MicroApps Console · Code 复盘 · 2026-05-11 → 05-13' footer: 'Nancy Zeng × Claude Opus 4.7 · 内部分享' --- # MicroApps Console · Code ## 复盘：AI × UX 协作真实过程 **Nancy Zeng** · UX Designer **Claude Opus 4.7** · AI 协作伙伴 2026-05-11 → 05-13 · 2 个 code session --- ## 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 时被代码逼出来的产品决策 --- # 1 · Session 概览 --- ## 起点 & 落地 **起点**：Figma mockup 完成后需要可演示 / 可分享 PM 的 demo **Plan A** — 单 HTML PoC（~2300 行）： - 17 个 inline `` 全 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 --- # 2 · 时间线 跨 2 个 code session --- ## 时间线（精选 7 个转折点） | # | 阶段 | 用户原话 | 性质 | |---|---|---|---| | 1 | Plan A | "**TVU 设计库应约束图标来源**" | AI 自己造图标 | | 2 | Plan A | "MC 和 MS 的 filter bar 应保持一致" | R4 反模式实证 | | 3 | Plan A 收尾 | wrap-up + handoff | **R1-R5 规则工程化诞生** | | 4 | Plan B | "**TVU Topbar 公共组件，cluster 固定**" | AI 改公共组件 | | 5 | Plan B | "Empty + icon 误导（像可点）" | 图标语义三分 | | 6 | Plan B | "**列排序得加，监控刚需**" | Phase 2 提前到 P1 | | 7 | Plan B | "PM 要个公网链接" | cloudflared 选型 | --- # 3 · Top 5 Process Gap 按返工成本排序 --- ## Gap 1 · 没约束图标来源 ⚠️ **实证**：Plan A 起手用 inline SVG "看起来对"造图标 — 没去 TVU `dist/icons/svg/` 翻真源。用户元提醒：「**TVU 设计库应约束图标来源**」 **返工**：17 个 symbol swap + 500+ 行规则文件诞生 **原因**：`@TVU code` skill 之前只约束 mockup 层（M 系列），code 层没有平行约束 **✅ 解决方案**： - **当下修复**：17 个 inline `` 全部 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`](../specs/2026-05-13-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` --- # 4 · 高效对话 5 条建议 按 ROI 排序 --- ## 给 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 `` source） 2. **公共组件**（Topbar / Sidebar）cluster 结构有没有被改？ 3. **Empty state** 用哪种语义图标？（被动 / 过滤 / 创建） 4. **P0 监控功能**（列排序 / 实时刷新 / 状态聚合）是否到位？ --- # 5 · 规则回流 --- ## ✅ 已落回流（5 条） | 规则 | 真源 | |---|---| | R1 图标必须 source from TVU library | `code-conventions.md` | | R2-R3 字体 / 颜色 / 间距 token-only | `code-conventions.md` | | R4 不"先实现再问" | `code-conventions.md` | | R5 Session Handoff Convention | `multi-session-collaboration-rules.md` | | 图标必从 TVU library (user pref) | global memory | ## ⏳ 待回流（累积触发） - 公共组件 cluster 不可修改（已 1 例） - Empty state icon 语义三分（已 1 例） - Phase 优先级按 page type 区分（已 1 例） --- # 6 · Model 选型 --- ## Opus vs Sonnet vs Haiku | 模型 | 适合 | 本 session 起作用时刻 | |---|---|---| | **Opus 4.7** | 主对话 / 规则工程化 / 架构 pivot | R1-R5 规则诞生 / Plan A → Plan B pivot | | **Sonnet 4.6** | batch 改动 / swap / 重构 | 17 个 icon swap、5 列 sort logic、Sidebar 折叠 CSS | | **Haiku 4.5** | 简单 probe | 不适合主对话 | **纯 Sonnet 推算**： - ✅ 能完成 Plan A HTML demo - ❌ **不会主动抽象出 R1-R5**（Sonnet 倾向于"修这一个 case"而不是"上升到规则"） - ❌ 不会主动设计 Session Handoff Protocol > **规则工程化级的工作必须 Opus 做** --- # 7 · 给团队的 3 个 Action Items --- ## 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 优先级。 --- # Thanks **MicroApps Console · Code 复盘** 配对 Figma 复盘 → [2026-05-09 MicroApps Console Figma](2026-05-09-microapps-console-figma-mockup-retrospect-internal-share.md) R1-R5 真源 → `tvu-design-system/docs/internal/code-conventions.md` Plan B spec → [`docs/specs/2026-05-13-plan-b-spec.md`](../specs/2026-05-13-plan-b-spec.md) 复盘人：Nancy Zeng (UX) × Claude Opus 4.7 2026-05-21