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

借助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

相关推荐
VIP_CQCRE几秒前
用 Ace Data Cloud 快速接入 OpenAI Chat Completion API:一套 Token 打通主流 AI 能力
人工智能·chatgpt·openai·api·acedatacloud
甲维斯几秒前
GPT6真的是“AGI”!首测完成瘫坐沙发!
人工智能
zcmodeltech2 分钟前
源网荷储一体化沙盘模型多场景控制系统设计——基于STM32与Modbus RTU的源网荷储、多能互补、冷热电三联供全场景联动方案,服务范围覆盖全国
数据库·人工智能·stm32·单片机·嵌入式硬件
鲲穹AI种草3 分钟前
小红书内容 AI 创作工具横向对比:创作者实用能力与局限解析
人工智能·小红书文案
AgentMaster10 分钟前
车型平台数据口径不一、供应链追溯断链?4 款数据治理系统选型对比与汽车行业落地记录
大数据·人工智能·汽车·交通物流
数字智核14 分钟前
2026昆山工厂采购空压机怎么选?哪家公司能做选型和安装
人工智能
AbrahamCS15 分钟前
告别无脑召回与死规则:基于国家标准(GB/T 48000.3)与大模型自主编排的 App 智能运营实战
大数据·人工智能·智能体·ontology
山西正方元21 分钟前
西安商家公私域联动落地:品牌私域架构拆解与本地化适配
大数据·人工智能·#西安本地运营
腾视科技-AI22 分钟前
腾视科技大模型一体机解决方案:低成本私有化落地,重塑行业智能应用新格局
大数据·人工智能·科技·ai·ai大模型·腾视科技·ai算力盒
Thomas.Sir23 分钟前
第26课:TensorFlow|循环神经网络RNN原理【时序数据处理、序列依赖关系讲解】
人工智能·rnn·tensorflow