开源工具：自动将截图转换为 HTML 代码

简介

使用 AI 将屏幕截图、设计原型、Figma 设计和屏幕录像转换成干净、可用的代码。最简单的尝试方式是使用官方托管产品 screenshottocode.com →

支持的模型

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 后端。

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

如果配置更多密钥，应用会自动为每个变体选择更强大的模型组合；如果只有一个密钥，则仅使用该提供商的模型。

如果你想用 Ollama 开源模型运行应用（由于质量结果不佳不推荐），请参考这条评论。

后端设置

运行后端（我使用 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
# Install the Chromium browser used by the screenshot preview tool.
# On Linux, use `poetry run playwright install --with-deps chromium` to also
# install the required system libraries (needs sudo/apt).
poetry run playwright install chromium
poetry env activate
# run the printed command, e.g. source /path/to/venv/bin/activate
poetry run uvicorn main:app --reload --port 7001

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

屏幕预览（可选）

屏幕预览让 agent 在无头浏览器中呈现自己生成的页面并直观检查其工作成果。安装 Chromium 后会自动启用（上面的 poetry run playwright install chromium 步骤，或在 Docker 镜像中自动完成）。如果缺少 Chromium，应用会跳过该工具 —— 设置对话框会显示其是否可用。

前端设置

cd frontend
pnpm install
pnpm 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:5173 启动并运行。注意这种设置方式下无法开发应用，因为文件更改不会触发重新构建。

常见问题

我在设置后端时遇到错误。如何修复？ 试试这个。如果仍然不行，开启一个 issue。

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

如何配置 OpenAI 代理？ 如果你无法直接访问 OpenAI API，例如由于国家限制，可以尝试使用 VPN 或配置 OpenAI 基础 URL 来使用代理。在 backend/.env 中或直接在 UI 的设置对话框中设置 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 上联系我。