你的前端可以直接用笔画出来——Draw-A-UI

中英文泡椒

将画出的草图生成网页？本来我是不太敢相信的，直到我看见这个项目——Draw-A-UI



现已获得13.4k star

Draw-A-UI是一个使用 tldraw 和 gpt-4-vision api 的应用程序，可根据你绘制的线框生成 html。

其工作原理是获取当前画布 SVG，将其转换为 PNG，然后将该 png 发送到 gpt-4-vision，

并附有指令以返回带有 tailwind 的单个 html 文件。这种创新的方法大大缩短了从设计概念到

实际实现的时间



Draw-a-Ul基于Next.js 14构建，利用了最新的web技术。项目的核心依赖包括:

Next.js:用于构建React应用的框架

tldraw:提供绘图功能的库

OpenAI API:用于图像识别和代码生成

Tailwind Css:用于样式化生成的HTML

项目的GitHub仓库显示，它主要使用TypeScript编写，占代码比例的98.4%。

这不仅确保了类型安全，也提高了代码的可维护性。

局限性和注意事项

API成本:频繁使用可能导致高昂的API费用。

代码质量:生成的代码可能需要进一步优化和调整.

复杂设计的局限:对于非常复杂或特殊的设计，可能无法完全准确地生成代码。

开源地址：

游客，如果您要查看本帖隐藏内容请回复

[/hide]

小甲鱼的二师兄

这就很离谱哈哈哈哈

星期五打篮球

不太敢相信

qiuhan1987

666666

wuyang512

这画图方便了啊

快速收敛

厉害了，感谢分享