creative-graphic-design/DesignBench

该数据集是一个针对前端开发的多任务数据集，包含编辑（edit）、生成（generation）和修复（repair）三种任务类型，支持多种前端框架（angular、react、vanilla、vue）。数据集提供了丰富的特征，包括源代码、截图、提示文本、组件JSX等，并标注了任务的难度、清晰度、评分、操作类型和视觉类型等信息。数据集适用于前端开发、代码生成和界面修复等研究任务。This dataset is a multi-task dataset for front-end development, including edit, generation, and repair tasks, supporting multiple front-end frameworks (angular, react, vanilla, vue). The dataset provides rich features such as source code, screenshots, prompt text, component JSX, etc., and annotates task difficulty, clarity, score, action type, and visual type. The dataset is suitable for research tasks such as front-end development, code generation, and interface repair.

搜集汇总

数据集介绍

构建方式

DesignBench是一个面向多框架、多任务的前端工程评估基准数据集，旨在系统评测基于多模态大语言模型（MLLM）的网页代码生成、设计编辑与自动修复能力。该数据集通过收集真实且多样化的网页样本，覆盖React、Vue、Angular及原生HTML/CSS四大主流前端框架，构建了900余条高质量测试用例。针对每种任务类型，数据均包含成对的截图与源代码，并辅以结构化的JSON元数据，其中编辑与修复任务还额外记录操作类型、视觉属性、难度等级及质量评分，确保评估维度的全面性与精细度。

特点

该数据集最显著的特征在于其三重任务架构与跨框架覆盖的协同设计。在任务层面，它同时支持前端代码生成、界面设计编辑和网页显示修复三类核心场景，能够从不同角度衡量模型的实用性。在框架层面，每种任务下都提供了多个主流框架的独立配置，使开发者可以精准评估模型在不同技术栈上的迁移能力。此外，每条样本都附带了例如视觉修改类型、操作复杂度、质量标注等细粒度语义标签，为深入分析模型行为提供了可靠的数据基础。

使用方法

使用者可通过Hugging Face Datasets库便捷加载该数据集，并根据任务类型选择对应的config名称，如'generation=react'或'edit=vue'。每个配置仅包含一个test分割，设计为纯评估使用。在代码生成任务中，输入为网页截图，输出为目标框架下的HTML或组件代码；在编辑任务中，输入为原始截图与编辑指令，输出为修改后的截图与代码；在修复任务中，输入为有显示缺陷的原始页面，输出为修复后的代码与问题分析。建议研究者将其作为跨框架前端代码生成与编辑能力的标准化测试平台。

背景与挑战

背景概述

DesignBench是一个面向多框架、多任务的前端工程基准数据集，旨在评估基于多模态大语言模型的代码生成与设计编辑能力。该数据集由Jingyu Xiao、Ming Wang、Man Ho Lam等研究人员于2025年共同创建，研究团队来自香港中文大学等机构。其核心研究问题在于弥补现有UI代码生成基准在框架覆盖与任务多样性上的不足，通过囊括React、Vue、Angular及原生HTML/CSS四种主流框架，系统性地评测生成、编辑与修复三类工作流。数据集包含约900个涵盖多样主题、编辑类型与问题类别的网页样本，为MLLM在前端工程领域的应用提供了标准化评估平台，推动了该方向的可复现研究。

当前挑战

DesignBench所解决的核心领域挑战在于现有前端代码生成基准的局限性，它们通常仅针对单一框架或单一任务，难以反映真实开发中多框架并存、多步骤迭代的复杂场景。数据集构建过程中面临多重挑战：首先，需要从零构建涵盖四种框架、三种任务类型的样本，确保每类配置的难度与视觉特征分布均衡；其次，编辑与修复任务需精确标注操作类型（如添加、删除、更改）及视觉变化类别（如文字、色彩、位置、组件级调整），这要求对每对截图进行细粒度语义对齐；此外，修复任务还需识别显示层面的具体问题（如遮挡、拥挤、对比度不足），并对修复后的代码与截图进行配对验证，确保逻辑正确性与视觉一致性。

常用场景

经典使用场景

在网页前端开发与人工智能交叉的研究领域中，DesignBench 作为一个覆盖多框架、多任务的基准，其经典使用场景聚焦于评估多模态大语言模型在真实前端工程任务上的能力。该数据集提供了生成、编辑和修复三类核心任务，每个任务均包含 Angular、React、Vue 以及原生 HTML/CSS 四种技术栈的独立配置。研究者可以从截图中解析视觉布局，并输出对应的组件代码；也可以基于已有的前端设计截图和文本指令，执行精确的样式或结构修改；还能识别并修正渲染中的显示缺陷。这种设计使得 DesignBench 成为统一衡量模型从视觉理解到代码生成全链条能力的权威测试平台。

解决学术问题

DesignBench 的构建针对当前学术界在评估多模态模型前端代码生成能力时面临的碎片化与不充分问题。此前的研究大多局限于单一框架或简单任务，缺乏对模型在复杂编辑操作、跨框架迁移以及修复视觉缺陷等真实挑战下的全面评估。该基准通过引入详细的操作类型（如增删改）、视觉类型（如颜色、形状、组件级）以及难度等级，为模型性能提供了细粒度的诊断指标。这一体系促使研究者重新审视模型在视觉布局理解与对应代码生成之间的对齐程度，推动了从简单的文本到代码生成向更复杂的视觉到代码转换与修复方向的学术探索，显著提升了基准测试的生态完备性。

衍生相关工作

自 DesignBench 发布以来，围绕其构建的评估体系已衍生出一系列前沿工作。研究者们基于该基准开发了针对不同框架的专门优化策略，例如通过引入视觉注意力机制来提升模型对复杂布局中细微修改的感知能力。部分工作则利用该基准提供的细粒度标签（如操作类型和视觉类型），设计了故障诊断与分析框架，能够解释模型在特定编辑任务上失败的原因。此外，鉴于基准中包含了多种显示问题标签，一些研究致力于在模型输出后置处理中引入渲染检测模块，形成了“生成+校验+修复”的闭环流水线。这些衍生工作不仅深化了对多模态模型在 UI 领域能力边界理解，也推动了更鲁棒与易用的前端代码生成系统的演进。