Rubrics as Visual-Repair Context for Self-Evolving UI-to-Code Generation
Tianyi Xiong, Zhengyuan Yang, Xiaofei Wang, Chung-Ching Lin, Ruichun Ma, Kevin Lin, Zhendong Wang, Linjie Li, Chenxi Liu, Ruibo Chen, Ramani Duraiswami, Heng Huang, Lijuan Wang
cs.CV
2026-08-25
UI 改一行 CSS 可能把已经对齐的区域带歪。RubSE 每轮只选一条分类型 rubric 当修复目标，10 轮后在 18 组设置里平均比朴素自进化高 1.20 分，轨迹也更不容易塌。
截图生成网页代码已经能出能跑的 HTML/CSS，测试时再根据渲染图自我修改，听起来是免费的增益。微软和马里兰这组实验发现，朴素的「看图-改代码」并不单调变好。GPT-5.2 在 Design2Code 上 15 轮全部低于第 0 轮，结束时低 2.73 分；GPT-5.4 也从第 1 轮的小幅上涨掉到低于初稿。
他们把现象叫做视觉修复耦合：改父容器、改一条 flex 规则、补一个组件，都会通过布局和样式依赖传到别的区域。自由文本批评只告诉模型哪里不对，不约束改哪里、留哪里，于是一次修复变成一次重写。
RubSE 把视觉反馈写成结构化 rubric：标题、类型、描述。类型固定五类，覆盖几何布局、疏密、字体文本、视觉样式、完整性，生成时强制类型有效，避免候选全挤在最显眼的颜色问题上。
每轮三步。Evolve 根据目标截图、上一轮代码和渲染、以及历史 rubric，生成 K 条候选，历史当作回避清单。Select 只挑一条预期收益最大、改动范围可控的。History 把选中的那条追加进去，下一轮 Evolve 不再重复。代码模型看到的修复上下文就是这一条 rubric，加上原图和上一轮状态。Evolve 与 Select 分成两次调用，避免「找问题」和「排优先级」缠在一次生成里。
六个模型、三个基准、十轮。终轮 18 组里 15 组同时超过朴素自进化，平均 +1.20 overall、+0.11 aspect。best-round 14/18 组更好，平均 +1.13。GPT-5.4 在 UI2Code-Real 上，终轮从 85.6 到 87.9；Design2Code 上朴素自进化从 86.9 掉到 85.8，RubSE 收到 87.8。GPT-5.2 在 Design2Code 的对比更硬：朴素终轮 83.9，低于直接生成的 86.4，RubSE 到 87.2。
前沿模型的 best checkpoint 更晚出现，平均第 5.7 轮对朴素的第 3.0 轮，相对直接生成的增益 2.22 对 0.77，说明历史 rubric 让模型还能继续修长尾，而不是早早改崩。开源侧 Qwen3.5-9B 和 Qwen3.6-35B-A3B 终轮、best 都更好；Qwen3-VL-32B 在 UI2Code-Real 和 Design2Code-HARD 上 overall 反而略输，论文归因为它过度盯 spacing、低估 completeness。
轨迹上，把单轮掉 8 分且 aspect 掉 0.35 定为塌缩。三个前沿模型平均塌缩率从 18.9% 降到 12.8%，GPT-5.4 的恢复率从 18.5% 升到 50.0%。把 GPT-5.4 生成的 rubric 交给 Qwen 当修复上下文，早期增益比 Qwen 自产 rubric 更稳：GPT 的 rubric 更谈布局关系，较少点名具体像素和颜色。GPT-5.4 的 API 成本大约是朴素自进化的 1.60 倍。
截图转代码这类「结构会耦合」的生成任务，测试时迭代不能靠一段自由批评。把反馈收成单条、带类型、可累积的修复指令，是低成本的控制手段，而且强模型写的 rubric 可以交给弱模型去改代码。对做 UI agent、设计稿转代码的人，这是可插在现有 VLM 上的推理期流程，不用重新训生成器。
增益是稳定轨迹，不是一次跳到可用产品。1 到 2 个 judge 分在 0-100 量表上肉眼不一定明显，但人类偏好在 60 条 UI2Code-Real 上站在 RubSE 一边。
实验限于 HTML/CSS，没有覆盖其他 UI 语言。RubSE 不保证代码可编译，修着修着可能引入语法错误导致白屏。评测是 GPT-5.2 当裁判，三点平均，和人类在细微后期差异上仍会分叉。Qwen3-VL-32B 的反例说明，rubric 质量受执行模型自己的感知偏差绑定，并不是即插即升。成本上，每轮额外两次 VLM 调用，账单比朴素循环高一截。没有和带调试环的 agent 框架做对照，所以还不知道结构化 rubric 相对「先跑通再看图」能多出多少。