LaTCoder：通过“布局即思想”将网页设计转换为代码

将网页设计转换为代码（设计到代码）在前端开发人员的用户界面（UI）开发中起着至关重要的作用，弥合了视觉设计和功能实现之间的差距。尽管最近的多模态大型语言模型（MLLMs）在设计到代码任务中显示出巨大潜力，但它们在代码生成过程中往往无法准确保留布局。为此，我们从人类认知中的思维链（CoT）推理中汲取灵感，并提出了 LaTCoder，这是一种新颖的方法，通过“布局即思想”（LaT）在代码生成过程中增强网页设计的布局保留。具体来说，我们首先引入一个简单但高效的算法将网页设计划分为图像块。接下来，我们使用基于 CoT 的方法提示 MLLMs 为每个块生成代码。最后，我们应用两种组装策略——绝对定位和基于 MLLM 的方法——然后动态选择以确定最佳输出。我们使用多个主干 MLLMs（即 DeepSeek-VL2、Gemini 和 GPT-4o）在公共基准和新引入的、更具挑战性的基准（CC-HARD，具有复杂布局）上评估 LaTCoder 的有效性。自动度量指标的实验结果显示出显著的改进。具体而言，使用 DeepSeek-VL2 时，TreeBLEU 分数增加了 66.67%，MAE 减少了 38%，与直接提示相比。此外，人类偏好评估结果表明，标注者在超过 60% 的情况下偏爱 LaTCoder 生成的网页，这提供了我们方法有效性的有力证据。