---
title: 'WebGen-Agent: Visual Code Generation'
url: https://www.emergentmind.com/topics/webgen-agent
type: topic
---

# WebGen-Agent: Visual Code Generation

WebGen-Agent is a large language model (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 [2509.22644].

## 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 Language Model (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 $\pi_\theta$ generates full trajectories of code edits $(\Delta C_1, O_1, F_1, \dots, \Delta C_K, O_K, F_K)$ given a natural-language instruction.
- **Step-Level Rewards:** For each trajectory $i$ and step $j$, the reward is
  \[
  r_j^{(i)} = \text{Score}_{shot,\,j}^{(i)} + \text{Score}_{gui,\,j}^{(i)}.
  \]
  This is aggregated across all sampled trajectories $R = \{r_j^{(i)}\}$, and then standardized:
  \[
  \hat{A}_j^{(i)} = \frac{r_j^{(i)}-\text{mean}(R)}{\text{std}(R)}.
  \]
- **Optimization Objective:**
  \[
  J_{GRPO}(\theta) = \mathbb{E}_{q\sim P(Q),\,\{o_i\}\sim\pi_{\theta_{old}}} \Bigg[
    \frac{1}{G} \sum_{i=1}^G \frac{1}{|o_i|} \sum_{t=1}^{|o_i|}
      \min\bigl( \rho_{i,t}\,\hat{A}_{i,t},\, \text{clip}(\rho_{i,t},1{-}\epsilon,1{+}\epsilon)\hat{A}_{i,t} \bigr)
  \Bigg]
  \]
  where $\rho_{i,t}$ 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 $\text{Score}_{gui}$, using $\text{Score}_{shot}$ as a tiebreak, and recency if needed.
- **Select-Best at Termination:** After either passing all tests or exhausting the step budget (default $T=20$), the best intermediate codebase is returned. Exact mechanism: select maximal $\text{Score}_{gui}$, then $\text{Score}_{shot}$, 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 [2509.22644].

## 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 [2604.07776], while MM-WebAgent integrates hierarchical planning and agentic self-reflection for multimodal page generation [2604.15309]. 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 [2604.20398]. 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.

Source: https://www.emergentmind.com/topics/webgen-agent