📌 项目地址：abi/screenshot-to-code | ⭐ 75,445 颗星 | 🔧 Python | 📜 未标注
这个项目做什么
abi/screenshot-to-code，GitHub 上 75445 颗星，Python 项目。功能一句话能说清：输入截图、mockup、Figma 设计稿或屏幕录制，输出可运行的代码。
输出格式有六种：HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap、Ionic + Tailwind。
不想搭环境的人可以直接用官方托管版 screenshottocode.com，零配置。想自己部署或者改代码，再走本地路线。
它的真正价值在哪
我认为有两点。
素材提取。 配合 Gemini，项目能把截图里真实的 logo 和图片直接提取出来复用，而不是塞占位图。这一条直接决定还原度的上限——同类工具生成的页面之所以一眼假，多半是因为全是不知所云的占位图。
视频模式。 录一段网站操作过程，它生成可交互的功能原型，不是静态页面复刻。注意：视频模式依赖 Gemini key。
模型架构
项目本身是个编排层，底层调用多家闭源模型：
- Gemini 3 Flash Preview / Gemini 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），负责图片生成
本地部署
技术栈：React/Vite 前端 + FastAPI 后端，Python 依赖用 Poetry 管理。
API key 的规则值得先搞清楚。代码生成需要 OpenAI、Anthropic、Gemini 三家至少一家的 key。但官方强烈建议四家全配——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。
想用 Ollama 本地开源模型跑？可以，官方在 issue #354 给了配置方法，但明确说了不推荐——生成质量差。想完全免费离线跑的人要有心理准备。
用之前要想清楚的两件事
项目免费，使用不免费。 每次生成调用的都是各家旗舰模型 API，重度使用账单不会好看。加上核心能力全依赖闭源云服务，Ollama 路线质量又不达标——这个项目目前没法脱离云服务独立运行，有合规要求的团队先评估。
产出是初稿，不是生产代码。 我对这类工具的定位一直是：截图进去，拿到一份 Tailwind 代码骨架，然后人工修整。这比从零手写快，是它的正确用法。期待一行不改直接上线，现在的模型做不到。
判断
75445 颗星说明“从设计稿快速生成前端初稿”这个需求确实普遍。项目本身编排做得扎实：六种技术栈、多家模型可切换、素材提取和视频模式有差异化。把它当代码初稿生成器用，预期就对了；当成全自动前端工程师，会失望。