LaTCoder：基于布局思维的网页设计转代码
软件工程
2025-08-06 v1
摘要
将网页设计转换为代码（design-to-code）是用户界面（UI）开发中面向前端开发人员的关键环节，桥接了视觉设计与功能实现之间的差距。虽然最近的多模态大型语言模型（MLLM）在 design-to-code 任务中显示出巨大的潜力，但往往难以准确保留布局。为此，我们借鉴人类认知中的链式思考（CoT），提出LaTCoder，一种通过布局思维（LaT）增强网页设计代码生成中布局保留性的新方法。具体而言，我们首先引入一种简单高效的算法，将网页设计划分为图像块。随后，我们使用基于CoT的方法为每个块生成代码。最后，我们应用两种装配策略——绝对定位和 MLLM 基于方法——并采用动态选择以确定最佳输出。我们使用多个主干 MLLM（即 DeepSeek-VL2、Gemini 和 GPT-4o）在公共基准测试和全新更具挑战性的基准测试（CC-HARD）中评估LaTCoder的有效性。实验结果在自动指标上显示出显著改进。具体而言，相较于直接提示，采用 DeepSeek-VL2 时，TreeBLEU 提升 66.67%，MAE 降低 38%。此外，人类偏好评估结果表明，在超过 60% 的情况下，评注者更倾向于LaTCoder 生成的网页，强有力地证明了该方法的有效性。
引用
@article{arxiv.2508.03560,
title = {LaTCoder: Converting Webpage Design to Code with Layout-as-Thought},
author = {Yi Gui and Zhen Li and Zhongyi Zhang and Guohao Wang and Tianpeng Lv and Gaoyang Jiang and Yi Liu and Dongping Chen and Yao Wan and Hongyu Zhang and Wenbin Jiang and Xuanhua Shi and Hai Jin},
journal= {arXiv preprint arXiv:2508.03560},
year = {2025}
}
备注
KDD 2025 v2