draw-a-ui

Draw-a-UI 是一个开源演示应用，旨在通过绘制线框图快速生成 HTML 代码。\n\n## 用途\n该应用允许用户在画布上绘制 UI 线框图，然后自动生成对应的 HTML 代码。\n\n## 主要能力\n- 使用 tldraw 作为绘图画布。\n- 利用 GPT-4 Vision API 分析绘制的线框图。\n- 生成使用 Tailwind CSS 的单个 HTML 文件。\n\n## 使用方式\n1. 确保拥有可访问 GPT-4 Vision API 的 OpenAI API 密钥。\n2. 在项目根目录运行以下命令启动 Next.js 应用（需要 Node.js 版本大于 18.17）：\n bash\n npm install\n npm run dev\n \n3. 在浏览器中打开 http://localhost:3000 查看结果。\n4. 在画布上绘制线框图，应用会自动生成 HTML。\n\n## 适用场景\n- 快速原型设计：将手绘线框图转换为 HTML 代码，加速 UI 开发流程。\n- 演示和学习：了解如何结合绘图工具与 AI 视觉 API 生成代码。\n\n## 限制\n- 这是一个演示项目，不适合生产环境使用。\n- 没有身份验证机制，如果部署到公网，可能导致 API 被滥用而产生高额费用。\n- 需要 OpenAI API 密钥，并确保账户有 GPT-4 Vision API 的访问权限。\n- 项目使用 Next.js 14，需要 Node.js 版本大于 18.17。