💻 computer science

VisRefiner: Learning from Visual Differences for Screenshot-to-Code Generation

该论文提出了 VisRefiner，这是一个通过使模型能够通过差异对齐监督以及用于自我改进的强化学习阶段，从渲染输出与目标设计之间的视觉差异中进行学习，从而增强截图到代码生成能力的训练框架。

原作者： Jie Deng, Kaichun Yao, Libo Zhang

发布于 2026-02-06

📖 1 分钟阅读☕ 轻松阅读

原作者： Jie Deng, Kaichun Yao, Libo Zhang

原始论文采用 CC BY 4.0 许可（http://creativecommons.org/licenses/by/4.0/）。 ✨ 这是对下方论文的AI生成解释。它不是由作者撰写或认可的。如需技术准确性，请参阅原始论文。阅读完整免责声明

以下是关于 VisRefiner 论文的解释，通过简单的概念和富有创意的类比进行了拆解。

核心问题： “盲目的建筑师”

想象一下，你是一名建筑师，正试图根据一张梦想之家的照片来建造一座房子。

旧方式（当前的 AI）： 你画出蓝图，交给建筑工，然后建筑工开始盖房子。你在房子完工之前从未见过它。如果建筑工把窗户尺寸弄错了，你直到最后才知道。如今大多数 AI 模型就是这样工作的：它们看一眼截图并猜测代码，但在训练过程中，它们从未“看到”过自己猜测的结果。
人类的方式： 一名人类开发者画出一张草图，搭建一个粗略的版本，观察它，将其与照片进行对比，发现错误（例如：“门太蓝了”），然后修改蓝图。他们通过观察自己制作的东西与目标之间的差异来进行学习。

VisRefiner 是一种全新的训练方法，它教会 AI 像人类开发者一样行动：通过观察自己的错误来进行学习。

VisRefiner 如何工作：两步舞曲

该论文提出了一个包含两个主要阶段的框架，来教会 AI 这项技能。

第一阶段：“找不同”游戏（差异对齐监督）

在 AI 能够修复自己的工作之前，它需要先学会什么是“错误”。

类比： 想象一位老师拿出一幅完美的画作，然后故意把它搞砸（把天空变成绿色、把窗户向左移动或改变字体大小）。然后老师向学生展示：“这是损坏的版本，以及修复它的代码。”
AI 在做什么： 研究人员创建了一个庞大的数据集，称为 VisDiffUI。他们提取了完美的 UI 设计，并故意引入了“故障”（如改变颜色或使按钮对齐出错）。然后，他们将这些“损坏”的图像与修复它们所需的特定代码更改配对。
结果： AI 学到了直接的联系：“噢，如果按钮离右边太远了，我需要修改这一行特定的代码。” 它不再是瞎猜，而是开始理解因果关系。

第二阶段：“自我修正”循环（强化学习）

现在既然 AI 已经知道错误长什么样了，它就开始练习如何独立修复它们。

类比： 把它想象成一款视频游戏，当你玩关卡时，游戏不仅仅是显示“游戏结束”，而是根据你离目标有多近来给你评分。如果你让角色向宝藏靠近了 1 英寸，你会得到微小的奖励。
AI 在做什么：
1. AI 生成代码并渲染出一张图片。
2. 它将生成的图片与目标截图进行对比。
3. 它根据视觉差异改善了多少来计算一个“分数”（奖励）。
4. 如果新的代码看起来更好了，AI 会得到一个“击掌”（正向奖励）。如果看起来变差了，它会得到一个“倒赞”。
结果： 通过数千次的尝试，AI 学会了自动优化自己的代码，不断地自问：“我怎样才能让它看起来更像原图？”

为什么这很重要：“神奇”的结果

论文将这种新方法与顶尖 AI 模型（如 GPT-4o 和 Claude）进行了对比测试，并发现了一些令人惊讶的事实：

更好的初次尝试： 甚至在 AI 尝试“修复”其工作之前，仅仅通过这种“找不同”的方法进行训练，就让它的初始代码变得更好了。这就像是一个学生因为把答案解析背得太熟，以至于第一次尝试就能拿到正确答案。
稳定的自我提升： 大多数 AI 模型在被要求“修复”自己的工作时会感到困惑；有时它们会让情况变得更糟。然而，VisRefiner 学会了持续改进。它不只是在猜测，而是积极地寻找错误并进行纠正。
类人推理： 论文认为，这使 AI 更接近人类的思考方式。AI 不再只是预测句子中的下一个词，它现在正在针对视觉结果和实现变更进行推理。

总结

VisRefiner 是一种训练系统，它教会 AI 停止做一个“盲目猜测者”，转而成为一名“批判性的编辑”。通过向 AI 展示糟糕设计与优秀设计之间的视觉差异，并奖励它修复这些差异的行为，AI 学习生成出的代码能与它所接收到的截图完全一致。

这就像是一个只会背诵地图的学生，与一个通过观察地形并不断修正路径来学习导航的学生之间的区别。

技术摘要：VisRefiner

1. 问题陈述

**截图到代码生成（Screenshot-to-Code Generation）**的任务涉及将静态用户界面（UI）截图转换为可执行的前端代码（如 HTML/CSS），以忠实地还原目标布局和样式。尽管近期的多模态大语言模型（MLLMs）已在这一领域展示了端到端的处理能力，但它们通常依赖于从设计到代码的单向监督映射。这些现有方法的一个关键局限在于，模型在训练过程中无法观察其生成代码的视觉结果。因此，它们缺乏学习特定视觉差异如何与必要的代码变更相关联的能力。

