# 分而治之：从截图生成界面代码

> 沿视觉分隔线递归切分网页截图，由多模态模型为每个叶子片段生成 HTML/CSS，再将子片段代码逐级向上组装为完整页面；评估涵盖 GPT-4o、Gemini 与 Claude 系列模型以及一项小规模开发者研究。

- 作者：Yuxuan Wan; Chaozheng Wang; Yi Dong; Wenxuan Wang; Shuqing Li; Yintong Huo; Michael Lyu
- 原标题：Divide-and-Conquer: Generating UI Code from Screenshots
- 发表载体：Proceedings of the ACM on Software Engineering (FSE 2025)
- 发表状态：期刊论文
- 出版／提交日期：2025 年 6 月 19 日
- 日期依据：ACM 向 Crossref 提交的元数据将在线及印刷版出版日期列为 2025 年 6 月 19 日；论文正文将期次标为 2025 年 7 月。
- arXiv 首次提交：2024 年 6 月 24 日
- arXiv：2406.16386
- 已复核的 arXiv 版本：v3
- DOI：10.1145/3729364
- 来源复核于：2026-10-17
- 收录于：2026-10-17
- 原始论文：<https://doi.org/10.1145/3729364>
- PDF：<https://arxiv.org/pdf/2406.16386v3>
- 代码：<https://github.com/WebPAI/DCGen>
- BibTeX：<https://awesomerea.org/papers/citations/paper-dcgen.bib>
- 目录页面：<https://awesomerea.org/zh/papers/paper-dcgen/>
- 记录 JSON：<https://awesomerea.org/papers/paper-dcgen/record.json>
- 英文版：[English](https://awesomerea.org/papers/paper-dcgen/index.md)

## 研究范围与局限

该方法以 HTML/CSS 重建静态视觉布局，不重建交互、JavaScript 行为或后端逻辑。测试页面是将图片替换为占位图的自包含快照；主要评测从 348 个热门网站中抽取 111 个，另加 80 个更复杂的 GitHub Pages 页面，可用性研究仅有四名参与者。分割依赖人工设定的阈值，组装阶段仍可能错排元素。

## 与本合集的关联

提供按区域分解、从截图重建网站布局的方法，与以基准评测为主的网站论文互为补充。

## 发表与复核说明

这是 PACMSE 第 2 卷 FSE 专期的期刊论文，页码为 2099–2122（文章编号 FSE094）。正式标题取代了 arXiv 标题“Automatically Generating UI Code from Screenshot: A Divide-and-Conquer-Based Approach”。作者姓名以论文正文为准，正文与 Crossref 均写作“Michael Lyu”，arXiv 记录则为“Michael R. Lyu”。核查期间无法读取 ACM 数字图书馆版本；审阅文本为 24 页、ACM 排版的 arXiv v3。论文所链接的仓库在固定提交中没有许可证文件；完整数据集另存于 Hugging Face，未附数据集说明卡。

## 一手来源

1. <https://doi.org/10.1145/3729364>
2. <https://api.crossref.org/works/10.1145/3729364>
3. <https://arxiv.org/abs/2406.16386>
4. <https://github.com/WebPAI/DCGen/blob/22af69b238fb5aa967cf3f05985a25b52481105f/README.md>
5. <https://huggingface.co/datasets/iforgott/DCGen/tree/70ee45d6183f4b93773f2235f396f3a59d775ea6>

## 关于此条目

已依据论文及一手来源复核。请通过原始论文或 BibTeX 引用原作者。
原创说明采用 MIT 许可；外部项目、论文与素材保留各自的权利和许可。