abi/screenshot-to-code

screenshot‑to‑code

功能 – 获取 UI 截图、Figma 设计稿甚至短视频录制，借助大语言模型的帮助，生成可以直接运行的整洁前端代码。生成的代码可以包含从截图中提取的原始资产（Logo、图片）。

支持的前端框架 – HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind。

AI 后端 – 默认情况下，它会尝试最新的 Google Gemini (3 Flash, 3.1 Pro)、OpenAI GPT-5.5/5.4 Mini、Anthropic Claude Opus 4.6-4.8 以及 Replicate 图像模型 (z-image-turbo)。你可以混合使用不同的提供商；应用程序会为每个步骤选择最强大的可用模型。

工作原理

1. 资产提取 – Gemini 分析截图，提取真实的 Logo 和图片，并可以通过 Replicate 移除背景。
2. 代码生成 – 选定的 LLM 接收布局和目标技术栈的描述，并返回相应的标记、CSS/Tailwind 类和组件代码。
3. 可选预览 – 通过 Playwright 使用无头 Chromium 实例渲染生成的页面，以便系统将输出结果与原始截图进行比较并标记明显的差异。
4. 视频模式 – 当你上传短视频录制时，后端会提取关键帧并构建一个模拟交互流程的原型。

运行方式

• 托管演示 – 访问 https://screenshottocode.com 进行即时试用。
• 自托管 – 克隆仓库，提供至少一个 API 密钥（OpenAI、Anthropic 或 Gemini），并启动 FastAPI 后端 (poetry install && poetry run uvicorn main:app …)。然后启动 Vite-React 前端 (pnpm install && pnpm dev)。
• Docker – 在放置包含密钥的 .env 文件后，运行 docker-compose up --build。

关键配置

变量	必要用途	启用功能
OPENAI_API_KEY	所有情况	GPT-5.5 / 5.4-Mini 代码生成
ANTHROPIC_API_KEY	所有情况	Claude 代码生成
GEMINI_API_KEY (推荐)	所有情况	Gemini 代码生成、资产提取、视频模式
REPLICATE_API_KEY (推荐)	可选	图像编辑、背景移除、图像生成

常见问题与故障排除 – README 中包含指向故障排除指南和问题追踪器中常见错误修复的链接。如果你处于防火墙后，可以通过 OPENAI_BASE_URL 设置 OpenAI 代理。

示例 – 该仓库展示了 NYTimes、Instagram 和 Hacker News 页面的并排对比，证明了该工具可以重现复杂的文章布局、社交媒体动态和讨论版界面。

适用人群 – 希望从设计稿中快速构建脚手架的前端开发人员、需要为 UI 想法制作原型的产品团队，以及任何对 AI 辅助代码生成感兴趣的人。