Design2Code: Benchmarking Multimodal Code Generation for Automated Front-End Engineering
作者: Chenglei Si, Yanzhe Zhang, Ryan Li, Zhengyuan Yang, Ruibo Liu, Diyi Yang
分类: cs.CL, cs.CV, cs.CY
发布日期: 2024-03-05 (更新: 2025-02-09)
备注: NAACL 2025; The first two authors contributed equally
💡 一句话要点
提出Design2Code基准以解决前端工程中的多模态代码生成问题
🎯 匹配领域: 支柱九：具身大模型 (Embodied Foundation Models)
关键词: 多模态学习 代码生成 前端开发 生成式人工智能 自动化工程
📋 核心要点
- 现有方法在将视觉设计转换为代码实现时，往往无法准确回忆网页中的视觉元素和布局设计。
- 论文提出了Design2Code基准，通过手动策划真实网页和开发自动评估指标，系统性评估多模态LLMs的代码生成能力。
- 实验结果显示，尽管模型在某些方面表现良好，但在视觉元素回忆和布局生成上仍存在显著不足。
📝 摘要（中文）
生成式人工智能近年来取得了快速进展，在多模态理解和代码生成方面达到了前所未有的能力。这为前端开发开启了一种新范式，即多模态大型语言模型（MLLMs）可以直接将视觉设计转换为代码实现。本文构建了Design2Code，这是该任务的第一个真实世界基准。我们手动策划了484个多样化的真实网页作为测试案例，并开发了一套自动评估指标，以评估当前多模态LLMs生成的代码实现与给定参考网页的匹配程度。此外，我们还通过全面的人类评估来验证性能排名。为了严格基准测试MLLMs，我们在前沿模型如GPT-4o、GPT-4V、Gemini和Claude上测试了各种多模态提示方法。我们的细粒度指标表明，模型在从输入网页中回忆视觉元素和生成正确布局设计方面表现不佳。
🔬 方法详解
问题定义：本文旨在解决多模态大型语言模型在将视觉设计转换为代码实现时的不足，尤其是在视觉元素回忆和布局设计方面的挑战。现有方法在这些方面的表现不佳，限制了其在前端开发中的应用。
核心思路：论文的核心思路是构建一个真实世界的基准（Design2Code），通过手动策划真实网页和开发自动评估指标，系统性地评估多模态LLMs的代码生成能力，以推动前端开发的自动化。
技术框架：整体架构包括数据收集、自动评估指标开发和人类评估三个主要模块。数据收集阶段手动策划了484个真实网页，评估阶段则结合自动和人工评估方法来验证模型性能。
关键创新：最重要的技术创新点在于首次提出了Design2Code基准，系统性地评估多模态LLMs在代码生成任务中的表现，并通过细粒度指标揭示模型的具体不足之处。
关键设计：在实验中，采用了多种多模态提示方法，并对前沿模型进行了测试。关键参数设置和损失函数的选择经过精心设计，以确保评估的准确性和有效性。实验还结合了人类评估，以验证自动评估指标的可靠性。
🖼️ 关键图片
📊 实验亮点
实验结果表明，尽管多模态LLMs在某些方面表现良好，但在回忆视觉元素和生成布局设计上仍存在显著不足。具体而言，模型在这些任务上的表现普遍低于预期，显示出改进的空间。通过细粒度指标分析，能够更清晰地识别出模型的短板。
🎯 应用场景
该研究的潜在应用领域包括前端开发、网页设计自动化和软件工程等。通过提高多模态LLMs在代码生成中的表现，能够显著提升开发效率，降低人力成本，推动前端工程的自动化进程，具有重要的实际价值和未来影响。
📄 摘要（原文）
Generative AI has made rapid advancements in recent years, achieving unprecedented capabilities in multimodal understanding and code generation. This can enable a new paradigm of front-end development in which multimodal large language models (MLLMs) directly convert visual designs into code implementations. In this work, we construct Design2Code - the first real-world benchmark for this task. Specifically, we manually curate 484 diverse real-world webpages as test cases and develop a set of automatic evaluation metrics to assess how well current multimodal LLMs can generate the code implementations that directly render into the given reference webpages, given the screenshots as input. We also complement automatic metrics with comprehensive human evaluations to validate the performance ranking. To rigorously benchmark MLLMs, we test various multimodal prompting methods on frontier models such as GPT-4o, GPT-4V, Gemini, and Claude. Our fine-grained break-down metrics indicate that models mostly lag in recalling visual elements from the input webpages and generating correct layout designs.