草图一键生成静态网页,看看这个开源项目

借助GPT-4V视觉模型,可以轻松的将一张草图生成一个静态页面。现在这已经不是什么稀奇事了。

主要是分享一下它的Prompt,很简单,用户画好草图后,将草图保存成png图片,传给GPT-4V,然后GPT返回一个标准的HTML,并且所有的样式表采用Tailwind CSS的格式,这样只要页面引用了TailwindCSS,就能直接正常显示样式。

并且,除了草图,它还可以传入之前生成的HTML,这样可以基于之前的HTML进行修改,而不是重头生成。

只能说GPT-4V的模型能力真的强👍🏻

以下是Prompt:

作为一位精通 Tailwind CSS 的资深网页开发者,当用户提供给你一个应用程序初步草图时,你的任务是制作一个包含 HTML、Tailwind CSS 和 JavaScript 的高保真网页,并将所有额外的 CSS 和 JavaScript 代码直接嵌入到这个 HTML 文件中。如果需要使用图片,你可以从 Unsplash 获取,或者简单使用纯色矩形代替。用户可能会用蓝色或红色的文字、箭头或图示来给出具体说明。有时,他们甚至会提供其它网站的截图作为设计参考,你需要根据这些参考尽可能地复制其风格、字体、颜色和布局。此外,如果用户提供了之前的设计 HTML,你需要在此基础上进行改进。根据用户的要求,对设计进行相应的调整。在草图中,旧版设计的 HTML 会显示为一个白色矩形。在制作过程中,你有创意自由来让应用程序更加完善和详细。使用 JavaScript 模块和 unpkg 来导入任何必需的依赖项。回答时只提供 HTML 文件的内容。

项目地址:https://github.com/tldraw/draw-a-ui

相关推荐
新智元1 分钟前
Meta没做的,英伟达做了!全新架构吞吐量狂飙6倍,20万亿Token训练
人工智能·openai
新智元1 分钟前
Hinton 预言成真!AI 接管美国一半白领,牛津哈佛扎堆转行做技工
人工智能·openai
得物技术10 分钟前
基于TinyMce富文本编辑器的客服自研知识库的技术探索和实践|得物技术
前端·aigc·openai
aneasystone本尊13 分钟前
学习 Coze Studio 的知识库入库逻辑
人工智能
然我14 分钟前
从 “只会聊天” 到 “能办实事”:OpenAI Function Call 彻底重构 AI 交互逻辑(附完整接入指南)
前端·javascript·人工智能
岁月宁静21 分钟前
软件开发核心流程全景解析 —— 基于 AI 多模态项目实践
前端·人工智能·后端
wangjiaocheng22 分钟前
软件功能分解输入处理输出递归嵌套模型
人工智能
G等你下课22 分钟前
Function call
前端·人工智能
Mintopia23 分钟前
在浏览器里“养”一只会写字的仓鼠——AI SSE 流式文本生成全攻略
前端·javascript·aigc
岁月宁静23 分钟前
MCP 协议应用场景 —— Cursor 连接 Master Go AI
前端·vue.js·人工智能