AI Engineer Europe 2026 · 演講 · 2026-05-01 · 20 分
把 agent 放上畫布
Agents on the Canvas in tldraw · Steve Ruiz,tldraw
tldraw 從 Make Real 一路做到畫布上的多 agent 協作,再讓 agent 在桌面版直接寫程式改畫布,Steve Ruiz 也坦白交代風險與現場失敗的 demo。
概要
- 從 Make Real 開始Steve Ruiz 說 Make Real 是 2023 年最早「破圈」的 AI 專案之一,讓不懂程式的人把畫布丟給模型,就拿到可運作的原型。
- 用結構化輸出在畫布上畫圖模型輸出的是文字結構,用的是人也能用的圓形、形狀等工具,不是像 diffusion model 那樣生成圖片。Steve 也談到視覺訓練資料少、座標軸方向互相衝突,讓模型穩定輸出很難。
- 從單次生成走到 agent loop,再走到 fairies先做出會產出、檢視、再迭代的 agent,但 Steve 覺得像把鍵盤交給別的 AI;於是把 agent 放到畫布上,變成可以看到狀態與動作的 fairies。
- 多隻 fairies 協作它們能看到彼此在做什麼,也能選出一位 leader 去看畫布、列待辦並分派。Steve 提到要處理共享狀態,以及 agent 工作時近乎看不見彼此的問題。
- 桌面版讓 agent 直接寫程式瀏覽器版有安全限制,團隊改用桌面 app,開一個接收 JavaScript 並執行的 endpoint。Steve 明說這個做法在一般 app 上是壞主意。
- 風險交給使用者Steve 認為要把 agent 的能力發揮到最大,就得把風險交給使用者,並以 OpenClaw 為例,說這是「sharp tools」。
原話
▶ 05:22“It is using text-structured outputs to make the same things that I could make, right?”
它用的是文字結構化輸出,做出我自己也能做出的東西
▶ 08:48“it felt like I was handing my keyboard to some other AI, rather than someone collaborating with me.”
感覺像把鍵盤交給別的 AI,而不是跟人協作
▶ 12:37“Fairies is a great way to talk about like multiple agents kind of working together.”
fairies 是談多個 agent 一起工作的好例子
▶ 16:19“It has no qualms at all, by the way, changing stuff that's on your desktop, on your computer.”
它完全不會猶豫去改你桌面、你電腦上的東西
▶ 18:50“I think OpenClaw does this pretty well. These are sharp tools. Have fun, you know?”
我覺得 OpenClaw 在這點做得不錯,這些是利器,玩得開心
延伸
- Steve 說 tldraw 的 SDK 是 React 元件,也有 runtime API 可以寫程式操作,但沒有說明細節。
- Steve 提到教育場景中 tutor 式的用法,只以填表單為例,沒有展開。
- 最後的互動 demo 沒有跑成,Steve 說之後會再讓它跑起來。
章節
點時碼直接跳到原片的那一段。
- Steve 與 tldrawSteve Ruiz 介紹 tldraw 是線上白板、新創公司,也是別的產品拿來蓋畫布的 SDK,並舉 Replit 的畫布為例。
- Make Real 的由來2023 年視覺模型剛出來時的專案,把畫布送給模型做成可運作的原型,現場 demo 跑得不順。
- 在成品上標註可以直接在產出的 HTML 上畫記號、指定顏色,等於把標註也組進 prompt,Steve 說後來很少有 app 這樣做,直到最近才有 Google Stitch。
- 讓 AI 當畫布協作者讓 AI 在畫布上協助畫圖表、補完簡報,示範畫貓、讓貓吹蠟燭,同時多個 prompt 也行。
- 視覺模型的難處視覺訓練資料比文字少,而且互相矛盾,例如座標圖與網頁的 y 軸方向不同,所以得靠 prompt engineering 才能穩住輸出。
- 做成 agent loop一次生成不夠,改成讓 agent 產出、檢視再迭代,示範畫蝴蝶的生命週期。
- 仍不像在協作這種模式在其他設計 app 與教育場景很好用,但 Steve 仍覺得像把鍵盤交給別的 AI,示範讓它幫忙填 D&D 角色表。
- fairies 上畫布把 agent 變成畫布上的小精靈,看得到狀態與動作,也看得到彼此,示範一隻畫帽子、一隻畫貓的脖子。
- 多 agent 協作三隻 fairies 中選出 leader,先觀察畫布、列待辦、分派工作並檢查完成度,過程中碰到共享狀態與避免重疊的問題。
- 真的能做事放出 fairies 示範網址,並請它們依一份電子書描述做 app 的 wireframe,Steve 讓它們先跑著,自己繼續講。
- 改用桌面 app要給 agent 更多畫布權限,但需要 DOM 與截圖,沙箱行不通,於是做了 Electron 外殼,開 endpoint 接收並執行 JavaScript。
- 程式與圖互通可以把程式視覺化成圖、改圖再讓程式跟著改,也能對沒有互動原語的畫布寫程式做出可操作的介面。
- 不設防的改動這種 agent 會毫不遲疑地改電腦上的東西,Steve 舉團隊成員請 Claude 拿掉 Spotify 的 podcast 為例,現場的互動 demo 最後沒跑成。
- 把風險交給使用者local first 與 file over app 本來只是理想,現在為了讓 agent 的能力最大化,變成必須把風險交給使用者,並以 OpenClaw 為例。
名詞
- tldraw
- Steve 的公司,做線上白板,也提供讓別的產品內嵌畫布的 SDK
- Make Real
- 2023 年的專案,把畫布送給視覺模型,產出可運作的原型
- tldraw computer
- Steve 提到的另一個以多段 prompt 串起來的專案,這場沒有展開
- fairies
- 畫布上的小精靈 agent,可多隻同時工作,能看到彼此的狀態與動作
- leader
- 多隻 fairies 協作時選出的一隻,負責看畫布、列待辦並分派,自己不動手
- Electron
- Steve 用來包裝桌面版的框架,外殼開一個 endpoint 接收 JavaScript 並執行
- script injection
- 讓 agent 對編輯器寫程式、直接改畫布與應用程式,是這場桌面版的核心做法
- OpenClaw
- Steve 最後舉的例子,說它把風險交給使用者的做法做得不錯







