以评分细则作为视觉修复上下文的自演化 UI 转代码生成 Rubrics as Visual-Repair Context for Self-Evolving UI-to-Code Generation
把视觉反馈变成结构化、可积累的评分细则修复上下文，让 UI 转代码自演化更稳更高
前置知识
UI-to-Code 生成
给定目标界面截图，模型生成 HTML/CSS 代码，经无头浏览器渲染后应在视觉上忠实复现截图。难点在于代码质量无法从 token 序列本身判断，必须实际渲染，并在空间布局、配色、字体、组件层级、视觉密度等多个维度上与目标对齐。
这是本文的任务载体，整套自演化循环、评分细则类型学和评测协议都围绕『截图-代码-渲染』这个三角关系展开。
测试时自演化
不改动模型权重，在推理阶段通过『生成→批评→修订』循环迭代改进输出，已被通用编码智能体（Claude Code、Codex 等）广泛采用。UI 场景天然适合：草稿代码可以渲染成图像并与目标截图免费对比，反馈信号现成可得。
本文要解决的核心问题正是这种循环在 UI-to-code 中不保证单调提升，理解朴素循环的失效方式才能理解 RubSE 的设计动机。
Rubric（评分细则）
把评价标准拆成逐条结构化判据（本文中每条含标题、类型、描述三元组），在开放式任务中比整体打分更可靠，已被用于 LLM-as-a-Judge 评审系统和 RL 奖励建模（rubrics as rewards）。
本文对 rubric 做了新用法：不是用来打分或训练，而是作为跨轮次积累、直接条件化代码修订的『修复上下文』，这是与已有工作的关键分野。
VLM-as-a-Judge 评测
用前沿视觉语言模型对比两张 UI 图像并打分。本文用 GPT-5.2 作裁判，输出 0–100 总体分和五个视觉方面各 1–7 分 Likert 评分的均值，每个渲染图跑 3 次独立评审取平均以降低方差；作者验证总体分与方面分相关性达 Pearson r=0.67、Spearman ρ=0.74。
论文所有结论都建立在这个自动评测协议上，读懂指标定义才能正确解读主表和崩溃/恢复分析。
CSS 布局级联
flex/grid 尺寸计算、父子容器约束、字体度量、资源占位等机制使得一行 CSS 的改动可能经级联效应影响整页渲染：改父容器会影响所有子元素，补一个缺失组件会改变周边间距与对齐。
这是『视觉修复耦合』现象的技术根源——代码编辑与渲染后果不共延，理解它才能明白为什么局部修复会引发非局部视觉退化。
研究动机
现有 UI-to-code 改进主要依赖训练时手段——构建大规模图像-代码对指令微调数据（Web2Code、WebSight 等）、分阶段训练流水线、或用参考视觉奖励做 RLVR 训练，测试时自演化研究很少。而朴素的『生成-批评-修订』循环在 UI 场景并不稳定，根源是视觉修复耦合：改一条 CSS 规则可能经由 flex/grid 尺寸、父子容器依赖、字体度量等级联效应非局部地改变整页渲染，修好一处却破坏原本正确的区域。论文初步实验量化了该问题：GPT-5.2 与 GPT-5.4 对自身生成代码做 15 轮朴素自演化，UI2Code-Real 上 GPT-5.2 仅小幅波动（峰值 +0.94、终点 +0.34 裁判分），GPT-5.4 第 2 轮冲到 +2.15 后回落至 −0.20；Design2Code 上更糟，GPT-5.2 全部 15 轮都低于第 0 轮、终点 −2.73，GPT-5.4 首轮短暂 +0.76 后跌至 −1.82，15 轮中 10 轮低于初始生成。自由格式的视觉批评只告诉模型『哪里错了』，不约束『改动范围』，反而鼓励大范围代码重写，导致后期迭代不升反降。
本文的目标是本文的目标是把 UI-to-code 的测试时自演化变得稳定且可复利：在不训练、不改模型权重的前提下，仅靠构造更好的修复上下文 $\phi_t$，让每轮修订都朝着范围明确、局部化的视觉修复前进，同时保护已正确的区域不被扰动。作者强调有效的批评必须同时控制修复的两个侧面——改什么与保什么，因此反馈应当是结构化、局部化且跨轮次持久的。具体量化目标包括三点：在固定 10 轮预算内终轮分数稳定超过朴素自演化（终轮稳定性）、最佳轮分数更高（轨迹级上限更高）、减少剧烈回落（collapse）并加快恢复；此外还希望修复上下文具备模型无关性，即强模型产出的指导能迁移给较弱的代码改进者。最终在 6 个 VLM 与 3 个基准共 18 个设置上系统验证这些目标。
与已有工作不同的是，本文的独特切入是把 rubric 从『评分器/奖励信号』改造成『可复用的视觉修复上下文』。已有工作把 rubric 用于 LLM-as-a-Judge 的判据分解，或作为 RL 奖励在训练时使用，都是一次性静态消费；而本文的 rubric 是实例级、跨轮动态积累的：每轮发现失配、选出一个优先修复目标、记入历史充当避免清单，直接条件化下一轮代码修订。与自由文本批评相比，它用五方面类型学强制候选覆盖不同视觉维度；与硬约束（直接规定改哪行代码）相比，它只约束修复目标、把实现方式留给生成器，保留开放式修订的灵活性。作者还显式拆开了朴素自演化中混在一起的三种角色——发现错误、选定焦点、保留历史——实现为 EVOLVE/SELECT/HISTORY 三个原子操作，这种『上下文工程』视角明确区别于现有 UI-to-code 的训练时改进路线。
核心方法
RubSE 是免训练的测试时自演化框架，把每轮的修复上下文实例化为单条视觉评分细则。任务形式化为序贯修复：设 $x$ 为目标 UI 截图，$R(\cdot)$ 为无头浏览器实现的确定性渲染函数，VLM 生成器先产出初始草稿 $c_0 = G_\theta(x)$，渲染为 $r_0 = R(c_0)$；每轮 $t$ 由反馈接口构造修复上下文 $\phi_t = I(x, c_{t-1}, r_{t-1}, H_{t-1})$，其中 $H_{t-1}$ 是可选的跨轮历史，随后生成器据此修订 $c_t = G_\theta(x, c_{t-1}, r_{t-1}, \phi_t)$，目标是让 $R(c_T)$ 视觉上逼近 $x$。RubSE 中 $\phi_t = \lambda_t^\star$，即一条被选中的 rubric $\lambda = \langle \text{title}, \text{type}, \text{description} \rangle$：type 取自固定五类——LAYOUT_GEOMETRY（布局几何）、SPACING_DENSITY（间距密度）、TYPOGRAPHY_TEXT（排版文字）、STYLING_VISUAL（视觉样式）、COMPLETENESS（完整性），description 写明当前失配是什么及应如何修正。每轮流程为 EVOLVE 生成候选、SELECT 挑选一条、IMPROVE 按其改代码、HISTORY 追加记录，默认循环 10 轮。
核心创新是把视觉反馈表示为结构化修复上下文，用软控制同时替代自由批评与硬约束。每条 rubric 指明一个具体视觉失配、归入五个类型之一、给出修正方向，使修复目标显式化，同时把『怎么改代码』完全留给生成器决定。关键机制有三层：其一，每轮只允许一个优先修复目标，强制修订局部化，防止一次大改牵动全局布局；其二，类型学在候选生成时强制多样性，避免候选集塌缩到最显眼的单一缺陷（例如一个显眼的颜色错误）；其三，跨轮 append-only 历史作为显式 avoid list 输入下一轮 EVOLVE，只允许生成尚未覆盖的新问题，抑制重复修复与回归。与已有方法的本质区别在于：自由批评『只说错、不控范围』，隐含鼓励大重写；RubSE 则『说错 + 控范围 + 记历史』。工程上 EVOLVE 与 SELECT 拆成两次独立 VLM 调用，使候选发现与优先级排序解耦——消融显示把两步合并可省 14.2% 每轮成本，但终轮提升会少 0.5 分，证明分离设计有效。
方法步骤详情
第 0 步：直接生成初始草稿 $c_0 = G_\theta(x)$ 并渲染为 $r_0$。第 1 步 EVOLVE：输入目标截图、上一轮渲染 $r_{t-1}$、代码 $c_{t-1}$ 和历史 $H_{t-1}$，输出 3–8 条候选 rubric 的 JSON 数组，每条含 title/type/description，格式非法或类型不在五类之内的条目直接丢弃；当历史非空时作为显式 avoid list 传入，只允许生成未被覆盖的新问题。第 2 步 SELECT：另一次独立 VLM 调用，输入同样的状态与候选集，输出唯一 JSON 对象 $\lambda_t^\star$，选择标准为视觉上显著立即可见、可用范围明确的小改动修复、且在上一轮中尚未解决；该条即本轮修复上下文 $\phi_t = \lambda_t^\star$。第 3 步 IMPROVE：生成器以选中 rubric 为检查清单，先输出内部思考块再输出完整 HTML 文档（CSS 全部内联在 style 标签、禁用 JavaScript、禁用外部资源、固定 1920×1080 视口）。第 4 步 HISTORY：$H_t = H_{t-1} \cup \{\lambda_t^\star\}$，append-only，供下一轮避免重复。默认共 10 轮；所有模型最大生成 32,768 token，开源模型经 vLLM v0.19.0 部署在 4 张 NVIDIA H200 上。
技术新颖性
技术新颖性体现在三个层面。问题层面，论文首次命名并形式化『视觉修复耦合』：用文本差异 $\Delta(c, c')$ 与渲染差异 $\Delta(R(c), R(c'))$ 的错位刻画『编辑与后果不共延』的现象——普通文本生成中改动即结果，而视觉代码生成中编辑第 $i$ 行可经布局、flex/grid 尺寸、字体度量、资源占位的级联改变渲染的多个方面；作者还指出该现象广泛存在于结构-细节耦合的生成与智能体任务中，意义超出 UI 场景。表示层面，把 rubric 从评判/奖励工具改造为可积累的修复上下文：与 rubrics-as-rewards（训练期 RL 奖励）、rubrics-as-judge（一次性打分）不同，rubric 在此是逐轮条件化代码修订的活动记忆。机制层面，EVOLVE/SELECT/HISTORY 的角色分离经过系统消融验证：用全部候选 rubric 或随机选一条只在早期带来不稳定的小幅增益，去掉历史则增益持续但更小，合并 EVOLVE+SELECT 省 14.2% 开销却损失 0.5 分终轮提升——说明候选生成与排序解耦、跨轮记忆都是必要组件而非可合并的实现细节。
实验结果
主实验（Table 1）覆盖 6 模型 × 3 基准 × 3 方法，终轮（r=10）上 RubSE 在 15/18 设置胜过朴素自演化，平均 +1.20 总分、+0.11 方面分（前沿模型 +1.90/+0.16，9 个 Qwen 设置平均 +0.50/+0.06）；最佳轮 14/18 胜出，平均 +1.13。代表性数字：GPT-5.4 在 UI2Code-Real 终轮 87.9 对 85.6、Design2Code 87.8 对 85.8（直接生成仅 86.9，朴素法反而倒退）、D2C-Hard 80.3 对 78.0；GPT-5.2 在 UI2Code-Real 85.0 对 82.5、Design2Code 87.2 对 83.9。轨迹层面，RubSE 最佳轮出现更晚（前沿模型平均 r=5.7 对 3.0）、对直接生成累计增益 +2.22 对 +0.77，开源模型最佳轮增益 +3.60 对 +2.79，说明其支持朴素法平台期之后的长尾精修。人评（60 条 UI2Code-Real）：GPT-5.2 输出中 RubSE 胜率 65.0%（39 胜 17 负，p=0.0046），GPT-5.4 为 58.3%（35 胜 15 负，p=0.0066）。崩溃分析（Table 2，单轮总分跌 ≥8 且方面分跌 ≥0.35 记为崩溃）：前沿模型崩溃率 18.9%→12.8%、恢复率 20.7%→32.8%（GPT-5.4 恢复率 18.5%→50.0%）；Qwen 恢复率 23.5%→30.2% 但崩溃率略升至 18.1%。迁移实验（Figure 5、Table 3）：GPT-5.4 生成并选择 rubric、Qwen 只改代码，三个 Qwen 在 UI2Code-Real 全部一致提升；内容分析显示 GPT rubric 全局结构线索 89–91% 对 68–71%、行动导向措辞 77–82% 对 50–65%、数值/颜色常量仅 7% 对 35–46%。消融（Figure 4）确认选择机制与历史记忆均必要。成本（Table 8/9）：GPT-5.4 每轮 API 费 11.9¢，为朴素法 1.60 倍（输入 token 3.16 倍、输出仅 1.21 倍）；Qwen3.5-9B 推理时延仅 +2.5%。
查看结构化数据
| 任务 | 指标 | 本文 | 基线 | 提升 |
|---|---|---|---|---|
| UI2Code-Real（115 真实网页），GPT-5.4 执行器，10 轮终轮 | Overall 裁判分（0–100） | 87.9（RubSE） | 85.6（朴素自演化）；85.4（直接生成） | +2.3 分；最佳轮 88.1（r8）对 87.6（r2） |
| Design2Code（484 样本），GPT-5.4，10 轮终轮 | Overall 裁判分 | 87.8 | 85.8（朴素自演化，低于直接生成的 86.9） | +2.0 分，且反超直接生成 +0.9 |
| Design2Code-HARD（80 样本），GPT-5.4，10 轮终轮 | Overall 裁判分 | 80.3 | 78.0（朴素自演化）；79.8（直接生成） | +2.3 分；最佳轮 80.8 对 80.0 |
| UI2Code-Real，GPT-5.2，10 轮终轮 | Overall 裁判分 | 85.0 | 82.5（朴素自演化）；81.6（直接生成） | +2.5 分；最佳轮 85.1（r7）对 82.6（r6） |
| Design2Code，GPT-5.2，最佳轮 | Overall 裁判分 | 88.1（r2） | 84.6（朴素自演化最佳轮 r1） | +3.5 分（朴素法终轮 83.9 甚至低于直接生成 86.4） |
| UI2Code-Real，人类成对评估（GPT-5.2 输出，60 样本） | RubSE 胜率（双侧精确符号检验） | 65.0%（39 胜 / 4 平 / 17 负），胜+平 71.7% | 朴素自演化 | p=0.0046，统计显著；GPT-5.4 输出胜率 58.3%（p=0.0066） |
| 18 设置平均（6 模型 × 3 基准），10 轮终轮 | Overall / 方面分增益 | +1.20 分 / +0.11（前沿模型 +1.90 / +0.16；Qwen 平均 +0.50 / +0.06） | 朴素自演化 | 15/18 设置终轮胜出，14/18 设置最佳轮胜出（平均 +1.13 分） |
| 轨迹稳定性（三基准聚合，三个前沿模型平均） | 崩溃率 / 恢复率 | 12.8% / 32.8% | 18.9% / 20.7%（朴素自演化） | 崩溃 −6.1 个百分点，恢复 +12.1 个百分点（GPT-5.4 恢复率 18.5%→50.0%） |
局限与改进
作者承认三点局限：实验只覆盖三个前沿模型、三个 Qwen 开源变体和 HTML/CSS 网页生成，更广的模型族与 UI 语言（组件框架、移动端）未探索；RubSE 不显式保证代码正确性，部分修订步骤可能引入语法或运行时错误导致渲染失败，需要并入显式调试回路；VLM 裁判并非完全稳定，在后期轮次的细微视觉差异上可能与人类判断出现少量分歧（60 样本人评支持主要结论，开发更稳健的视觉评分器是未来工作）。我的补充观察：其一，评测裁判 GPT-5.2 同时也是参赛执行器之一，存在同源自评的偏好风险，尽管三次独立打分加人评缓解了这一点，循环性仍在；其二，每轮只修一个目标的约束预算降低了吞吐——10 轮只能积累约 10 个修复点，对失配众多的复杂页面不一定经济，1.60 倍 API 成本是直接代价；其三，Qwen3-VL-32B 的反例（其 spacing_density 候选占比 27.1%，远高于其他 Qwen 的 8.8–12.8%）暴露方法对 rubric 生成质量的依赖，SELECT 只能部分纠偏（降至 13.6%），无法根治；其四，固定五类类型学和 1920×1080 静态视口未覆盖交互、响应式布局与 JS 行为。
独立分析的弱点
独立分析的弱点与改进方向：（1）单目标预算拖慢收敛——复杂页面常有数十处失配，每轮修一个意味着 10 轮内只能覆盖长尾一小段，且 RubSE 最佳轮平均推迟到 r=5.7；改进方向是按类型做互不干扰的批量修复（如同时修一条 completeness 与一条 styling），或学习一个每轮修复数量的调度器。（2）裁判循环性——GPT-5.2 既当裁判又是执行器之一，可能高估同类模型输出；崩溃/恢复阈值（8 分/0.35）也偏启发式；改进方向是多裁判集成加人评校准，或训练专用视觉奖励模型。（3）rubric 质量瓶颈在生成端——Table 10 显示 SELECT 无法纠正 EVOLVE 的类型偏斜（Qwen3-VL-32B 偏爱 spacing_density、轻视 completeness，陷入改边距和行高的局部循环），弱模型自引导能力受限；改进方向是训练小型 rubric 生成器蒸馏 GPT 级指导，或检索相似页面的 rubric 模板。（4）无正确性保障——一旦改坏渲染整轮作废；改进方向是加入语法检查、渲染成功性校验与自动回滚机制。（5）静态单页范式——真实前端包含状态、交互与外部资源，rubric 修复上下文如何扩展到多视图一致性和动态行为仍是未知问题。
未来方向
作者明确提出：把显式调试回路并入自演化以保障代码可渲染性、避免语法/运行时错误；开发更稳健的视觉评分器，减少后期轮次细微差异上的裁判分歧；扩展到更多模型族与 UI 语言。基于本文成果可自然延伸的方向包括：把 rubric 修复上下文与 RLVR 结合，用跨轮 rubric 历史作为过程奖励训练策略模型，使测试时收益内化为参数能力；把『强模型出 rubric、弱模型改代码』的迁移范式产品化为异构协作管线——小模型本地执行修订、大模型按需提供指导，以可控成本复制 Figure 5 中 +GPT rubric 的收益；将框架推广到其他结构-细节耦合的生成任务，如幻灯片/海报代码化、仪表盘、游戏 UI 与科学图表；探索可自动扩展的开放类型学以及 rubric 间依赖推理（识别哪些修复会互相冲突、应当排序还是合并）；并与 Claude Code、Codex、OpenHands 等通用编码智能体集成，作为其视觉反馈的策略层——作者在附录 E 中也讨论了这一互补关系。
复现评估
复现门槛较低：方法是免训练的提示工程加循环编排，只需要 VLM API、无头浏览器渲染器和评测裁判三件套。论文附录 D（Tables 13–16）完整给出朴素自演化与 RubSE 的 rubric 生成、选择、改进三段提示词，附录 A 给出总体 0–100 与五方面 1–7 Likert 的评测 prompt 及全部评分锚点，附录 B 给出人类评估协议、裁判方差与成本细节；项目页 https://tyxiong23.github.io/rubse 提供展示，但文中未明确声明开源代码仓库，复现需自行实现约几百行的编排逻辑。数据完全可复现：Design2Code（ODC-By 许可，484+80 样本）与 UI2Code-Real（MIT 许可，115 样本）均为公开基准。算力方面：闭源路线只需 API，按 GPT-5.4 费率 RubSE 每实例 10 轮约 1.19 美元（每轮 11.9¢）；开源路线用 vLLM v0.19.0 加 4×H200 部署 Qwen 系列，单卡 batch=1 即可测吞吐。评测需 GPT-5.2 对每个渲染图独立打 3 次，注意裁判标准差为 0.09–0.82。总体难度中等，主要成本在 API 费用和多轮渲染评测的基础设施搭建，而非算法实现本身。
论文图表
同一目标页面的三联对比：真实标注、朴素自演化的修订结果、RubSE 的修订结果。朴素法试图修正底部灰色条的归属，却连带引入页面比例、条形长度等新错误；RubSE 在修正 logo 与标语左对齐的同时保持了整体布局不变。
一眼看懂论文命名的核心现象『视觉修复耦合』：局部修复如何经由布局依赖破坏原本正确的区域，以及 rubric 引导如何避免这一点。
GPT-5.2 与 GPT-5.4 在 15 轮朴素自演化中的分数变化曲线（相对第 0 轮的增量）：UI2Code-Real 上早期小幅增益很快耗尽，Design2Code 上后期轮次跌破初始生成，GPT-5.2 终点 −2.73、GPT-5.4 终点 −1.82。
提供朴素自演化失败模式的定量证据，是整篇论文问题动机的实验基础，后续所有设计都针对这条曲线的衰减段。
总体分评测的完整提示词：裁判对比参考截图与生成渲染图，从布局几何、间距、排版、样式、完整性五方面评估视觉保真度，输出 0–100 单一分数并置于 \boxed{} 中。
评测协议的核心组件，复现论文数字必需；也说明总体分为何不设中间锚点。
方面级评测提示词：对五个方面逐一独立打 1–7 Likert 分，给出每档锚点定义，输出严格 JSON（aspect/rationale/score），并要求忽略无法用 HTML/CSS 复现的外部摄影内容。
方面分是追踪局部精修趋势的关键指标，其锚点设计解释了为何方面分比总体分更适合观察逐轮变化。
同一目标页面上逐轮（0–7 轮）对比朴素自演化与 RubSE 的渲染结果及 RubSE 每轮选中的 rubric 文本：朴素法反复改动已正确的区域（第 5 轮修好开关颜色却弄坏 cookie 弹窗比例），RubSE 则按 cookie 弹窗→顶栏→图表比例→开关颜色的顺序结构化推进，第 4 轮出现耦合失误后下一轮即修复。
最直观展示 rubric 如何把一条震荡的轨迹变成可恢复、有节奏的修复序列，是方法效果的定性铁证。
朴素自演化基线的完整提示词：要求先输出思考块再输出单个完整 HTML 文档，CSS 内联、禁 JS、禁外部资源、固定 1920×1080 视口。
复现基线所必需，也定义了两方法共享的代码输出约束，保证对比公平。
EVOLVE 步骤提示词：要求输出严格 JSON 数组，每条含 title/type/description，类型限定五类之一；历史存在时只允许生成未覆盖的新问题；每条需具体、可检验、基于图像证据，产出 3–8 条并按重要性排序。
类型学约束与避免清单机制都实现在这个提示词里，是方法核心机制的落地细节。
SELECT 步骤提示词：从候选中选出单条最关键 rubric，标准为视觉显著、可用范围明确的小改动修复、且未被上一轮解决；输出必须从候选中原样复制，防止改写。
体现『约束修复范围』思想的关键组件，其选择标准直接影响每轮修订的局部性。
IMPROVE 步骤提示词：以选中 rubric 为检查清单，先思考再输出完整 HTML 文档，输出约束与朴素基线一致。
说明 RubSE 如何在保持开放式代码修订灵活性的同时注入定向指导，完成方法闭环。