Tldraw 完整使用攻略：从草图到代码的开源白板实战指南
是什么 / 适合谁
Tldraw 是一款开源的协作白板工具，核心亮点在于“Make Real”功能——能把你在白板上随手画的草图，一键转化为可运行的代码。它由美国团队 Tldraw 开发，定位是轻量级、低门槛的创意原型工具。
适合谁使用：
- 产品经理与设计师：快速画界面草图，生成前端代码原型，省去反复沟通的成本
- 开发者：在技术方案讨论中，用草图表达逻辑，再转化为代码验证想法
- 教育工作者与学生：在线协作讲解概念，边画边演示
- 自由职业者与创业者：低成本验证产品想法，无需写一行代码就能看到效果
不适合谁：
- 需要深度文档编辑（如长篇报告、复杂表格）的用户
- 依赖中文界面操作的团队
- 追求专业级 UI 设计工具（如 Figma、Sketch）的视觉设计师
阶段学习路径
第1天：上手核心功能
目标： 熟悉基础画布操作，完成第一个“草图→代码”转换。
- 打开工具：访问 Tldraw 官网，无需注册登录即可使用免费版。建议使用 Chrome 或 Edge 浏览器。
- 画布基础：
- 点击左侧工具栏，尝试“画笔”“矩形”“圆形”“箭头”等基础图形。
- 双击图形可输入文字，拖动边缘可调整大小。
- 右上角“手型工具”可拖动画布，“选择工具”可框选多个对象。
- 核心功能：Make Real
- 在画布上画一个简单的界面草图，比如顶部一个标题框，中间一个按钮，底部一个列表。
- 用选择工具框选整个草图，点击顶部菜单栏的“Make Real”按钮（图标类似魔法棒）。
- 等待几秒，系统会生成一段 HTML/CSS/JavaScript 代码，并在右侧预览窗口显示效果。
- 点击“复制代码”即可粘贴到本地编辑器运行。
- 协作体验：点击右上角“分享”按钮，生成链接发送给同事，对方无需登录即可实时协作编辑。
第1天小任务： 画出“登录页面”草图（用户名输入框+密码框+登录按钮），用 Make Real 生成代码，并在浏览器中打开验证。
第1周：掌握协作与进阶技巧
目标： 熟练使用协作功能，学会用组件化思维画草图。
- 协作技巧：
- 多人同时编辑时，每个用户的光标颜色不同，可实时看到对方操作。
- 使用“评论”功能（右上角气泡图标）在特定图形上添加意见，适合团队评审。
- 图形组合与复用：
- 选中多个图形，右键“组合”为一个整体，方便整体移动或缩放。
- 选中组合后的图形，按 Ctrl+C/Ctrl+V 复制，快速复用相同组件。
- 用“箭头”连接不同组件，表达页面跳转逻辑（如点击按钮跳转到详情页）。
- Make Real 进阶：
- 草图越清晰，生成的代码越准确。建议用矩形框代表容器，用文字标注功能。
- 尝试画包含“列表项”“搜索框”“导航栏”的复杂页面，观察代码生成效果。
- 如果生成结果不理想，可以手动调整草图细节后再次点击 Make Real。
- 导出与分享：
- 点击“文件→导出为图片”，保存为 PNG 或 SVG 格式用于文档。
- 点击“文件→导出为 .tldr 文件”，保存项目文件供后续编辑。
第1周小任务： 与同事协作设计“商品列表页”，包含搜索、筛选、分页组件，生成代码并讨论优化点。
进阶：自定义与自部署
目标： 利用开源优势，定制 Tldraw 满足团队特定需求。
- 本地部署：
- 访问 Tldraw GitHub 仓库，克隆项目到本地。
- 安装 Node.js 环境，运行
npm install 和 npm run dev，即可在本地启动实例。
- 修改
src 目录下的配置文件，可调整默认语言、主题色、工具栏选项。
- 集成到现有项目：
- Tldraw 提供 React 组件库，可通过
npm install @tldraw/tldraw 引入到自己的 Web 应用。
- 在代码中嵌入
<Tldraw /> 组件，实现白板功能与业务系统的无缝对接。
- 扩展 Make Real：
- 进阶用户可修改 Make Real 的 AI 模型配置，调整代码生成风格（如默认使用 Vue 框架替代 React）。
- 注意：此操作需要一定编程基础，且需自行承担模型调用成本。
优势
- 开源免费，无登录门槛：打开即用，无需注册，数据完全本地化，隐私安全有保障。
- Make Real 降低原型成本：从想法到可运行代码只需几步，特别适合快速验证概念。
- 实时协作体验流畅：多人编辑延迟低，光标同步精准，适合远程团队头脑风暴。
- 可自部署，完全可控：企业可搭建内部白板服务，数据不出域，满足合规要求。
短板
- 界面全英文：对非英语用户不友好，操作菜单、提示信息均为英文，学习成本略高。
- 深度文档场景弱：不支持复杂表格、公式编辑、目录生成等，不适合做正式文档。
- Make Real 精度有限：复杂交互逻辑（如多条件筛选、动态数据加载）生成代码可能出错，需手动调整。
- 免费版功能受限：高级协作功能（如版本历史、权限管理）需付费，自部署版本需自行搭建。
价格规划
| 版本 |
价格 |
核心功能 |
| 免费版 |
0元 |
基础画布、Make Real（每日有限次数）、实时协作（最多5人） |
| 团队版 |
约$10/月/人 |
无限 Make Real 次数、版本历史、权限管理、优先支持 |
| 自部署版 |
免费（开源） |
完全自定义、无用户数限制、需自行维护服务器 |
建议： 个人用户或小团队先用免费版体验，若 Make Real 使用频繁，可考虑团队版；有技术能力的企业直接自部署更划算。
不合适怎么办
如果 Tldraw 无法满足你的需求，以下替代方案可供参考：
- 需要中文界面 + 深度文档：尝试「石墨文档」或「飞书文档」，它们提供白板功能且支持中文，但缺少代码生成能力。
- 需要专业 UI 设计：使用「Figma」或「Sketch」，它们有更强大的矢量编辑和组件库，但学习曲线更陡。
- 需要复杂代码生成：考虑「v0.dev」或「Bolt.new」，它们专注于从描述生成完整前端项目，但需付费且部分功能需国外环境。
- 需要离线白板：使用「Excalidraw」，它同样开源免费，支持本地运行，但无代码生成功能。
选择建议： 如果你的核心需求是“快速把想法变成可运行的代码原型”，Tldraw 是目前成本最低、门槛最低的选择。如果更看重文档规范性或设计专业性，建议结合其他工具使用。
