draw-a-ui：把手绘线框图转成 Tailwind HTML 的开源应用
draw-a-ui 是一个基于 Next.js 的演示应用，利用 tldraw 白板绘制线框图，再把当前画布 SVG 转成 PNG，交给 gpt-4-vision 生成一个带 tailwind 的单一 HTML 文件。官方声明其为演示项目、不适合生产使用，且没有鉴权。
社区作者 · zZz
它解决什么问题
draw-a-ui 是一个开源演示应用，使用 tldraw 与 gpt-4-vision API，根据你绘制的线框图生成 HTML。作者说明该项目的精神继任者是 Terragon Labs。
工作原理（来源明确描述）：取当前画布的 SVG，转换成 PNG，然后把这张 PNG 连同“返回一个带 tailwind 的单一 html 文件”的指令一起发送给 gpt-4-vision。
配图 1 为作者提供的应用演示动图（A demo of the app）。
免责声明（原文要点）：这是一个 demo，不打算用于生产环境；它没有任何鉴权，如果直接部署会导致费用失控（原文表述为 “you will go broke if you deploy it”）。
项目形态：Next.js 应用，使用 Next.js 14，要求 node 版本高于 18.17。需要拥有 GPT-4 Vision API 访问权限的 OpenAI API key。
适用对象：想快速把界面草图变成可运行 HTML 原型的前端开发者、设计师与产品人员，以及用于教学或概念验证场景；因缺少鉴权与生产级设计，不适合直接上线部署。
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
准备环境：
- 一台可运行 Node.js 的机器，安装 Node.js 版本需大于 18.17（项目说明此处可参考 Next.js 官方文档的版本要求）。
- 一个可访问 GPT-4 Vision API 的 OpenAI API key。
安装与启动（在项目根目录依次执行）：
echo "OPENAI_API_KEY=sk-your-key" > .env.local （把 sk-your-key 替换为你自己的 OpenAI API key）
- 写入环境变量文件：
- 安装依赖：
npm install- 启动开发服务器：
npm run dev- 首次运行：在浏览器中打开 http://localhost:3000 查看结果，在画布上绘制线框图后即可触发生成 HTML。
常见问题与注意事项：
- 该项目是演示性质，官方明确说明不适用于生产环境。
- 项目没有任何鉴权机制，如果部署到线上会导致 API 费用不可控（原文：部署后 “you will go broke”）。
- 若无法调用 GPT-4 Vision，需确认所用 API key 具备 GPT-4 Vision 的访问权限。
Node.js 版本低于 18.17 时可能无法正常启动，需升级后再执行
npm install 与 npm run dev。
来源教程配图
