RepoDaily独立的开源软件评估与选型支持
English

RepoDaily · 2026-08-29 · Design / Creative app

screenshot-to-code:把截图、Figma 设计稿和屏幕录像转成 HTML/React/Vue 代码,本地跑通的真实成本

#17 Design / Creative app Python +309 abi/screenshot-to-code 打开仓库

abi/screenshot-to-code 支持把截图、设计稿和屏幕录像转成 HTML/Tailwind、React、Vue、Bootstrap、Ionic 六种栈,默认模型覆盖 Gemini 3、GPT-5.5 与 Claude Opus,本文讲清本地部署要做什么。

项目类型Design / Creative app
最适合想把截图、Figma 稿或屏幕录像快速变成 HTML/Tailwind、React、Vue、Bootstrap、Ionic 初稿组件的前端开发者和设计师
风险等级中等:产出是需要人工复核的初稿,最优效果依赖 Gemini 加 Replicate 两组 API Key
评估时间约 30-45 分钟:一个 API Key、poetry install、playwright install chromium,后端跑在 7001 端口

核心问题: 用 Gemini 转一张你自己的真实设计稿,是否比手工还原更快?生成的 Tailwind 是否干净到可以直接保留?

89/100

RepoDaily 采用评分

RepoDaily 将该项目的采用分评为 89/100（强）：分数来自文章来源、安装路径、生产风险、差异化、许可证清晰度以及 AI/Agent 适配度。

基于 RepoDaily 来源和采用说明的方向性评分，不是基准测试。风险: 中
100证据质量

包含 6 个来源、覆盖 5 类来源；如有 RepoDaily 独有模块，会进一步提高证据分。

100可安装/可试用性

检测到 6 个工作流步骤、6 个下一步动作，以及 9 个命令/安装信号。

62维护可信度

趋势热度为 +309 stars；如内容中有 release、issue 或维护信号，会提高维护可信度。

90生产准备度

采纳风险标记为 medium，并包含 4 条安全说明与 4 条跳过条件。

100差异化

3 个机会视角、4 个替代方案，以及 4 个类型化模块支撑差异化判断。

82许可证清晰度

文章中包含许可证来源或许可证表述。

72Agent / AI 适配度

文章正文和元数据中检测到 4 个 AI/Agent 相关信号。

项目概览

abi/screenshot-to-code 做的事情覆盖面很广:丢进去一张截图、一张设计稿、一份 Figma 设计或一段屏幕录像,它返回可运行的代码。README 列出六种目标技术栈——HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap、Ionic + Tailwind——从营销页到移动端风格界面都能覆盖。项目采用 MIT 许可(Copyright (c) 2023 Abi Raja),以两个可部署部分发布:React/Vite 前端和 Poetry 管理的 FastAPI 后端。如果觉得本地部署麻烦,维护者还提供了免安装的托管版 screenshottocode.com。

它的引擎是一组前沿模型矩阵,而不是单一模型。README 列出的默认模型包括 Gemini 3 Flash Preview 和 Gemini 3.1 Pro Preview(被称为最佳模型)、GPT-5.5 和 GPT-5.4 Mini、Claude Opus 4.6 和 4.8,以及走 Replicate 的 z-image-turbo 图像生成。Provider Key 决定能力:GEMINI_API_KEY 驱动 Gemini 变体、从截图里提取真实 logo 和图片,并且是视频模式的必需项;REPLICATE_API_KEY 负责图像生成、背景移除和图像编辑——README 明确说没有它,edit_images 和 remove_backgrounds 不可用。四把 Key 全配时,应用会自动为每个变体挑选更强的模型组合;只配一把则只用该家的模型。

本趋势窗口内该仓库收获 309 颗星、排名第 17,原因在 README 里写得很清楚:模型阵容新到点名两个 Preview 阶段的 Gemini 版本、资产提取功能复用真实品牌素材而非占位图、视频模式把网站操作录像变成可交互原型,还有托管版让第一次转换只需三十秒。代价同样具体:至少需要一把付费 Provider Key,本地 Ollama 路线被明确评价为效果差,生成代码是初稿而非成品组件。

