一、它是什么：截图 / 录屏直接变前端代码
screenshot-to-code（abi/screenshot-to-code，MIT，7.9 万星 / 9,669 fork）把截图、设计稿（Figma mockup）、甚至网站录屏喂给 AI，直接产出干净、可运行的前端代码。最简单的用法是它托管在 screenshottocode.com 的在线版，本地也能自己跑。它特别适合「手里有一张设计图或一段演示视频，想快速拿到前端初稿」的场景。
二、支持的输出框架（实查 6 种）
- HTML + Tailwind
- HTML + CSS
- React + Tailwind
- Vue + Tailwind
- Bootstrap
- Ionic + Tailwind
除了静态截图，它还能录一段网站操作视频，转成可交互的原型（video mode，需要 Gemini key）。
三、默认模型与本地运行要求
OCR 里那串模型清单实查 README 全部对得上：
- Gemini 3 Flash / 3.1 Pro（官方称最强；Gemini 负责从截图里提取真实素材——复现你图里真实的 logo/图片，并且是视频模式的必要条件）
- GPT-5.5 / GPT-5.4 Mini
- Claude Opus 4.6 / Opus 4.8
- z-image-turbo（走 Replicate，用于图像生成）
本地跑：架构是 React/Vite 前端 + FastAPI 后端（Poetry 管理，uvicorn 起 7001 端口），至少需要一个模型提供商的 key（OpenAI / Anthropic / Gemini 三选一），官方强烈建议 Gemini + Replicate（Replicate 解锁图像编辑 / 去背景 / 图像生成，没有它 edit_images、remove_backgrounds 就用不了）。装了 Chromium 后，它还能让 AI 在无头浏览器里渲染自己生成的页面、自查效果（screenshot preview）。Docker 用户一条 docker-compose up -d --build 就能起，跑在 localhost:5173。
四、能不能省 30~40% 开发时间（评测口径，非仓库事实）
口播给的评测结论是「能压缩约 30~40% 前端开发时间，但生成结果通常还需 30~40% 人工清理，适合快速出初稿而非成品」。需要说明：这组 30~40% 数字来自评测/口播，仓库 README 里并没有这个量化数据。它的定位就是「快速把设计图 / 录屏变成可改的代码初稿」——初稿拿到手很快，但要上线质量，留白、响应式、语义化这些通常还得人工再清理一轮。把它当「设计→代码」的加速器用，别当成品直接交付。
五、适合谁
手里有 Figma / 竞品截图 / 一段演示视频、想先把前端骨架立起来再精修的独立开发者 / 前端 / 设计师。6 种框架输出 + 本地自托管 + MIT 协议，用起来门槛不高。
数据红线：星标 / fork / 协议 / 框架清单 / 默认模型均以 GitHub API 与 README 实查为准（7.9 万星 / 9,669 fork / MIT / 2023-11 创建 / 2026-09-09 最后推送，2026-09-18）；「压缩 30~40% 开发时间 / 需 30~40% 人工清理」为评测/口播结论，仓库文档无此量化，本文已标注区分。