# LaTCoder：以“布局即思维”将网页设计转换为代码 > LaTCoder 将布局作为显式的中间步骤，把网页设计图转换为 HTML/CSS。基于规则的分割器递归寻找不穿过 OCR 识别文本的纯色水平或垂直线，再将过小区域合并为网格对齐的图块。多模态大语言模型使用思维链提示为每个图块编写代码；随后以绝对定位或由模型组装各图块，并由结合 MAE 与 CLIP、无需参考答案的验证器选出较优结果。论文还提出 CC-HARD，包含从 Common Crawl 人工抽取的 128 个复杂布局网页。 - 作者：Yi Gui; Zhen Li; Zhongyi Zhang; Guohao Wang; Tianpeng Lv; Gaoyang Jiang; Yi Liu; Dongping Chen; Yao Wan; Hongyu Zhang; Wenbin Jiang; Xuanhua Shi; Hai Jin - 原标题：LaTCoder: Converting Webpage Design to Code with Layout-as-Thought - 发表载体：KDD 2025 - 发表状态：会议论文 - 出版／提交日期：2025 年 8 月 3 日 - 日期依据：ACM 提交的 Crossref 元数据将在线及印刷出版日期均列为 2025 年 8 月 3 日；该日期并非仅根据 8 月 3 日至 7 日的会议日程推定。 - arXiv 首次提交：2025 年 8 月 5 日 - arXiv：2508.03560 - 已复核的 arXiv 版本：v1 - DOI：10.1145/3711896.3737016 - 来源复核于：2026-10-20 - 收录于：2026-11-02 - 原始论文： - PDF： - 代码： - BibTeX： - 目录页面： - 记录 JSON： - 英文版：[English](https://awesomerea.org/papers/paper-latcoder/index.md) ## 研究范围与局限 方法面向根据设计图生成静态 HTML/CSS；JavaScript 行为、交互、导航和后端均不在方法范围内，也不恢复网站原始源码。评测使用 Design2Code-HARD（80 个页面）与 CC-HARD（128 个页面），以 TreeBLEU、CLIP、Visual Score 和 MAE 将生成的代码与截图同参考答案比较。报告的提升是较小绝对分数上的相对变化：在 CC-HARD 上使用 DeepSeek-VL2 时，TreeBLEU 从 0.09 升至 0.15（+66.67%），而在 Design2Code-HARD 上 CLIP 略有下降。分割器假定存在矩形纯色分隔线，并使用固定像素阈值；图块合并面积阈值在 CC-HARD 上调定。短上下文模型只使用绝对定位，图块位置由设计图固定。图块内容仍可能错位，Gemini 在组装时有时会遗漏图块。成对人工偏好评测（LaTCoder 至少获 60% 偏好）仅覆盖 CC-HARD 上的 GPT-4o，由六名标注者多数投票决定。GPT-4o、Gemini 与 DeepSeek-VL2 的结果是历史基线，并非当前排名。 ## 与本合集的关联 补充先确定布局、再按图块生成截图对应代码，并显式组装与验证的方法，与 DCGen 的分治提示及端到端网站重建基准互补。 ## 发表与复核说明 Crossref 与 arXiv 的 13 位作者顺序及 DOI 一致。2025-08-05 的 arXiv v1 为 KDD 排版论文，备注为“KDD 2025 v2”；ACM 页面拒绝自动访问，因此书目信息以 Crossref 为准。论文链接至 naturalcc 主分支中的 examples/latcoder。所审阅的快照为 main 分支 5f840620（2026-06-02）；该目录于 2025-09-25 加入。仓库根目录采用 MIT 许可；示例 README 也称 MIT，但其链接的 LICENSE 文件不在该目录中，项目主页链接格式也有误。目录包含分割器、生成与组装代理、改编的 Design2Code 基线、MAE／Visual Score／CLIP／TreeBLEU 评测、人工评测笔记本以及 data/CC-HARD.parquet。该文件与 Hugging Face 数据集 xcodemind/CC-HARD 的字节大小一致；该数据集含 128 条图像—HTML 记录，数据卡声明 CC-BY-4.0。Design2Code-HARD 与 DCGen 基线需另行获取。requirements.txt 固定 openai 1.55.3、google-generativeai 0.8.3 与 transformers 4.45.2，但 CLIP 和 DeepSeek-VL 从变动的主分支安装，并使用 vLLM 夜间构建 wheel。GPT-4o 通过 Azure OpenAI 调用，凭据为占位值；DeepSeek-VL2 通过 vLLM 提供服务。论文报告在四张 A800 80 GB GPU 上运行。 ## 一手来源 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. ## 关于此条目 已依据论文及一手来源复核。请通过原始论文或 BibTeX 引用原作者。 原创说明采用 MIT 许可；外部项目、论文与素材保留各自的权利和许可。