VISION2UI

VISION2UI是一个由华中科技大学等机构联合创建的真实世界数据集，专门用于从高保真设计图像自动生成UI代码。该数据集通过收集、清洗和过滤Common Crawl数据集中的数据构建而成，包含20,000个样本，每个样本包括设计图像和对应的UI代码。数据集创建过程中使用了神经评分器来保证数据质量，并通过人工标注的子集进行训练。VISION2UI数据集的应用领域主要集中在自动化UI代码生成，旨在简化开发流程，使初学者和设计师能够直接从设计图生成网页。

VISION2UI is a real-world dataset jointly created by Huazhong University of Science and Technology and other institutions, specifically designed for automatically generating UI code from high-fidelity design images. This dataset is constructed by collecting, cleaning and filtering data from the Common Crawl dataset, and contains 20,000 samples, each comprising a design image and its corresponding UI code. A neural scorer was employed during the dataset creation process to ensure data quality, and a manually annotated subset was used for training. The application fields of the VISION2UI dataset mainly focus on automated UI code generation, aiming to simplify the development workflow and enable beginners and designers to directly generate webpages from design drafts.

搜集汇总

数据集介绍

构建方式

在网页界面自动生成代码的研究领域，数据质量直接影响模型性能。VISION2UI数据集构建始于对Common Crawl开源数据的深度处理，通过系统化流程确保样本的真实性与规范性。原始HTML代码经过CSS样式与图像元素的补充下载后，进入严格的清洗阶段，依据启发式规则剔除冗余注释、隐藏元素及无效属性，保留核心渲染特征。随后利用Pyppeteer工具生成网页截图，同步记录每个HTML元素的布局信息，形成代码、图像与布局三元组。为提升数据质量，研究团队训练了基于ResNet-50的神经评分器，对截图进行美学与完整性评估，筛选得分高于阈值的高质量样本，最终构建出包含两万条样本的平行数据集。

特点

该数据集在界面设计转代码任务中展现出鲜明的特征优势。其样本均源自真实网络环境，涵盖多样化的网页布局与视觉风格，避免了合成数据可能存在的分布偏差。每条数据不仅包含高保真设计图像与对应HTML代码，还额外提供了元素的位置与尺寸信息，为模型学习结构生成提供了关键监督信号。与同类数据集相比，VISION2UI在规模上显著超越人工精选的基准集，同时保持了与真实网页统计特征的一致性，如DOM深度、标签数量等指标均反映出现实场景的复杂性。这种真实性、规模性与结构信息的结合，为多模态大语言模型提供了高质量的训练与评估基础。

使用方法

该数据集主要服务于基于多模态大语言模型的界面代码生成研究。研究者可将数据集划分为训练、验证与测试子集，用于模型微调与性能评估。训练过程中，模型同时接收设计图像与布局信息作为输入，学习生成结构准确的HTML代码。评估阶段可采用TreeBLEU等指标衡量生成代码的DOM树匹配度，并结合SSIM指标检验渲染页面的视觉一致性。数据集中的布局标签有助于模型理解元素的空间关系，提升结构生成的准确性。此外，该数据集也可作为基准测试平台，用于比较不同模型在真实场景下的代码生成能力，推动界面自动化构建技术的发展。

背景与挑战

背景概述

在计算机视觉与前端工程交叉领域，自动从网页设计图生成代码技术长期面临数据稀缺的瓶颈。2024年，华中科技大学联合多家研究机构发布了VISION2UI数据集，旨在为多模态大语言模型提供高质量的训练与评估基准。该数据集源自真实网络环境，通过对Common Crawl海量网页数据进行清洗、过滤与标注，构建了包含设计图像、HTML代码及元素布局信息的三元组样本。其核心研究问题聚焦于如何实现从高保真设计图像到可执行UI代码的精准转换，以降低开发门槛并提升前端工程自动化水平。作为首个融合真实场景与布局信息的大规模数据集，VISION2UI为视觉-代码生成任务提供了关键的数据基础，推动了智能界面生成技术的发展。

当前挑战

该数据集致力于解决从视觉设计到代码生成的跨模态转换难题，其核心挑战在于如何准确解析设计图中的复杂布局与层次结构。图像中元素的重叠、边界模糊以及动态样式使得DOM树结构的重建尤为困难，现有模型在生成代码时常出现结构错位或层级误判。在构建过程中，研究团队面临真实网络数据的强噪声干扰，需通过多层过滤机制剔除无效代码与低质量截图；同时，CSS代码的冗长性与样式耦合性增加了数据清洗与模型训练的复杂度。此外，如何平衡数据的规模与质量，并设计有效的神经评分器自动化筛选样本，亦是数据集构建中的关键挑战。

常用场景

经典使用场景

在计算机视觉与前端工程交叉领域，VISION2UI数据集为多模态大语言模型（MLLMs）的微调提供了关键支持。该数据集通过从真实网页中提取的高保真设计图像与对应HTML代码的配对，使模型能够学习从视觉布局到结构化代码的映射关系。其经典应用场景在于训练模型自动将UI设计图转换为可执行的网页代码，从而降低前端开发中对人工编码的依赖，提升设计到产品的转化效率。

衍生相关工作

该数据集衍生的经典工作包括对多模态代码生成模型的系统性评估与优化。例如，研究者基于VISION2UI开展了针对Pix2Struct、ChatGPT-4V等模型的微调实验，探索了布局信息注入对生成代码结构准确性的影响。同时，其数据构建方法启发了后续大规模真实数据集的采集策略，并为Design2Code、WebSight等相关基准的完善提供了对比与补充，推动了自动UI生成领域的标准化进程。

数据集最近研究

最新研究方向

在计算机视觉与前端工程交叉领域，VISION2UI数据集的推出标志着从高保真设计图像自动生成UI代码的研究进入了新阶段。该数据集源自真实网络环境，融合了布局信息，为多模态大语言模型的微调提供了高质量资源，直接应对了现有模型在生成复杂HTML结构时面临的挑战。前沿研究聚焦于利用此类数据提升模型对网页DOM树层次结构的理解能力，同时探索如何有效处理冗长CSS代码，以推动自动化前端开发工具的实际应用，降低开发门槛，并赋能设计人员直接实现视觉到代码的转化。

相关研究论文

• VISION2UI: A Real-World Dataset with Layout for Code Generation from UI Designs

  华中科技大学 · 2024年