Make Real
Active
什么是 Make Real?
Make Real 可将 tldraw 画布上的手绘 UI 线框图转为可运行的 HTML 原型。选中绘图后点击 Make Real，GPT-4 Vision 会生成包含 Tailwind CSS 与 JavaScript 的单个响应式 HTML 文件，并在画布 iframe 中预览。可在结果上标注后再次生成以迭代。需自备 OpenAI API 密钥。
如何使用 Make Real?
1. 获取具备 GPT-4 Vision 访问权限的 OpenAI 开发者 API 密钥。2. 访问 makereal.tldraw.com。3. 在页面底部输入框粘贴 API 密钥。4. 在画布上绘制界面。5. 选中绘图。6. 点击蓝色 Make Real 按钮。7. 数秒后网页会出现在画布上——可移动、缩放，或在上方继续绘制并再次点击 Make Real 进行优化。
Make Real 核心特点
01
草图转可运行 HTML
截取绘图选区并发送至 GPT-4 Vision，生成包含 Tailwind CSS 与 JavaScript 的单个自包含 HTML 文件。
02
画布内 iframe 实时预览
生成的原型在 tldraw 画布 iframe 中渲染，可交互、调整尺寸测试断点，并将多个版本并排排列。
03
迭代式设计循环
在已生成站点上绘制标注，选中区域后再次点击 Make Real，根据备注更新原型。
04
复制 HTML 输出
从预览菜单复制生成的 HTML，在画布外使用原型。
05
开源入门模板
在 GitHub 上 Fork make-real-starter 模板，基于 tldraw SDK 构建自己的 Make Real 类应用。
Make Real 使用案例
将低保真线框图转为可点击的 UI 原型
在画布上缩放生成站点以探索响应式布局
通过反复绘制与生成打磨产品创意
从手绘草图快速原型化计算器、小游戏等简单交互应用
Make Real 常见问题解答
是否需要 OpenAI API 密钥？
Make Real 会生成什么？
如何迭代优化结果？
Make Real 是否免费？
Make Real 产品背景及官方链接
Make Real 支持电子邮件和客户服务联系方式和退款联系方式等。
Make Real 支持电子邮件： hello@tldraw.com
更多联系方式，请访问 关于我们页面(https://tldraw.dev/blog/product/make-real-the-story-so-far/)
Make Real 公司信息
Make Real 公司名称： tldraw
Make Real 公司地址： London, GB
更多关于 Make Real, 请访问 关于我们页面(https://tldraw.dev/blog/product/make-real-the-story-so-far/)
Make Real 推特
Make Real 推特链接： https://x.com/tldraw
Make Real 领英
Make Real 领英链接： https://www.linkedin.com/company/tldraw
Make Real GitHub
Make Real GitHub 链接： https://github.com/tldraw/make-real
Make Real 定价和计划
Free
免费免费
- 在 makereal.tldraw.com 免费使用 Make Real
- 需自备 OpenAI API 密钥
- OpenAI API 按量计费，由 OpenAI 直接收取
- GitHub 提供开源代码