解决什么问题

  • 把完成的设计手工还原成组件很慢:量间距、取色、逐字抄文案。
  • 多数转换工具会丢真实资产——品牌 logo 变成占位矩形,最后还得人工换回。
  • 静态稿展示不了交互,操作视频又点不动,两者都传达不了行为。
  • 想比较不同模型对同一份设计的转换效果,就得自己接 OpenAI、Anthropic、Gemini 的 API。
  • 设计素材形态各异——截图、Figma 文件、屏幕录像——而多数工具只接受其中一种。

工作原理

  1. 把截图、设计稿、Figma 设计或屏幕录像丢进 Web 界面(Docker 部署下前端跑在 5173 端口)。
  2. 选择目标栈:HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap 或 Ionic + Tailwind。
  3. FastAPI 后端(uvicorn,7001 端口)调用你配置的 Provider。四把 Key 全配时为每个变体挑选更强的模型组合;只配一把时只用该家的模型。
  4. Gemini 变体从源截图提取真实 logo 和图片;配置 REPLICATE_API_KEY 后,z-image-turbo 负责图像生成,并支撑 edit_images 和 remove_backgrounds。
  5. Playwright 安装的 Chromium 供截图预览工具使用,方便把生成页面与原图对照。
  6. 视频模式下,录制一段网站操作,Gemini 生成该流程的可交互原型。

六种输出栈,一个输入入口

技术栈列表比多数设计转代码工具更宽:HTML + Tailwind、HTML + CSS、React + Tailwind、Vue + Tailwind、Bootstrap、Ionic + Tailwind。HTML + CSS 照顾不用 Tailwind 的团队;Ionic + Tailwind 面向移动风格界面;React 和 Vue 覆盖两大组件框架。同一张截图可以换栈重新生成,因此它也适合把现有页面在框架之间迁移,而不只服务于全新初稿。

每次转换背后的模型矩阵

  • README 称 Gemini 3 Flash Preview 和 Gemini 3.1 Pro Preview 是最佳模型,并强烈推荐配置 GEMINI_API_KEY。
  • OPENAI_API_KEY 解锁 GPT-5.5 和 GPT-5.4 Mini;ANTHROPIC_API_KEY 解锁 Claude 变体(密钥表中列出 Opus、Sonnet 以及 Fable 系列)。
  • Replicate 上的 z-image-turbo 负责图像生成、背景移除和图像编辑。
  • OpenAI、Anthropic、Gemini 三者至少配一把;四把全配效果最好,并支持按次生成比较多模型。
  • 存在 Ollama 开源模型路线,但 README 只链接到 issue #354 的评论,并明确标注因效果差不推荐。

命令面:你实际要敲的命令

  • README 的后端步骤:cd backend,然后用 echo "OPENAI_API_KEY=sk-your-key" > .env 写入 .env,再追加 ANTHROPIC_API_KEY、GEMINI_API_KEY、REPLICATE_API_KEY 各行。
  • 若未安装 Poetry 先执行 pip install --upgrade poetry,再在 backend/ 里 poetry install。
  • 安装预览浏览器:poetry run playwright install chromium;Linux 上用 poetry run playwright install --with-deps chromium,需要 sudo/apt 装系统依赖库。
  • 用 poetry env activate 激活环境(执行打印出的激活命令),然后启动 API:poetry run uvicorn main:app --reload --port 7001。
  • 根目录测试:pnpm run test 串联 test:frontend(pnpm -C frontend test)和 test:backend(cd backend && poetry run pytest);包管理器锁定为 pnpm@10.32.1。
  • OpenAI、Anthropic、Gemini 的 Key 可在前端设置对话框(应用加载后点齿轮图标)里填写;Replicate 则必须配置在后端侧。

