screenshot-to-code

把截图、Figma 设计稿和屏幕录制直接转换成可运行的 HTML/Tailwind、React、Vue 等代码，支持 Bootstrap、Ionic 多个技术栈。亮点是多模型驱动（Gemini/GPT/Claude 可对比），还能录制网站操作视频生成功能原型，本地部署需配置 API key，适合前端开发快速搭页面。

README

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 还支持录制网站的屏幕操作视频，并将其转换为可用的原型。

google in app quick 3

🛠 快速开始

根据你的需求选择适合的方式：

本地运行： 适合想要自定义、自托管或贡献代码的情况。
使用托管应用： 无需本地配置，是试用 Screenshot to Code 最快的方式。打开托管应用 →

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

API 密钥

你至少需要一个模型提供方的密钥（OpenAI、Anthropic 或 Gemini）。为了获得最好的截图转代码质量，强烈建议同时配置 Gemini 和 Replicate —— Gemini 用于资源提取（复用截图中的真实 Logo/图片），Replicate 用于图像生成、背景移除和图片编辑。添加全部四个密钥可获得最佳效果，并可在每次生成时比较多个模型。

密钥	是否必需	解锁的能力
`OPENAI_API_KEY`	三者其一	GPT 代码生成变体（GPT-5.5、GPT-5.4 Mini）
`ANTHROPIC_API_KEY`	三者其一	Claude 代码生成变体（Opus 5、Opus 4.8、Fable 5、Sonnet 4.6）
`GEMINI_API_KEY`	三者其一 —— 强烈推荐	Gemini 代码生成变体（3 Flash、3.1 Pro）；从截图中提取真实资源；视频模式必需
`REPLICATE_API_KEY`	强烈推荐	图片编辑、背景移除以及基于 Replicate 的图像生成 —— 没有它，`edit_images` 和 `remove_backgrounds` 不可用

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

如果你想使用 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。设置对话框还会显示你的后端是否支持截图预览。

截图预览（可选）让代理在无头浏览器中渲染其生成的页面，并直观检查效果。安装 Chromium 后会自动启用（即上面的 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 base 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。
如何提供反馈？ 如需反馈、功能请求和错误报告，请提交 issue 或通过 Twitter 联系我。