相比之下，人类开发者采用的是一种迭代的**“渲染—比较—修正”（render–compare–revise）**过程：他们渲染实现结果，将其与设计进行对比，识别视觉不一致之处，并进而优化底层代码。目前的基于 MLLM 的系统并未内化这一机制，仅将视觉差异视为外部诊断信号，而非内部学习线索。

2. 方法论：VisRefiner

为了填补这一空白，作者提出了 VisRefiner，这是一个旨在使 MLLM 能够直接从渲染预测值与参考设计之间的视觉差异中学习的训练框架。该框架通过两个截然不同的阶段，将范式从前馈预测转向差异驱动的学习：

A. 差异对齐监督（第一阶段）

此阶段在观察到的视觉差异与解决这些差异所需的特定代码更新之间建立了显式的对应关系。

数据构建 (VisDiffUI)： 作者构建了一个名为 VisDiffUI 的数据集，其中包含视觉偏差及其对应代码编辑的配对示例。该数据集源自公开资源（Vision2UI, WebSight），并通过两种方法进行增强：
1. 基于规则的扰动： 利用一套规则库修改 HTML/CSS 标记，以模拟六个维度的局部 UI 不一致性：颜色、布局、对齐、组件、图像和文本。
  1. 模型预测的缺陷： 将早期阶段模型的缺陷输出与基准真相（ground truth）相结合，以捕捉难以通过规则合成的真实人工痕迹（例如：错位的容器、冗余的包装器）。
训练目标： 模型通过给定目标截图 ( $I_{gt}$ )、当前代码 ( $C_t$ ) 以及当前代码的渲染图像 ( $I_t$ ) 来预测优化后的代码 ( $C_{t+1}$ )。其目标是最小化负对数似然：
$L_{SFT} = -\log P_\theta(C_{t+1} | I_t, I_{gt}, C_t)$
这使模型能够理解实现层面的变更如何影响视觉外观。

B. 基于自我修正的强化学习（第二阶段）

在监督学习的基础上，此阶段通过使用群体相对策略优化（GRPO），使模型能够利用视觉反馈来优化其输出。

量化改进： 定义了一个基于 CLIP 感知相似度的相对改进得分（Relative Improvement Score, RIS）。它衡量了当前渲染结果与目标之间视觉差异减少的相对进度，并进行了归一化处理以确保尺度不变性。
奖励设计： 一个复合奖励函数引导优化过程：
1. 格式奖励 ( $r_{format}$ ): 惩罚语法无效的代码。
2. 修正奖励 ( $r_{improve}$ ): 如果新的渲染结果提升了视觉相似度，则赋予正向信号。
3. 质量奖励 ( $r_{quality}$ ): 使用连续的 RIS 值来衡量改进程度。
优化： 模型生成候选代码变体，对其进行渲染，并根据奖励的群体相对优势来更新其策略，从而鼓励迭代推理并内化修正行为。

3. 核心贡献

VisRefiner 框架： 一种新型训练范式，将视觉反馈直接整合进训练过程，使 MLLM 能够学习代码修改如何影响视觉结果。
VisDiffUI 数据集： 一个专门的数据集和数据流水线，将视觉差异与相应的代码编辑对齐，为研究外观到实现之间的对应关系提供了资源。
实证验证： 大量的实验证明，VisRefiner 在多个基准测试中，在视觉保真度、布局对齐和自我提升能力方面实现了持续的改进。

4. 实验结果

作者在 Design2Code、Design2Code-HARD 以及留出的 VisDiffUI-Test 基准测试上，将 VisRefiner（特别是其 7B 参数版本）与商业模型（GPT-4o, Claude 3.5 Sonnet）及开源基线模型（Qwen2.5-VL, MiMo-VL）进行了对比评估。

单步生成： VisRefiner-7B 取得了强大的单步准确率，在具有挑战性的 Design2Code-HARD 基准测试中优于 72B 参数的 Qwen2.5-VL-72B（平均分 85.6 对 80.8），并在结构对齐方面超越了 GPT-4o（块匹配度：78.1 对 56.6）。
自我修正稳定性： 不同于基线模型在修正过程中往往会出现结果不一致（有时甚至导致性能下降）的情况，VisRefiner 在所有数据集和修正模式下都表现出了持续的增益。
消融研究：
- SFT 作为驱动力： 在差异对齐对上的有监督微调（SFT）被确定为提升结构和视觉质量（如位置对齐和颜色一致性）的主要因素。
- GRPO 作为修正器： GRPO 提供了进一步的增量改进，特别是在细粒度指标方面，但它依赖于由 SFT 构建的差异感知基础。
人类评估： 人类标注者发现 VisRefiner-7B 表现出“深思熟虑且主动的修正”，与基线模型相比，显著减少了“无变化”（即未做任何改动）的情况。虽然这也导致了略高的“失败”率（表明进行了积极但有时不成功的编辑），但它证实了模型进行非平凡（non-trivial）纠正而非保守不作为的能力。
多轮分析： 虽然在多轮修正过程中性能会有波动，但经过过滤的结果（选择各轮中的最佳输出）持续提升，这表明模型正在探索多样化的纠正路径。

5. 重要性与主张

本文主张，VisRefiner 代表了截图到代码生成任务从纯粹的前馈预测任务向差异驱动学习范式的转变。通过从视觉差异中学习，该框架赋予了模型更接近人类的推理过程，即模型能够理解代码编辑与视觉结果之间的因果联系。

作者强调，这种方法不仅提高了生成质量，还培养了一种在标准 MLLM 中（尤其是在较小规模下）经常缺失的自我修正能力。这项工作表明，将视觉差异作为直接的学习信号，而非事后反馈，是推进结构化代码合成中多模态推理能力的關鍵一步。