screenshot-to-code：把截图与Figma设计转成React/Vue代码
给前端开发者把截图、Figma和录屏变成React/Vue代码，还能复用素材生成图片。
GitHub abi/screenshot-to-code 更新 2026-09-04 分支 main 星标 77.9K 分叉 9.5K
React Vue Tailwind FastAPI Gemini 截图转代码 本地部署

🧭 决策指南

为什么现在热： 无法从材料判断

适合，如果你

  • 你要把截图或Figma设计快速产出React + Tailwind或Vue + Tailwind原型
    README“Supported stacks”列出React + Tailwind和Vue + Tailwind
  • 你希望本地修改并自托管React/Vite前端和FastAPI后端
    README“Getting Started”说明本地运行适合customize、self-host或contribute，并明确使用React/Vite与FastAPI
  • 你能提供Gemini_API_KEY，并需要截图中的真实logo或图片素材
    README“API keys”说明Gemini负责asset extraction，并强烈推荐Gemini提升准确度
  • 你要把网站screen recording转换成可运行的功能原型
    README正文明确写道Screenshot to Code支持录制网站运行过程并转换为functional prototype

不适合，如果你

  • 你不准备提供OpenAI、Anthropic或Gemini中的任何API key
    README“API keys”明确要求至少一个模型提供商密钥
  • 你计划使用Ollama并期待高质量代码生成结果
    README明确写明Ollama不推荐，原因是poor-quality results
  • 你的目标框架是README未列出的栈，而不是HTML、React、Vue、Bootstrap或Ionic
    README“Supported stacks”只列出HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap和Ionic + Tailwind
  • 你用Docker开发并要求修改文件后自动触发重建
    README“Docker”说明该部署方式不能开发，文件变化不会触发rebuild

前置条件

  • 本地运行需要至少一个OpenAI、Anthropic或Gemini模型提供商API key。
  • 本地架构包含React/Vite frontend和FastAPI backend。
  • 后端安装使用Poetry，并执行poetry install。
  • 前端安装使用pnpm，并执行pnpm install。
  • Chromium由Playwright安装；Linux可使用poetry run playwright install --with-deps chromium。
  • 如需图片编辑、去背景或Replicate图片生成，需要配置REPLICATE_API_KEY。

第一步命令（README 原文）

cd backend

要注意

  • REPLICATE_API_KEY必须写入backend/.env，不能只在前端Settings配置。
    README“API keys”说明Replicate必须配置在backend/.env
  • 没有Chromium时，生成页面的screenshot preview工具不会运行。
    README说明Chromium缺失时应用会跳过该工具，Settings会显示可用状态
  • 后端换端口后要同步修改VITE_WS_BACKEND_URL。
    README“Getting Started”要求后端使用不同端口时更新frontend/.env.local中的VITE_WS_BACKEND_URL
  • Docker的docker-compose up -d --build不适合文件即时生效的开发流程。
    README“Docker”明确说明文件变化不会触发重新构建

替代方案

  • 官方托管应用 screenshottocode.com：你只想最快试用Screenshot to Code，不想配置本地frontend、backend和API环境。
    Getting Started

材料未说明

  • README没有说明各模型的实际成本、速率限制或上下文上限。
  • README没有说明截图转码的准确率、生成耗时或不同模型的质量对比。
  • 项目数据中的主要语言分布、最近更新时间和代码提交数均为Unknown或0，无法据此判断维护活跃度。
  • README没有说明生产部署的安全配置、认证机制或多用户支持。
  • README没有说明支持的Node.js、Python、Poetry或pnpm版本。

💡 深度解析

6
适合 我需要在自己的环境中运行 React/Vite 前端和 FastAPI 后端，并通过环境变量控制 OpenAI、Anthropic、Gemini 与 Replicate 密钥；这个项目适合自托管吗？
适合读者： 希望自托管并控制模型密钥、使用 Python/Poetry 与 Node/pnpm 的开源项目维护者

适合，但前提是你愿意维护外部模型服务、Python/Node 依赖和浏览器运行环境。

  • README 明确把 Run locally 定义为适合 customize、self-host 或 contribute，并说明架构是 React/Vite 前端加 FastAPI 后端。
  • 至少需要 OpenAI、Anthropic 或 Gemini 之一；README 强烈推荐 Gemini 和 Replicate，以获得资源提取、图片编辑、背景移除和更好的还原质量。
  • 项目提供 Poetry、pnpm 和 Docker 路径，Docker 可通过 docker-compose 构建并在 5173 端口启动。
  • 这不是完全离线部署：README 未提供等价的本地模型方案，还明确不推荐 Ollama，因为结果质量较差。
  • Getting Started: “Run locally: best if you want to customize, self-host, or contribute.”
  • Getting Started: “The app has a React/Vite frontend and a FastAPI backend.”
  • Docker: “docker-compose up -d --build”
  • API keys: “You need at least one model provider key” and “Ollama ... not recommended due to poor-quality results”
