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

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

相关推荐
一个天蝎座 白勺 程序猿2 分钟前
GpuGeek全栈AI开发实战:从零构建企业级大模型生产管线(附完整案例)
人工智能·gpugeek
love530love4 分钟前
家用或办公 Windows 电脑玩人工智能开源项目配备核显的必要性(含 NPU 及显卡类型补充)
人工智能·windows·python·开源·电脑
深圳市青牛科技实业有限公司6 分钟前
D2203使用手册—高压、小电流LDO产品4.6V~36V、150mA
人工智能·单片机·嵌入式硬件·电动工具·工业散热风扇
shengjk110 分钟前
序列化和反序列化:从理论到实践的全方位指南
java·大数据·开发语言·人工智能·后端·ai编程
AI大模型顾潇10 分钟前
[特殊字符] 本地大模型编程实战(29):用大语言模型LLM查询图数据库NEO4J(2)
前端·数据库·人工智能·语言模型·自然语言处理·prompt·neo4j
2501_9153743525 分钟前
数据清洗的艺术:如何为AI模型准备高质量数据集?
人工智能·机器学习
山北雨夜漫步28 分钟前
机器学习 Day17 朴素贝叶斯算法-----概率论知识
人工智能·算法·机器学习
愚公搬代码42 分钟前
【愚公系列】《Manus极简入门》038-数字孪生设计师:“虚实映射师”
人工智能·agi·ai agent·智能体·manus
tongxianchao1 小时前
精简大语言模型:用于定制语言模型的自适应知识蒸馏
人工智能·语言模型·自然语言处理
PaperTen论文查重1 小时前
反向操作:如何用AI检测工具优化自己的论文“人味”?
人工智能