SALT-NLP/Design2Code

该数据集由来自C4验证集的484个网页组成，用于测试多模态LLM将视觉设计转换为代码实现的能力。每个样本由HTML源代码和截图组成，且所有网页中的图片都被替换为占位符图像（rick.jpg）。

原始信息汇总

数据集概述

数据集描述

• 数据集名称：Design2Code-hf
• 数据集来源：C4验证集
• 数据集大小：484个网页
• 数据集用途：用于测试多模态大型语言模型（LLMs）将视觉设计转换为代码实现的能力

数据格式

• 数据类型：每个示例包含一对源HTML和截图（{id}.html 和 {id}.png）
• 图像处理：所有网页中的图像均被替换为占位符图像（rick.jpg）

示例使用

• 模型：HuggingFaceM4/VLM_WebSight_finetuned
• 代码示例：提供了使用PyTorch和Transformers库加载模型、处理图像并生成预测的代码示例

搜集汇总

数据集介绍

构建方式

在网页设计与前端开发领域，视觉设计到代码的自动转换是提升开发效率的关键研究方向。Design2Code数据集从C4验证集中精心筛选了484个网页样本，每个样本均包含原始HTML文件与对应的网页截图，构成源文件与视觉呈现的配对数据。为确保数据的一致性与隐私保护，所有网页中的图像均被统一替换为占位符图片，从而构建了一个专注于布局与结构转换的多模态基准测试集。

特点

该数据集的核心特点在于其多模态特性，将视觉信息与结构化代码紧密结合，为评估视觉语言模型在代码生成任务上的性能提供了标准化测试平台。数据集规模适中且经过严格筛选，确保了样本的多样性与代表性，涵盖了常见的网页布局模式。通过剥离图像内容并聚焦于页面结构与样式，该数据集有效隔离了视觉元素对代码生成过程的干扰，使得模型评估更加专注于布局转换的准确性。

使用方法

研究人员可利用该数据集对多模态大语言模型进行系统性评估，通过对比模型生成的HTML代码与原始代码的结构相似性，量化模型在视觉设计到代码转换任务上的性能。具体操作时，可加载数据集中的截图作为模型输入，并利用如HuggingFaceM4/VLM_WebSight_finetuned等预训练模型进行推理，生成对应的HTML代码。评估过程需结合自动化指标与人工审查，以全面分析模型在布局还原、样式匹配及代码规范性等方面的表现。

背景与挑战

背景概述

在人工智能与前端工程交叉领域，视觉设计到代码的自动转换一直是提升开发效率的关键研究方向。SALT-NLP/Design2Code数据集由SALT-NLP团队于2024年构建，基于C4验证集中的484个网页样本，旨在评估多模态大语言模型将网页截图转换为HTML代码的能力。该数据集通过配对HTML源码与截图，为模型提供了从视觉感知到结构化代码生成的标准化测试平台，推动了前端自动化与多模态理解技术的融合创新。

当前挑战

该数据集核心挑战在于解决网页视觉-代码跨模态映射的复杂性，包括对布局结构、样式属性和动态元素的精确解析。构建过程中，原始网页图像的多样性带来了数据清洗与标注的困难，例如动态内容截取的一致性与隐私信息处理；同时，为保持评估公平性，团队需将图像统一替换为占位符，这可能削弱模型对真实图像特征的泛化能力，增加了任务与实际应用的差距。

常用场景

经典使用场景

在视觉语言模型与前端开发交叉领域，Design2Code数据集为评估多模态大语言模型从网页截图生成对应HTML代码的能力提供了基准测试平台。该数据集收录了484个源自C4验证集的网页样本，每个样本包含原始HTML文件与对应截图，通过将图像替换为统一占位符，专注于模型对布局结构的理解与代码重构。这一场景常被用于检验模型在视觉设计到代码转换任务中的泛化性能与准确性，推动自动化前端开发技术的演进。

衍生相关工作

围绕该数据集衍生的经典工作包括HuggingFaceM4团队开发的VLM_WebSight_finetuned模型，该模型通过端到端训练实现了从图像到代码的精准映射。后续研究进一步拓展了多模态提示优化、代码语义增强等方向，例如结合视觉注意力机制提升布局识别精度，或引入代码语法树约束确保生成结果的规范性。这些工作共同推动了视觉-代码跨模态生成领域的算法创新与评估体系完善。

数据集最近研究

最新研究方向

在视觉语言模型与前端工程交叉领域，Design2Code数据集正推动着从视觉设计到代码自动生成的前沿探索。该数据集以484个网页截图与HTML代码对为基础，为多模态大语言模型提供了精准的评估基准，旨在解决界面设计智能化转换的核心挑战。当前研究聚焦于提升模型对网页布局、视觉元素及交互逻辑的跨模态理解能力，结合生成式人工智能的热潮，相关技术正逐步应用于低代码开发、无障碍网页生成等实际场景。这一方向不仅加速了人机交互设计的自动化进程，也为多模态推理在真实世界任务中的可靠性设定了新的衡量标准，具有显著的工程与学术双重价值。