docker-compose up -d --build
材料未说明：README 未说明生产环境的认证、租户隔离、密钥轮换和数据保留策略。；README 未提供 API 调用成本、并发能力或任务队列设计。
视情况 我会在 Linux 上用 Poetry 启动 FastAPI 后端，并希望模型能通过 Chromium 渲染生成页面后进行视觉检查；本地安装路径是否足够支持这个闭环？
适合读者： 在 Linux 上运行 FastAPI 后端、希望启用 Playwright/Chromium 截图预览的自托管开发者

视情况，项目支持该闭环，但只有正确安装 Chromium 及 Linux 系统依赖时才会启用截图预览。

  • README 将 screenshot preview 描述为可选能力：代理可在无头浏览器中渲染生成页面并视觉检查结果。
  • 普通安装命令是 poetry run playwright install chromium；Linux 若还需要系统库，应使用 README 给出的 poetry run playwright install --with-deps chromium，该步骤需要 sudo/apt。
  • 未安装 Chromium 时，应用不会直接失败，而是跳过该工具；前端 Settings dialog 会显示后端是否可用。
  • 因此 Poetry 和 FastAPI 本身不足以保证视觉反馈，容器、权限和系统依赖仍是决定因素。
  • Getting Started: “Screenshot preview (optional) lets the agent render its own generated page in a headless browser and visually check its work.”
  • README 命令：`poetry run playwright install --with-deps chromium`
  • README: “If Chromium is missing, the app just skips the tool”
poetry run playwright install --with-deps chromium
材料未说明：README 未列出除 Linux 外各操作系统所需的完整 Chromium 系统依赖。；README 未说明视觉检查会执行多少轮，也未说明检查结果如何影响最终代码生成。
适合 我已经使用 React/Vite，通常从 Figma 设计和屏幕录制开始制作原型；我能否用这个项目直接生成 React + Tailwind 代码，并还原录制中的基础交互？
适合读者： 负责 React/Vite 原型开发、需要把 Figma 设计和屏幕录制快速转成可运行页面的前端开发者

适合，因为项目明确支持 React + Tailwind，并且输入不仅限于静态截图。

  • README 的 Supported stacks 列出了“React + Tailwind”，输出代码可继续编辑和运行。
  • 项目说明支持将“screen recording of a website in action”转换为 functional prototype，适合表达页面状态变化和可观察到的操作路径。
  • Gemini 是 video mode 所必需的模型，并负责代码生成；同时可提取截图中的真实图片和 logo。
  • 但录屏无法推断后台业务逻辑、权限、接口或未展示的异常分支，因此更适合生成原型，而不是完整业务实现。
  • Supported stacks: “React + Tailwind”
  • README: “Screenshot to Code also supports taking a screen recording of a website in action and turning that into a functional prototype.”
  • API keys: “Gemini ... required for video mode”
材料未说明：README 未说明录屏支持的最大时长、文件大小和帧率限制。；README 未说明生成的交互是否会自动接入真实 API、状态管理或表单校验。
适合 我需要从截图中尽量复用真实 logo 和图片，而不是接受占位资源；我可以配置 Gemini 和 Replicate，这个项目能满足我的资源还原约束吗？
适合读者： 需要复刻含真实 logo 和图片的网站界面的独立开发者，同时希望使用 Gemini 与 Replicate 处理资源

适合，因为 Gemini 和 Replicate 在项目中承担了真实资源提取与图像处理职责，但它们不能替代版权核查。

  • README 说明 Gemini 会从截图中提取真实 assets，目标是复用 screenshot 中的 logos/images，而不是只放置占位图。
  • Replicate 可提供 image editing、background removal 和 Replicate-backed image generation；未配置其密钥时，edit_images 和 remove_backgrounds 不可用。
  • API keys 章节明确建议同时配置 Gemini 和 Replicate，以获得更好的 screenshot-to-code accuracy。
  • 生成资产仍来自第三方服务或原始视觉输入，README 也提醒使用图片、logo、字体时需要单独确认版权、商标和授权边界。
  • API keys: “Gemini powers asset extraction (reusing the real logos/images from your screenshot)”
  • API keys: “Replicate powers image generation, background removal, and image editing”
  • API keys: “without it, `edit_images` and `remove_backgrounds` are unavailable”
