abi/screenshot-to-code
丢进去一张截图,AI就能吐出可运行的代码
screenshot-to-code是一个开源项目,能把网站截图、设计稿(Figma)、屏幕录屏转换成HTML、React、Vue等真正能运行的代码。用户可以在Gemini、GPT、Claude等多个AI模型中选择,配上Replicate还能做图片生成和背景去除。项目提供Python写的FastAPI后端和React前端,可以本地部署,也可以直接用官方托管的网页版试用。
它做什么
- 输入网站截图、设计稿图片、Figma设计或屏幕录屏,输出HTML+Tailwind、HTML+CSS、React+Tailwind、Vue+Tailwind、Bootstrap、Ionic+Tailwind等多种代码形式
- 只需OpenAI、Anthropic、Gemini三者中任意一个API密钥即可运行,配置多个密钥后系统会自动混合调用更强的模型组合以提升准确度。其中Gemini密钥能让系统直接从截图里提取真实的logo和图片,并且是视频输入模式的必需项
- 添加Replicate密钥后可解锁图片生成、背景去除、图片编辑等功能
- 安装Chromium浏览器后可开启可选的截图预览功能,让AI在无界面浏览器里渲染并检查自己生成的页面效果
- 后端用Poetry管理Python依赖运行,前端用pnpm运行,也可以用一条Docker Compose命令整体启动
为什么重要
有了它,开发者拿到一张设计稿或参考网站截图就能快速得到代码骨架,不必从零手写页面结构,大幅缩短前端开发前期的时间。可以自由搭配不同厂商的AI模型来对比生成效果,这对实际项目选型也很实用。
本仓库术语
- Tailwind · 一种通过class类名快速编写CSS样式的工具
- FastAPI · 用Python搭建网页服务器(后端)的框架
- Replicate · 通过API调用AI模型来完成图片生成等任务的外部服务
- Playwright/Chromium · 在没有可视界面的情况下运行并截取网页画面的浏览器自动化工具
- Poetry · 用于安装和管理Python项目依赖库的工具
仓库简介（英文）
Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)
在 GitHub 打开热门仓库
- abhigyanpatwari/GitNexus
- NationalSecurityAgency/ghidra
- ChromeDevTools/chrome-devtools-mcp
- livekit/agents
- bilawalsidhu/gods-eye-view在浏览器里运行的间谍卫星模拟器,但所有数据都是真实的
- calesthio/OpenMontage把AI编程助手变成一间视频制作工作室的开源工具
- OpenCut-app/OpenCut
- securo-finance/securo