Draw-A-UI：你的前端可以直接用笔画出来！通过绘画创建 Web 应用 | 感觉就像魔术一样（附教程）

Draw-A-UI：你的前端可以直接用笔画出来！通过绘画创建 Web 应用 | 感觉就像魔术一样（附教程）

原文链接：（更好排版、视频播放、社群交流、最新AI开源项目、AI工具分享都在这个公众号！）

🌟Draw-a-UI可以平替 OpenUI和v0。它用 AI 把 草图 、图片或文字 转换成前端代码，支持很多框架，比如
Tailwind、NextJS、React 和 Vue，还能把 Figma 文件变成 HTML。

GitHub: https://github.com/SawyerHood/draw-a-ui 嘿，大家好！今天我要和大家聊聊一个新工具：
Draw-a-UI 。这是一个改变 UI 开发游戏规则的神器！你可以用它轻松绘制线框，然后一键转换为 Tailwind 或 JavaScript
代码。这是一个新的 替代 方案，比OpenUI、 ScreenshotToCode 和v0更棒。 它基于 TLDraw项目
，是一个 开源的AI项目 ， 可以通过Mockup-to-Frontend、Image-to-Frontend和Text-to-
Frontend界面生成前端代码。你可以用它生成Tailwind、NextJS、Svelte、JSX、HTML、React、SVG和Vue等前端组件，还能把Figma转换成HTML。
主要亮点 🔥 颠覆前端开发：了解如何用Draw-a-UI从草图和文本生成前端代码，这是一款改变游戏规则的AI前端生成器。 💻
简单集成：发现如何将Draw-a-UI与Ollama或其他API集成，并自定义系统提示以生成React或Svelte等语言的代码。 🎨
设计到代码轻松搞定：看看Draw-a-UI如何使用TLDraw轻松创建线框图，以及如何添加自己的图像、Figma设计截图和手绘UI来生成代码。 💸
快速且准确：了解Draw-a-UI如何利用GPT-4O API快速准确地生成前端代码，并对生成的布局有很好的控制。 📝
文本到代码功能：探索如何仅通过文本生成前端代码，无需创建原型或模型。 🔓 可定制且可扩展：了解Draw-a-
UI的代码是基于NextJS构建的，易于导航和定制，有潜力连接其他API并更改前端。 🚀 提升你的开发水平：马上开始使用Draw-a-
UI，体验AI驱动的前端开发的强大功能，使用方便、可定制选项多、生成速度快。 加入Draw-a-UI，体验一键将线框转换为 Tailwind 或
JavaScript 代码的便利吧！

演示&教程

这个应用程序的工作原理是获取当前画布的 SVG，将其转换为 PNG，并将该 PNG 发送给 gpt-4-vision，附带指示返回一个带有 tailwind
的 HTML 文件。

油管博主： lan Wootten / 字幕译：Aitrainee， 链 接在 这里 ：

https://www.youtube.com/watch?v=oUfsQpTg-1E

入门指南

这是一个 Next.js 应用程序。要开始，请在项目的根目录下运行以下命令。您需要一个具有 GPT-4 Vision API 访问权限的 OpenAI
API 密钥。

请注意，这个应用程序使用 Next.js 14，需要 node 版本高于 18.17。 了解更多信息 。

echo "OPENAI_API_KEY=sk-your-key" > .env.local  
npm install  
npm run dev

用浏览器打开 http://localhost:3000 查看结果。

知音难求，自我修炼亦艰

抓住前沿技术的机遇，与我们一起成为创新的超级个体

（把握AIGC时代的个人力量）

**
**

** 点这里 👇 关注我，记得标星哦～ **

一键三连「分享」、「点赞」和「在看」

科技前沿进展日日相见 ~

预览时标签不可点

微信扫一扫
关注该公众号

轻触阅读原文

AI进修生

---

---

收藏