BuilderIO开源visual-edit：Agent可视化编辑与代码回写工

[开源 Skills 分享] /visual-edit

@builderio 团队 Agent-Native 体系中的一个核心 Skill，把正在运行的本地应用装进一个 Figma 式的无限画布，让你可视化地看页面、改样式，再把改动交还给编码 agent 写回源码。画布上每个 screen 是活的路由页面，不是静态截图，看到的永远是真实状态。

开源地址：https://github.com/BuilderIO/skills/tree/main/skills/visual-edit

基本用法 1. 确保 dev server 在跑（agent 自己启动的服务器用 AUTH_DISABLED=1，别把登录页当目标）。 2. 调 open-visual-edit，传入路由（如 /、/pricing）和视口（desktop、mobile 等），它会创建画布、排好屏幕、返回链接。 3. 用户在画布上做视觉修改：改颜色、文字、间距，拖拽布局。 4. 改动累积为一个待处理批次，永不直接写源码。 5. agent 说“拉取我的视觉修改”，用 get-visual-edit-pending 取回改动，写入源码，HMR 自动刷新画布，确认后关闭该批次。

画布组织 默认 3 到 7 个屏幕：每条路由 × 每个视口一帧，网格排列。除正常页面外，主动纳入空态、加载、报错、弹窗这些 URL 可寻址的状态。除非用户明确要求全量审计，不铺开所有路由。

接入方式 按优先级降级：MCP App（画布与对话并排），托管 MCP connector，浏览器 WebMCP。Playwright、CDP 等能执行 JS 的浏览器控制器也可直接用，无需装任何东西。

安全边界 · 画布编辑始终是待定提案，修改代码只走 coding agent 这一条路径；结构性修改（重排、.map() 列表、共享组件）会被拒绝直写，必须经 agent。 · 写本地文件须用户手动点同意弹窗，agent 无法自我授权；.env 等敏感文件永远排除。 · 分享链接只渲染脱敏后的快照，访客碰不到你的 localhost。 · 免登录可用：一次性的短时凭证，不是账号会话；账号级的保存和分享仍需登录。