news 2026/10/25 17:55:16

让设计 Agent 先给差异再改页面:确认面板的四个状态

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
让设计 Agent 先给差异再改页面:确认面板的四个状态

让Agent一次修改十个组件,真正困难的未必是“确认”按钮放在哪里,而是用户确认的范围有没有在点击之前变化。预览看的是圆角,执行时却多改了颜色;这种错位再配上流畅动画,也只是更难发现。

10月Figma Specs把设计意图、引用与协作讨论放到同一画布,适合用来说明变更范围。这里进一步提出一条前端约束:确认针对的是一份具体差异清单,不是某个可能继续变化的任务。

先给出可核对的差异

清单应显示组件、属性、前值与后值,并允许打开相应状态。数量只能帮助估计影响面,不能替代差异内容。模型生成尚未结束时,可以显示建议草稿,但不要把尚会变化的内容直接送进应用阶段。

“建议—待确认—应用中—结果”是四个交互阶段。结果也不只有成功:部分失败、状态未知和已应用应逐项列出。下面内存样例让一项故意失败,用来检查显示逻辑,不模拟真实系统收益。

确认凭据绑定这份清单

保存为confirm.mjs后用Node运行。签名只是固定结构的规范化字符串,用于本地内容比较;它不是安全签名,也不承担鉴权。

import assert from 'node:assert/strict'; function signature(ops){ const ids=ops.map(o=>o.id); if(new Set(ids).size!==ids.length)throw new Error('duplicate operation'); return JSON.stringify(ops.map(({id,component,key,before,after})=> [id,component,key,before,after]).sort((a,b)=>a[0].localeCompare(b[0]))); } async function applyConfirmed(ops, receipt, applyOne){ if(!receipt.confirmed||receipt.signature!==signature(ops)) throw new Error('confirm this exact change list'); const result=[]; for(const op of ops){ try{await applyOne(op);result.push({id:op.id,status:'applied'});} catch(error){result.push({id:op.id,status:'failed',message:error.message});} } return result; } const ops=[ {id:'a',component:'card',key:'radius',before:4,after:8}, {id:'b',component:'button',key:'gap',before:8,after:12} ]; const receipt={confirmed:true,signature:signature(ops)}; let calls=0; const result=await applyConfirmed(ops,receipt,async op=>{ calls++;if(op.id==='b')throw new Error('teaching failure'); }); assert.deepEqual(result.map(x=>x.status),['applied','failed']); await assert.rejects(()=>applyConfirmed( [{...ops[0],after:16},ops[1]],receipt,async()=>{}),/exact change/); assert.equal(calls,2); assert.equal(result[0].id,'a'); console.log('PASS: exact-list confirmation and per-operation results');

为了保持示例集中,这里把所有抛出错误记为failed。真实适配器遇到“请求已发出但结果查不到”时,应给unknown,不能因为本地超时就断言没有修改。也不能把部分成功自动回滚成“全部未应用”;那会掩盖实际产物。

前值比较应由有权写入的系统原子完成。前端凭据只能防止界面在用户不知情时更换清单,不能保证服务器没有并发写入。若应用阶段出现冲突,回到该组件的当前版本重新审阅。

动效该说明阶段,不该代替结果

确认后,按钮可以转为“正在应用”,但动画结束不等于写入完成。结果区域保留每项ID、状态与打开入口;已应用项和失败项都能找回。重复点击应明确说明当前阶段,不让用户因为没有反馈而不断确认。

撤销也要说明边界:是只撤销已成功项,还是准备一份新的反向差异?受影响对象已经再变更时,应展示冲突,不能把旧快照无条件覆盖回去。

图只描述界面阶段及分项结果,不代表存在一个跨多个组件的后端事务,也不暗示失败会自动重试。

确认面板应该让设计者知道“这次同意了什么”,结果面板则回答“最终发生了什么”。把这两个问题分清,反馈动画才有可信的内容可以表达。

验证范围与资料

本地使用 v26.3.0 检查上述示例。纯 JavaScript 示例已在 Node 权限隔离模式执行,断言通过。只测试内存差异清单和手写失败回调;没有连接Figma、应用真实补丁或验证分布式原子性。

以下发布日期或版本日期与访问日期分开记录;24—31日的新消息须发稿前再核对。

  • Design together with code layers on the canvas:2026-10-15(发布)。

  • Introducing Specs: Markdown as a medium:2026-10-15(发布)。

  • Using the Web Animations API:2025-11-07(最后修改)。

  • Web Animations 官方草案:2023-06-05,W3C Working Draft。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/10/25 17:54:52

边缘设备启动优化:上电、服务就绪与首token是三只不同的秒表

一个界面显示“开机用了8秒”,模型首个回答却要到十几秒以后才出现。两个数字都可能没错,只是终点不同。 边缘设备的需求若写成“3秒启动”,团队很容易各自优化不同部分:固件算到内核入口,系统工程师算到服务拉起&…

作者头像 李华
网站建设 2026/10/25 17:36:55

用eNSP搭建中小型企业网:VLAN、DHCP、NAT与防火墙配置实战

简介:适合网络工程学习者的小型企业网ensp练习包,基于华为企业网络仿真平台,覆盖从网络规划、VLAN划分到OSPF/BGP路由配置、ACL安全策略等典型运维场景,可用于课程设计或岗前技能训练。包内共19个文件,主体为8个cfg设备…

作者头像 李华
网站建设 2026/10/25 17:15:27

Claude Code学习机制与开发者反馈优化实践

1. Claude Code的核心学习机制解析作为一款新兴的AI编程助手,Claude Code最引人注目的特性就是其学习型架构。与传统代码生成工具不同,它能够通过开发者的实时反馈不断优化输出结果。这种能力背后是三个关键技术的融合:首先是增量学习算法&am…

作者头像 李华
网站建设 2026/10/25 16:57:32

OpenPose pose_iter_xxxxxx.caffemodel 深度解析与部署避坑指南

简介:本资源为OpenPose官方预训练模型库完整合集,面向计算机视觉方向的研究者、算法工程师及深度学习实践者,用于快速开展人体姿态估计、手部关键点检测、面部特征定位等多场景应用开发与模型微调。压缩包内共12个文件,包含6个Caf…

作者头像 李华
网站建设 2026/10/25 16:49:59

HDFS特征工程实战:大数据挖掘核心技术解析

1. HDFS数据挖掘特征工程全景解析在大数据生态中,HDFS作为分布式存储基石,存储着企业最原始的数据资产。但原始数据就像未经雕琢的玉石,需要通过特征工程转化为机器可理解的"语言"。我在金融风控和电商推荐系统的实战中发现&#x…

作者头像 李华
网站建设 2026/10/25 16:38:28

给Agent放行一个域名,为什么还挡不住错误外联

应用代码看到一个HTTPS地址,就能认为它属于批准的网站吗?域名解析、重定向和代理链都可能改变最终目的地。10月23日OpenAI的隔离说明再次把出站路径放到了显眼的位置。 应用校验只是第一道门 URL中有scheme、hostname、port、userinfo和路径。用starts…

作者头像 李华