screenshot-to-code 是一个开源的 AI 编程工具：给它一张网页截图、一张产品设计稿，或一段屏幕录制，它就会调用大模型生成对应的前端代码，输出一个可以直接在浏览器里运行的网页。项目采用 MIT 协议，在 GitHub 上有 76.6k star 和 9.3k fork，由开发者 Abi Raja 于 2023 年 11 月发起，至今 1,455 次代码提交、26 位贡献者。
它能省掉的是前端开发里最重复的一步：把视觉稿变成页面代码。产品经理和设计师可以拿它快速做出能点击、能演示的原型；前端开发者可以把它当作页面初稿生成器，生成后在结果上继续修改；想还原某个网站版式的人，用它远比对着设计图一行行手写要快。
支持哪些技术栈
生成结果覆盖六种技术栈：HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap、Ionic + Tailwind。
其中 Tailwind CSS 是一种「工具类优先」的样式方案：把间距、字号这类常用样式做成现成类名，直接写在 HTML 元素上，省去手工维护样式表；React 和 Vue 是主流前端框架，把页面拆成可复用的组件。生成的代码组织方式随技术栈不同，还原效果的目标是一致的。
本地运行需要 API key
本地运行要调用大模型，需要至少一把模型厂商的 API key（模型服务的访问密钥，按调用量付费），在 OpenAI、Anthropic、Google 三家中任选：
- OpenAI 与 Anthropic 的模型负责生成代码；
- Gemini（Google 的多模态模型）除生成代码外，还负责「资产抽取」——把截图里的真实 logo 和图片识别出来复用，让产物更像原图，视频模式也依赖它；
- 图片生成、编辑与背景移除走 Replicate 平台，使用的图像模型是 z-image-turbo。
README 建议把 Gemini 和 Replicate 的密钥都配上，还原效果最好。部署用 Docker 一条命令即可（docker compose up -d --build，前端默认在 localhost:5173）；也可以按文档用 Poetry 运行 Python 后端（FastAPI 框架）、用 pnpm 运行前端（React + Vite）。不想接触部署，直接用官方托管版 screenshottocode.com，在线体验、无需密钥。
截图之外的能力
- 屏幕录制转可交互原型：录一段网站操作视频，生成带交互的页面原型；
- 截图自检：用 Chromium 无头浏览器（headless，即不带图形界面的浏览器）渲染自己生成的页面并检查，模型能看到实际渲染效果后再修正；
- 批量图片编辑与背景移除：2026 年 7 月的最新提交加入，支持并行处理多张图片。
什么人适合用
需要把视觉稿快速变成能跑的页面的人都适用：做原型演示的产品与设计岗位、需要页面初稿的前端开发者、做个人项目缺界面的全栈开发者。需要注意的是，真实项目中的生成结果仍要人工检查响应式布局和细节，把它当作加速器而不是一键交付。MIT 协议允许自由修改和商用，团队可以按自己的技术栈改造。
结论：screenshot-to-code 把「截图 / 设计稿 / 录屏 → 前端代码」这条路走通了，76.6k star 的规模证明这类需求真实存在。如果手上的任务是还原版面或快速验证页面想法，它值得一试。