描述
Screenshot to Code 是一款由 AI 驱动的工具，旨在将视觉设计转化为功能性代码。它接受各种输入，包括截图、模型图、Figma 设计，甚至网站运行时的屏幕录像，并将它们转换为干净、可直接使用的代码。该工具支持流行的前端堆栈，如带有 Tailwind CSS 的 HTML、带有 Tailwind CSS 的 React、带有 Tailwind CSS 的 Vue、Bootstrap 以及带有 Tailwind CSS 的 Ionic。
用户可以通过两种主要方式与 Screenshot to Code 进行交互：通过本地运行以进行定制和贡献，或者使用 screenshottocode.com 上的官方托管应用程序进行即时测试，无需任何本地设置。本地运行该工具涉及设置 React/Vite 前端和 FastAPI 后端，需要 OpenAI、Anthropic 和 Gemini 等 AI 模型提供商的 API 密钥。Gemini 因其资源提取能力而特别推荐，它允许重用截图中的真实徽标和图像，而 Replicate 对于图像生成、背景移除和编辑功能至关重要。
该项目支持一系列 AI 模型，包括 Gemini 3 Flash 和 Gemini 3.1 Pro Preview、GPT-5.5 和 GPT-5.4 Mini，以及 Claude Opus 4.6/4.8。集成多个 API 密钥通过允许应用程序选择更强大的模型组合来提高生成代码的准确性和质量。对于那些对屏幕录像到功能原型转换等高级功能感兴趣的人来说，Gemini 是一个先决条件。该项目还提供 Docker 支持，以便于部署和执行。
Screenshot to Code 旨在通过自动化将设计转化为代码的繁琐过程来简化 Web 开发工作流程。这对于希望加速原型设计、减少手动编码工作量并确保设计与实现之间一致性的开发人员、设计师和团队尤其有益。该项目在 GitHub 上得到积极维护，鼓励社区贡献和反馈。
Screenshot to Code的核心功能
将截图和模型图转换为 HTML、Tailwind、React 和 Vue 代码。
支持屏幕录像以生成功能性原型。
提供托管应用程序以供即时使用。
允许本地执行以进行定制和贡献。
集成包括 Gemini、GPT 和 Claude 在内的多个 AI 模型。
提供由 AI 驱动的资源提取（使用 Gemini）。
支持通过 Replicate 进行图像生成、背景移除和编辑。
提供 React/Vite 前端和 FastAPI 后端。
包括可选的屏幕截图预览以进行视觉验证。
提供 Docker 支持以简化部署。
Screenshot to Code入门
从 GitHub 克隆存储库。
使用 Poetry 为后端安装依赖项，并使用 Yarn 为前端安装依赖项。
在环境文件中配置 AI 模型提供商（OpenAI、Anthropic、Gemini、Replicate）的 API 密钥。
安装必要的浏览器依赖项，如 Chromium。
使用 Poetry 运行后端服务器。
使用 Yarn 运行前端开发服务器。
通过提供的本地 URL（例如 http://localhost:5173）访问应用程序。
Screenshot to Code的使用案例
- 快速原型设计
- 前端开发
- 设计到代码转换
- UI/UX 工作流程加速
- 屏幕录像到原型
- 资源提取
- 代码生成比较
