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.version1, 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.version1}; } const card{id:card-3,version:4,label:Save}; const patch{id:p-7,componentId:card-3,baseVersion:4,label:Save draft}; const resultaccept(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 canvas2026-10-15发布。Introducing Specs: Markdown as a medium2026-10-15发布。Web Content Accessibility Guidelines (WCAG) 2.22024-12-12当前所读推荐版本日期。
