所有節目›AI Engineer Europe 2026| World's Fair 2026完整場次線上軌AI in HealthcareSoftware Factories
Agents on the Canvas in tldraw在 YouTube 看這一場

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」。

原話

  • “It is using text-structured outputs to make the same things that I could make, right?”

    它用的是文字結構化輸出,做出我自己也能做出的東西

    ▶ 05:22
  • “it felt like I was handing my keyboard to some other AI, rather than someone collaborating with me.”

    感覺像把鍵盤交給別的 AI,而不是跟人協作

    ▶ 08:48
  • “Fairies is a great way to talk about like multiple agents kind of working together.”

    fairies 是談多個 agent 一起工作的好例子

    ▶ 12:37
  • “It has no qualms at all, by the way, changing stuff that's on your desktop, on your computer.”

    它完全不會猶豫去改你桌面、你電腦上的東西

    ▶ 16:19
  • “I think OpenClaw does this pretty well. These are sharp tools. Have fun, you know?”

    我覺得 OpenClaw 在這點做得不錯,這些是利器,玩得開心

    ▶ 18:50

延伸

  • Steve 說 tldraw 的 SDK 是 React 元件,也有 runtime API 可以寫程式操作,但沒有說明細節。
  • Steve 提到教育場景中 tutor 式的用法,只以填表單為例,沒有展開。
  • 最後的互動 demo 沒有跑成,Steve 說之後會再讓它跑起來。

章節

點時碼直接跳到原片的那一段。

  1. Steve 與 tldrawSteve Ruiz 介紹 tldraw 是線上白板、新創公司,也是別的產品拿來蓋畫布的 SDK,並舉 Replit 的畫布為例。
  2. Make Real 的由來2023 年視覺模型剛出來時的專案,把畫布送給模型做成可運作的原型,現場 demo 跑得不順。
  3. 在成品上標註可以直接在產出的 HTML 上畫記號、指定顏色,等於把標註也組進 prompt,Steve 說後來很少有 app 這樣做,直到最近才有 Google Stitch。
  4. 讓 AI 當畫布協作者讓 AI 在畫布上協助畫圖表、補完簡報,示範畫貓、讓貓吹蠟燭,同時多個 prompt 也行。
  5. 視覺模型的難處視覺訓練資料比文字少,而且互相矛盾,例如座標圖與網頁的 y 軸方向不同,所以得靠 prompt engineering 才能穩住輸出。
  6. 做成 agent loop一次生成不夠,改成讓 agent 產出、檢視再迭代,示範畫蝴蝶的生命週期。
  7. 仍不像在協作這種模式在其他設計 app 與教育場景很好用,但 Steve 仍覺得像把鍵盤交給別的 AI,示範讓它幫忙填 D&D 角色表。
  8. fairies 上畫布把 agent 變成畫布上的小精靈,看得到狀態與動作,也看得到彼此,示範一隻畫帽子、一隻畫貓的脖子。
  9. 多 agent 協作三隻 fairies 中選出 leader,先觀察畫布、列待辦、分派工作並檢查完成度,過程中碰到共享狀態與避免重疊的問題。
  10. 真的能做事放出 fairies 示範網址,並請它們依一份電子書描述做 app 的 wireframe,Steve 讓它們先跑著,自己繼續講。
  11. 改用桌面 app要給 agent 更多畫布權限,但需要 DOM 與截圖,沙箱行不通,於是做了 Electron 外殼,開 endpoint 接收並執行 JavaScript。
  12. 程式與圖互通可以把程式視覺化成圖、改圖再讓程式跟著改,也能對沒有互動原語的畫布寫程式做出可操作的介面。
  13. 不設防的改動這種 agent 會毫不遲疑地改電腦上的東西,Steve 舉團隊成員請 Claude 拿掉 Spotify 的 podcast 為例,現場的互動 demo 最後沒跑成。
  14. 把風險交給使用者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 最後舉的例子,說它把風險交給使用者的做法做得不錯

相關影片 同屬「聊天框之外」