BuilderIO开源visual-edit可视化编辑工具
BuilderIO开源了visual-edit工具，让你像用Figma一样可视化编辑本地应用，改动自动交给编码agent写回源码。
BuilderIO团队开源了visual-edit工具，可将本地应用装入Figma式无限画布。用户可在画布上可视化查看页面、修改样式，改动会交还给编码agent写回源码。每个screen都是真实路由页面，不是静态截图。该工具支持多人协作，完全免费开源。
[开源 Skills 分享] /visual-edit @builderio 团队 Agent-Native 体系中的一个核心 Skill，把正在运行的本地应用装进一个 Figma 式的无限画布，让你可视化地看页面、改样式，再把改动交还给编码 agent 写回源码。画布上每个 screen 是活的路由页面，不是静态截图，看到的永远是真实状态。 开源地址： github.com/BuilderIO/skil… 基本用法 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。 · 免登录可用：一次性的短时凭证，不是账号会话；账号级的保存和分享仍需登录。 Steve (Builder.io) @Steve8708 Introducing /visual-edit - a skill to visually edit your local code like a Figma canvas - works with any agent or model - Figma-grade visual editing on your local apps - apply visual updates through your coding agent - multiplayer and collaborative - 100% free and open source Your browser does not support the video tag. 🔗 View on Twitter 🔗 View Quoted Tweet 💬 0 🔄 0 ❤️ 2 👀 405 📊 1 ⚡
