Tldraw 使用教程：从入门到上手

Tldraw 是什么

Tldraw 是一款开源的协作白板工具，由美国团队 Tldraw 开发。它最特别的地方，是内置了一个叫 "Make Real" 的 AI 功能——你随手在白板上画个草图，它能直接生成可运行的 HTML/CSS/JavaScript 代码。简单说，设计师画个按钮、产品经理画个流程图，AI 就能把它变成能点能跳的网页原型。

它本质上是个在线白板，支持多人实时协作，也支持自托管部署（把代码放到自己的服务器上跑）。因为开源，很多开发者用它做内部工具或嵌入到自己的产品里。

核心功能怎么用

白板协作：和 Miro、Excalidraw 类似，Tldraw 提供画笔、形状、箭头、便签、图片等基础工具。多人同时编辑时，能看到彼此的光标和操作。适合远程会议时一起画架构图、流程图、UI 草图。

Make Real（草图变代码）：这是最亮眼的功能。先用画笔工具画一个界面草图（比如一个搜索框、一个按钮、一个列表），然后用选区工具框住它们，点击 "Make Real" 按钮，AI 就会分析你的草图，生成对应的 HTML 代码。你可以直接预览效果，也可以复制代码到编辑器里继续改。目前它主要生成前端代码，对简单的 UI 原型效果不错，复杂交互还不太行。

本地部署：如果你不想用官方云服务，可以在 GitHub 上找到 Tldraw 的源码，用 npm 安装后跑在自己服务器上。数据完全由你控制，适合对隐私要求高的团队。

第一次上手步骤

1. 打开官网：浏览器访问 tldraw.com，不需要注册就能直接开始画。注意这是海外服务，国内访问偶尔会慢，如果打不开或卡顿，可以找找国产替代方案（比如 ProcessOn、博思白板）。
2. 熟悉工具栏：左侧是画笔、形状、文本、箭头等工具，顶部是颜色、粗细、透明度等设置。随便画几个图形，试试拖拽、缩放、连线。
3. 尝试 Make Real：用画笔工具画一个简单的界面，比如顶部一个搜索框，下面三个卡片。用鼠标框选它们，点击右上角的 "Make Real"（可能需要登录或等待几秒），AI 会生成代码并显示在右侧面板。点击 "Run" 可以预览效果。
4. 邀请协作：点击右上角的 "Share" 按钮，复制链接发给同事，对方打开就能一起编辑。注意多人协作需要网络通畅。
5. 保存与导出：白板内容会自动保存到浏览器本地。你也可以导出为 PNG、SVG 或 JSON 文件。JSON 可以导入到其他 Tldraw 实例中。

适合什么场景

• 快速原型：产品经理或设计师画个草图，直接让 AI 生成代码，省去从设计稿到前端开发的中间步骤。适合早期验证想法，不适合生产级代码。
• 远程头脑风暴：团队一起画流程图、思维导图、用户旅程图，比纯文字沟通直观。实时协作功能比截图发来发去高效。
• 教学演示：老师边讲边画，学生能看到每一步。白板上的内容可以导出为图片放进课件。
• 内部工具：开发者把 Tldraw 嵌入到自己的管理后台，让运营人员直接在白板上标注、画流程图，数据存在自己服务器上。

价格说明

Tldraw 采用免费+付费模式。免费版可以在线使用，支持基本白板功能和 Make Real（有次数限制）。Pro 版约 10 美元/月，解锁无限 AI 调用、更高画布上限、优先支持等。如果你只是偶尔用用，免费版足够；如果团队频繁使用 Make Real 或需要协作，可以考虑付费。注意付费需要国际信用卡，国内用户支付不便，可以优先用免费版或国产替代。

开源版本完全免费，但需要自己部署，没有官方云服务那么方便。建议先在线体验，觉得好用再考虑部署。