集成面:四把 Key,四种能力

  • OPENAI_API_KEY:GPT-5.5 与 GPT-5.4 Mini 代码生成。
  • ANTHROPIC_API_KEY:Claude 系代码生成变体。
  • GEMINI_API_KEY(强烈推荐):Gemini 3 Flash 与 3.1 Pro 变体、从截图提取真实资产,以及视频模式的唯一路径。
  • REPLICATE_API_KEY(强烈推荐):图像生成、背景移除、图像编辑——README 明确说明缺它时 edit_images 和 remove_backgrounds 不可用。
  • 前端与后端通过 websocket 式连接通信:按 docker-compose 注释,改了 BACKEND_PORT 就必须同步改 frontend/.env.local 里的 VITE_WS_BACKEND_URL。
  • Key 越多,应用自动为每个变体挑选的模型组合越强;只配一把则生成被限制在该 Provider 内。

部署说明:docker-compose 映射两个端口

  • docker-compose.yml 定义了 backend 服务,从 ./backend/Dockerfile 构建,加载 env_file .env,暴露 ${BACKEND_PORT:-7001}。
  • 后端容器命令是 poetry run uvicorn main:app --host 0.0.0.0 --port ${BACKEND_PORT:-7001}。
  • frontend 服务从 ./frontend/Dockerfile 构建,映射端口 5173:5173。
  • 端口覆盖通过 BACKEND_PORT 环境变量完成——记得同步修改 frontend/.env.local 里的 VITE_WS_BACKEND_URL。
  • 密钥经 .env 文件进入后端容器,任何共享主机上都要注意文件权限并排除出版本控制。

维护风险研判:MIT 许可、pnpm workspaces 与预览版模型更替

  • MIT 许可,Copyright (c) 2023 Abi Raja:允许商用、修改和再许可,只需保留声明——把它嵌进产品没有法律障碍。
  • package.json 声明了 frontend 与 backend 两个 workspace,但版本号停留在 0.0.0,仓库本身不提供语义化版本承诺;若在意输出稳定性请锁定 commit。
  • 主打模型包含 Preview 标签的 Gemini 版本(Gemini 3 Flash Preview、Gemini 3.1 Pro Preview);Provider 轮换这些模型时,生成质量可能漂移。
  • Ollama 离线路线只在 issue #354 的评论里有记录,不是一等公民文档——完全本地化运行对该项目是次要场景。
  • 测试入口是存在的:前端 pnpm -C frontend test,后端 poetry run pytest,由根目录 pnpm run test 串联。

谁适合关注

适合关注

  • 你已经在为 Gemini、OpenAI 或 Anthropic 的 Key 付费,想几分钟内从真实设计稿得到初稿组件。
  • 你需要同一界面出两种栈(比如 React + Tailwind 和 Vue + Tailwind),想配齐四把 Key 用多模型混合生成。
  • 你有 GEMINI_API_KEY,想把一段网站操作录像变成可点击原型。
  • 你自托管内部工具,能用 docker-compose 自定义 BACKEND_PORT 并同步改 frontend/.env.local。

可以先跳过

  • 你需要完全离线转换——README 对 Ollama 路线的评价是效果差。
  • 你不能把截图或录像(可能包含未发布 UI)发送给 OpenAI、Anthropic、Google 或 Replicate。
  • 你期望未经人工复核就有生产级的可访问性和响应式表现;产出是需要编辑的初稿。
  • 你想要可嵌入的库 API,而不是一整套要自己部署和持续更新的 React/Vite + FastAPI 应用。

风险与注意事项

中

