Tldraw 实战技巧：把草图变成能跑的代码，这5招最管用

Tldraw 这个开源白板，最让我上头的就是那个“Make Real”功能——画个草图，AI 直接给你生成可运行的代码。但很多人用起来总觉得差点意思，画的东西 AI 识别不准，生成的代码也经常翻车。其实不是工具不行，是你没掌握正确的用法。

### 技巧一：画“伪代码”草图，而不是自由涂鸦

很多人一上来就画个方框写“登录按钮”，AI 生成的代码要么样式不对，要么逻辑跑不通。正确做法是：用文字标注+箭头+形状组合来画“伪代码草图”。

比如你想做一个待办列表，别只画个列表样式。先画一个方框，里面写“输入框+添加按钮”，再画一个方框写“待办项列表”，用箭头指向下方。然后在每个待办项旁边画个“删除”小按钮。这种结构化的草图，AI 能准确理解组件关系和交互逻辑，生成的代码几乎不用改。

### 技巧二：用颜色区分模块，AI 会“看懂”你的意图

Tldraw 的 Make Real 功能对颜色很敏感。我试过几次后发现，用不同颜色标注不同功能模块，AI 生成的代码结构会清晰很多。

比如蓝色代表用户界面组件，红色代表数据交互，绿色代表状态变化。你在画一个表单时，输入框和按钮用蓝色，提交后的成功提示用绿色，错误提示用红色。AI 在生成代码时，会自动给这些元素加上对应的样式和状态管理逻辑，而不是全部堆在一起。

### 技巧三：在草图旁边写“技术约束”备注

这是最容易被忽略的技巧。很多人只画界面，不写技术栈要求。结果 AI 默认用 HTML+CSS+JavaScript 生成，但你实际需要的是 React 组件。

正确做法是：在草图的空白处，用文字写清楚技术约束。比如“使用 React + TypeScript”、“组件化”、“支持移动端响应式”。AI 会读取这些备注信息，生成符合你技术栈的代码。我试过写“用 Tailwind CSS”，结果生成的代码直接带上了 Tailwind 类名，省了我大量改样式的时间。

### 技巧四：利用“协作白板”做代码评审

Tldraw 的协作功能不只是用来画图，最适合的场景是代码评审。

把 Make Real 生成的代码截图贴到白板上，拉上同事一起看。哪里逻辑有问题，直接在代码截图旁边画红圈、写备注。比在代码仓库里写评论直观多了。而且因为白板是实时的，你们可以边讨论边修改草图，然后重新生成代码，迭代效率直接翻倍。

### 技巧五：用“分步生成”代替“一次画完”

很多人想一次画完整个应用，结果 AI 生成的代码要么太复杂跑不起来，要么漏掉关键逻辑。正确的节奏是：先画核心功能，生成代码跑通，再逐步添加细节。

比如做一个笔记应用，先只画“新建笔记”和“笔记列表”两个核心模块。生成代码跑通后，再在白板上添加“删除笔记”和“搜索”功能。每次只增加一个模块，AI 生成的成功率会高很多。而且因为代码是增量生成的，你更容易定位问题出在哪里。

Tldraw 的 Make Real 确实是个好东西，但别指望它一次就给你完美代码。掌握这几个技巧，把它当成你的原型加速器，而不是代码生成器，你会发现效率提升不止一个量级。