abi / screenshot-to-code

查看原文 / View Original 编辑 / Edit

abi / screenshot-to-code

screenshot-to-code Convert screenshots, mockups, Figma designs, and screen recordings into clean, functional code using AI. The easiest way to try this is using the official, hosted product at screenshottocode.com → youtube.mp4 screenshot-to-code 利用 AI 将截图、模型图、Figma 设计稿和屏幕录像转换为整洁、可运行的代码。最简单的体验方式是使用官方托管的产品：screenshottocode.com → youtube.mp4

Supported stacks: HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind 支持的技术栈： HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap、Ionic + Tailwind

Default AI models: Gemini 3 Flash Preview and Gemini 3.1 Pro Preview - the best models, GPT-5.5 and GPT-5.4 Mini, Claude Opus 4.6, Claude Opus 4.8, z-image-turbo (using Replicate) for image generation. See the Examples section below for more demos. Screenshot to Code also supports taking a screen recording of a website in action and turning that into a functional prototype. 默认 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 还支持将网站操作的屏幕录像转换为功能性原型。

🛠 Getting Started

🛠 入门指南

Choose the path that fits what you want to do: 选择适合你的操作路径：

  • Run locally: best if you want to customize, self-host, or contribute.
  • 本地运行： 如果你想进行自定义、自托管或参与贡献，这是最佳选择。
  • Use the hosted app: the fastest way to try Screenshot to Code with no local setup. Open the hosted app →
  • 使用托管应用： 无需本地配置，体验 Screenshot to Code 最快的方式。打开托管应用 →

Running locally requires API keys and a backend/frontend setup. The app has a React/Vite frontend and a FastAPI backend. 本地运行需要 API 密钥以及后端/前端配置。该应用包含一个 React/Vite 前端和一个 FastAPI 后端。

API keys API 密钥

You need at least one model provider key (OpenAI, Anthropic, or Gemini). Gemini and Replicate are strongly recommended for the best quality of screenshot-to-code accuracy — Gemini powers asset extraction (reusing the real logos/images from your screenshot) and Replicate powers image generation, background removal, and image editing. Adding all four keys gives the best results and lets you compare multiple models per generation. 你至少需要一个模型提供商的密钥（OpenAI、Anthropic 或 Gemini）。强烈建议使用 Gemini 和 Replicate 以获得最佳的转换准确度——Gemini 负责资源提取（复用截图中的真实 Logo/图像），Replicate 负责图像生成、背景移除和图像编辑。添加全部四个密钥可获得最佳效果，并允许你在每次生成时对比多个模型。

KeyRequired?What it unlocks
OPENAI_API_KEYOne of these threeGPT code-gen variants (GPT-5.5, GPT-5.4 Mini)
ANTHROPIC_API_KEYOne of these threeClaude code-gen variants (Opus 5, Opus 4.8, Fable 5, Sonnet 4.6)
GEMINI_API_KEYOne of these three — strongly recommendedGemini code-gen variants (3 Flash, 3.1 Pro); extracts real assets from the screenshot; required for video mode
REPLICATE_API_KEYStrongly recommendedImage editing, background removal, and Replicate-backed image generation — without it, edit_images and remove_backgrounds are unavailable
密钥是否必须？解锁功能
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 功能将不可用

With more keys, the app automatically picks a stronger mix of models per variant; with a single key it uses that provider’s models only. If you’d like to run the app with Ollama open-source models (not recommended due to poor-quality results), follow this comment. 拥有更多密钥时，应用会自动为每个变体选择更强大的模型组合；如果只有一个密钥，则仅使用该提供商的模型。如果你想使用 Ollama 开源模型运行应用（因效果不佳，不推荐），请参考此评论。

Run the backend (I use Poetry for package management; run pip install --upgrade poetry if you don’t have it): 运行后端（我使用 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

You can also set up OpenAI, Anthropic, and Gemini keys using the settings dialog in the frontend (click the gear icon after loading the app). Replicate must be configured in backend/.env as REPLICATE_API_KEY. The Settings dialog also shows whether screenshot preview is available on your backend. 你也可以通过前端的设置对话框配置 OpenAI、Anthropic 和 Gemini 密钥（加载应用后点击齿轮图标）。Replicate 必须在 backend/.env 中配置为 REPLICATE_API_KEY。设置对话框还会显示你的后端是否支持截图预览功能。

