abi/screenshot-to-code

来源：https://github.com/abi/screenshot-to-code

screenshot-to-code

使用 AI 将截图、设计原型、Figma 设计稿和屏幕录制转换为简洁、可运行的代码。
最简单的体验方式是使用官方托管产品 screenshottocode.com
→ https://github.com/user-attachments/assets/ec08a5e6-9606-41c5-b03a-1bf47dfeba75

支持的堆栈：

• HTML + Tailwind
• HTML + CSS
• React + Tailwind
• Vue + Tailwind
• Bootstrap
• Ionic + Tailwind

默认 AI 模型：

• Gemini 3 Flash Preview 和 Gemini 3.1 Pro Preview（最佳模型）
• GPT-5.5 和 GPT-5.4 Mini
• Claude Opus 4.6、Claude Opus 4.8
• z-image-turbo（基于 Replicate）用于图像生成

更多演示请查看下方的 示例 部分。
Screenshot to Code 还支持对运行中的网站进行屏幕录制，并将其转换为功能性原型。

🛠 入门

根据你的需求选择以下方式：

• 本地运行： 最适合需要自定义、自托管或贡献代码的场景。
• 使用托管应用： 无需本地设置即可快速体验 Screenshot to Code。
  打开托管应用 →

本地运行需要 API 密钥并配置前后端。应用前端使用 React/Vite，后端使用 FastAPI。

API 密钥

你需要 至少一个 模型提供商的密钥（OpenAI、Anthropic 或 Gemini）。
强烈推荐使用 Gemini 和 Replicate 以获得最佳截图转代码精度 — Gemini 用于资产提取（复用截图中的真实 logo/图片），Replicate 用于图像生成、背景移除和图像编辑。
添加所有四个密钥可获得最佳效果，并允许在每次生成中比较多个模型。

密钥越多，应用会自动为每个变体选择更强大的模型组合；若仅使用单个密钥，则仅使用该提供商的模型。
若希望使用 Ollama 开源模型运行应用（不推荐，因效果较差），请参考此评论 (https://github.com/abi/screenshot-to-code/issues/354#issuecomment-2435479853)。

运行后端（我使用 Poetry 进行包管理；若未安装，请执行 pip install --upgrade poetry）：

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
# 安装截图预览工具所需的 Chromium 浏览器。
# Linux 系统上，使用 `poetry run playwright install --with-deps chromium` 可同时
# 安装所需的系统库（需 sudo/apt 权限）。
poetry run playwright install chromium
poetry env activate # 运行打印的命令，例如 source /path/to/venv/bin/activate
poetry run uvicorn main:app --reload --port 7001

你也可以在前端通过设置对话框（加载应用后点击齿轮图标）配置 OpenAI、Anthropic 和 Gemini 密钥。
Replicate 必须在 backend/.env 中配置为 REPLICATE_API_KEY。
设置对话框还会显示你的后端是否支持 截图预览。

截图预览（可选）允许代理在无头浏览器中渲染自身生成的页面并直观检查其工作。一旦安装 Chromium（上述 playwright install chromium 步骤，或在 Docker 镜像中自动完成），该功能会自动启用。若 Chromium 缺失，应用会跳过该工具 — 设置对话框会显示其可用性。

运行前端：

cd frontend
pnpm install
pnam dev

访问 http://localhost:5173 使用应用。
若希望后端运行在不同端口，请更新 frontend/.env.local 中的 VITE_WS_BACKEND_URL。

Docker

若已安装 Docker，请在根目录执行以下命令：

echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

应用将在 http://localhost:7001 启动运行。
请注意，此配置无法用于应用开发，因为文件更改不会触发重新构建。

🙋♂️ 常见问题

• 设置后端时遇到错误，如何修复？
  请尝试此方案 (https://github.com/abi/screenshot-to-code/issues/3#issuecomment-1814777959)。若仍无法解决，请提交 issue。

• 如何获取 OpenAI API 密钥？
  请参见 https://github.com/abi/screenshot-to-code/blob/main/Troubleshooting.md

• 如何配置 OpenAI 代理？
  若无法直接访问 OpenAI API（例如因地区限制），可尝试使用 VPN 或配置 OpenAI 基础 URL 以使用代理。在 backend/.env 或前端设置对话框中直接设置 OPENAI_BASE_URL。请确保 URL 路径包含 v1，例如：https://xxx.xxxxx.xxx/v1。

• 如何更新前端连接的后端主机地址？
  在 frontend/.env.local 中配置 VITE_HTTP_BACKEND_URL 和 VITE_WS_BACKEND_URL。例如设置 VITE_HTTP_BACKEND_URL=http://124.10.20.1:7001。

• 运行后端时出现 UTF-8 错误？
  在 Windows 上，使用 Notepad++ 打开 .env 文件，转到“编码”并选择 UTF-8。

• 如何提供反馈？
  反馈、功能请求和错误报告，请提交 issue 或在 Twitter (https://twitter.com/abi) 联系我。

📚 示例

《纽约时报》

Instagram
https://github.com/user-attachments/assets/a335a105-f9cc-40e6-ac6b-64e5390bfc21

Hacker News
https://github.com/user-attachments/assets/205cb5c7-9c3c-438d-acd4-26dfe6e077e5