SCREENCODER: ADVANCING VISUAL-TO-CODE GEN ERATION FOR FRONT-END AUTOMATION VIA MODU LAR MULTIMODAL AGENTS

ScreenCoder：通过模块化多模态代理推进前端自动化的可视化到代码生成 (2025.7)

代码仓库    论文   基准测试    huggingface在线试玩     huggingface代码    有对齐的训练后的代码（SFT+RL）【哪？】

新的基准测试，含1000个真是网页截图+HTML源码

设计的草图，允许自定义修改。

一、文章总结：

核心问题： 目前的多模态大语言模型（MLLM）在执行“图像转代码”任务时，由于采用单体式（Monolithic）架构，常会出现感知错误（漏掉或识别错组件）和规划错误（组件布局错乱、层次结构不合理）。

ScreenCoder 的解决方案： 该框架将复杂的任务分解为三个可解释的阶段，并由专门的智能体负责：

• 接地智能体 (Grounding Agent)： 利用 MLLM 识别并标记 UI 中的核心区域（如侧边栏、页眉、内容区），解决感知偏差。
• 规划智能体 (Planning Agent)： 采用确定性的算法将 2D 坐标转换为层次化的布局树（DOM-like structure），确保布局的结构完整性。
• 生成智能体 (Generation Agent)： 根据布局树的上下文合成最终的 HTML 和 CSS 代码。
• 占位符映射 (Placeholder Mapping)： 自动将原图中的图标、图片提取并填充到代码中，实现“像素级”还原。

主要贡献与成果：

• 数据引擎与数据集： ScreenCoder 作为一个自动化的数据引擎，构建了包含 10,000 个高质量图像-代码对的训练集 Screen-10K。
• 模型训练： 提出双阶段训练方案（监督微调 SFT + 基于 GRPO 的强化学习 RL），其中 RL 阶段通过最小化渲染图与原图的像素差异（MSE）来优化模型。
• 基准测试： 引入了包含 1,000 个当代复杂网站的评测基准 ScreenBench。
• 实验结果： ScreenCoder 在布局准确度、结构一致性等方面超过了 GPT-4o、Gemini 2.5 Pro 等商业模型以及现有的开源模型。

---

ScreenCoder采用 模块化代理 框架，并通过 API 将 感知和代码生成 委托给外部大型视觉语言模型，从而无需进行本地GPU密集型训练或推理。

架构图：

---

二、仓库代码：

1. 结构/目录：

- 主脚本，生成单张图的 html 代码

- 元素检测的引擎

- 生成 html 布局

- 剪裁图

- 组件映射到逻辑页面

- API 密钥文件

---

2. 安装：①克隆仓库 ②创建虚拟环境 ③安装依赖 ④配置模型和API密钥（doubao_api.txt）

git clone https://github.com/leigest519/ScreenCoder.git
cd screencoder

python3 -m venv .venv
source .venv/bin/activate

pip install -r requirements.txt

---

推荐的 其他 MLLM 网页/代码生成项目：（仓库末尾）

WebPAI  ：自动网页生成AI平台

MLLM 的论文列表：Awesome-Multimodal-LLM-for-Code ，多模态大语言模型用于多模态场景下的代码生成【网页/移动界面代码生成，重点参考★ 多篇论文】

1. 总结 - 论文列表（Awesome-Multimodal-LLM-for-Code）：

有源码：1. Design2Code【评测创新，研究范式创新，工程性 可】、6.Web2Code、28.LayoutCoder、✔ 31.ScreenCoder【多agents】、

43.WebVIA【多agents，框架级代理，2025.11】、

✔ 44.UI2CodeN【测试时 可扩展】【训×，调？】[25.11]、

✖ 45.Computer-Assisted UI Review by Proxy Generation[代理生成辅助 UI评审工具，25.11]、

48.FrontTalk【benchmark 数据集 + 多模态对话流程。即，对话式生成：前端开发任务 视为 多模态对话生成任务，基准测试平台 2025.12】【多轮交互+视觉反馈，同 UI2Code】【仓库】

✔49.Widget2Code【架构创新/问题定义创新，任务架构+基准+系统设计流程→ 即，系统+benchmark+pipeline】

📌 汇总表（项目 + 论文 + 代码）

项目名	论文链接	最新代码仓库
UI2Codeⁿ	https://arxiv.org/abs/2511.08195	https://github.com/zai-org/UI2Code_N
FronTalk	https://arxiv.org/abs/2601.04203	https://github.com/shirley-wu/frontalk
WebVIA	https://arxiv.org/abs/2511.06251	https://github.com/zheny2751-dotcom/WebVIA
EfficientUICoder	https://arxiv.org/abs/2509.12159	https://github.com/WebPAI/EfficientUICoder
ScreenCoder	https://arxiv.org/abs/2507.22827	https://github.com/leigest519/ScreenCoder

---

📌 使用建议

1. 👍 UI2Codeⁿ 和 WebVIA 提供 最完整的可运行框架（交互、验证、迭代能力）。

2. 👍 FronTalk 是 benchmark 数据集 + 多模态对话流程，可用于评估模型交互与反馈能力。

3. 🧠 EfficientUICoder、ScreenCoder 更注重 性能优化和多模态代理架构。

---

链接中的所有的 网页/移动界面代码生成 相关的论文：

28.LayoutCoder

---

2. 总结--WebPAI：可参考的 ，★ MRWeb：多页面、共享组件、web项目级 代码导出[格式：HTML/CSS/JS] → 架构创新

   

DCGen【➖有源码】：分治（Code pipeline）思想，算法CV+ML，结构化 UI 的思想【分治，与 ScreenCoder 的思想一致】【复现高，静态 html/css 代码生成】[代码生成格式？]

Interaction2Code【× 无源码】【仅适合论文引用，不建议工程】：可生成 JS 交互逻辑（events/state）→ 问题定义创新【类似与 Widget2code】【复现成本高，依赖交互数据】【动态代码生成】

MRWeb【✔有源码】： 多页面、共享组件、web项目级 代码导出[格式：HTML/CSS/JS] → 架构创新

---

个人向：【发布删】

可视化编辑器

多页面/组件复用

一键导出 Vue/React 代码

评测 基准（DesignBench）

---

参考：

【GitHub项目推荐--​ScreenCoder：视觉转代码的革命性工具】-CSDN博客

ScreenCoder实测：3步将UI设计图转为上线代码（附教程） | 高效码农   【教程+分步调试+Q&A】

上述链接的教程：

多 agent 流程：

技术拆解 & 效果：

教程 & Q&A