Makereal Tldraw

更新于

tldraw 的草图转代码演示：在画布上画界面，自带模型 API Key 生成可交互 HTML 并嵌回画布

  • 热度
  • UI设计
  • 免费额度
访问官网
Makereal Tldraw 界面预览
信息有误？反馈纠错

仅提交本页地址和问题类型，进入编辑复核队列；无需账号或联系方式。

工具速览

它至今仍是「草图转代码」这条路上最直观的演示，画完就能在画布上点；但 tldraw 2026 年的精力明显放在 SDK、Agent 与离线上，把它当稳定的展示样例而不是持续进化的产品更合适。

  • 免费是
  • 开源是
  • API 支持是
适合
  • 想直观理解「草图转代码」能做到什么程度的人
  • 已有模型 API Key、愿意自带的开发者
  • 做界面构想与快速验证的产品与设计岗
  • 想基于开源仓库自行改造的团队
优点
  • 交互闭环很完整：框选草图生成 HTML，结果以 iframe 嵌回画布可直接交互，在结果上继续批注再生成即可迭代
  • 开源且免费，可自行部署，模型可选 OpenAI、Anthropic、Google
  • 不锁厂商——换模型只是换一个 Key
缺点
  • BYO Key 模式，往公开站点粘 API Key 有安全风险，官方组件名 `RiskyButCoolAPIKeyInput` 本身就是提醒
  • 输出是实验性的，准确度不稳定，不能当生产代码用
  • tldraw 2026 年的迭代重心在 SDK、MCP 与离线版，Make Real 更像稳定的展示样例而非在扩张的产品
价格

工具本身免费且开源（tldraw/make-real），但需要自带模型 API Key——支持 OpenAI、Anthropic、Google，费用直接付给模型厂商。可用托管站，也可以自行部署。注意 tldraw 官方另有面向团队的 SDK 商业授权，自 $500/月起，与 Make Real 是两回事

价格随官方调整，请以官网为准

替代

在 AI 辅助设计和开发领域，有一个让人眼前一亮的演示：在白板上随手画几个方框和箭头，标注"这是按钮"、"这是输入框"，然后 AI 直接生成一个可以在浏览器里运行的真实网页——不是图片，是可以点击、可以交互的代码。Makereal 做到了这个效果。

Makereal 是什么

Makereal（makereal.tldraw.com）是基于 Tldraw 在线白板工具构建的 AI 功能，让用户可以在白板上手绘 UI 草图，然后通过 AI（GPT-4V）将草图转换成实际可运行的 HTML/CSS/JavaScript 代码，直接在浏览器里生成可交互的界面。

Tldraw 本身是一个开源的白板/画图工具，类似 Excalidraw，支持网页版和自托管。Makereal 是在 Tldraw 基础上增加的 AI 转化能力，核心是利用多模态 AI（能理解图像内容的模型）把手绘界面转成代码。

使用方式

流程很简单：

  1. 在 Tldraw 画布上画出你想要的界面草图——可以用线条画边框，写上文字标注，标出按钮、表单、图片占位符等
  2. 选中草图区域
  3. 点击"Make Real"按钮
  4. AI 分析草图，生成对应的 HTML/CSS/JavaScript 代码
  5. 在页面右侧实时预览可交互的界面

生成的结果不只是截图，而是真正运行的网页代码，可以点击按钮、填写表单、看到交互效果。

还可以对已有的生成结果继续修改——在原有的草图上调整，再次点击 Make Real，AI 更新代码，实现迭代设计。

实际应用场景

快速 UI 原型

这是 Makereal 最直接的价值——会议上突然有了界面想法，在白板上画出来，几秒钟就有一个可以演示的原型。不需要打开 Figma，不需要写代码，直接有可以点击的东西展示。

对于产品经理、设计师在需求沟通阶段的快速原型，Makereal 的效率远超传统方式。

设计探索和迭代

在概念探索阶段，快速生成多个不同布局方案，直观看到实际效果，帮助做设计决策。这比反复修改设计稿或写代码快得多。

技术演示和 Demo

想展示一个功能的概念，不需要真正开发完整系统，用 Makereal 快速做出一个界面 Demo，用于汇报或路演演示。

学习和教学

教学场景里，讲解 UI 布局原则，可以用 Makereal 快速把课堂讨论的想法变成可视化的实际例子，学生也可以练习设计思维。

和其他工具的比较

vs Figma（传统原型设计）：Figma 可以做更精细、更专业的原型和设计稿，是正式产品设计的标准工具；Makereal 的草图更快，生成的结果是真实代码，不需要专业设计工具技能。两者不是替代关系，Makereal 更适合快速概念验证，Figma 适合正式产品设计。

vs GitHub Copilot（代码生成）：Copilot 是在代码编辑器里辅助写代码；Makereal 的起点是图形草图，不需要先知道代码怎么写。输入形式根本不同，适合不同阶段。

vs v0.dev（Vercel）：v0 也是 AI 生成 UI 的工具，输入文字描述生成 React 组件；Makereal 的输入是手绘草图，更直觉化，对于能"画出来但说不清楚"的想法更适合。两者互补。

vs Sketch2Code（微软）：同样是草图转代码，微软的 Sketch2Code 方向相似；Makereal 更灵活，在白板环境里边画边生成，体验更流畅。

vs Adobe Firefly（设计辅助）：Firefly 是视觉生成，不生成可交互代码；Makereal 的输出是真实运行的界面，两者定位不同。

谁适合用 Makereal

产品经理：把需求讨论中的界面想法快速变成可演示的原型，不需要等设计师和工程师，提升沟通效率。

设计师（快速概念验证）：在正式设计之前，用草图快速探索布局方向，看实际效果后再投入精细设计。

前端开发者（快速脚手架）：画出大概结构，让 AI 生成 HTML 骨架，然后在基础上继续完善代码，比从空白文件开始更快。

非开发背景的创作者：想看到自己的界面想法的实际效果，但不会写代码，Makereal 是最低门槛的路径。

技术演示和黑客马拉松：快速做出能展示的 Demo，而不是花大量时间写基础代码，在有限时间内展示想法。

局限性

生成的代码是 HTML/CSS/JavaScript 的基础实现，不是 React、Vue 等现代前端框架，不能直接拿去用在实际项目里（需要重写）。

草图的识别有时候不准确，特别是写字潦草或布局复杂时，AI 的理解可能有偏差，生成结果需要和草图对照检查。

复杂的交互逻辑（数据绑定、动态内容、API 调用）目前能力有限，更适合静态界面和简单交互的原型。

需要自己提供 OpenAI API Key 来使用，有一定的设置门槛。

价格

工具本身免费且开源（仓库 tldraw/make-real 与 make-real-starter），但它是 BYO Key 模式：你需要自带模型 API Key，支持 OpenAI、Anthropic、Google 等，token 费用直接付给模型厂商。

两种用法：

  • 托管站：在 makereal.tldraw.com 页面底部把 API Key 粘进去，画好界面、框选、点 Make Real
  • 自行部署：建一个 .env.local 写入 API Key，跑本地服务

官方在 starter 仓库里对那个 API Key 输入框的命名是 RiskyButCoolAPIKeyInput——名字本身就是提醒：往公开站点里粘 API Key 这件事要谨慎，用完记得吊销或限额。另有一个常见误会：创建 Key 和给账户充值是两件事，很多"Key 不管用"其实只是账户没余额。

别混淆：tldraw 官方面向团队的 SDK 商业授权自 $500/月起，那是画布 SDK 的授权费，和免费的 Make Real 演示不是一回事。