免费、开源
Agent 负责 build。
你决定下一步。
轻巧的产品工作空间：查看 coding agent 构建的 App，操作真实界面，指出要改的地方，再从源代码继续构建。
永久免费 · MIT 许可 · 使用你的 Agent
Claude Code
Codex
免费、开源
App 本身，就是画布。
画面由真实 UI 代码渲染。安装前，先试公开示例。
合成数据 Demo · 无 App backend · 无需登录 · 无需 API key
为构建 → 检视 → 修改而设
- 一次看清已实现的完整页面、命名状态和连接流程。
- 只维护一份 UI。Coding agent 负责 fixtures、adapter 和 coverage checks。
- 公开合成数据 Demo 有 77 个状态和 44 条流程，无需登录或 API key。
看全貌、直接操作、播放流程
缩小，看清整个 App
按页面分组查看完整画面，搜索、筛选或收起侧栏。点击流程链接后，镜头会移动到目标画面。
放大，操作真实 UI
Browse 锁定控件，便于拖动画布。选中画面后点击 Interact，即可用合成数据操作原有 App 代码。
指出要修改的地方
选择画面或 UI 元素，写下修改要求，再复制准确引用给 coding agent。让它修改源代码；源码整合的 preview 会重建。
指出要修改的地方
选择画面或 UI 元素，写下修改要求，再复制准确引用给 coding agent。让它修改源代码；源码整合的 preview 会重建。
npm install -g github:tombelieber/app-canvas#v0.16.0
agent-canvas browsers
agent-canvas demo开始之前，你可能想知道
Agent Canvas 免费吗？
是。本地 CLI、画布和内置 Agent skill 均以 MIT 许可免费开源。所选 coding agent 有自己的订阅或 API 费用。
支持 Claude Code 和 Codex 吗？
支持。可安装其中一个或两个的 skill。其他 Agent 可按公开指南使用 CLI。画布本身不调用模型。
需要先做设计文件吗？
从 App 源代码或导入网站开始。Agent 接入现有 UI 并建立虚构 fixtures，让你一起检视真实画面和状态。
公开 Demo 会修改我的 App 吗？
不会。Demo 在浏览器运行固定的虚构示例。检视你的 App 和修改源码需在本地项目与 coding agent 进行。
原生 App 呢？
UIKit、SwiftUI 和 Android 需要项目专属的原始 runtime harness 与截图。原生截图不等于浏览器内可操作的原生 App。
这个版本能证明什么，有哪些限制
- Web preview 使用真实 HTML/CSS，交互时执行原有 JavaScript。UIKit、SwiftUI 和 Android 需要原生 runtime harness 和证据；原生截图不等于可操作的原生 App。
- Coverage 是经过审查的源码与 case 对照，不会自动推断所有业务场景。UI checks 不代表 production backend、医疗准确率或模型 precision 已达标。
- Viewer 默认 English，支持 11 种语言。公开 Demo 是固定的虚构前端；本机集成会跟随源码更新。尚未测量实体 iPad 性能。
隐私与遥测
可选地经 Cloudflare 发送少量使用事件到 PostHog。不会将页面内容、代码、姓名、文件路径、email 或 IP 地址转交 PostHog，可随时关闭。