Large vision-language models have shown strong progress in UI-to-code generation, yet their test-time self-evolution remains unstable. We first identify a fundamental obstacle, termed visual repair coupling: a local code edit may propagate through layout, style, and component dependencies, correcting one visual mismatch while degrading regions that were previously faithful. To address this issue, we present RubSE, a Rubric-guided Self-Evolution framework that uses rubrics to represent visual feedback as a structured visual-repair context. At each refinement round, RubSE generates typed candidate rubrics, selects one prioritized repair target, and stores previously selected rubrics as history, thereby steering each revision toward a well-scoped visual repair while discouraging repeated or over-broad changes. Evaluations across six VLMs and three UI-to-code benchmarks demonstrate that RubSE substantially outperforms naïve self-evolution in final-round and best-round settings, achieving more stable refinement trajectories and a higher trajectory-level performance ceiling. Further analysis shows that RubSE mitigates trajectory collapse by improving recovery from severe visual regressions, and that stronger rubric generators can transfer effective visual-repair guidance to weaker code improvers.
Figures & tables
Figure 1: Example of visual repair coupling. Naïve self-evolution fixes the gray bar assignment, but introduces errors in page scale and bar length. In contrast, RubSE correctly left-aligns the logo and tagline with the content edge while preserving the global layout.
Figure 2: Score delta relative to the initial generation under naïve self-refinement. Both models show diminishing gains and later degradation; on Design2Code, refinement falls below the initial generation.
Figure 3: Self-evolution process of RubSE. Given the target screenshot, the previous-round code and rendering, and the accumulated rubric history, RubSE first generates a set of candidate rubrics for remaining visual mismatches. It then selects the most crucial rubric—position and scale of the cookie modal in this example—as a localized repair target, and uses it as context for VLM code revision. After each round, the selected rubric is appended to the history and reused in subsequent rounds, enabling iterative refinement while reducing repeated or uncontrolled edits.
Model
Method
UI2Code-Real
Design2Code
Design2Code-HARD
Overall ↑
Aspect ↑
Overall ↑
Aspect ↑
Overall ↑
Aspect ↑
GPT-5.4
Direct
85.4
5.32
86.9
5.63
79.8
4.72
+ Self-Evolve ( r=10 )
85.6
5.43
85.8
5.50
78.0
4.61
+ Self-Evolve (best)
r2 87.6 r2
5.61
r1 87.7 r1
5.68
r1 80.0 r1
4.77
+ RubSE ( r=10 )
87.9
5.66
87.8
5.76
80.3
4.74
+ RubSE (best)
r8 88.1 r8
5.63
r3 88.2 r3
5.79
r4 80.8 r4
4.79
Table 1: Self-evolution results across models and benchmarks. We report the overall judge score (0–100) and the mean aspect score (1–7 Likert). “Direct” denotes the initial code generation round. “Self-Evolve” denotes naïve self-evolution. Numbers are reported for the final round-10 result and the best intermediate round selected by the “Overall” score; the subscript indicates the selected round. For each model, the best result in each column is shown in bold , and the second-best is underlined .
Figure 4: Ablation study on UI2Code-Real with GPT-5.2 as the self-evolution backbone. The full RubSE achieves the overall strongest and most consistent gains across both evaluation metrics.
Figure 5: Results of applying GPT-generated rubrics for open-source VLM self-evolution. Across all three Qwen models, rubrics generated and selected by GPT-5.4 lead to stronger and more consistent gains than self-generated rubrics, particularly in early refinement rounds.
Model
Self-Evolve
RubSE (ours)
Collapse ↓
Recover ↑
Collapse ↓
Recover ↑
GPT-5.2
20.8%
26.2%
13.5%
24.2%
GPT-5.4
17.9%
18.5%
11.2%
50.0%
Claude-4.5
18.0%
17.3%
13.8%
24.1%
Qwen3-VL
11.5%
23.1%
15.3%
22.6%
Qwen3.5
17.9%
21.2%
19.4%
23.5%
Table 2: Trajectory collapse and recovery rates. Results are aggregated over all three benchmarks.
Figure 6: Density of rounds needed for recovery. Results are reported over all recovered trajectories. Dotted lines denote the average number of rounds required to recover from a collapse for each method.
Appendix figures & tables13 assets
Supplementary material from the paper’s appendix.
Appendix
Table 4: Evaluation prompt for overall score.
Table 5: Evaluation prompt for aspect-level scoring.
Model
#RubSE
#Tie
#Naïve
Win
Win+Tie
p -value
GPT-5.2
39
4
17
65.0%
71.7%
0.0046
GPT-5.4
35
10
15
58.3%
75.0%
0.0066
Appendix
Table 6: Human pairwise evaluation of the round-10 outputs produced by RubSE and naïve self-evolution on UI2Code-Real. Win rates and win-plus-tie rates are computed over all 60 comparisons for each model. The reported p -values are obtained using two-sided exact sign tests that exclude ties.
Model
Method
UI2Code-Real
Design2Code
Design2Code-HARD
GPT-5.4
Self-Evolve
+ 0.39 ± 0.13
− 1.28 ± 0.09
− 1.98 ± 0.59
RubSE
+ 2.87 ± 0.29
+ 0.98 ± 0.26
+ 0.70 ± 0.35
GPT-5.2
Self-Evolve
+ 0.65 ± 0.22
− 2.54 ± 0.22
− 0.29 ± 0.21
RubSE
+ 3.32 ± 0.28
+ 0.72 ± 0.10
+ 1.47 ± 0.51
Claude-Sonnet-4.5
Self-Evolve
+ 2.25 ± 0.18
+ 0.44 ± 0.58
+ 0.37 ± 0.34
RubSE
+ 4.66 ± 0.31
+ 0.57 ± 0.39
+ 0.76 ± 0.30
Appendix
Table 7: Round-10 improvement in overall score over the initial generation, reported as mean ± std over three additional independent GPT-5.2 judge runs. Across all models and benchmarks, the relative ordering of RubSE and naïve self-evolution in these additional runs is consistent with that reported in the main results (Table 1 ).
Method
# Input
# Output
# Total
Cost (¢)
Naïve Self-Evolve
5,912.0
3,971.0
9,883.0
7.4
RubSE EVOLVE
6,103.8
605.3
6,709.1
2.4
RubSE SELECT
6,517.1
85.4
6,602.5
1.8
RubSE IMPROVE
6,059.2
4,131.5
10,190.7
7.7
RubSE total
18,680.1
4,822.2
23,502.3
11.9
Appendix
Table 8: Average per-round token usage and API cost on 50 UI2Code-Real samples over 10 refinement rounds using GPT-5.4. “#” denotes the number of tokens, and cost is reported in cents (¢).
Method
# Input
# Output
# Total
Time (s)
Naïve Self-Evolve
9,025.4
3,827.7
12,853.1
102.7
RubSE EVOLVE
9,215.4
487.5
9,702.9
13.2
RubSE SELECT
9,510.5
81.3
9,591.8
2.4
RubSE IMPROVE
9,113.8
3,423.9
12,537.7
89.7
RubSE total
27,839.7
3,992.7
31,832.4
105.3
Appendix
Table 9: Average per-round token usage and inference time for Qwen3.5-9B. Results exclude the first two samples, which are used to warm up the vLLM inference engine. “#” denotes the number of tokens.
Model
Rubric-gen.
Spacing density
Completeness
Qwen3-VL
Self
27.1% → 13.6%
2.3% → 4.5%
Qwen3.5
Self
12.8% → 4.8%
8.1% → 10.0%
Qwen3.6
Self
8.8% → 3.6%
9.2% → 8.9%
Qwen3-VL
GPT-5.4
16.6% → 8.7%
7.7% → 8.0%
Appendix
Table 10: Rubric-type distributions produced by EVOLVE and retained by SELECT. “Model” denotes the model used for visual-code refinement, while “Rubric-gen.” denotes the model used to generate and select rubrics. Each cell reports EVOLVE → SELECT.
Round
Self-Evolve
Selected Rubric
RubSE
GT
–
0
–
1
Cookie modal size and placement ( layout_geometry ). The reference cookie dialog is larger and anchored lower/right, covering a big portion of the sidebar and chart area; the current modal is smaller and placed too high (top:260px) and not as far right. Increase modal width/height and reposition it to bottom-right (e.g., position:fixed; right:70px; bottom:40px) to match the overlay behavior and coverage seen in the target.
2
Top navigation horizontal alignment ( layout_geometry ). In the reference, the main nav (HOME, CHARTS, NEWS, #1 AWARD, INFO) sits right-of-center near the top, while the LOG-IN + search are at the far top-right; in the current render, the nav is centered and the right controls are pushed down the line. Adjust the topbar layout, e.g., three-column grid with fixed left brand, flexible middle nav aligned right, and right controls pinned to the edge, so the nav is not centered and matches the reference positioning.
3
Album cover artwork: use an image instead of gradient placeholder ( completeness ). The reference shows the actual “Paint It, Black” cover image with detailed artwork. The current render uses a green striped placeholder; replace the cover background with an image or a background-image and size it to match the square cover presentation.
4
Page width and left content scaling ( layout_geometry ). The reference has a wider overall canvas with more whitespace and a slightly more left-shifted main content block; the current layout feels more compressed due to a fixed 1200px wrap and heavy inner padding. Increase the max width or switch to a larger responsive max-width and adjust left/right padding so the main column proportions match the reference.
Appendix
Table 11: Qualitative comparison on iterative rounds generated by GPT-5.2. Naïve self-evolution exhibits unstable refinement with oscillatory edits across rounds. In round 5, although it fixes the toggle color and top-bar length, it distorts the cookie modal’s scale. This error is repeatedly modified in later rounds but remains unresolved. In contrast, RubSE follows a more structured repair trajectory guided by selected rubrics, progressively addressing the cookie modal, top bar, line-chart scale, and toggle color. Although RubSE still exhibits visual repair coupling when the chart-scale adjustment temporarily misplaces the cookie modal in round 4, it corrects the issue in the next round, leading to more controlled and recoverable gains.
Model
GT
Previous
GPT-5.4 Rubric
Self Rubric
Qwen3-VL-32B-Instruct
Main content container framing ( styling_visual ). The central results area in the reference is a large flat light-gray panel with thin borders and no card shadow, while the current attempt uses a smaller white card with rounded corners and shadow. Expand the main panel vertically and horizontally, remove the shadow/radius, and use a subtle border so the list feels like a full-width table region.
Correct count selector styling and layout ( styling_visual ). The count selectors (e.g., ’4 v’) in the main content are currently rendered as rounded rectangular buttons with borders and hover effects, which do not match the target UI. In the target, they appear as small, compact inline elements with a blue number and a downward arrow inside a minimal white circle with a thin border. Update the ’.count-selector’ CSS to remove the background, border, and padding, and instead use a small circular container with a thin border and blue text.
Qwen3.5-9B
Missing hero image in the lower-left feature area ( completeness ). The large Smart Home photo is absent in the rendered attempt, leaving a blank area with only the image alt text visible. Ensure the lower section uses a reliably loading image and places it as a large left column visual, matching the reference where the house photo fills most of the left half of the feature row.
Incorrect Category Label Styling ( styling_visual ). In the target screenshot, the category labels (e.g., ’DESIGNER PICKS’) are bold, uppercase sans-serif text with a thin, light blue underline. The current attempt applies a thick, dark teal border-bottom to these labels, which creates a heavy, incorrect visual style compared to the subtle underline in the reference.
Qwen3.6-35B-A3B
Full-width centered page shell ( layout_geometry ). The current page is constrained to a narrow 960px column and leaves a large empty gray area on the right, while the reference uses a much wider centered white canvas that spans most of the viewport. Increase the main page wrapper width to roughly 1100–1140px, center it within the light gray background, and keep the content and right appearance panel inside that single wide white area.
Tab Active State Styling ( styling_visual ). The ’Template’ tab is currently styled as the active tab with a bold font and bottom border. In the target screenshot, the ’Discussion’ tab is the active one. The active class should be moved to ’Discussion’ and ’Template’ should be inactive.
Appendix
Table 12: Selected qualitative examples comparing GPT-generated and self-generated rubrics for Qwen self-evolution. For each Qwen code improver, we show the target screenshot, the initial rendered output, and the selected rubric used for the next refinement step. Rubrics from GPT-5.4 tend to identify higher-level visual-repair targets, such as page framing, missing major visual regions, or global layout structure. In contrast, self-generated rubrics often focus on more local implementation details, such as selector styling, underline thickness, or active-tab states.
Table 13: Prompt for naïve self-evolution.
Table 14: Prompt for rubric generation in RubSE.
Table 15: Prompt for rubric selection in RubSE.
Table 16: Prompt for single-step rubric-guided code improvement in RubSE.
Large language models are increasingly used as scalable evaluators for open-ended tasks. However, many LLM judges derive query-specific criteria during scoring, leaving the evaluation requirements insufficiently specified and their coverage difficult to audit. Query-specific rubrics make these requirements explicit, but expert-written rubrics are costly to construct, while existing automatic methods typically rely on inference-time refinement or external supervision. We introduce GenRubric, a self-evolving framework that improves rubric generation from unlabeled queries without requiring additional human annotations during self-evolution. Our approach is based on rubric-induced self-consistency: independently sampled rubrics for the same query provide partial views of its latent evaluation requirements, and a comprehensive rubric should induce a response that generalizes across these complementary evaluation views. We implement this principle through reinforcement learning, combining a cross-rubric comprehensiveness signal with group-level and criterion-level rewards for rubric quality. We train GenRubric models at 4B, 8B, and 14B scales across multiple domains. Experiments on human-annotated rubric benchmarks show that self-evolution improves the agreement between evaluations induced by generated rubrics and those induced by expert-written rubrics. The improvements further generalize to held-out domains, demonstrating the potential of self-evolving rubric generation for scalable and query-specific LLM evaluation. Code and models are publicly available at https://github.com/foggpoy/GenRubric.
Yifan Chen, Haitao Li, Qingyao Ai +4
Department of Computer Science and Technology, Tsinghua University · National University of Singapore
Vision-language models (VLMs) have shown strong capabilities in generating visualization code from textual or visual specifications. However, real-world visualization authoring is inherently iterative: users frequently revise existing visualizations to repair flawed charts or adapt them to desired styles. Existing benchmarks primarily evaluate generation from scratch, leaving visualization code editing from multimodal feedback largely unexplored. We introduce VisEditBench, a benchmark of 1,395 human-annotated visualization code-editing tasks grounded in realistic visualization workflows and failure cases. VisEditBench covers two practical settings: feedback-guided repair, where models revise visualization code using buggy or marked charts together with textual feedback, and reference-guided restyling, where models modify code to match a target chart image. Evaluating 20 state-of-the-art VLMs reveals that visualization code editing remains challenging: Claude-4.6-Sonnet achieves the best overall pass rate of 74.46%, while most open-source models remain below 50%. Performance is particularly weak on visually grounded style adaptation, where Claude-4.6-Sonnet achieves only 55.71%. To establish a strong baseline, we further propose VisEditAgent, a render-grounded editing framework that iteratively generates, executes, validates, and refines candidate edits. Built on GPT-4o, VisEditAgent improves overall pass rate from 55.75% to 67.99%, demonstrating the importance of render-grounded feedback for faithful visualization editing. We will release VisEditBench at https://github.com/vis-nlp/VisEditBench.
Mizanur Rahman, Arshia Azimlu, Shadikur Rahman +4
‡York University · $Nanyang Technological University · ¶Salesforce AI Research
Code generation with large language models often relies on multi-stage human-in-the-loop refinement, which is effective but very costly - particularly in domains such as frontend web development where the solution quality depends on rendered visual output. We present a fully automated critic-in-the-loop framework in which a vision-language model serves as a visual critic that provides structured feedback on rendered webpages to guide iterative refinement of generated code. Across real-world user requests from the WebDev Arena dataset, this approach yields consistent improvements in solution quality, achieving up to 17.8% increase in performance over three refinement cycles. Next, we investigate parameter-efficient fine-tuning using LoRA to understand whether the improvements provided by the critic can be internalized by the code-generating LLM. Fine-tuning achieves 25% of the gains from the best critic-in-the-loop solution without a significant increase in token counts. Our findings indicate that automated, VLM-based critique of frontend code generation leads to significantly higher quality solutions than can be achieved through a single LLM inference pass, and highlight the importance of iterative refinement for the complex visual outputs associated with web development.
Hannah Sansford, Derek H. C. Law, Wei Liu +3
School of Mathematics, University of Bristol, UK · Amazon AGI