爆火的截图生成代码项目核心功能竟然只是一条 Prompt

screenshot-to-code 这个项目可以将屏幕截图转换为 HTML/Tailwind CSS 代码。它使用 GPT-4 Vision 生成代码,使用 DALL-E 3 生成图片。

项目地址:github.com/abi/screenshot-to-code

这个项目最近爆火,短短几天时间,在 Github 上已经有 14.9K 的 Star。

花了 5 分钟看了下项目的源码,没想到竟然如此简单!核心原理竟然只有一条 Prompt,然后借助了gpt-4-vision-preview 模型,交给 GPT 来完成识图+写代码的工作,最后再把代码中的 img 标签提取出来,调用 DALL-E 3 模型转换为图片。

下图是调用 gpt-4-vision-preview 模型接口

提示语模板在这里:

提示语代码看 backend/prompts.py

下面是翻译为中文后的 Prompt:

xml 复制代码
你是一名熟练的Tailwind开发者
你从用户那里获取参考网页的截图,然后使用Tailwind、HTML和JS构建单页面应用程序。
你可能也会收到你已经构建的网页的截图,并要求更新它的外观,使其更像参考图片。

- 确保应用程序看起来与截图完全一样。
- 注意背景颜色、文字颜色、字体大小、字体系列、填充、边距、边框等。准确匹配颜色和尺寸。
- 使用截图中的确切文本。
- 代码中不要添加注释,比如 "<!-- 根据需要添加其他导航链接 -->" 和 "<!-- ...其他新闻条目... -->",而是写入完整的代码。
- 根据需要重复元素以匹配截图。例如,如果有15个项目,则代码应该有15个项目。不要留下 "<!-- 为每个新闻项目重复 -->" 这样的注释,否则会出现问题。
- 对于图像,请使用来自 https://placehold.co 的占位图像,并在alt文本中包含图像的详细描述,以便图像生成AI可以生成图像。

在库方面,

- 使用这个脚本来包含Tailwind:<script src="https://cdn.tailwindcss.com"></script>
- 你可以使用Google Fonts
- Font Awesome用于图标:<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link>

仅返回在<html></html>标签中的完整代码。
不要包括markdown "```" 或在开头或结尾的 "```html".

至于生成图片,就更简单了,直接从生成好的 HTML 中提取出 img 标签,再次调用 DALL-E 3 接口生成图片,替换进去。

你可以把上面那个 Prompt 直接拷贝下来发送给 ChatGPT 来实现截图生成代码功能

相关推荐
奇舞精选9 分钟前
在 Chrome 浏览器里获取用户真实硬件信息的方法
前端·chrome
网络风云12 分钟前
golang中的包管理-下--详解
开发语言·后端·golang
Elastic 中国社区官方博客16 分钟前
使用 Elasticsearch 导航检索增强生成图表
大数据·数据库·人工智能·elasticsearch·搜索引擎·ai·全文检索
云天徽上40 分钟前
【数据可视化】全国星巴克门店可视化
人工智能·机器学习·信息可视化·数据挖掘·数据分析
大嘴吧Lucy42 分钟前
大模型 | AI驱动的数据分析:利用自然语言实现数据查询到可视化呈现
人工智能·信息可视化·数据分析
京东零售技术1 小时前
一次线上生产库的全流程切换完整方案
后端
热忱11281 小时前
elementUI Table组件实现表头吸顶效果
前端·vue.js·elementui
我们的五年1 小时前
【C语言学习】:C语言补充:转义字符,<<,>>操作符,IDE
c语言·开发语言·后端·学习
艾思科蓝 AiScholar1 小时前
【连续多届EI稳定收录&出版级别高&高录用快检索】第五届机械设计与仿真国际学术会议(MDS 2025)
人工智能·数学建模·自然语言处理·系统架构·机器人·软件工程·拓扑学
林涧泣1 小时前
【Uniapp-Vue3】setTabBar设置TabBar和下拉刷新API
前端