DesignBench

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

DesignBench is a comprehensive evaluation benchmark for assessing the capabilities of multimodal large language models (MLLMs) in automated frontend engineering. This dataset encompasses three widely used UI frameworks (React, Vue, and Angular) along with native HTML/CSS, and evaluates three core frontend tasks: generation, editing, and repair, within real-world development workflows. DesignBench includes 900 web page samples covering 11 topics, 9 editing types, and 6 problem categories, enabling detailed performance analysis of MLLMs across multiple dimensions.

原始信息汇总

DesignBench 数据集概述

📜 数据集简介

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

🛠️ 核心特点

• 多框架支持：包含 React、Vue、Angular 和原生 HTML/CSS
• 多任务评估：
  • 生成（Generation）：从UI图像生成前端代码
  • 编辑（Edit）：基于需求修改现有UI
  • 修复（Repair）：修复损坏的UI实现
  • 编译错误修复（Compile Error Repair）：修复UI代码中的编译错误
• 丰富样本：包含900个网页样本，涵盖11个主题、9种编辑类型和6种问题类别

📊 数据内容

• 任务模式：
  • IMAGE：仅提供原始图像
  • CODE：仅提供原始代码
  • BOTH：同时提供图像和代码
  • MARK：提供带有高亮目标区域的图像和代码
• 评估维度：包含任务难度、输入上下文变化和代码级分析等多维度评估

📥 获取方式

• 数据集下载地址：https://drive.google.com/drive/folders/1gCeg4LqO7VsOSpB70iMnKbNR8gfzUot_
• 代码仓库：https://github.com/WebPAI/DesignBench

📝 相关资源

• 论文：https://arxiv.org/abs/2506.06251
• 提示词文件：./code/prompt/all_prompt.py
• 标注指南：./assets/Guideline.md
• 快速开始指南：./code/demo.ipynb

🔖 引用格式

bibtex @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数据集的构建过程体现了严谨的实证研究范式。研究团队从GitHub高星项目和全球Top500网站中精选430个网页样本，覆盖React、Vue和Angular三大主流框架及原生HTML/CSS。通过Selenium自动化工具获取网页截图，并采用单文件保存技术处理代码资源。针对设计编辑任务，团队从Vercel和Vue0平台爬取1,890个项目，经五名资深开发者筛选获得359个高质量样本，并通过GPT-4o实现跨框架代码转换。修复任务则由专家团队人工标注111个存在界面缺陷的网页，并手动修复生成基准代码。整个构建过程采用多阶段验证机制，确保数据质量。

特点

该数据集具有三个显著特征：多维度评估体系覆盖生成、编辑、修复三大核心任务，每个任务细分为视觉复杂度、操作类型等11类主题；真实场景还原度高达900个样本，包含9种编辑类型和6类界面问题；框架兼容性突出，不仅支持原生开发，更深度整合React、Vue和Angular的组件化开发生态。特别值得注意的是，数据集通过CLIP语义相似度、编译成功率等多元指标，以及创新性的MLLM-as-Judge评估机制，实现了对多模态大模型性能的全方位测评。

使用方法

使用该数据集需遵循标准化评估流程：在生成任务中，将UI设计图输入模型并比对输出代码的视觉保真度与编译通过率；编辑任务需提供原始代码、设计图和自然语言指令，通过代码修改相似度(CMS)衡量定位准确性；修复任务则评估模型对标注界面问题的诊断与修正能力。研究者可通过GitHub获取预定义的评估脚本，支持CLIP、Jaccard相似度等自动指标计算，同时建议配合人工评审验证MLLM-as-Judge得分。数据集特别设计了难度分级体系，支持分层次测试模型极限性能。

背景与挑战

背景概述

DesignBench是由香港中文大学和新加坡管理大学的研究团队于2025年提出的一个综合性基准测试数据集，旨在评估多模态大语言模型（MLLMs）在前端代码生成、编辑和修复任务中的能力。该数据集涵盖了React、Vue和Angular等主流前端框架以及原生HTML/CSS，包含900个网页样本，覆盖11个主题类别、9种编辑类型和6种问题类别。DesignBench的提出填补了现有基准测试在框架集成、任务覆盖和评估维度上的不足，为自动化前端工程领域的研究提供了重要的评估工具和数据支持。

当前挑战

DesignBench面临的挑战主要包括三个方面：首先，在领域问题层面，现有MLLMs在处理框架特定语法（如React的JSX、Vue的模板语法和Angular的TypeScript架构）时表现不佳，且在组件化实现和代码复用方面存在显著缺陷；其次，在构建过程中，数据集需要平衡不同框架和任务类型的样本分布，确保评估的全面性和代表性；最后，在评估维度上，如何设计能够准确反映MLLMs在代码正确性、视觉保真度和任务适应性等多方面性能的指标体系也是一个重要挑战。

常用场景

经典使用场景

DesignBench作为多模态大语言模型（MLLM）在前端工程自动化领域的评估基准，其经典使用场景主要集中在从视觉设计到代码生成的完整工作流验证。该数据集通过整合React、Vue和Angular三大主流框架及原生HTML/CSS，系统评估模型在代码生成、编辑和修复三个核心任务中的表现。研究者在900个涵盖11类主题的网页样本上，可测试模型处理视觉复杂度、指令解析和界面问题的综合能力，特别适用于验证跨框架代码转换的准确性。

解决学术问题

该数据集有效解决了当前UI代码生成研究中的三个关键局限：首先突破了传统基准仅支持原生HTML的框架限制，首次系统评估了MLLM在现代化框架开发环境中的适用性；其次通过引入代码编辑和修复任务，填补了现有研究对迭代开发流程评估的空白；最后创新的多维评估体系（包含难度分级、上下文分析和代码度量）为识别模型在语法解析、组件复用等深层问题提供了方法论支持，推动了前端自动化领域的评估范式革新。

衍生相关工作

该数据集已催生多个前沿研究方向：基于其发现的框架语法瓶颈，后续研究如DCGen提出分治策略提升JSX生成准确率；受组件复用率低的启发，DeclarUI开发了元素分割方法优化移动端UI生成；其多维评估体系更被MRWeb等跨页面应用基准继承发展。这些衍生工作共同推动了从静态页面生成到复杂交互系统开发的学术演进。