Screenshot to Code：使用 AI 将截图转换为干净的 UI 代码

每个开发者都经历过将设计稿转换为代码的挫折。像素在 Figma 中看起来正确，但将视觉版面转换为响应式 HTML、在断点之间保持设计一致性，以及确保适当的间距和对齐，可能需要耗费数小时的繁琐工作。Screenshot to Code 由开发者 Abe（abi）创建，以一个看似简单的前提解决了这个问题：如果你可以直接向 AI 展示设计，然后拿回可运行的代码呢？

拥有超过 72,000 个 GitHub 星标和庞大的用户社区，Screenshot to Code 已成为"设计转代码"领域中最受欢迎的开源工具。工作流程如其听起来一样简单：上传截图、设计稿或 UI 照片，选择目标输出框架，然后 AI 生成对应的前端代码。

该工具利用了前沿 AI 模型的视觉能力——GPT-4o、Claude、Gemini——这些模型可以分析图片的视觉结构并推断底层的版面、排版、色彩方案、间距和交互元素。随着每一代视觉模型的发展，输出质量已大幅提升，该工具也已演进到支持多种输出框架和样式方法。

Screenshot to Code 如何将图像转换为代码？

转换过程涉及从图像预处理到代码合成的多个阶段。

流程图 TD
    A[输入图像\n截图 / 设计稿 / 照片] --> B[图像预处理\n缩放与优化]
    B --> C[视觉 LLM 分析\n版面与元素检测]
    C --> D{目标框架\n选择}

    D -->|HTML/CSS| E[HTML 生成器\n语义标签 + CSS]
    D -->|React + Tailwind| F[React 生成器\nJSX + Tailwind 类]
    D -->|Vue + Tailwind| G[Vue 生成器\nSFC + Tailwind 类]
    D -->|Bootstrap| H[Bootstrap 生成器\nBS 类 + HTML]

    E --> I[代码输出\n+ 预览面板]
    F --> I
    G --> I
    H --> I

    I --> J[迭代\n优化提示或模型]

视觉 LLM 首先分析输入图像，识别不同的 UI 元素——按钮、文本块、图像、输入字段、导航栏——及其空间关系。然后它使用选定的框架和样式方法生成重现视觉版面的代码，包括适当的元素嵌套、响应式行为和交互状态。

支持哪些 AI 模型和输出格式？

该工具的灵活性来自于其对多种 AI 后端和输出配置的支持。

AI 模型的选择会显著影响输出质量。对于大多数使用场景，GPT-4o 和 Claude 3.5 Sonnet 是推荐选项，提供最佳的精确度、速度和成本平衡。对于简单的版面，Gemini Pro Vision 提供了一个经济实惠的替代方案。

有哪些可用的输出框架和样式方法？

该工具以几种流行的前端框架生成生产级质量的代码。

React + Tailwind 输出是最受欢迎的组合，因为它产生干净、模块化的组件，可自然集成到现代网页开发工作流程中。该工具生成功能完整的 React 组件，具有适当的 Tailwind 类组合，用于版面、间距、排版和响应式行为。

技术栈如何支撑该应用程序？

Screenshot to Code 本身使用现代开发技术构建。

代码预览组件尤其设计精良。它使用 Sandpack（来自 CodeSandbox）在应用程序内部提供生成代码的实时交互预览，让用户可以实时查看截图转代码的结果。

常见问题

什么是 Screenshot to Code？ Screenshot to Code 是一款开源工具，拥有超过 72,000 个 GitHub 星标，使用 AI 视觉模型将截图、设计稿和设计文件转换为干净、功能完整的前端代码。

Screenshot to Code 支持哪些输出格式？ 该工具可以生成多种输出格式的代码，包括标准 HTML/CSS、React（JSX 组件）、Vue（单文件组件）和基于 Bootstrap 的 HTML，以及 Tailwind CSS 变体。

Screenshot to Code 使用哪些 AI 模型？ Screenshot to Code 支持多种 AI 视觉模型，包括 OpenAI GPT-4 Vision、GPT-4o、Anthropic Claude（3.5 Sonnet、3 Opus）和 Google Gemini Pro Vision。

该工具使用什么技术栈？ 前端使用 React 和 TypeScript 构建，后端使用 Python（FastAPI），图像处理利用 AI 视觉 API 来理解视觉版面并生成对应的代码。

有托管版本可用吗？ 是的，托管版本可在 screenshottocode.com 使用，提供额外功能，包括无限生成、团队协作和优先使用新的 AI 模型。

延伸阅读

• Screenshot to Code GitHub 仓库 – 源代码、问题和社区
• Screenshot to Code 托管版本 – 云端托管版本，附带高级功能
• OpenAI GPT-4 Vision API – 驱动该工具的视觉模型
• Anthropic Claude API – 替代视觉模型支持