现在只要简单画一画,框一框,点击执行:
18210631-0.gif
“啪”地一下,一个带有各种“按钮”的网页就做好了:
18210457-1.gif
对应代码也一览无余:
18210655-2.gif
整个操作过程十分快捷简单。

要做到上面的画画秒生网页,需要用到两个工具:tldraw和GPT-4V API。

其中tldraw是一个非常简单好上手的开源在线白板。

有画笔、橡皮、箭头、文本框等各种基本绘图工具,还有很多填充效果:

tldraw和GPT-4V的组合原理也很简单:

将当前的画布SVG转换为PNG图像,然后将PNG图像发送给GPT-4,并指示其返回一个包含Tailwind CSS的单个HTML文件。

地址:https://github.com/SawyerHood/draw-a-ui