250615_DesignBench: A Comprehensive Benchmark for MLLM-based Front-end Code Generation

论文信息

  • 标题: DesignBench: A Comprehensive Benchmark for MLLM-based Front-end Code Generation

  • arXiv ID: 2506.06251

  • 作者: Authors:Jingyu Xiao, Ming Wang, Man Ho Lam, Yuxuan Wan, Junliang Liu, Yintong Huo, Michael R. Lyu

  • 发表日期: 2025-06-06T17:21:21+00:00

  • 论文链接: 2506.06251

  • 总结生成时间: 2025-06-15 19:24:22

一句话概要
DesignBench 通过构建多框架、多任务的前端代码生成基准测试，系统评估了多模态大语言模型在自动化前端工程中的能力与局限。

主体
当前多模态大语言模型（MLLMs）在自动化前端工程中展现出生成 UI 代码的潜力，但现有评测基准存在显著缺陷：仅关注基础代码生成任务，忽略了主流开发框架（如 React、Vue）的适配性，且未覆盖实际开发中常见的编辑、修复等迭代流程，评测维度也过于单一。这些局限使得现有基准难以真实反映 MLLMs 在复杂场景下的实用价值。

为解决这一问题，作者提出了 DesignBench——一个涵盖三大主流框架（React、Vue、Angular）和原生 HTML/CSS 的综合性评测体系。该基准不仅包含代码生成任务，还模拟真实开发流程设计了代码编辑与缺陷修复任务，并通过 900 个网页样本构建了多维评估场景（覆盖 11 类主题、9 种编辑类型和 6 类问题）。这种设计首次实现了对 MLLMs 在框架兼容性、任务适应性及上下文敏感性等方面的系统性分析。

实验结果表明，不同 MLLMs 在框架支持度上存在显著差异，例如对 React 的代码生成准确率普遍高于 Angular；而在任务维度上，模型修复复杂 CSS 布局问题的能力明显弱于基础代码生成。这些发现揭示了当前技术的瓶颈，例如模型对框架语法的理解深度不足，以及跨任务泛化能力的局限性。DesignBench 的细粒度评估为优化模型架构和训练策略提供了明确方向。

最后一句
该研究为自动化前端开发工具的演进建立了可扩展的评估范式，其多任务协同评测框架或可启发其他领域代码生成技术的基准设计。