材料未说明：README 未说明资源提取支持的图片格式、分辨率和单张截图中的资源数量上限。；README 未说明提取资源是否会自动保存到生成项目，还是仅在生成过程中临时使用。
适合 我不使用 React，而是要在 Bootstrap、纯 HTML + CSS 或 Ionic + Tailwind 之间交付原型；这个项目能否避免我重新手工搭建页面骨架？
适合读者： 需要把截图转换为 HTML/CSS、Bootstrap 或 Ionic + Tailwind 原型的产品设计师或独立开发者

适合，因为 README 直接列出了这三类输出栈，目标就是把视觉输入转换成可运行的前端初稿。

  • Supported stacks 明确包含 HTML + CSS、Bootstrap 和 Ionic + Tailwind，不要求使用 React。
  • 项目描述将截图、mockup、Figma designs 转为“clean, functional code”，因此不只是生成图片或视觉描述。
  • 官方托管版本被标为最快的试用路径，适合不想先配置本地环境的产品或独立开发者。
  • 但不同技术栈的生成质量和组件抽象程度可能不同，README 没有给出 Bootstrap 或 Ionic 相对 React 的质量对比；复杂业务逻辑仍需自行补充。
  • Supported stacks: “HTML + CSS”, “Bootstrap”, “Ionic + Tailwind”
  • README: “Convert screenshots, mockups, Figma designs, and screen recordings into clean, functional code using AI.”
  • Getting Started: “Use the hosted app: the fastest way to try Screenshot to Code with no local setup.”
材料未说明：README 未说明 Bootstrap 和 Ionic 输出是否包含对应组件库的完整交互行为。；README 未说明官方托管版本的使用配额、价格和输入文件限制。
视情况 我所在的网络环境不能直接访问 OpenAI API，但我仍想运行 React/Vite 前端和 FastAPI 后端；这个项目是否支持通过 OpenAI proxy 继续使用 GPT 代码生成模型？
适合读者： 无法直接访问 OpenAI API、使用 React/Vite 前端并需要配置代理地址的受限网络环境开发者

视情况，README 明确提供 OpenAI 代理配置方式，但能否使用仍取决于代理是否兼容 OpenAI API 路径和网络环境。

  • FAQ 说明无法直接访问 OpenAI API 时，可以使用 VPN，或在 backend/.env 设置 OPENAI_BASE_URL。
  • README 要求代理 URL 包含 v1 路径，并给出类似 https://xxx.xxxxx.xxx/v1 的格式；也可以直接在前端 settings dialog 配置。
  • GPT-5.5 和 GPT-5.4 Mini 被列为默认 AI models，因此代理主要解决访问路径，不会自动解决模型权限、配额或兼容性问题。
  • 如果只配置 OpenAI key，应用只会使用该 provider 的模型；配置 Gemini 或 Anthropic 才能增加其他代码生成选项。
  • FAQs: “configure the OpenAI base URL to use a proxy”
  • FAQs: “Set `OPENAI_BASE_URL` in `backend/.env` ... Make sure the URL has `v1` in the path”
  • Default AI models: “GPT-5.5 and GPT-5.4 Mini”
  • API keys: “With a single key it uses that provider's models only.”
poetry run uvicorn main:app --reload --port 7001
材料未说明：README 未说明代理需要支持哪些具体 OpenAI API 端点、流式协议或模型名称映射。；README 未说明代理场景下的超时、重试、速率限制和 WebSocket 相关配置。

✨ 核心亮点

  • 支持HTML、React、Vue与Bootstrap栈
  • Gemini 3.1 Pro可提取截图真实素材
  • 屏幕录制可转换为功能原型
  • MIT License，GitHub拥有77,540颗星

🔧 工程化

  • 用AI把截图、Figma设计和录屏转换成可运行代码
  • React/Vite前端配合FastAPI后端本地运行
  • Gemini负责素材提取，Replicate支持图片编辑

⚠️ 风险

  • 本地运行至少需要OpenAI、Anthropic或Gemini API key
  • 未安装Chromium时，screenshot preview会自动跳过
  • Docker模式下文件变化不会触发重新构建
  • README不推荐Ollama，明确指出结果质量较差

👥 适合谁？

  • 需要快速生成React或Vue原型的前端开发者
  • 希望自托管并修改React/Vite与FastAPI的团队
  • 已有Gemini或Replicate密钥并重视素材还原的用户