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

借助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 分钟前
Obsidian 与 Obsidian Skills 小白入门
人工智能·ai·obsidian·obsidian skills
河北小博博2 分钟前
李宏毅Harness Engineering课程逐字稿整理:有时候模型不是不够聪明,只是没有好的Harness
人工智能
Elastic 中国社区官方博客3 分钟前
Elastic-caveman : 在不损失 Elastic 最佳效果的情况下,将 AI 响应 tokens 减少64%
大数据·运维·数据库·人工智能·elasticsearch·搜索引擎·全文检索
云天AI实战派24 分钟前
Agentic AI 全流程实战:用 OpenAI on AWS 搭一个餐饮补货智能体,从 API 调用到容器化上线
人工智能·云计算·aws
万岳科技程序员小金33 分钟前
2026智慧药店系统源码趋势:药店APP+小程序开发新方向
人工智能·电子处方小程序·药店软件开发·药店系统源码·药店app开发·药店平台搭建·药店小程序
xingyuzhisuan43 分钟前
稳定性考验:连续跑7天,哪家云主机不重启、不掉线?
服务器·人工智能·gpu算力
sanshanjianke1 小时前
AI辅助网文创作理论研究笔记(十):软件框架设计——模块化B/S架构
人工智能·ai写作
云天AI实战派1 小时前
AI 智能体问题排查指南:ChatGPT、API 调用到 Agent 上线失灵的全流程修复手册
大数据·人工智能·python·chatgpt·aigc
Tutankaaa2 小时前
知识竞赛题库设计全攻略
人工智能·算法
TImCheng06092 小时前
职场人AI学习周期评估:不同学习路径的时间成本
人工智能·学习