Screenshot preview (optional) lets the agent render its own generated page in a headless browser and visually check its work. It’s enabled automatically once Chromium is installed (the playwright install chromium step above, or automatically in the Docker image). If Chromium is missing, the app just skips the tool — the Settings dialog shows whether it’s available. **截图预览（可选）**允许代理在无头浏览器中渲染其生成的页面，并直观地检查其工作成果。一旦安装了 Chromium（上述 playwright install chromium 步骤，或在 Docker 镜像中自动安装），该功能会自动启用。如果缺少 Chromium，应用将跳过此工具——设置对话框会显示其是否可用。

Run the frontend: 运行前端：

cd frontend
pnpm install
pnpm dev

Open http://localhost:5173 to use the app. If you prefer to run the backend on a different port, update VITE_WS_BACKEND_URL in frontend/.env.local. 打开 http://localhost:5173 使用应用。如果你希望在其他端口运行后端，请更新 frontend/.env.local 中的 VITE_WS_BACKEND_URL。

Docker If you have Docker installed, run this from the root directory: 如果你安装了 Docker，请在根目录下运行：

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

The app will be up and running at http://localhost:5173. Note that you can’t develop the application with this setup, as file changes won’t trigger a rebuild. 应用将在 http://localhost:5173 运行。请注意，此配置下无法进行应用开发，因为文件更改不会触发重新构建。

🙋‍♂️ FAQs

🙋‍♂️ 常见问题

  • I’m running into an error when setting up the backend. How can I fix it? Try this. If that still doesn’t work, open an issue.
  • 配置后端时遇到错误，如何修复？ 尝试这个方法。如果仍然无效，请提交 Issue。
  • How do I get an OpenAI API key? See Troubleshooting.md
  • 如何获取 OpenAI API 密钥？ 请参阅 Troubleshooting.md
  • How can I configure an OpenAI proxy? If you’re not able to access the OpenAI API directly, for example because of country restrictions, you can try a VPN or configure the OpenAI base URL to use a proxy. Set OPENAI_BASE_URL in backend/.env or directly in the UI in the settings dialog. Make sure the URL has v1 in the path, for example: https://xxx.xxxxx.xxx/v1.
  • 如何配置 OpenAI 代理？ 如果你无法直接访问 OpenAI API（例如由于国家/地区限制），可以尝试使用 VPN，或配置 OpenAI 基础 URL 以使用代理。在 backend/.env 中设置 OPENAI_BASE_URL，或直接在 UI 的设置对话框中设置。确保 URL 路径中包含 v1，例如：https://xxx.xxxxx.xxx/v1。
  • How can I update the backend host that my frontend connects to? Configure VITE_HTTP_BACKEND_URL and VITE_WS_BACKEND_URL in frontend/.env.local. For example, set VITE_HTTP_BACKEND_URL=http://124.10.20.1:7001.
  • 如何更新前端连接的后端主机？ 在 frontend/.env.local 中配置 VITE_HTTP_BACKEND_URL 和 VITE_WS_BACKEND_URL。例如，设置 VITE_HTTP_BACKEND_URL=http://124.10.20.1:7001。
  • Seeing UTF-8 errors when running the backend? On Windows, open the .env file with Notepad++, then go to Encoding and select UTF-8.
  • 运行后端时出现 UTF-8 错误？ 在 Windows 上，使用 Notepad++ 打开 .env 文件，然后转到“编码”并选择“UTF-8”。
  • How can I provide feedback? For feedback, feature requests, and bug reports, open an issue or ping me on Twitter.
  • 如何提供反馈？ 如有反馈、功能请求和错误报告，请提交 Issue 或在 Twitter 上联系我。

📚 Examples

📚 示例

  • NYTimes Original Replica
  • 《纽约时报》原版复刻
  • Instagram instagram.mp4
  • Instagram instagram.mp4
  • Hacker News hacker.news.mp4
  • Hacker News hacker.news.mp4
← 返回新闻列表 / Back to news list