Design2Code：多模态代码生成基准测试，助力前端自动化工程

概述

• 研究评估人工智能模型将网页设计转换为工作代码的能力
• 在 484 个真实网页示例上测试了 GPT-4、Gemini 和 Claude
• 侧重于视觉到代码的生成能力
• 指出视觉元素召回和布局准确性方面的差距
• 创建了第一个用于设计到代码转换的综合基准

通俗易懂的解释

想象一下，你有一个人工智能助手，它可以查看一个网站的图片，然后编写所有必要的代码来重建完全相同的网站。这项研究测试了当前人工智能系统完成这项工作的能力。

研究人员收集了 484 个不同的真实网站，并将它们的截图提供给各种人工智能模型，如 GPT-4 和 Gemini。然后，他们检查了这些人工智能编写代码重建这些网站的准确性。

可以把它想象成请一位艺术家只通过查看一张照片来重新创作一幅画。人工智能需要理解它所看到的一切——颜色、布局、文本位置——然后编写精确的指令（代码）来再现所有这些。

主要发现

研究表明，目前的多模态人工智能系统仍然面临两大挑战：

• 视觉识别：人工智能有时会遗漏或忘记原始网页中的重要视觉元素
• 布局准确性：它们难以精确地再现元素的布局和定位

技术解释

本研究创建了 Design2Code，这是第一个专门用于测试网页设计到代码转换的基准。研究人员开发了自动评估指标，以衡量人工智能生成的代码与原始网页的匹配程度。

测试过程涉及针对每种人工智能模型的各种提示方法，并结合人工评估来验证自动指标的准确性。

批判性分析

有几个局限性值得考虑：

• 该基准仅关注静态网页，不包括动态或交互元素
• 484 个页面的测试集可能无法代表所有可能的网页设计模式
• 评估指标可能无法捕捉设计保真度的细微之处

未来的研究可以探索针对具有交互功能和动态内容的更复杂网站的自动化代码生成。

结论

这项研究为衡量人工智能将视觉设计转换为功能代码的能力奠定了关键基线。尽管当前模型显示出潜力，但在这些系统能够可靠地自动化前端开发任务之前，视觉理解和布局生成方面仍需要显著改进。

研究结果指出了视觉人工智能模型需要改进的具体领域，有助于集中该领域未来的研究和开发工作。