Design2Code：提供设计图，让多模态LLM自动生成前端代码

划重点:

⭐️ 生成 AI 在近年来取得了快速进展，具有前所未有的多模态理解和代码生成能力。

⭐️ 研究对可视化设计转换为代码实现的任务进行了系统研究，提出了一套自动评估指标。

⭐️ GPT-4V 在任务中表现出色，生成的网页在视觉外观和内容方面有望取代原始参考网页。

近年来，生成 AI 在多模态理解和代码生成方面取得了显著进展，为前端开发带来了全新的范式。研究人员开展了对视觉设计转换为代码实现任务（称为 Design2Code）的系统研究。

Design2Code是一个微软的开源项目，目的是实现提供设计图，转换为前端代码，适用于前端开发者和设计师。

研究人员手动筛选了484个真实网页作为测试用例，并开发了一套自动评估指标，以评估当前多模态 LLMs 能够多大程度上生成直接渲染为给定参考网页的代码实现，以屏幕截图作为输入。

研究人员开发了一套多模态提示方法，并展示了它们在 GPT-4V 和 Gemini Vision Pro 上的有效性。他们还对开源的 Design2Code-18B 模型进行了微调，成功达到了 Gemini Pro Vision 的性能水平。

测试集示例

基准测试中的一些示例（用于评估目的;下面两行）与 Huggingface 创建的合成数据(用于训练目的;第一行)进行比较。基准测试包含具有不同复杂程度的各种现实世界网页。

人类评估和自动指标显示，GPT-4V 在这一任务中表现出色，标注者认为 GPT-4V 生成的网页在视觉外观和内容方面有望在49% 的情况下取代原始参考网页。令人惊讶的是，在64% 的情况下，标注者认为 GPT-4V 生成的网页甚至比原始参考网页更好。

基准性能:自动指标

对于自动评估，考虑高级视觉相似性（CLIP）和低级元素匹配(块匹配、文本、位置、颜色)。

模型对比

一些案例研究示例来比较不同的提示方法和不同的模型。

详细的细分指标表明，开源模型在从输入网页中召回视觉元素和生成正确布局设计方面大多落后，而在文本内容和着色方面则可以通过适当的微调得到显著改进。

项目入口：https://top.aibase.com/tool/design2code