UI2Code^N: UI-to-Code Generation as Interactive Visual Optimization

UI-to-code aims to translate UI screenshots into executable front-end code. Despite progress with vision-language models (VLMs), most existing methods formulate UI-to-code as a single-pass generation, which mismatches real-world UI development that is inherently iterative and feedback-driven. We reformulate UI-to-code as an interactive visual optimization problem, where code generation is embedded in a closed-loop process of execution, visual inspection, and iterative refinement driven by rendered visual feedback. To address the non-differentiability of visual objectives and the noise of absolute visual evaluators, we propose Relative Visual Policy Optimization (RVPO), a preference-based reinforcement learning method that optimizes relative visual rankings among rendered candidates under execution feedback. We instantiate this paradigm in UI2Code$^{\text{N}}$, an open-source 9B model trained via continual pre-training, supervised fine-tuning, and reinforcement learning. Experiments demonstrate state-of-the-art performance on UI drafting, UI polishing, and UI editing benchmarks, even outperforming larger models, with performance consistently improving through iterative visual optimization. Our code and models are available at \url{https://github.com/zai-org/UI2Code_N}.

Existing UI-to-Code methods often try to generate the code in one step, which is very different from how human developers work: developers usually write an initial version, run it in a browser, look at what is wrong, and then revise it. In this paper, we propose UI2Code$^{\text{N}}$ that follows this iterative process. Given a target interface, UI2Code$^{\text{N}}$ generates code, renders the result, compares the rendered page with the target design, and improves the code through multiple rounds of feedback. This makes the generated webpages closer to the intended design and more reliable than one-shot generation. We also introduce a training method that teaches the model to improve its outputs based on visual feedback from rendered webpages. Experiments show that UI2Code$^{\text{N}}$ performs strongly on several UI-to-code tasks, including creating an initial webpage, polishing a generated page, and editing an existing interface.