📌 项目地址：abi/screenshot-to-code | ⭐ 75,445 颗星 | 🔧 Python | 📜 未标注
先说结论
abi/screenshot-to-code 是这个赛道里 Star 数最高的项目（75,445），做的事情很直接：给它一张截图、设计稿、Figma 图，甚至一段屏幕录制，它输出能跑的代码。GitHub 上同类项目不少，它的优势在于技术栈覆盖全，模型可选，还有托管版可以零配置试用（screenshottocode.com）。
支持六种输出：HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap、Ionic + Tailwind。
我觉得最值得单独讲的是视频模式：录一段网站的操作过程，它生成的是可交互的功能原型，不只是静态页面复刻。这在同类项目里少见。
模型架构：一个壳，多家引擎
这个项目本质上是把多个闭源模型的能力组合起来，自己负责编排：
- Gemini 3 Flash Preview / 3.1 Pro Preview——README 官方口径中的最佳模型，同时负责素材提取和视频模式
- GPT-5.5 / GPT-5.4 Mini（OpenAI）
- Claude Opus 4.6 / Opus 4.8（Anthropic）
- z-image-turbo（走 Replicate）负责图片生成
素材提取是它的差异化能力。配合 Gemini，它会把截图里的真实 logo、图片直接抠出来复用，而不是塞占位图。还原度因此高出一截。
本地部署实录
架构是 React/Vite 前端 + FastAPI 后端，Python 端用 Poetry 管依赖。
API Key 的规则要先搞清楚。 代码生成需要 OpenAI、Anthropic、Gemini 三家至少一家的 key。但官方强烈建议把 Gemini 和 Replicate 也配上——Gemini 管素材提取和视频模式，Replicate 管图片编辑、背景去除和图片生成。没有 Replicate key，edit_images 和 remove_backgrounds 这两个功能直接不可用。
Key 越多越好不是客套话：多 key 时应用会自动为每次生成挑选更强的模型组合，还能横向对比不同模型的输出。单 key 则只能用那一家的模型。
后端启动，README 原文给的流程：
cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
echo "ANTHROPIC_API_KEY=your-key" >> .env
echo "GEMINI_API_KEY=your-key" >> .env
echo "REPLICATE_API_KEY=r8_your-key" >> .env
poetry install
# Install the Chromium browser
没装 Poetry 的话先跑 pip install --upgrade poetry。前端的启动命令 README 在我拿到的部分没有给出，去仓库完整 Getting Started 里看。
想用 Ollama 本地开源模型跑？可以，官方在 issue #354 里有配置方法，但明确说了不推荐，生成质量差。想完全免费本地跑的人要有心理准备。
三个使用前必须知道的事实
成本。 每次生成调用的是各家旗舰模型的 API，重度使用账单不会好看。这是项目本身免费、使用不免费的典型结构。
产出定位。 拿到的是初稿，不是生产代码。生成 Tailwind 代码后人工修整，比从零手写快得多——这是它的正确用法。期待截图进去、一行不改直接上线，目前的模型做不到。
依赖闭源服务。 核心能力全在大厂 API 上，Ollama 路线质量又不达标，这个项目没法脱离云服务独立运行。对部署环境有合规要求的团队要先评估这一点。
我的判断
适合两类场景：拿到设计稿要快速搭前端骨架，生成后人工修整；以及想快速复刻页面布局或做原型演示。75445 个 Star 说明这个需求确实普遍，但 Star 数不等于产出质量，把它当高效率初稿生成器来用，预期就对了。