tldraw make real：在白板上画个草图，AI 直接帮你变成能用的网页
画一个按钮，它就真的变成按钮——零基础也能「画」出网页
它是什么
你可以把 tldraw 想象成一块无限大的电子白板。平时我们用它画图、贴便利贴、做头脑风暴。但它有一个特别神奇的功能，叫 make real（让它成真）。
什么意思呢？就是你在这块白板上随手画一个方框，写上「登录按钮」，然后点一下 make real，AI 就会把你画的这个草图，变成一个真正能点击、能用的网页。你画的按钮，会变成真的按钮；你画的输入框，会变成真的能输入文字的框。
说白了，它就是把「你脑子里的画面」直接翻译成「能跑的网页」的工具，中间不需要你写一行代码。
解决什么问题
很多人都有过这种经历：脑子里有个网站的想法，但不会写代码，找设计师又贵又慢，最后想法只能停留在嘴上。
tldraw make real 解决的就是这个问题：
- 不会代码也能把想法变成看得见的网页
- 不用学复杂的设计软件，会画火柴人就行
- 几秒钟出结果，改起来也快——不满意就再画一笔，重新生成
它特别适合：想快速验证想法的创业者、需要给客户看个大概效果的设计师、还有单纯想玩玩 AI 黑科技的普通人。
长什么样
打开 tldraw，你会看到一块大大的白色画布，左边或上边有一排工具栏，里面是各种画笔、形状、文字工具，跟你用过的画图软件差不多。
几个你会用到的关键按钮：
- 画笔 / 形状工具：用来画方框、圆形、箭头
- 文字工具：在画布上打字，比如「这里是标题」
- make real 按钮：这是主角，通常是一个显眼的按钮，点一下就开始把你的草图变网页
- 预览区域：生成后，你能直接在白板上看到、点到生成的网页效果
怎么安装
好消息是，tldraw 有网页版，大多数情况下你什么都不用装，打开浏览器就能用。如果你想在自己电脑上跑（适合想折腾一下的朋友），按下面步骤来：
- 先装 Node.js（一个运行网页项目的基础环境）。去
nodejs.org下载长期支持版（LTS），一路点「下一步」装好就行。 - 打开命令行工具：Windows 按
Win + R，输入cmd回车；Mac 打开「终端」。 - 输入下面这行命令，把项目下载到本地：
（如果没装 git，可以去git clone https://github.com/tldraw/tldraw.gitgit-scm.com下载安装） - 进入项目文件夹：
cd tldraw - 安装项目需要的依赖（可以理解成「准备食材」）：
npm install - 启动项目：
npm run dev - 看到提示后，在浏览器里打开它给的地址（一般是
http://localhost:5173），就能看到白板了。
嫌麻烦？直接用官网在线版最省事。
怎么用
我们以「画一个简单的登录页面」为例，走一遍完整流程：
- 画外框：用形状工具画一个长方形，当作登录卡片的边框。
- 画输入框：在里面画两个细长的方框，一个写「用户名」，一个写「密码」。
- 画按钮：再画一个方框，里面写上「登录」两个字。
- 点 make real：选中你画的这些东西，点击 make real 按钮。
- 等几秒：AI 会开始工作，然后你的草图就变成了一个真正的登录页面，输入框能打字，按钮能点。
小技巧：你画得越「像那么回事」，AI 理解得越准。比如想让两个按钮并排，就真把它们画成并排。生成后不满意？直接在生成的网页上再画、再改，然后重新 make real 就行。
需要 AI 模型吗？
需要的。make real 这个「把草图变网页」的魔法，背后是靠 AI 大模型（可以理解成一个很聪明的「翻译官」，把你的画翻译成网页代码）来完成的。
所以你需要准备一个 API Key（一串钥匙一样的密码，用来证明「我有权限用这个 AI」）。常见的选择有 OpenAI、Anthropic 等家的模型。不同模型效果和价格不一样，挑一个适合自己的很重要。
不知道怎么选？我们整理了一份模型导航，帮你对比各家特点和费用：去模型导航挑一个适合你的 AI 助手 →
费用
tldraw 这个白板工具本身是开源免费的，你可以随便用、随便改。但是 make real 功能要调用 AI 模型，AI 模型是按使用量收费的——画得越多、生成越频繁，花的钱越多。日常玩玩一般花不了多少，但记得给它设个用量上限，别一觉醒来账单吓人。
适合谁
- 有想法但不会写代码的创业者、产品经理
- 想快速出个原型给客户看的设计师
- 想体验「AI 把画变网页」黑科技的好奇宝宝
- 老师、学生用来做演示和教学
项目地址
tldraw 是一个开源项目（意思是代码公开，谁都能看、能用、能改进），目前在 GitHub（全球最大的程序员交流社区）上有 31k 颗星，人气很高。