免費、開源
Agent 負責 build。
你決定下一步。
輕巧嘅產品工作空間：睇住 coding agent 起出嚟嘅 App，操作真實畫面，指住要改嘅地方，再由原始碼繼續 build。
永久免費 · MIT 授權 · 沿用你嘅 Agent
Claude Code
Codex
免費、開源
App 本身，就係畫布。
畫面由真實 UI 程式碼渲染。未安裝之前，先試公開示例。
虛構資料 Demo · 無 App backend · 毋須登入 · 毋須 API key
為 build → 檢視 → 修改而設
- 一次看清已實作的完整頁面、具名狀態及相連流程。
- 只維護一份 UI。Coding agent 負責 fixtures、adapter 及 coverage checks。
- 公開虛構資料 Demo 有 77 個狀態及 44 條流程，毋須登入或 API key。
看全貌、直接操作、播放流程
縮小，看清整個 App
按頁面分組查看完整畫面，搜尋、篩選或收起側欄。按流程連結後，鏡頭會移到目標畫面。
放大，操作真實 UI
Browse 會鎖住控制項，方便拖動畫布。選取畫面後按 Interact，即可以虛構資料操作原有 App 程式。
指住要改嘅地方
選取畫面或 UI 元素，寫低修改要求，再複製準確 reference 畀 coding agent。請佢改原始碼；來源整合嘅 preview 會重建。
指住要改嘅地方
選取畫面或 UI 元素，寫低修改要求，再複製準確 reference 畀 coding agent。請佢改原始碼；來源整合嘅 preview 會重建。
npm install -g github:tombelieber/app-canvas#v0.16.0
agent-canvas browsers
agent-canvas demo開始之前，你可能想知
Agent Canvas 免費嗎？
係。Local CLI、畫布同內附 Agent skill 都以 MIT 授權免費開源。你選用嘅 coding agent 有自己嘅訂閱或 API 費用。
支援 Claude Code 同 Codex 嗎？
支援。可安裝其中一個或兩個嘅 skill。其他 Agent 可跟公開 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，可隨時關閉。