截图转代码：AI把设计稿生成可运行页面

使用 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）用于图像生成

更多演示见下方 Examples 章节。

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
# 安装截图预览工具所需的 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 必须作为 REPLICATE_API_KEY 配置在 backend/.env 中。设置对话框还会显示你的后端上截图预览是否可用。

截图预览（可选）可以让 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，从根目录运行：

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 中设置 OPENAI_BASE_URL，或在设置对话框中直接在前端 UI 中设置。请确保 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 文件，然后进入 Encoding 选择 UTF-8。

如何提供反馈？对于反馈、功能请求和 bug 报告，请提交 issue 或在 Twitter 上联系我。