Source-linked AI summary
WebGen-R1: Incentivizing Large Language Models to Generate Functional and Aesthetic Websites with Reinforcement Learning
Juyong Jiang, Chenglin Cai, Chansung Park, Jiasi Shen, Sunghun Kim, Jianguo Li, Yue Wang
TL;DR
Project-level website generation remains difficult because multi-page functionality, architectural consistency, and visual quality require evaluation beyond single-file code tests and static sites. WebGen-R1 combines scaffold-constrained generation with cascaded multimodal rewards, and experiments show that a 7B model produces deployable websites while rivaling much larger systems in functional success and exceeding them in rendering and aesthetic alignment.
Problem
Generating functional and aesthetically aligned multi-page websites remains challenging because existing methods simplify the task or rely on costly, brittle agentic execution, while reliable computationally feasible rewards are difficult to design.
Method
WebGen-R1 uses scaffold-driven structured generation, hierarchical verification and rendering, and cascaded rewards combining structural, execution-grounded functional, and vision-based aesthetic feedback.
Results
WebGen-R1 transforms a 7B base model into a deployable multi-page website generator, rivals DeepSeek-R1 (671B) in functional success, and exceeds it in valid rendering and aesthetic alignment.
Takeaways & Limitations
The results position WebGen-R1 as a viable path for scaling small open models from function-level code generation to project-level web application generation.
Abstract
from arXiv · showhide
While Large Language Models (LLMs) excel at function-level code generation, project-level tasks such as generating functional and visually aesthetic multi-page websites remain highly challenging. Existing works are often limited to single-page static websites, while agentic frameworks typically rely on multi-turn execution with proprietary models, leading to substantial token costs, high latency, and brittle integration. Training a small LLM end-to-end with reinforcement learning (RL) is a promising alternative, yet it faces a critical bottleneck in designing reliable and computationally feasible rewards for website generation. Unlike single-file coding tasks that can be verified by unit tests, website generation requires evaluating inherently subjective aesthetics, cross-page interactions, and functional correctness. To this end, we propose WebGen-R1, an end-to-end RL framework tailored for project-level website generation. We first introduce a scaffold-driven structured generation paradigm that constrains the large open-ended action space and preserves architectural integrity. We then design a novel cascaded multimodal reward that seamlessly couples structural guarantees with execution-grounded functional feedback and vision-based aesthetic supervision. Extensive experiments demonstrate that our WebGen-R1 substantially transforms a 7B base model from generating nearly nonfunctional websites into producing deployable, aesthetically aligned multi-page websites. Remarkably, our WebGen-R1 not only consistently outperforms heavily scaled open-source models (up to 72B), but also rivals the state-of-the-art DeepSeek-R1 (671B) in functional success, while substantially exceeding it in valid rendering and aesthetic alignment. These results position WebGen-R1 as a viable path for scaling small open models from function-level code generation to project-level web application generation.
1 Introduction
WebGen-R1 addresses the difficulty of generating functional, aesthetic multi-page websites by combining scaffold-constrained generation with reinforcement learning and cascaded evaluation. Experiments show large gains from a 7B base model and strong comparisons against substantially larger models.
- Challenges: Multi-page website generation requires coordinated routing, dynamic functionality, dependencies, responsive design, and aesthetic judgment beyond isolated code generation.These requirements make both architectural coherence and automated evaluation difficult.
- Challenges: Existing approaches simplify websites to static single pages or use multi-agent orchestration that can introduce brittle cross-agent dependencies.The limitations include missing modern application features and inconsistencies across contracts, files, and interfaces.
- Approach: The framework combines structural compliance, execution-grounded functional feedback, and vision-based aesthetic supervision in a reinforcement-learning reward.This design targets functional correctness and visual quality while avoiding prohibitively expensive GUI-agent exploration.
- Approach: WebGen-R1 uses scaffold-driven generation and hierarchical verification to constrain the action space while preserving architectural integrity and filtering invalid projects.The framework generates components within a validated structure rather than creating every project element from scratch.
- Results: 30.56% to 95.89% valid render ratio, with aesthetic scoring improving 44.32% and functional quality rising from 1.59% to 29.21%.WebGen-R1 transforms the 7B base model from producing nearly nonfunctional websites into deployable, aesthetically aligned multi-page websites.
- Results: WebGen-R1 rivals DeepSeek-R1 (671B) in functional success while substantially exceeding it in valid rendering and aesthetic alignment.It also consistently outperforms heavily scaled open-source models up to 72B.
2 Related Work
Prior work improves code generation and explores reinforcement learning, but website generation still lacks an integrated approach that jointly addresses structure, execution, functionality, and visual quality. WebGen-R1 presents such an RL-based direction for small open-source models.
- Background: LLMs perform strongly on function-level code generation, while project-level software architecture remains a frontier challenge.The gap concerns moving from isolated functions or modules to coordinated projects.
- Reinforcement Learning: RL for open-ended code generation faces vast action spaces, ambiguous ground truth, and outputs that are difficult to benchmark against static references.RLVR addresses part of this challenge through deterministic verification, but website generation requires broader evaluation.
- WebGen-R1: Figure 1 depicts a pipeline that constrains generation with templates, verifies projects hierarchically, renders valid projects, and combines execution and visual signals into rewards.The reward is then used to optimize the policy with GRPO.
- Research Gap: Existing website-generation methods do not simultaneously optimize multi-file dependencies, execution validity, functional correctness, and visual quality within one integrated RL framework.WebGen-R1 is presented as addressing this combined objective for small open-source models.
3 Methodology
WebGen-R1 combines template-constrained generation, hierarchical verification and rendering, cascaded multimodal rewards, and GRPO to train functional, aesthetic multi-page website generation.
- Template-Constrained Probabilistic Generation: WebGen-R1 generates variable website components within a fixed template manifold that preserves build configuration, routing, and server-side logic.The scaffold constrains generation to components outside an invariant structural subgraph.
- Hierarchical Verification and Rendering Pipeline: Generated projects pass static compliance checks before dependency installation, building, serving, and headless-browser rendering produce route screenshots and execution logs.Static checks cover structure, files, commands, and selected content rules; failed projects terminate early.
- Cascaded Multi-Modal Reward Modeling: The cascaded reward penalizes static or build failures and otherwise combines visual, functional, and reasoning-format objectives.Successfully rendered projects receive a weighted dense reward from aesthetic perception, functional integrity, and structured reasoning scores.
- Cascaded Multi-Modal Reward Modeling: Visual scoring uses rendered screenshots and prompts, while functional integrity is binary according to runtime and console errors.The aesthetic score ranges from 0 to 5; functional integrity equals 1 only when no runtime or console errors occur.
- Cascaded Multi-Modal Reward Modeling: The cascade improves RL training efficiency by invoking expensive visual reasoning only after structural requirements are satisfied.This ordering avoids applying visual perception to candidates that fail earlier validation stages.
- Group Relative Policy Optimization: GRPO normalizes rewards within sampled output groups to reduce variance, while KL regularization limits policy drift from the reference model.Group-relative advantages support learning relative preferences when absolute reward scales vary across tasks.
4 Experiments
Experiments evaluate WebGen-R1 on diverse website-generation benchmarks using functional, aesthetic, rendering, and deployability metrics. Results show strong gains over the 7B base model, broad robustness across categories, and benefits from combined SFT and RL.
- Experimental Setup: WebGen-Bench contains 101 curated tasks, while WebDev-Arena contributes 119 filtered out-of-distribution tasks; WebGen-Instruct provides 6,667 training tasks.The benchmarks span portfolios, dashboards, e-commerce frontends, trackers, and other real-world applications.
- Metrics: FSR measures interactive functional success, AAS measures visual alignment, VRR measures error-free rendering, and LDPR measures lint and dependency readiness.Together, these metrics cover functionality, aesthetics, execution reliability, and deployability.
- Main Results: 29.21% FSR and 95.89% VRR make WebGen-R1 the 7B model’s strongest result, with AAS 3.94 and a 27.62-point FSR gain over its base model.It outperforms six of seven open-source baselines up to 72B and closely matches DeepSeek-R1-671B’s 30.25% FSR.
- Main Results: WebGen-R1 achieves superior AAS across all 13 WebGen-Bench categories and consistently improves FSR over the base model across instruction and test-case categories.The authors attribute these gains to cascaded rewards combining structural, execution-grounded, and vision-based supervision.
- Fine-Tuning Strategy: SFT+RL surpasses SFT-only and RL-only by 21.60% and 28.76% in AAS, while similar trends appear for FSR and VRR.SFT supplies structural and semantic priors, whereas RL supports reward-guided exploration.
- In-depth Analysis and Insights: Larger GRPO groups consistently improve AAS, LDPR, FSR, and VRR, which the authors associate with stronger exploration and more diverse candidate trajectories.The study evaluates group sizes G ∈ {2, 4, 8, 16, 32}.
- Out-of-Distribution Generalization: WebGen-R1 outperforms proprietary and open-source baselines on AAS in the unseen WebDev-Arena benchmark, although functional success is not reported there because standardized test cases are unavailable.The authors interpret this as evidence of retained architecture- and style-level abstractions on unseen tasks.
- Reward Validation: Reward-model scores correlate with human ratings at Pearson r = 0.762 and Spearman ρ = 0.734 across 101 generated websites.Three experienced front-end developers independently rated functionality and visual appeal.
5 Conclusion
WebGen-R1 enables small open-source LLMs to generate complete multi-page websites end to end while satisfying functional and aesthetic requirements. Its structured generation, verification, rendering, and cascaded multimodal reward design improve reliability, visual coherence, and deployability.
- WebGen-R1 enables small open-source LLMs to generate entire multi-page websites end to end while meeting functional and aesthetic requirements.
- The framework combines scaffold-driven structured generation with hierarchical verification and rendering to improve functional reliability without prohibitive GUI-agent exploration costs.
- A cascaded multimodal reward couples structural guarantees, execution-grounded functional feedback, and vision-based aesthetic supervision.
- Experiments on two real-world benchmarks show improvements in functional robustness, visual coherence, and deployability relative to advanced proprietary and open-source models.
A Dataset Statistics and Analysis
WebGen-Bench and WebDev Arena are open-ended web-generation benchmarks with different instruction lengths, task coverage, and evaluation specificity. WebGen-Bench emphasizes executable functional requirements, whereas WebDev Arena requires more subjective design judgments.
- The two benchmarks differ substantially in instruction-length distributions and coverage of web-development categories despite both being highly open-ended.
- WebGen-Bench contains 101 samples with median instructions of 84 tokens and 647 executable test cases.Its instructions have a mean of 86.06 tokens and a maximum of 135 tokens.
- WebGen-Bench covers 13 heterogeneous front-end scenarios, including static and dynamic rendering, AI integration, and big data handling.The tasks combine precise functional logic with diverse constraints.
- WebDev Arena contains 119 tasks with median instructions of 20 tokens and no predefined test cases.Its instructions have a mean of 23.13 tokens and a maximum of 119 tokens.
- WebDev Arena spans creative design, simulations, and game or app cloning, making evaluation more subjective and requiring higher-level design decisions.Models must infer multiple details that are not specified in the tasks.
B Additional Implementation Details
The implementation standardizes generated projects around a constrained React and Vite ecosystem. Shared templates, libraries, routing, and visualization requirements reduce rendering and interaction variability during evaluation.
- The baseline comparison includes proprietary APIs and open-source models ranging from Qwen2.5-Coder-7B-Instruct to Qwen2.5-72B-Instruct and DeepSeek-R1.Other evaluated open-source models include Qwen3 variants and Qwen3-Coder-30B-A3B-Instruct.
- All website projects start from the vite-react-typescript-starter template and preserve its directory structure, entry points, and configuration conventions.Necessary modifications or additional files are allowed when template defaults conflict with task requirements.
- The required stack uses React, strict TypeScript, Vite, Tailwind CSS, Ant Design, and React Router DOM v6.The implementation excludes shadcn/ui variants.
- Recharts is the only permitted charting library when visualizations are explicitly requested.This requirement targets predictable rendering and cross-environment compatibility.
- The unified framework reduces variability during rendering and interaction, supporting more stable functional and aesthetic evaluation during RL training.
C Prompt Design
The prompt design specifies a Vite-React-TypeScript project scaffold, execution constraints, implementation standards, and evaluation criteria. It also links the system, reward, and data-selection prompts used in the pipeline.
- C Prompt Design: The paper provides separate prompts for website generation, functionality and aesthetics evaluation, and WebDev Arena data selection.
- C.1 System Prompt for Website Generation: The website-generation system prompt defines an expert frontend-engineering role for producing browser-executable applications in a WebContainer environment.It assumes browser-based Node.js execution and excludes native binaries, pip, and g++.
- C.1 System Prompt for Website Generation: The prompt requires explicit shell-based filesystem interaction, complete file contents, and no unlisted paths or patterns.Git is unavailable, scripting should prefer Node.js, and persistence is restricted to SQLite or libsql when required.
- C.1 System Prompt for Website Generation: Generated projects must use the prescribed starter structure, React, strict TypeScript, Vite, Tailwind CSS, Ant Design, React Router DOM v6, and Recharts when charts are requested.
- C.1 System Prompt for Website Generation: The scaffold includes configuration for ESLint, TypeScript, Tailwind, Vite, React, and browser startup through npm install and npm run dev.
- C.1 System Prompt for Website Generation: The base project defines the HTML root, React entry point, CSS entry point, package dependencies, TypeScript settings, Tailwind configuration, and Vite React plugin.
- C.1 System Prompt for Website Generation: Implementation standards require responsive styling, accessible color schemes, self-contained interactive components, meaningful feedback, keyboard navigation, and polished visual hierarchy.They also specify consistent spacing, useful transitions, mobile-first responsiveness, and exclusive use of src/index.css for styles.
- C.2 Reward Prompt for Functionality and Aesthetics Evaluation: The reward prompt evaluates whether elements such as search bars and report formats are logically placed and functional, alongside layout harmony among text, images, and buttons.
D Additional Case Studies
The case studies broaden qualitative evaluation across standardized webpage construction, open-ended web development, and interactive execution. Examples span diverse website requirements, while UI-agent tests distinguish successful, partial, and failed verification outcomes.
- Evaluation Settings: The case studies cover WebGen-Bench, WebDev Arena, and UI Agent Testing to examine model behavior across three website-generation settings.These settings represent standardized webpage construction, open-ended web development, and interactive execution, respectively.
- WebGen-Bench: WebGen-Bench examples include a wheel-of-fortune site and a bourbon-bar site with domain-specific content, interactions, and user-facing features.The requested functionality includes prize spinning and records in one task, and menus, events, promotions, and reservations in the other.
- Website Diversity: Additional tasks require clinical-office information pages, promotion sharing with search and backend management, and an email platform with composition, attachments, and recipient management.The instructions also specify navigation structures and distinct color schemes for each website.
- WebDev Arena: WebDev Arena examples test external-API data fetching, filtered job-board presentation, and side-by-side audio comparison with user voting.The tasks respectively involve displaying a joke fetched with React, filtering postings by location, salary, and job type, and comparing outputs from two models.
- UI Agent Testing: UI-agent verification produces YES for specified color styling, PARTIAL for another styling task, and NO for navigation from the home page to About Us.The verification tasks check both visual requirements and cross-page interaction.