2025 · 期刊论文

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

Divide-and-Conquer: Generating UI Code from Screenshots

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

研究范围与局限

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

与本合集的关联

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

发表与复核详情

发表载体
Proceedings of the ACM on Software Engineering
发表状态
期刊论文
出版/提交日期
2025 年 6 月 19 日
日期依据
ACM 向 Crossref 提交的元数据将在线及印刷版出版日期列为 2025 年 6 月 19 日;论文正文将期次标为 2025 年 7 月。
arXiv 首次提交
2024 年 6 月 24 日
arXiv
2406.16386
已复核的 arXiv 版本
v3
DOI
10.1145/3729364

这是 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,未附数据集说明卡。

来源复核于

本合集仅做来源复核,未重新运行论文实验。请通过原始论文或 BibTeX 引用原作者。

一手来源

  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