DesignBench

DesignBench是一个多框架、多任务的评估基准，用于评估多模态大语言模型（MLLMs）在自动化前端工程中的能力。它涵盖了三种广泛使用的UI框架（React、Vue和Angular）以及原生HTML/CSS，并在真实开发工作流程中评估三个基本前端任务（生成、编辑和修复）。DesignBench包含900个网页样本，涵盖11个主题、9种编辑类型和6个问题类别，能够从多个维度详细分析MLLM的性能。

DesignBench is a multi-framework, multi-task evaluation benchmark designed to assess the capabilities of Multimodal Large Language Models (MLLMs) in automated frontend engineering. It encompasses three widely-used UI frameworks (React, Vue, and Angular) as well as native HTML/CSS, and evaluates three fundamental frontend tasks (generation, editing, and repair) within the context of real-world development workflows. Comprising 900 web samples, DesignBench covers 11 themes, 9 editing types, and 6 question categories, enabling a detailed multidimensional analysis of the performance of MLLMs.

原始信息汇总

DesignBench 数据集概述

📜 数据集简介

DesignBench 是一个用于评估多模态大语言模型（MLLMs）在前端工程中自动化代码生成能力的综合基准测试。该数据集针对现有前端UI代码生成基准的不足，提供了多框架、多任务的评估环境。

🛠️ 数据集特点

框架支持

• Vanilla HTML
• React
• Vue
• Angular

任务类型

任务类型	枚举	支持模式	描述
生成	Task.GENERATION	Mode.IMAGE	从UI图像生成前端代码
编辑	Task.EDIT	Mode.IMAGE, Mode.CODE, Mode.BOTH	根据需求修改现有UI
修复	Task.REPAIR	Mode.IMAGE, Mode.CODE, Mode.BOTH, Mode.MARK	修复损坏的UI实现
编译错误修复	Task.COMPILE	Mode.CODE, Mode.BOTH	修复UI代码中的编译错误

📊 数据集规模

• 包含900个网页样本
• 覆盖11个主题
• 包含9种编辑类型
• 涵盖6种问题类别

📥 数据获取

数据集下载地址：https://drive.google.com/drive/folders/1gCeg4LqO7VsOSpB70iMnKbNR8gfzUot_

🔥 引用

@misc{xiao2025designbench, title={DesignBench: A Comprehensive Benchmark for MLLM-based Front-end Code Generation}, author={Jingyu Xiao and Ming Wang and Man Ho Lam and Yuxuan Wan and Junliang Liu and Yintong Huo and Michael R. Lyu}, year={2025}, eprint={2506.06251}, archivePrefix={arXiv}, primaryClass={cs.SE}, url={https://arxiv.org/abs/2506.06251}, }

搜集汇总

数据集介绍

构建方式

DesignBench数据集构建于多模态大语言模型（MLLMs）在前端工程自动化领域的应用背景下，旨在解决现有基准测试在框架多样性、任务覆盖和评估维度上的不足。该数据集精心收集了900个网页样本，涵盖11个主题类别，并整合了三种主流前端框架（React、Vue、Angular）及原生HTML/CSS。通过系统化的标注流程，构建了包含生成、编辑和修复三大核心任务的评估体系，每种任务均设计了多种输入模式（如图像、代码或混合输入），以模拟真实开发场景中的迭代过程。数据采集过程严格遵循标准化协议，确保样本在技术复杂度和视觉多样性上的平衡分布。

使用方法

使用DesignBench需通过官方提供的Runner模块进行任务配置，开发者可自由选择模型类型（如Gemini、GPT-4等）、目标框架和操作模式。评估流程分为代码生成与质量验证两个阶段：首先调用run()函数执行指定任务，生成代码将被自动注入预设的React/Vue/Angular工程环境；随后通过专用评估模块进行编译测试和视觉还原度检查。数据集支持多线程并行处理，可通过execution_range参数灵活控制测试范围。对于学术研究，建议按照标准流程依次进行生成、编辑、修复三大任务的完整评估，并利用内置的LLM评判功能获取自动化质量分析。所有操作均可通过Jupyter Notebook交互完成，配套的demo.ipynb提供了完整的端到端示例。

背景与挑战

背景概述

DesignBench是由WebPAI团队于2025年推出的多模态大语言模型前端代码生成基准测试平台，旨在解决当前前端工程自动化评估体系的局限性。该数据集由Jingyu Xiao等学者在arXiv预印本中首次提出，涵盖了React、Vue和Angular三大主流前端框架及原生HTML/CSS，包含900个网页样本涉及11个主题分类。其创新性在于突破了传统单任务评估模式，系统性地整合了代码生成、编辑修改和缺陷修复三大真实开发场景，通过多维度的性能分析框架为自动化前端开发研究提供了标准化评估工具。

当前挑战

在领域问题层面，DesignBench致力于攻克多模态大语言模型在跨框架代码转换时的语义保持难题，以及复杂视觉设计到精确代码映射的准确性问题。数据集构建过程中面临三大技术挑战：多框架样本的并行标注需要保持语义一致性，不同编辑类型与缺陷类别的平衡性设计，以及真实开发场景中多模态输入（图像/代码/标记）的标准化处理。此外，评估体系还需解决生成代码的功能性验证与视觉保真度之间的量化平衡问题。

常用场景

经典使用场景

DesignBench作为多模态大语言模型（MLLMs）在前端代码生成领域的基准测试工具，其经典使用场景主要集中于评估模型在React、Vue和Angular等主流框架下的代码生成能力。研究者通过该数据集可以系统性地测试模型从UI设计图到功能代码的转换效率，以及在代码编辑和错误修复等复杂任务中的表现。数据集包含的900个网页样本覆盖11个主题类别，为模型性能评估提供了丰富的素材基础。

解决学术问题

该数据集有效解决了当前前端工程自动化研究中的三个关键问题：框架兼容性不足、任务维度单一以及评估指标片面化。通过引入多框架支持（包括Vanilla HTML/CSS）和三种核心任务类型（生成、编辑、修复），DesignBench为学术界提供了首个能够全面反映现代前端开发工作流程的评估体系。其多维度的性能分析框架特别有助于揭示MLLMs在不同输入上下文、任务难度和代码质量层面的表现差异。

实际应用

在实际应用层面，DesignBench可直接服务于前端开发自动化工具的研发。企业级开发团队可依据其评估结果，选择最适合特定框架的MLLMs来优化工作流程。教育机构则能借助该数据集设计编程辅助教学系统，帮助学生理解不同前端框架的转换逻辑。更为重要的是，数据集包含的编译错误修复任务为构建智能调试工具提供了关键训练数据。

数据集最近研究

最新研究方向

随着多模态大语言模型（MLLMs）在前端工程自动化领域的快速发展，DesignBench作为一项综合性基准测试工具，正引领着该领域的最新研究方向。该数据集聚焦于主流开发框架（React、Vue、Angular）和原生HTML/CSS，通过生成、编辑和修复三大核心任务，全面评估MLLMs在实际开发流程中的表现。当前研究热点集中在框架特异性性能分析、多模态输入条件下的模型鲁棒性优化，以及代码级错误诊断与修复机制的改进。DesignBench提供的900个网页样本覆盖11个主题类别，为探究任务难度、输入上下文变化等影响因素提供了丰富的数据基础，其多维度的评估体系正在推动自动化前端开发技术向更高效、更可靠的方向演进。