Screenshot to Code 截图转代码

Screenshot to Code 是什么

Screenshot to Code 是一个 AI 驱动的开发工具，只需「丢进一张截图」，就能把它转换成干净、可运行的前端代码。它支持截图、设计稿、Figma 设计以及屏幕录制作为输入，输出 HTML、Tailwind、React、Vue 等常见技术栈的代码。

项目在 GitHub 上已获得超过 8 万 Star，是同类工具中最受欢迎的开源实现之一。

核心能力

• 多技术栈输出：HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap、Ionic + Tailwind。
• 多模型支持：可接入 Gemini、GPT、Claude 等系列模型，也支持通过 Replicate 进行图像生成与编辑。
• 素材提取：借助 Gemini 从截图中识别并复用真实的 logo、图片等素材。
• 屏幕录制转原型：录制一段网站操作视频，即可生成可交互的原型。
• 截图预览：后端安装 Chromium 后，Agent 可自行渲染生成的页面并做视觉校验。

技术架构

项目采用前后端分离结构：

• 前端：React + Vite，开发时默认运行在 5173 端口。
• 后端：FastAPI，默认运行在 7001 端口，使用 Poetry 管理依赖。
• 通信：前端通过 HTTP 与 WebSocket 连接后端，可通过环境变量调整地址。

# 后端（示意）
cd backend
poetry install
poetry run uvicorn main:app --reload --port 7001

# 前端（示意）
cd frontend
pnpm install
pnpm dev

快速开始

使用官方托管版本

如果只想快速体验，可以直接访问官方托管站点，无需本地配置。

本地运行

本地运行需要至少一个模型提供商的 API Key（OpenAI、Anthropic 或 Gemini）。官方强烈推荐同时配置 Gemini 与 Replicate：前者负责素材提取与视频模式，后者负责图像编辑、背景移除与图像生成。

Docker 部署

在项目根目录配置好 .env 后，可直接使用 Docker Compose 启动：

docker-compose up -d --build

启动后访问 http://localhost:5173 即可使用。注意该方式不适合开发调试，文件改动不会触发重建。

适用人群

• 希望快速把设计稿变成可运行页面的前端开发者；
• 想研究多模态模型在代码生成场景落地方式的 AI 应用开发者；
• 需要自托管、可定制「截图转代码」能力的小团队。

注意事项

• 生成代码的质量与所选模型强相关，复杂页面通常仍需人工微调。
• 部分功能（如视频模式、素材提取）依赖 Gemini，配置不全会受限。
• 使用商业模型 API 会产生相应费用，建议先小规模试用。