在 AI 辅助设计和开发领域，有一个让人眼前一亮的演示：在白板上随手画几个方框和箭头，标注"这是按钮"、"这是输入框"，然后 AI 直接生成一个可以在浏览器里运行的真实网页——不是图片，是可以点击、可以交互的代码。Makereal 做到了这个效果。
Makereal 是什么
Makereal（makereal.tldraw.com）是基于 Tldraw 在线白板工具构建的 AI 功能，让用户可以在白板上手绘 UI 草图，然后通过 AI（GPT-4V）将草图转换成实际可运行的 HTML/CSS/JavaScript 代码，直接在浏览器里生成可交互的界面。
Tldraw 本身是一个开源的白板/画图工具，类似 Excalidraw，支持网页版和自托管。Makereal 是在 Tldraw 基础上增加的 AI 转化能力，核心是利用多模态 AI（能理解图像内容的模型）把手绘界面转成代码。
使用方式
流程很简单：
- 在 Tldraw 画布上画出你想要的界面草图——可以用线条画边框，写上文字标注，标出按钮、表单、图片占位符等
- 选中草图区域
- 点击"Make Real"按钮
- AI 分析草图，生成对应的 HTML/CSS/JavaScript 代码
- 在页面右侧实时预览可交互的界面
生成的结果不只是截图，而是真正运行的网页代码，可以点击按钮、填写表单、看到交互效果。
还可以对已有的生成结果继续修改——在原有的草图上调整，再次点击 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 来使用，有一定的设置门槛。
价格
Makereal 本身是开源项目，代码在 GitHub 上开放；使用需要自己提供 OpenAI API Key，费用由 OpenAI API 调用消耗决定，通常每次生成的成本很低（几分钱美元）。
Makereal 代表了 AI 辅助设计的一个有趣方向——把白板思维直接连接到可运行的代码。对于需要快速原型的场景，这是目前最直接的"画即所得"体验之一，值得每个做产品和界面设计的人试试。