screenshot-to-code 可以免费使用吗？用的什么许可证？

screenshot-to-code 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

screenshot-to-code 还在维护吗？

活跃维护中。screenshot-to-code 最近一次提交是在 2026年10月9日。

screenshot-to-code 适合用来做什么？

将设计稿快速转换为前端页面的起始代码根据截图重建已有网站的页面布局根据现有应用的录屏制作界面原型

screenshot-to-code 怎么安装和运行？

使用 Poetry 设置后端并安装依赖: cd backend && poetry install 安装用于截图预览工具的 Chromium 浏览器: poetry run playwright install chromium 在 7001 端口启动后端服务: poetry run uvicorn main:app --reload --port 7001 安装前端依赖并启动开发服务器，然后打开 http://localhost:5173: cd frontend && pnpm install && pnpm dev

在哪里获取 screenshot-to-code？

源代码和安装说明在 GitHub 上：https://github.com/abi/screenshot-to-code

abi/screenshot-to-code

利用 AI 将截图、设计稿、Figma 设计或屏幕录屏转换为 HTML、React、Vue 等前端代码。

在 GitHub 查看官网

Star: 80,547
Fork: 9,842
未关闭 Issue: 148
最近提交: 11天前

这是什么？

screenshot-to-code 可以把截图、设计稿、Figma 设计或屏幕录屏转换为可运行的前端代码。用户选择目标技术栈，例如 HTML 搭配 Tailwind 或 CSS、React 搭配 Tailwind、Vue 搭配 Tailwind、Bootstrap，或 Ionic 搭配 Tailwind，工具会生成还原页面布局的代码。

代码生成基于 OpenAI、Anthropic、Google Gemini 和 Replicate 提供的托管 AI 模型。配置 Gemini 后，工具可以从截图中提取真实的 logo 和图片并在输出中复用。录屏也可以转换为所展示网站的可交互原型。

项目采用 React/Vite 前端和 FastAPI 后端，支持通过 Docker Compose 本地运行，也提供托管版本。本地运行需要自备各模型服务商的 API 密钥。

核心功能

01将截图和 Figma 设计转换为 HTML、React、Vue 或 Bootstrap 代码
02支持 Tailwind、原生 CSS 和 Ionic 等输出样式
03可根据网站录屏生成原型
04配置 Gemini 后可从截图中提取真实的 logo 和图片
05可在 OpenAI、Anthropic 和 Gemini 模型之间选择

适用场景

将设计稿快速转换为前端页面的起始代码
根据截图重建已有网站的页面布局
根据现有应用的录屏制作界面原型

快速上手

1
使用 Poetry 设置后端并安装依赖
cd backend && poetry install
2
安装用于截图预览工具的 Chromium 浏览器
poetry run playwright install chromium
3
在 7001 端口启动后端服务
poetry run uvicorn main:app --reload --port 7001
4
安装前端依赖并启动开发服务器，然后打开 http://localhost:5173
cd frontend && pnpm install && pnpm dev

使用前须知

本地运行需要至少一个模型 API 密钥，且强烈建议配置 Replicate 以使用全部功能。
项目包含 FastAPI 后端和 React 前端，自行部署需要一定工作量。
不推荐使用 Ollama 开源模型，因为结果质量较差。

常见问题

screenshot-to-code 是什么？: 利用 AI 将截图、设计稿、Figma 设计或屏幕录屏转换为 HTML、React、Vue 等前端代码。 screenshot-to-code 可以把截图、设计稿、Figma 设计或屏幕录屏转换为可运行的前端代码。用户选择目标技术栈，例如 HTML 搭配 Tailwind 或 CSS、React 搭配 Tailwind、Vue 搭配 Tailwind、Bootstrap，或 Ionic 搭配 Tailwind，工具会生成还原页面布局的代码。
screenshot-to-code 可以免费使用吗？用的什么许可证？: screenshot-to-code 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
screenshot-to-code 还在维护吗？: 活跃维护中。screenshot-to-code 最近一次提交是在 2026年10月9日。
screenshot-to-code 适合用来做什么？: 将设计稿快速转换为前端页面的起始代码根据截图重建已有网站的页面布局根据现有应用的录屏制作界面原型
screenshot-to-code 怎么安装和运行？: 使用 Poetry 设置后端并安装依赖: cd backend && poetry install 安装用于截图预览工具的 Chromium 浏览器: poetry run playwright install chromium 在 7001 端口启动后端服务: poetry run uvicorn main:app --reload --port 7001 安装前端依赖并启动开发服务器，然后打开 http://localhost:5173: cd frontend && pnpm install && pnpm dev
在哪里获取 screenshot-to-code？: 源代码和安装说明在 GitHub 上：https://github.com/abi/screenshot-to-code

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。