# ScreenCoder：以模块化多模态智能体推进面向前端自动化的视觉到代码生成

> 将截图到代码的生成分配给定位、规划和生成三个智能体，分别标注界面区域、构建层级布局树并编写 HTML/CSS。该流程还生成了用于监督微调和强化学习的 Screen-10K 训练数据；论文另提出包含 1,000 个网页的 ScreenBench。

- 作者：Yilei Jiang; Yaozhi Zheng; Yuxuan Wan; Jiaming Han; Qunzhong Wang; Michael R. Lyu; Xiangyu Yue
- 原标题：ScreenCoder: Advancing Visual-to-Code Generation for Front-End Automation via Modular Multimodal Agents
- 发表载体：EMNLP 2026
- 发表状态：会议已接收
- 出版／提交日期：2026 年（具体日期未核实）
- 日期依据：EMNLP 2026 官方详细日程列出了该论文的主会海报报告，可确认已被接收；不推定论文集的出版日期。
- arXiv 首次提交：2025 年 7 月 30 日
- arXiv：2507.22827
- 已复核的 arXiv 版本：v2
- 来源复核于：2026-10-17
- 收录于：2026-10-17
- 原始论文：<https://arxiv.org/abs/2507.22827>
- PDF：<https://arxiv.org/pdf/2507.22827v2>
- 代码：<https://github.com/leigest519/ScreenCoder>
- 项目：<https://jimmyzhengyz.github.io/ScreenCoder-Project-Page/>
- BibTeX：<https://awesomerea.org/papers/citations/paper-screencoder.bib>
- 目录页面：<https://awesomerea.org/zh/papers/paper-screencoder/>
- 记录 JSON：<https://awesomerea.org/papers/paper-screencoder/record.json>
- 英文版：[English](https://awesomerea.org/papers/paper-screencoder/index.md)

## 研究范围与局限

输出为静态 HTML/CSS 布局，不重建交互、JavaScript 行为或后端逻辑。结果是 ScreenBench 与 Design2Code 上的视觉相似度分数（CLIP 及经 OCR 匹配的文本块），不能证明代码层面或功能上的等价。公开流程需调用托管模型 API，默认使用豆包（Doubao）。审阅文本为 arXiv v2，EMNLP 接收版本可能有所不同。

## 与本合集的关联

代表分阶段、基于智能体的网站截图到代码重建方法，将视觉定位和布局规划与代码生成分开处理。

## 发表与复核说明

EMNLP 2026 官方详细日程将论文 7281-MAIN 列为 2026-10-26 的海报报告；本条记录接收状态，不视为论文集已出版。arXiv v2 备注“ScreenCoder-v2”是版本标签而非会议名称；此前提交 ICLR 2026 的版本已撤回。摘要所链接的仓库在固定提交中采用 Apache-2.0 许可，并内含带有各自许可证文件的 UIED、LLaMA-Factory 与 VLM-R1 代码。ScreenBench 以 Apache-2.0 许可发布于 Hugging Face。

## 一手来源

1. <https://arxiv.org/abs/2507.22827>
2. <https://2026.emnlp.org/program/>
3. <https://docs.google.com/spreadsheets/d/1aXGTy_7Xeh-OXIs3iJSbDpUsZ6YhbfA76b17kBZH0Yk/edit?gid=943432490#gid=943432490>
4. <https://openreview.net/forum?id=29VraifZkB>
5. <https://github.com/leigest519/ScreenCoder/blob/22816fdfb4ee5982973f9a09d67498a64823e65d/README.md>
6. <https://github.com/leigest519/ScreenCoder/blob/22816fdfb4ee5982973f9a09d67498a64823e65d/LICENSE>
7. <https://jimmyzhengyz.github.io/ScreenCoder-Project-Page/>
8. <https://huggingface.co/datasets/Leigest/ScreenCoder/blob/b0e49d2a5d937e93f712d4c281d4036ec2652a30/README.md>

## 关于此条目

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