Screenshot to Code

项目简介

Screenshot to Code 是一个开源项目，也提供托管产品，利用 AI 将截图、原型图、Figma 设计和屏幕录制转换为整洁、可运行的代码。它支持多种前端技术栈，用户可以在本地运行或使用托管应用。

核心功能

• 利用 AI 将截图、原型图、Figma 设计和屏幕录制转换为整洁、可运行的代码。支持的技术栈包括 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，以及通过 Replicate 使用的

适用场景

• 将截图转换为整洁的 HTML、Tailwind、React、Vue 或其他受支持代码。将 Figma 设计或原型图转换为可运行的前端代码。根据网站运行时的屏幕录制创建功能原型。在配置多个 API 密钥时，按每次生成比较多个 AI 模型提供商。

快速开始

• 使用托管应用是尝试 Screenshot to Code 的最快方式，无需本地设置。在本地运行需要设置 React/Vite 前端和 FastAPI 后端；本地运行需要 API 密钥。后端设置使用 Poetry：安装依赖，在 .env 中配置模型提供商密钥，通过 Playwright 安装 Chromium，激活 Poetry 环境，然后运行 uvicorn main:app --reload --port 7001。前端设置使用 pnpm：运行 pnpm install 和 pnpm dev。Docker 设置：在根目录创建包含

部署与要求

• 本地运行需要 API 密钥以及后端/前端设置。该应用包含 React/Vite 前端和 FastAPI 后端。你需要至少一个模型提供商密钥，可选 OpenAI、Anthropic 或 Gemini；强烈建议使用 Gemini 和 Replicate 以获得最佳质量。Replicate 必须在 backend/.env 中配置为 REPLICATE_API_KEY；没有它，edit_images 和 remove_backgrounds 不可用。可选的截图预览需要 Chromium，可通过 Playwright 安装，或在 Docker

采用前须知

• 许可证：MIT。在使用、修改或分发项目前，请确认其具体条款。