使用draw-a-ui将草图生成网页

介绍draw-a-ui前需要先提一下tldraw。

什么是 tldraw？

tldraw 是一款协作数字白板，可在 tldraw.com 上体验。 它的编辑器、用户界面和其他底层库都是开源的，可以在这个存储库中使用， tldraw 也已经发布在了 npm 上。 开发者可以使用 tldraw 为产品创建嵌入式白板，或作为构建自己无限画布应用程序的基础。

import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
// 引入相应的库
export default function () {
	return (
		<div style={{ position: 'fixed', inset: 0 }}>
			<Tldraw />
		</div>
	)
}

目前 tldraw 在Github上通过 MIT 协议开源，有超过28.4k的star、1.6k的fork、是一个值得关注的优质前端开源项目。

什么是 draw-a-ui？

而 draw-a-ui 是一个使用 tldraw 和 gpt-4-vision api 并根据绘制的线框生成 html 和 css 的应用程序的工具。GPT-4 Vision 结合视觉数据理解自然语言的能力使其有别于传统的人工智能模型， draw-a-ui 项目还可以识别图像内的空间位置。 借助 GPT-4 Vision API，用户可以通过视觉数据的镜头更深入地探究世界。

draw-a-ui 的工作原理是获取当前画布 SVG，然后将其转换为 PNG，接着将该 png 发送到 gpt-4-vision，并附有指令以返回带有 tailwind 的单个 html 文件。

不过值得一提的是，draw-a-ui 项目目前还不是很成熟，不适用于生产用途，也没有任何身份验证。大家如果感兴趣，可以在 http://www.draw-a-ui.com 平台进行体验。

目前 draw-a-ui 在 Github 上通过 MIT 协议开源，有超过 11.8k 的 star、1.3k 的 fork、是一个值得关注的前端向优质 AI 开源项目。

如何使用 draw-a-ui？

draw-a-ui 目前是一个 Next.js 应用程序。 首先，在项目的根目录中运行以下命令将获得一个能够访问 GPT-4 Vision API 的 OpenAI API 密钥。

请注意，该项目需要使用 Next.js 14 并且需要高于v 18.17 的 Node 版本。

echo "OPENAI_API_KEY=sk-your-key" > .env.local
// 需要有自己的openai的key、没有可以申请
npm install
// 安装依赖
npm run dev
// 启动开发服务器

用浏览器打开 http://localhost:3000 查看真实运行效果页面。

draw-a-ui相关资料

https://github.com/SawyerHood/draw-a-ui/tree/cc9cf808218288e88b106d3b9bc05c25fc32b942

https://www.draw-a-ui.com/

https://twitter.com/zsviczian/status/1726830508938772673

https://github.com/tldraw/tldraw