Rubrics as Visual-Repair Context for Self-Evolving UI-to-Code Generation

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.

한 줄 요약

RubSE는 UI-to-code 생성 과정에서 발생하는 시각적 복구 결합 문제를 해결하기 위해 구조화된 rubric 기반 자기진화 프레임워크를 제시한다.

핵심 기여도

**visual repair coupling** 현상을 정의: 로컬 코드 수정이 레이아웃, 스타일, 컴포넌트 의존성을 통해 비로컬 시각적 변화를 유발함.
**RubSE** 프레임워크 제안: `Evolve`, `Select`, `History` 세 단계를 통해 구조화된 rubric을 생성하고 반복 수정을 안정화함.
**6개 VLM, 3개 벤치마크**에서 평가: RubSE는 최종 라운드와 최고 라운드에서 기존 자기진화 대비 +1.20 포인트, +0.11 aspect-mean 점수 개선.
**GPT-5.4 rubric**이 Qwen 자기진화 성능을 +1.13 포인트 향상: rubric 품질이 코드 개선 능력에 이전 가능함.

핵심 아이디어

UI-to-code 생성 과정에서 코드 수정이 레이아웃, 스타일, 컴포넌트 간 의존성을 통해 비로컬 시각적 변화를 유발하는 **visual repair coupling** 문제는 기존의 자유형 자기진화 방식에서 반복 수정이 불안정하게 작동하는 주요 원인이다. RubSE는 이 문제를 해결하기 위해 **rubric**이라는 구조화된 시각 피드백을 도입한다. rubric은 특정 시각적 오류를 설명하고, 수정 방향을 명시하며, 수정 대상을 한정적으로 지정함으로써 코드 수정의 범위를 제어한다. RubSE는 `Evolve` 단계에서 rubric 후보를 생성하고, `Select` 단계에서 가장 우선순위가 높은 rubric을 선택하며, `History` 단계에서 이전 rubric을 저장하여 반복 수정을 방지한다. 이는 기존 방식에서 혼합되어 있던 **오류 탐지**, **수정 대상 선택**, **수정 맥락 유지** 세 가지 역할을 분리하여 반복 수정을 더 안정적이고 구조화되게 만든다.

기술적 접근법

RubSE는 다음과 같은 세 단계로 구성된 알고리즘을 사용한다:

**Evolve**: 현재 렌더링 결과에 대한 rubric 후보를 생성.
**Select**: rubric 중 가장 우선순위가 높은 하나를 선택.
**History**: 이전에 선택된 rubric을 저장하여 반복 수정을 방지.

RubSE는 **GPT-5.2**를 기반으로 평가되며, **UI2Code-Real** 데이터셋을 사용한 실험에서 rubric 기반 수정이 **무작위 rubric 선택**보다 안정적인 성능 향상을 보임. rubric history가 제거되면 개선 폭이 줄어들며, 이는 이전 rubric이 반복 수정을 억제하고 다양한 시각적 차원을 탐색하도록 유도함을 나타냄.

주요 결과

**6개 VLM, 3개 벤치마크**에서 RubSE는 18개 최종 라운드 중 15개에서 기존 자기진화 대비 **+1.20 포인트** 개선.
**aspect-mean 점수**는 평균 **+0.11** 개선.
**14/18 최고 라운드**에서 RubSE는 **+1.13 포인트**의 성능 향상을 기록.
**GPT-5.4 rubric**이 Qwen 자기진화 성능을 **+1.13 포인트** 향상: rubric 품질이 코드 개선 능력에 이전 가능함.

의의 및 한계

RubSE는 UI-to-code 생성 과정에서 발생하는 **visual repair coupling** 문제를 해결함으로써 반복 수정의 안정성과 성능을 동시에 향상시킨다. 구조화된 rubric을 사용함으로써 코드 수정의 범위를 제어하고, 반복 수정을 방지함으로써 **시각적 복구의 일관성**을 유지한다. 또한, rubric 생성자와 코드 개선자 간의 **역할 분리**를 통해 더 유연하고 신뢰성 있는 자기진화를 가능하게 한다. 그러나 RubSE는 rubric 생성자와 코드 개선자의 **상호작용 방식**에 따라 성능이 달라질 수 있으며, rubric 생성 과정에서 발생할 수 있는 **오류 전파** 문제는 추가 연구가 필요하다.

실용적 활용

RubSE는 웹 UI 개발, 디자인 프로토타이핑, 개발자 워크플로우 등에서 시각적 피드백을 기반으로 코드를 반복적으로 수정하는 상황에 적용 가능하다. 특히, **GPT-5.4 rubric**이 **Qwen**과 같은 약한 코드 개선자에게도 효과적인 지침을 제공함으로써, 다양한 모델 간의 **협력적 개선**이 가능하다.