# screenshot-to-code 截图转前端代码工具

> 借助多模态模型，根据截图、设计稿、Figma 设计或屏幕录像生成 HTML/CSS、Tailwind、React、Vue、Bootstrap 或 Ionic 前端代码；可选的无头浏览器预览可让模型渲染并自查输出。结果是对界面外观的视觉重建，并非恢复原始源码或后端行为。

- 类型：工具
- 目标：网站
- 类别：网站分析工具
- 关联：基础工具
- 来源复核于：2026-10-17
- 收录于：2026-10-17
- 原始资源：<https://github.com/abi/screenshot-to-code>
- 一手来源：<https://github.com/abi/screenshot-to-code/blob/a8139779f7c5ae231b7f2a86fa7f83ddc5f7badc/README.md>
- 目录页面：<https://awesomerea.org/zh/resources/screenshot-to-code/>
- 记录 JSON：<https://awesomerea.org/resources/screenshot-to-code/record.json>
- 英文版：[English](https://awesomerea.org/resources/screenshot-to-code/index.md)

## 使用条件与局限

- 需自行部署这一采用 MIT 许可证的仓库：后端为使用 Poetry 管理的 FastAPI（Python ^3.10），前端为通过 pnpm 运行的 React/Vite，也可用 Docker Compose 一并启动。审阅时没有 GitHub Release 或标签。
- 至少需要一个 OpenAI、Anthropic 或 Gemini API 密钥，输入内容会交由所选提供方处理。视频模式必须使用 Gemini，素材提取也由 Gemini 完成；Replicate 密钥为可选项，上游建议配置以启用图像生成、编辑和背景移除。自检预览需要安装 Playwright 的 Chromium。
- README 未报告还原度或准确率数据。生成代码需要人工复核，无法恢复输入中未呈现的后端逻辑、API 或数据。

## 一手来源

1. <https://github.com/abi/screenshot-to-code/blob/a8139779f7c5ae231b7f2a86fa7f83ddc5f7badc/README.md>
2. <https://github.com/abi/screenshot-to-code/blob/a8139779f7c5ae231b7f2a86fa7f83ddc5f7badc/LICENSE>
3. <https://github.com/abi/screenshot-to-code/blob/a8139779f7c5ae231b7f2a86fa7f83ddc5f7badc/backend/pyproject.toml>
4. <https://github.com/abi/screenshot-to-code/blob/a8139779f7c5ae231b7f2a86fa7f83ddc5f7badc/frontend/package.json>

## 同分区更多条目：网站

- [Dembrandt 网站设计系统提取工具](https://awesomerea.org/zh/resources/dembrandt/index.md) · 工具
- [shuji 源映射源码恢复工具](https://awesomerea.org/zh/resources/shuji/index.md) · 工具
- [Obfuscator.io 专用反混淆工具](https://awesomerea.org/zh/resources/obfuscator-io-deobfuscator/index.md) · 工具
- [javascript-deobfuscator 通用 JavaScript 反混淆工具](https://awesomerea.org/zh/resources/ben-sb-javascript-deobfuscator/index.md) · 工具
- [mitmproxy2swagger](https://awesomerea.org/zh/resources/mitmproxy2swagger/index.md) · 工具
- [JPEXS Flash 反编译器（FFDec）](https://awesomerea.org/zh/resources/jpexs-decompiler/index.md) · 工具

## 关于此条目

说明已依据一手来源复核。
原创说明采用 MIT 许可；外部项目、论文与素材保留各自的权利和许可。