Design2Code：AI如何改变前端开发

随着生成式AI技术的飞速发展，前端开发迎来了新的变革。你是否曾梦想过，只需上传一张网站设计图，AI就能直接生成代码实现？来自斯坦福大学、微软及Google的研究者推出了一项名为Design2Code的新框架，通过一系列基准测试来评估当前多模态大模型在这个任务上的表现。

项目地址：Design2Code: How Far Are We From Automating Front-End Engineering

添加图片注释，不超过 140 字（可选）

论文：https://arxiv.org/abs/2403.03163

以下为论文的主要内容：

添加图片注释，不超过 140 字（可选）

为了系统评估当前AI在设计到代码任务上的表现，研究者构建了首个包含484个真实世界网页的Design2Code基准测试。这些网页从C4数据集中筛选而来，涵盖了各种复杂性，如企业官网、个人博客、新闻页面等。具体方法为：

• 从C4数据集的验证集抓取网页链接，获得127.9万个网页。
• 通过自动过滤，移除过长的网页和布局过于简单的网页，最终得到14万个候选网页。
• 对候选网页进行手动筛选，得到484个高质量、多样化和具有挑战性的真实世界网页，构成Design2Code基准测试。

添加图片注释，不超过 140 字（可选）

基准测试不仅关注高层次的视觉相似度，还开发了低层次元素匹配度的自动评价指标。这些指标包括区块匹配度、文本匹配度、位置匹配度和颜色匹配度，能够全面评估AI生成的代码与原始网页的相似度。包括：

• 高层视觉相似度：使用CLIP模型计算网页截图的相似度。
• 低层元素匹配：包括块匹配、文本内容、位置和颜色匹配等指标。
• 块匹配：计算匹配块的总面积与所有块的总面积之比。
• 文本内容：计算匹配块中文本的重叠字符数。
• 位置：计算匹配块中心坐标的欧氏距离。
• 颜色：计算匹配块颜色之间的感知差异。

添加图片注释，不超过 140 字（可选）

添加图片注释，不超过 140 字（可选）

基准测试流程：提供网页截图给模型，模型生成HTML代码，使用自动评价指标评估生成代码实现的网页与参考网页的相似度。可进行人工评估。

研究者使用了GPT-4V和Gemini等商业模型的提示方法，包括直接提示、文本增强提示和自我修正提示。文本增强提示通过提取原始网页中的文本内容，减轻了AI对OCR的依赖。自我修正提示则让AI比较自己生成的页面与原始页面，并据此改进生成代码。

添加图片注释，不超过 140 字（可选）

此外，研究者微调了一个开源的Design2Code-18B模型，该模型在WebSight数据集上进行训练。令人惊讶的是，这个“小”开源模型在基准测试中的表现与商业模型Gemini Pro Vision相当。

添加图片注释，不超过 140 字（可选）

自动评价指标显示，GPT-4V在各维度指标上表现最佳。人工评价方面，49%的GPT-4V生成页面可以替代原始页面，而64%被认为设计更好。

添加图片注释，不超过 140 字（可选）

研究者分析了页面难度与评价指标的相关性，发现标签数量是页面难度的强有力指标。他们还绘制了不同维度指标的学习曲线，发现文本、区块匹配度和位置匹配度在训练初期就快速收敛，而颜色匹配度和视觉相似度需要更多训练才能提高。

添加图片注释，不超过 140 字（可选）

添加图片注释，不超过 140 字（可选）

定性分析显示，文本增强提示主要通过提高文本召回率来改进性能，而自我修正提示则可以找回遗漏的元素和修正布局错误。

添加图片注释，不超过 140 字（可选）

添加图片注释，不超过 140 字（可选）

Design2Code基准测试为前端工程自动化提供了一个重要的评估平台。研究者计划进一步改进提示方法，探索使用真实网页训练开源模型，并将输入扩展到设计工具导出的格式。此外，将基准测试扩展到动态网页也是一个值得探索的方向。

Design2Code技术的出现，为前端开发者提供了新的可能。尽管目前尚有改进空间，但已经证明能够生成高质量代码，并替代甚至改进原始设计。这无疑将为前端工程带来深远影响。