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

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

相关推荐
美狐美颜SDK开放平台几秒前
直播APP开发实战:第三方美颜sdk接入步骤与注意事项
人工智能·音视频·美颜sdk·第三方美颜sdk·短视频美颜sdk
yychen_java4 分钟前
当算法成为武器:AI泛滥时代的多维危机透视与治理路径
网络·人工智能·ai
TomatoStudy8 分钟前
IT职业教育AI落地与实训体系建设复盘——以职坐标模式为例
大数据·人工智能
大模型最新论文速读9 分钟前
小红书提出 RedKnot:分头处理 kv 缓存,延时降低 60%效果还提升
论文阅读·人工智能·深度学习·机器学习·缓存·自然语言处理
阿瑞IT11 分钟前
AI Agent 工具调用可靠性的工程实践
人工智能
编码者卢布17 分钟前
【Azure AI Search】 searchMode=any 和 searchMode=all 有什么区别?
人工智能·python·flask
Samooyou24 分钟前
大模型微调(Fine Tuning)
人工智能·python·ai·语言模型
石榴树下的七彩鱼26 分钟前
如何去除豆包生图上的水印?2026年AI图片去水印全攻略(含官方技巧+API接入方案)
人工智能·ai去水印·石榴智能·图片去水印api·豆包生图·豆包去水印方法·ai图片修复
花间相见29 分钟前
【端侧AI模型】—— Google Gemma 4 全面解析:端侧大模型的新标杆
人工智能·google·ai编程·gemini
三更两点33 分钟前
AI拉呱-2026年06月10日AI技术洞察简报
人工智能