tldraw
開源白板,能把草圖變程式。
tldraw 是開源的無限白板工具,畫流程圖、草圖、示意圖都很順手。它最出名的是一個叫 Make Real 的實驗性功能:你在白板上手繪一個介面草圖(隨便畫個按鈕、輸入框),它用 AI 把這張草圖變成能實際運作的程式碼——把「畫出來的想法」直接變成「跑得動的原型」,這在剛推出時驚艷了很多開發者。
對開發者與設計師,它的價值是快速把 UI 概念變成可互動的雛形:草圖到程式的距離被大幅縮短,適合發想與快速驗證。它也支援協作,而且開源。
白板核心免費開源,Make Real 這類 AI 功能通常要自備模型 API key。要有合理期待:AI 生的程式碼是原型級,拿來驗證概念很好,真要上線仍需工程師接手調整。適合想快速把介面想法變原型的開發者、設計師,以及喜歡開源工具的人。
TheAI學院 編輯建議
編輯實測後的真心話想把手繪線框變成可跑的網頁原型,tldraw 的 Make Real 很有趣。我們給 4.3 分。
主要功能
- 無限白板
- Make Real 草圖轉程式
- 協作
- 開源
如何使用 tldraw
- 開啟 tldraw 網頁,免安裝即用。
- 在無限白板畫出線框草圖。
- 選取草圖用 Make Real 功能。
- 讓 AI 把草圖變成網頁原型。
- 檢視可運行的原型。
- 與團隊協作編輯白板。
- 匯出用於發想或原型。
適用場景
- 白板協作
- UI 原型
- 發想
tldraw 的優點與缺點
優點
- 白板好用、開源
- 草圖變原型很酷
缺點
- AI 功能需 API key
- 原型需再調整
tldraw 常見問題
tldraw 免費嗎?
白板開源免費,AI 功能需自備 API。
使用者評價
還沒有足夠評價,搶先分享你的使用心得!
寫下你的評價
tldraw 的替代方案
查看相似的 AI 工具 →相關 AI 工具
猜你也想看的AI 創作與內容生成
tldraw 評測:值得用嗎?
一句話結論
一個做得非常好的開源白板,AI 功能有趣但仍屬實驗性質;它真正的價值在開發者能把整個無限畫布嵌進自己的產品裡。
實際能做什麼
tldraw 有兩個身分。對一般使用者,tldraw.com 是免費的協作白板,手繪風格、順手、載入快。對開發者,tldraw SDK 是一個可以用 npm 安裝的 React 元件,讓你把無限畫布放進自己的應用程式——底層是 TypeScript 與 React,用 WebGL 算繪以維持大量圖形時的效能,內建即時協作、游標同步、視角跟隨與游標聊天。API 開放到可以自訂圖形、處理事件與狀態持久化。
AI 的部分主要是 Make Real:把手繪的介面草圖變成可運作的 HTML/CSS。這個功能當年在網路上爆紅過一陣子,展示效果非常好。另外還有一個叫 Computer 的實驗性專案,做的是在無限畫布上用自然語言組合元件、串成會分支與迴圈的工作流。
優點
- 開源,SDK 授權彈性,開發者可以深度客製
- 白板本身的手感是同類產品裡數一數二的,畫起來就是舒服
- 即時協作的基礎建設完整,自己做要花幾個月
- Make Real 對於快速驗證介面想法確實有用
缺點
- AI 功能官方明確標示為實驗性質,準確度不穩定,別放進正式流程
- Make Real 生出來的程式碼是可運作的原型,不是能上線的品質
- 一般使用者能用到的 AI 功能有限,多數價值在 SDK 這一側
- 商業使用 SDK 需注意授權條款,不是所有情境都能免費
適合誰
兩種人:想在自己產品裡加上白板或畫布功能的開發團隊;以及單純想找一個好用、免費、不用註冊的協作白板的個人與小團隊。想找完整企業白板功能(範本庫、投票、簡報模式)的團隊,這不是你要的。
替代方案
純白板需求,Miro 與 FigJam 的功能完整度高得多,但都要付費。開源路線的話 Excalidraw 是最直接的對手,風格類似、同樣好用,差別在 tldraw 的 SDK 生態與可嵌入性更強。草圖轉程式碼的需求,v0 的產出品質比 Make Real 高一個檔次。
台灣觀點
台灣的軟體團隊如果要做需要畫布的產品——流程設計工具、教學平台的板書、系統架構圖編輯器——自己從零做無限畫布是個大坑(縮放、圖層、協作衝突處理都是硬功夫)。tldraw SDK 這種現成方案能省下數個月的工程時間,這是它對台灣開發者最實在的價值。
至於 Make Real,我的建議是把它當成有趣的原型工具,別對它抱期待。想從草圖到程式碼真的走到底,目前還是得靠專門的 AI 開發工具。可以到站上的 開發者工具 分類看看其他選項。
本評測由 TheAI學院編輯群整理,內容力求客觀、含優缺點,僅供參考。
最後更新:2026年9月