AI 改了一个按钮，你却要在几百行 diff 里猜它对应哪个画面。这个问题不需要界面先“读懂注意力”，而需要稳定的关联：哪份补丁、哪个组件、哪个预览状态，以及接受后还能不能撤回。
Figma 在 2026 年 10 月 15 日宣布 code layers 进入开放测试，强调把可运行原型放回共同画布评审。产品入口变化提供了一个提醒：代码生成之后，设计者仍需要看见差异、试用状态、表达取舍。以下是自己设计的审阅数据核，不是 Figma 内部实现，也不调用它的服务。
一次变更需要三个锚点
补丁ID用于找回这次建议，组件ID用于定位受影响对象，版本用于判断建议是否过期。行号可以作为显示提示，却不能担任永久身份：前面插入一行，旧行号就偏了。
预览也应指向一个确定状态。例如card-3 / error / mobile比“右边第二张图”更可靠。选中补丁时，代码与预览同步高亮；没有对应画面的变更仍需显示“无预览”，不能悄悄过滤。
接受和撤回都要检查当前版本
下面示例只修改一个内存对象。它故意没有网络、数据库或编辑器依赖；把完整代码保存成review.mjs，用 Node 执行即可。撤回采用新版本，不把版本号拨回过去。
import assert from 'node:assert/strict'; function accept(current, patch) { if (patch.baseVersion !== current.version) throw new Error('stale patch'); if (patch.componentId !== current.id) throw new Error('wrong component'); const next = {...current, version:current.version+1, label:patch.label}; return {next, receipt:{patchId:patch.id, before:{...current}, appliedVersion:next.version}}; } function undo(current, receipt) { if (current.id !== receipt.before.id || current.version !== receipt.appliedVersion) throw new Error('changed after apply'); return {...receipt.before, version:current.version+1}; } const card={id:'card-3',version:4,label:'Save'}; const patch={id:'p-7',componentId:'card-3',baseVersion:4,label:'Save draft'}; const result=accept(card,patch); assert.equal(result.next.label,'Save draft'); assert.equal(card.label,'Save'); assert.deepEqual(undo(result.next,result.receipt), {id:'card-3',version:6,label:'Save'}); assert.throws(()=>accept({...card,version:5},patch),/stale/); assert.throws(()=>accept(card,{...patch,componentId:'card-8'}),/component/); assert.throws(()=>undo({...result.next,version:6},result.receipt),/changed/); console.log('PASS: apply, undo, stale patch, wrong component, changed-after-apply');最后一个断言很关键。接受后若同事又改了标签，旧撤回不能直接把整份快照覆盖回去。真实协作系统可以提供三方合并或重新审阅；本文示例选择拒绝旧撤回，保持当前数据不变。
这段代码不验证建议文案本身。设计规则、权限和补丁格式仍要在进入接受操作前检查。也不要把它描述为分布式事务：内存中比较版本，并不能替代服务端的原子条件写入。
屏幕上的连续性也要保留
审阅面板可分为差异、影响范围与预览三块，但不必每次选择都重新创建整个编辑器。保留组件key、当前选区和滚动锚点；接受后把焦点放在结果提示或下一个可审阅操作，避免跳到页面顶端。
代码折叠应由用户明确控制。用鼠标停留推断“已理解”，再自动缩小行高，既可能遮住重要上下文，也会干扰编辑器自己的布局模型。需要Monaco等编辑器时，应逐项核对公开API，不能通过修改内部行DOM宣称实现了语义折叠。
这是一张教学关系图。虚线表示版本过期后回到审阅；拒绝补丁不表示原始文件已被修改。
交付审阅界面时，我更在意两件事：用户能否指出“我接受的是哪一次变化”，以及撤回遇到新修改时能否解释清楚。顺滑的高亮可以帮助定位，但最终结果应由版本和产物决定，不能由一段完成动画决定。
验证范围与资料
本地使用 v26.3.0 检查上述示例。纯 JavaScript 示例已在 Node 权限隔离模式执行，断言通过。未连接Figma、Monaco或协作后端；没有浏览器焦点、读屏或多人并发实测。
以下发布日期或版本日期与访问日期分开记录；24—31日的新消息须发稿前再核对。
- Design together with code layers on the canvas：2026-10-15（发布）。
- Introducing Specs: Markdown as a medium：2026-10-15（发布）。
- Web Content Accessibility Guidelines (WCAG) 2.2：2024-12-12（当前所读推荐版本日期）。
