如何使用Screenshot-to-code：从截图到代码的AI转换神器完全指南

Screenshot-to-code 是一款强大的开源工具，它能够将网页截图自动转换为功能齐全的代码，支持 HTML、CSS、JavaScript 等多种网页开发语言和框架。无论是网页设计师快速将设计稿转化为代码，还是开发人员加速原型开发，这款工具都能显著提升工作效率。## 🚀 什么是Screenshot-to-code？Screenshot-to-code 是一个基于深度学习的代码生成

云忱川

1048人浏览 · 2026-02-07 02:39:26

云忱川 · 2026-02-07 02:39:26 发布

如何使用Screenshot-to-code：从截图到代码的AI转换神器完全指南

【免费下载链接】Screenshot-to-code emilwallner/Screenshot-to-code: Screenshot-to-Code 是一个用于将网页截图转换成代码的在线工具，可以用于自动化网页开发和设计，支持多种网页开发语言和框架，如 HTML，CSS，JavaScript 等。项目地址: https://gitcode.com/gh_mirrors/scr/Screenshot-to-code

Screenshot-to-code 是一款强大的开源工具，它能够将网页截图自动转换为功能齐全的代码，支持 HTML、CSS、JavaScript 等多种网页开发语言和框架。无论是网页设计师快速将设计稿转化为代码，还是开发人员加速原型开发，这款工具都能显著提升工作效率。

🚀 什么是Screenshot-to-code？

Screenshot-to-code 是一个基于深度学习的代码生成工具，它通过分析网页截图的视觉元素，自动生成对应的前端代码。该项目受 Tony Beltramelli 的 pix2code、Airbnb 的 sketching interfaces 和哈佛大学的 im2markup 启发，采用神经网络模型实现从图像到代码的转换。

核心功能特点

多框架支持：支持 HTML、Bootstrap 等多种网页开发框架
高准确率：Bootstrap 版本准确率可达 97%
简单易用：通过 Jupyter Notebook 提供直观的操作界面
快速原型：将设计想法迅速转化为可交互的网页原型

📷 工作原理展示

Screenshot-to-code 的工作流程非常直观，只需三步即可完成从截图到代码的转换：

输入设计图像：将网页截图提供给训练好的神经网络模型
神经网络转换：AI 模型自动分析图像并生成 HTML 标记

Screenshot-to-code 将截图转换为 HTML 代码的实时演示
渲染输出结果：生成的代码可以直接渲染为网页

🧠 模型架构解析

Screenshot-to-code 提供了三种不同的模型架构，分别针对不同的使用场景：

Bootstrap 模型

Bootstrap 版本是最成熟的模型，能够很好地泛化到新的设计原型。它使用 16 个领域特定令牌，这些令牌被翻译成 HTML/CSS。

Bootstrap 版本的神经网络架构图，包含 LSTM 和 Concatenate 层

HTML 模型

HTML 版本具有泛化潜力，但仍需更多 GPU 资源进行训练。该模型能够直接生成原始 HTML 代码。

HTML 版本的神经网络架构，包含 Embedding 和 TimeDistributed 层

Hello World 模型

这是一个简化的入门版本，用于演示基本原理和工作流程。

Hello World 版本的简化神经网络架构

💻 快速安装指南

本地安装步骤

首先安装必要的依赖包：

pip install keras tensorflow pillow h5py jupyter

克隆项目仓库：

git clone https://gitcode.com/gh_mirrors/scr/Screenshot-to-code
cd Screenshot-to-code/

启动 Jupyter Notebook：

jupyter notebook

在浏览器中打开相应的 notebook 文件（以.ipynb 结尾），然后点击菜单中的 "Cell > Run all" 运行模型。

FloydHub 云平台（推荐）

对于没有本地 GPU 的用户，可以使用 FloydHub 云平台：

点击上述按钮将在 FloydHub 上打开一个工作区，其中包含与 Bootstrap 版本相同的环境和数据集，还可以找到用于测试的预训练模型。

📂 项目结构解析

Screenshot-to-code 项目的主要结构如下：

  |  |-Bootstrap                           # Bootstrap 版本
  |  |  |-compiler                         # 将令牌转换为 HTML/CSS 的编译器
  |  |  |-resources
  |  |  |  |-eval_light                    # 10 个测试图像和标记
  |  |-Hello_world                         # Hello World 简化版本
  |  |-HTML                                # HTML 版本
  |  |  |-Resources_for_index_file         # 测试 index.html 文件的 CSS、图像和脚本
  |  |  |-html                             # 用于训练的 HTML 文件
  |  |  |-images                           # 训练用截图
  |-readme_images                          # 说明文档图片

📝 使用方法

在 Jupyter Notebook 中打开相应的模型文件（如 Bootstrap/bootstrap.ipynb）
准备好要转换的网页截图
运行 notebook 中的代码单元格
模型将自动分析图像并生成相应的代码
查看生成的 HTML/CSS 代码并进行必要的调整

⚡ 提升使用体验的小贴士

图像质量：使用清晰、高分辨率的截图可以提高代码生成质量
简单布局：从简单的网页布局开始，逐步尝试复杂设计
结果调整：生成的代码通常需要进行微调才能达到最佳效果
数据集扩展：如果需要处理特定类型的设计，可以考虑扩展训练数据集

📚 资源与模型权重

预训练模型权重可以通过以下链接获取：

Bootstrap 模型：https://www.floydhub.com/emilwallner/datasets/imagetocode（预训练模型使用 GRUs 而非 LSTMs）
HTML 模型：https://www.floydhub.com/emilwallner/datasets/html_models