--- marp: true theme: tvu-dark paginate: true size: 16:9 header: 'Source Delay & Bitrate Settings 复盘 · 2026-07-14' footer: 'Lora × Claude Sonnet 5 · 内部分享' --- # Source Delay & Bitrate Settings ## 复盘：AI × UX 协作真实过程 **Lora** · UX Designer **Claude Sonnet 5** · AI 协作伙伴 2026-07-14 --- ## TL;DR - **总轮次**：1 次初版 + 4 轮反馈 · ~55-60 次 `use_figma` 调用 - **最终交付**：Producer Settings 弹窗新增 Bitrate 下拉框 + Delay 缩进揭示字段 - **规则回流**：0 条已落，3 条待拍板 > **约一半的调用是在修复我自己引入的 Figma API 陷阱，不是在满足用户需求。** --- ## 1 · Session 概览 **起点**：Slack 讨论（EDPP-1970 后端已合并）→ 要求在 PP-2025-2026 Settings 页面做出 mockup **最终落地**： - 🎨 Bitrate (kbps) Dropdown（Format 区块下，16px 间距） - 🎨 Delay (ms) 缩进揭示字段（Source delay control 勾选后） - 📋 双态对比图 + M23 格式 UX 交付卡 --- ## 2 · 时间线（4 轮关键 feedback） | 轮 | 用户原话 | 触发改动 | |---|---|---| | 1 | "在这个页面做出上面的需求" | 首版：Input+图标、Delay 内联 | | 2 | "bitrate不要加图标...用下拉框" | 改 Dropdown、去图标、16px 间距 | | 2 | "delay的设置没有对齐" | 对齐修复（应自查而非等纠正）| | 3 | "位置再考虑一下，影响阅读" | 内联 → 缩进独立行 | | 4 | "优先使用pp-lora的规范" | 发现并重绑团队库 style | --- # Top 3 Process Gap ## 按返工成本排序 --- ## Gap 1 · 建元素前没查目标文件的团队库 **实证**：用户提醒才发现文件早订阅了 PP-Lora 库，所有原生元素都绑了 style，只有我新建的是裸 hex > **返工成本**：~6 次调用 > **前置成本**：1 次 `get_libraries` 调用即可规避 **回流** → `mockup-conventions.md` M-COLOR 新 sub-clause（⏳ 待拍板） --- ## Gap 2 · 3 个 Figma Plugin API 陷阱 - 新建 frame 默认白底，盖住白字 - `figma.group()` 前不 append 会导致坐标错位 - 忘记 `setCurrentPageAsync` → 内容建到错误 page > **返工成本**：~12-15 次调用 > **前置成本**：验证时截图真实父容器 + 每次调用固定设置 currentPage **回流** → `figma-technical-reference.md` 新 Q&A（⏳ 待拍板，本篇已列具体内容） --- ## Gap 3 · 复用最近邻居组件，没先判断字段语义 **实证**：Bitrate（预设挡位）误用了 Input+stepper；Delay 揭示字段先做成同行内联，读起来才发现太挤 > **返工成本**：~10 次调用 > **前置成本**：建前一句话写清字段语义类别 **回流** → `mockup-conventions.md` M16.1 / M32（⏳ 待拍板） --- # 高效对话建议 --- ## 给 UX / PM **(1) 具体、一次一个点的纠正效率最高** > "bitrate不要加图标，距离format 16px，用下拉框" 一次讲清 3 件事，一轮修完 **(2) 有已知规范来源，直接给线索** > "在 Assets 里搜 PP-Lora" 这句话能省 2 轮澄清 **(3) 提前对齐流程深度预期** > 先问清"轻量 mockup+卡片" vs "完整 8 步"，双方预期一致 --- ## 给 AI 协作流程 **(4) 新建元素也要用"查真源"纪律，不只核对已有元素时严格** **(5) 验证截图用真实父容器，不用孤立节点** > 孤立截图透明背景默认渲成白色，会掩盖真 bug 也会误判假 bug **(6) 每次写操作固定设置 currentPage，不假设页面状态延续** --- ## 给 PM / Stakeholder（review 方） **(7) 用 checklist review 而不是凭感觉** - [ ] 颜色/字体是否绑定发布库 style（非估算 hex） - [ ] 揭示字段是否有清晰"默认/揭示"两版展示 - [ ] 交付卡 Data Contract 是否精确对应真实 API 字段 - [ ] 交付卡是否只覆盖本期改动 --- ## 3 条待回流规则 | 规则 | 目标真源 | 触发条件 | |---|---|---| | 建元素前查订阅库 | mockup-conventions.md §M-COLOR | 累计 2-3 次同类实证 | | 3 个 Figma API 陷阱 | figma-technical-reference.md | 用户拍板即可写入 | | 字段语义先行选组件 | mockup-conventions.md M16.1/M32 | 累计 2-3 次同类案例 | **⏳ 全部待拍板，本 session 尚未写入任何真源** --- ## Model 选型推荐 | 模型 | 适合场景 | 本 session | |---|---|---| | **Sonnet 5** | 主对话 / API 调试 / 自审 | 全程独任，规模适配 | | **Opus 4.8** | 多方案设计判断 | 未用；Delay 揭示位置判断可受益 | | **Haiku 4.5** | 机械 probe | 未用；单线程无并行拆分机会 | **Hybrid 推荐**：小规模任务单 Sonnet 5 足够；涉及多方案布局判断时插入一次 Opus 设计阶段 --- ## 给团队的 3 个 Action Items **1. 建元素前查订阅库列为强制起手步骤** > 本 session 最大返工点，一次 `get_libraries` 即可规避 **2. 把 3 条 Figma 技术陷阱写入 figma-technical-reference.md** > 目前只活在这篇复盘里，需要显式拍板才能真正防住下次重犯 **3. 建立"checkbox 揭示从属字段"标准范式** > 避免"缩进子行 vs 同行内联"每次靠现场感觉判断 --- # Thank You **完整复盘文档** `docs/retrospects/2026-07-14-source-delay-bitrate-settings-mockup-retrospect-internal-share.md` **真源规则** `tvu-design-system` repo · mockup-conventions.md · figma-technical-reference.md **反馈 / 讨论** Lora (TVU UX team)