WebGen-Agent: Visual Code Generation

• WebGen-Agent is a large language model-based framework that iteratively refines website code using step-level reinforcement learning and multi-level visual feedback.
• It integrates an LLM reasoning engine, visual feedback from screenshots, and GUI-agent testing to detect and correct both layout and interactive functionality issues.
• Experimental results demonstrate substantial improvements in code accuracy and appearance scores, validating its effectiveness over predecessor approaches.

WebGen-Agent is a LLM-based code generation framework for interactive, visually-accurate website creation, distinguished by its use of multi-level visual feedback and step-level reinforcement learning. Unlike earlier agents that rely solely on code execution results for self-verification, WebGen-Agent continuously refines the website codebase by integrating both screenshot-level and GUI-agent-derived signals, with backtracking and step selection for robust optimization. Its policy, trained via a dense, stepwise Group Relative Policy Optimization (Step-GRPO) using visual and functional feedback, achieves substantial gains in both code correctness and the final rendered appearance of generated websites (Lu et al., 26 Sep 2025).

1. System Architecture

WebGen-Agent consists of four primary modules, all orchestrating iterative code generation and multi-faceted feedback collection:

• LLM Reasoning Engine: A high-competence code LLM (e.g., Claude-3.5-Sonnet, DeepSeek-V3, Qwen2.5-Coder) which, at each step, generates a code edit $\Delta C$ to the current website codebase $C$.
• Visual LLM (VLM) for Screenshot Feedback: Captures the landing page screenshot post-code execution, uses a VLM (e.g., Qwen2.5-VL-32B-Instruct) to detect visual errors, output structured descriptions and improvement suggestions, and assign an appearance score ($\text{Score}_{shot} \in [0,5]$).
• GUI-Agent Tester: Upon sufficiently high screenshot quality, a GUI-agent executes a set of scripted user interactions (e.g., clicking, form-filling), reporting success/failure, further improvement suggestions, and a functionality grade ($\text{Score}_{gui} \in \{1,\dots,5\}$).
• Backtracking and Select-Best Mechanism: If code execution fails for five consecutive steps, backtracks to the best previous step based on $\text{Score}_{gui}$ and $\text{Score}_{shot}$. At termination, returns the top codebase snapshot from the trajectory.

Core inference flow is organized as an iterative loop: each step applies an LLM-generated code edit, then invokes screenshot feedback, and, conditional on visual success, launches GUI-agent testing. All intermediate results, including scores and improvement suggestions, are archived for potential backtracking.

2. Multi-Level Visual Feedback

Each WebGen-Agent iteration aggregates complementary visual feedback:

• Screenshot Feedback: The VLM processes the screenshot, detects major visual or runtime errors, and if absent, issues:
  • Description: Structured summary of layout, UI, colors, and content.
  • Suggestions: Concise, actionable recommendations for visual improvement.
  • Score: Integer grade (0–5) based on a rubric (0 = blank/broken, 5 = excellent).
  • Formalization: $$F_{shot} = \langle \text{Description}, \text{Score}_{shot}, \text{Suggestions}_{shot}\rangle$$.
• GUI-Agent Feedback: If $\text{Score}_{shot}$ is sufficiently high, the LLM constructs a comprehensive GUI test covering all requirements. The GUI agent executes scripted actions, leading to:
  • Pass flag (boolean).
  • Suggestions for functional enhancement.
  • Functionality grade: $\text{Score}_{gui}\in\{1,\dots,5\}$.
  • Formalization: $$F_{gui} = \langle \text{Score}_{gui}, \text{Suggestions}_{gui}\rangle$$.

The combination ensures coverage of both surface-level aesthetics and deeper behavioral correctness.

3. Step-GRPO: Step-Level Reinforcement Learning with Visual Rewards

WebGen-Agent introduces Step-Group Relative Policy Optimization (Step-GRPO), a dense, stepwise RL technique leveraging visual scores:

• Policy Formulation: The policy $C$0 generates full trajectories of code edits $C$1 given a natural-language instruction.
• Step-Level Rewards: For each trajectory $C$2 and step $C$3, the reward is