MIT 许可和干净的 Docker 打包让法律与部署风险很低,但输出质量和运行成本依赖外部、部分处于预览阶段的模型 API。

  • 至少需要一把付费 Provider Key,README 推荐配置是 Gemini 加 Replicate——两份账单而不是一份。
  • 缺少 REPLICATE_API_KEY 时,edit_images 和 remove_backgrounds 明确不可用,图像处理能力会降级。
  • 默认阵容包含 Preview 标签的 Gemini 模型,Provider 更新时质量可能波动。
  • Ollama 本地路线被描述为效果差,没有可靠的离线兜底;包版本停在 0.0.0,没有兼容性承诺。
  • Provider Key 存放在 backend/.env(README 用 echo 写入),并由 docker-compose 的 env_file 加载进容器——注意文件权限,且不要提交到版本库。
  • OpenAI、Anthropic、Gemini 的 Key 还可以通过前端设置对话框(齿轮图标)填写,任何能访问共享部署界面的人都能设置或替换它们。
  • 截图、设计稿和录像会被发送到所选变体对应的 Provider;未发布设计应视为离开你的边界的数据。
  • 生成的 HTML 应像对待任何第三方代码片段一样:合并前审查链接、脚本和外部 URL。

替代方案比较

方案适用场景代价
Screenshot to Code(托管版)
你想零安装(Poetry、Playwright、Docker 都不要)完成第一次转换screenshottocode.com 上的商业托管产品
tldraw Make Real
GitHub ↗
你更想在画布上画草图再变成可运行应用,而不是从已有截图出发开源;自备模型 API Key
v0 by Vercel
你想要提示词驱动的 React/Tailwind 生成,并且接受厂商产品内置托管商业订阅
Anima
你的源头是 Figma 文件,想要一条持续维护的设计转代码管线而非像素转换商业方案

这个趋势说明了什么

面向客户交付的稿转组件服务

代理工作室可以私有化跑 Docker 栈(改 BACKEND_PORT 并同步 frontend/.env.local 的 VITE_WS_BACKEND_URL),把客户的 Figma 导入进去,拿回已由 Gemini 提取真实 logo 的 React + Tailwind 初稿。

转换三张真实客户页面,把手工还原耗时与"生成加清理"耗时对比,并检查资产提取是否拿到了真实 logo,再决定是否对客户报价。

内部工具的视频模式演示工厂

录一段现有看板的 30 秒操作,让视频模式生成可点击原型——适合不暴露真实系统的利益相关方评审。此路径必须有 GEMINI_API_KEY。

选一个内部页面录下操作流程,检查生成的原型是否准确还原核心交互和文案,达到评审会可用的程度。

用自己的设计稿做模型横评

由于配齐 Key 后应用会挑选更强的模型组合并支持按次生成比较,同一张稿子可以当作 GPT-5.5、Claude Opus、Gemini 3 变体的固定基准,再决定统一用哪家。

同一张截图跑两次——单 Key 一次、四 Key 全配一次——对比生成 HTML + Tailwind 的还原度,并比较同等产出的 Provider 花费。

下一步建议

用一把 Gemini Key 在本地转一张你自己的真实设计稿

在为更多 Key 付费之前,先用自己的设计验证还原度。README 推荐质量配置是 Gemini 加 Replicate,但一把 GEMINI_API_KEY 就足以跑通代码生成、资产提取和预览闭环。

  1. cd backend 并写入 .env:echo "GEMINI_API_KEY=your-key" > .env
  2. 执行 poetry install(如未装 Poetry 先 pip install --upgrade poetry)
  3. 执行 poetry run playwright install chromium(Linux 加 --with-deps)
  4. 启动 API:poetry run uvicorn main:app --reload --port 7001
  5. 用 docker compose 把前端拉起在 5173 端口;若改了后端端口,同步设置 frontend/.env.local 的 VITE_WS_BACKEND_URL
  6. 丢入一张真实 Figma 导出图生成 React + Tailwind,再补上 REPLICATE_API_KEY 重新生成,观察 edit_images 和 remove_backgrounds 的效果

RepoDaily 判断

一个真正有用的初稿生成器,技术栈覆盖异常宽(从 HTML/Tailwind 到 Ionic),最佳效果由 Gemini 加 Replicate 双 Key 把门。先拿你自己的稿子跑一遍再决定是否纳入构建流程;嫌 Poetry 和 Playwright 麻烦的话,还有托管版可选。

信息来源