零代码-让你的草图变成一个网页

2026-08-27 10:01:49

零代码-让你的草图变成一个网页

#1

draw-a-ui

AI的发展，总是能带来很多有趣且省力的神奇项目。

如果小伙伴有个做网站的想法，但不会HTML代码，可以做吗？

原来当然不行，但现在不但可以，还非常简单。

今天给小伙伴再推荐一个好用的GITHUB开源软件-draw-a-ui。

draw-a-ui是一款革命性的AI绘图工具，能够将手绘线框图智能转换为高质量的HTML代码。这个开源项目利用GPT-4 Vision API的强大功能，为开发者提供了前所未有的设计到代码转换体验。

程序的工作原理是，只需将当前的画布SVG转换成PNG，然后发送该png到gpt-4-vision，并附带带Tailwind返回单个HTML文件的指令。

这是一个Next.js应用。要开始，请在项目的根目录中执行以下命令。你需要一个OpenAI API密钥，并访问GPT-4 Vision API。

让我们从安装开始吧！

官网地址：

https://github.com/sawyerhood/draw-a-ui

环境要求

nodejs 18.17或更高版本。请各位小伙伴确认安装了nodejs，并且版本大于18.17或以上哦。

安装步骤

1、默认下载方式：

方法一）

git clone https://github.com/sawyerhood/draw-a-ui.git

方法二）code按键选择download ZIP，下载。

方法三，老6的方法）以上下载都是很慢的，版主直接给出快速的下载链接：

https://gh.llkk.cc/https://github.com/SawyerHood/draw-a-ui/archive/refs/heads/main.zip

2、安装依赖

npm install

如果你在CMD中直接执行这行，那可有的等了。

要加上一个速度快的源地址，所以请执行：

npm install --registry https://registry.npmmirror.com/

到这里，恭喜您，您已经完成安装了。

3、可能的问题

如果你在执行npm install时，出现：

npm ERR! code

ERR_SSL_CIPHER_OPERATION_FAILED

这个错误，需要执行以下命令进行修复；

npm calear --forcenpm install --registry https://registry.npmmirror.com/

用记事本打开，输入openai的密钥并保存。

在CMD中，执行：

npm run dev

启动后，用浏览器访问

http://localhost:3000/

我们可以看到以下界面：

是的，我们已经可以成功使用了。

选择下面的画笔，随意绘画，然后点击“Make Real”的按钮会生成标准的HTML页面。是不是很神奇。

让小白也能用上免费好用的软件

喜欢我的文章，就关注我吧；

一起学习，一起努力；

零代码-让你的草图变成一个网页

最新文章

热门文章

随机文章

零代码-让你的草图变成一个网页

PowerMill数控加工自动编程经典实例

工科生的新风尚:健身与代码的完美结合

最新文章

热门文章

随机文章