$C$4

This is aggregated across all sampled trajectories $C$5, and then standardized:

$C$6

• Optimization Objective:

$C$7

where $C$8 is the stepwise importance ratio.

No KL penalty is present, affording the model freedom to adapt to the dense per-step rewards. Notably, Step-GRPO applies advantage normalization and PPO-style clipping not only at the final outcome level, but also within each code-edit step, producing highly informative and stable training signals.

4. Integration and Optimization Mechanisms

• Backtracking: If five consecutive steps result in execution errors, the system retrieves the trajectory archive and restores the codebase to the step with maximal $C$9, using $\text{Score}_{shot} \in [0,5]$0 as a tiebreak, and recency if needed.
• Select-Best at Termination: After either passing all tests or exhausting the step budget (default $\text{Score}_{shot} \in [0,5]$1), the best intermediate codebase is returned. Exact mechanism: select maximal $\text{Score}_{shot} \in [0,5]$2, then $\text{Score}_{shot} \in [0,5]$3, then latest.
• Failure Correction: After screenshot feedback, the agent reliably corrects layout issues, color clashes, and spacing. GUI-agent feedback further addresses functional deficits, repairing event handlers, navigation, and interactivity.

5. Experimental Evaluation and Results

Dataset: WebGen-Bench comprising 101 natural-language website instructions and 647 GUI-test cases across representation, interaction, and data management.

Metrics:

• Accuracy: Fraction of tasks passing all functional tests.
• Appearance Score: 0–5 mean rating (by an external GPT-4o VLM) on the final screenshot.
• Category breakdowns allow fine-grained analysis by instruction or test type.

Results Table:

Model	Accuracy (%)	Appearance
Bolt.diy + Claude-3.5-Sonnet	26.4	3.0
WebGen-Agent + Claude-3.5-Sonnet	51.9	3.9
WebGen-Agent + DeepSeek-V3	52.6	3.8
WebGenAgent-LM-7B-SFT	38.9	3.4
WebGenAgent-LM-7B-Step-GRPO	45.4	3.7

Step-GRPO yields a +6.5% absolute accuracy gain and +0.3 improvement in visual score over SFT alone for Qwen2.5-7B; use of Claude-3.5-Sonnet nearly doubles the predecessor system's performance.

Qualitative evaluation demonstrates that multi-level feedback drives explicit improvements in page quality and functionality at each iteration, such as alignment fixes and previously broken UI components becoming interactive.

6. Limitations and Prospective Extensions

• Limitations:
  • Absence of evaluation for page load speed, network lag resilience, or responsive (mobile) design.
  • Step-GRPO has been validated primarily on small models (up to 7B–8B parameters), with larger-scale training constrained by compute availability.
• Potential Extensions:
  • Integration of additional feedback signals, e.g., automated performance metrics, profiling tools like Lighthouse.
  • Expansion of the approach to alternative code generation domains requiring external execution and visual inspection (e.g., GUI applications, dashboards).
  • Scaling Step-GRPO to larger models (30B+) and leveraging more sophisticated advantage estimates (such as Generalized Advantage Estimation).
• Broader applicability: The multi-level feedback loop and stepwise RL methodology are generalizable to agentic code generation scenarios where external validation (visual or interactive) is central (Lu et al., 26 Sep 2025).

7. Relationship to Adjacent Research

WebGen-Agent's approach contrasts with pure supervised trajectory distillation and hierarchical orchestration agents. Agent-as-Annotators achieves generalization and modularly structured trajectory synthesis via symbolic roles and synthetic demonstration filtering (Lù et al., 9 Apr 2026), while MM-WebAgent integrates hierarchical planning and agentic self-reflection for multimodal page generation (Li et al., 16 Apr 2026). WebGen-R1 applies scaffolding and cascaded multimodal rewards in an RL framework for project-level web generation, demonstrating the scalability and transferability of structured, visual-feedback-driven RL (Jiang et al., 22 Apr 2026). Collectively, these frameworks delineate a spectrum between orchestration-based and RL-optimized visual web agents, converging on visual and interaction-centered evaluation paradigms for code generation.