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

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

相关推荐
土生土长的IU9 小时前
今日论题-AI革命对互联网的影响
大数据·人工智能
ByteCoder.9 小时前
每次开播都要重新准备话术,怎么整理成可复用模板?
人工智能·ai·助播虾
CV@CV9 小时前
世界模型与智能体协同推理逻辑
人工智能·算法·边缘计算·量子计算·具身智能
pusheng20259 小时前
普晟传感再获“消防产业核心配套优质品牌”:以可靠传感技术,让全球合规变简单
大数据·前端·人工智能·物联网·安全
sunshine8859 小时前
集成电路(IC)设计与封测行业10大常用ERP系统分析
大数据·数据库·人工智能
财迅通Ai9 小时前
卫星化学前三季度实现归母净利润90.59亿元,同比大增141.24%
人工智能·卫星化学
领麦微红外9 小时前
和面机智能化测温新选择 红外传感器实现非接触直测面团
人工智能·产品经理·智能硬件
Light Gao9 小时前
AI 对话助手如何实现动态交互?一文讲清 AG-UI、SSE、组件与工具调用
人工智能·ui·交互·大语言模型·sse·智能体·ag-ui
丁希希哇10 小时前
Transformer中的注意力机制(Attention)
人工智能·机器学习·transformer·大语言模型
国际学术会议-杨老师10 小时前
2027年人文发展、城市管理与数字化社会国际会议(HUCD 2027)
大数据·人工智能·人文发展