WebDesignIter: Co-Evolving Design Knowledge for Repository-Level Front-End Code Generation

Abstract: Front-end development accumulates change after change at the repository level, weaving complex cross-file dependencies that current LLM coding agents tuned for single-shot tasks cannot reliably track across multiple iterations, leading to functional regressions and code that resists maintenance. We argue the missing piece is design knowledge: architectural principles, module responsibilities, and structural constraints that developers lean on to keep code readable, maintainable, and evolvable as a system scales. To operationalize this, we propose WebDesignIter, a framework built around a persistent knowledge graph (WebAppArchKG) that fuses repository structure with design knowledge and keeps both in sync across development cycles. WebDesignIter works in two stages: design-informed planning pulls historical context and architectural overviews from WebAppArchKG to produce an implementation plan with corresponding test scripts, and design-aware generation executes that plan through targeted diff-based patches, validated by sandbox execution and automatic syntax repair. On Web-Bench, WebDesignIter delivers an average Pass@2 gain of 9.55 percentage points across nine foundation models over existing baselines. More importantly, WebDesignIter outperforms every general-purpose coding agent Claude Code, OpenHands, SWE-Agent, Codex CLI on every model configuration, posting the highest Pass@1 and Pass@2 while consuming 2530 fewer input tokens. Ablation singles out design knowledge as the most impactful component: stripping it drops Pass@1 by 11.40 percentage points, a degradation far larger than removing code-graph retrieval, patch-based generation, or sandbox verification, confirming that design knowledge provides a fundamentally more efficient and reliable path to repository-level code generation.

• The paper introduces a framework enabling design-informed incremental patch generation by integrating persistent design knowledge and architectural modeling.
• It employs a knowledge graph for code context, detailing relationships and module boundaries to ensure maintainability and reduce regressions.
• Empirical evaluations demonstrate gains of up to 9.55 percentage points in code synthesis accuracy while drastically lowering token consumption.

WebDesignIter: Co-Evolving Design Knowledge for Repository-Level Front-End Code Generation

Motivation and Context

LLMs have become pivotal in automating code generation, yet their efficacy drops markedly in incremental, repository-level front-end scenarios due to lack of persistent architectural context and design knowledge. Current coding agents, optimized for single-shot tasks, are severely limited in handling multi-file, cross-component evolution—a reality demonstrated by Web-Bench results where state-of-the-art agents attain sub-50% Pass@2. The underlying issue is the absence of explicit, structured design knowledge: module responsibilities, architectural constraints, and rationale that underpin maintainable evolution of real-world front-end repositories.

Framework Architecture

WebDesignIter is designed to operationalize design knowledge for robust, incremental repository-level code generation. The framework centers on WebAppArchKG, a persistent knowledge graph fusing repository structure, architectural primitives, module boundaries, and cross-file dependencies with historical design context.

Figure 1: An overview of the WebDesignIter framework’s two-stage pipeline and knowledge graph integration.

The pipeline consists of four sequential stages:

1. Architectural Knowledge Extraction and Evolution: Initial repository is parsed into block-level architectural primitives using Tree-sitter, informing the schema of WebAppArchKG.

   Figure 2: Schema of WebAppArchKG encoding file- and component-level relationships.

2. Design-informed Planning: User requirements plus historical design, repo structure, and architectural overview are integrated to produce an implementation plan and test scripts. This grounding mitigates risk of hallucinations and cross-file inconsistencies.
3. Design-aware Generation: Guided by implementation plans, targeted diff-based patches are synthesized, leveraging precise context from WebAppArchKG to avoid regressions and redundant rewrites.
4. Repo-Verification: Patches are applied incrementally, validated via AST-based syntax analysis and sandboxed test execution. Failures trigger isolated repairs and iterative feedback, maintaining architectural integrity.

Knowledge Graph Construction and Refactoring

Architectural primitives are extracted by segmenting code into block-level nodes.

Figure 3: Example code content segmentation into block primitives for architectural modeling.

WebAppArchKG models both coarse-grained file dependencies and fine-grained block relationships. Embedded heterogeneous code (e.g., JS in HTML) is extracted and modularized. Refactoring strategies are implemented to eradicate “spaghetti code,” migrating intertwined presentation, styling, and logic into distinct files, thereby enhancing maintainability and reducing contextual noise for downstream LLMs.

Contextual Code Retrieval and Patch Generation

WebAppArchKG-based retrieval provides deterministic, structure-grounded context during code synthesis. Instead of similarity-based RAG, relevant nodes are aggregated based on explicit relationships, drastically reducing retrieval errors.

Figure 4: Impact of WebAppArchKG-based retrieval on generated code correctness across cross-file dependencies.

WebDesignIter abandons full-file generation in favor of unified patch-based output, circumscribing modifications to minimal regions and utilizing rule-based correction to ensure patch consistency even under LLM errors.

Empirical Evaluation

Extensive evaluation on Web-Bench, the only benchmark targeting repository-level incremental front-end code generation, demonstrates WebDesignIter's superiority.

Figure 5: Project-wise task completion distribution (Pass@2) comparing Web-Agent (blue) and WebDesignIter (orange) across nine foundation models.

Across nine foundation models, WebDesignIter achieves an average Pass@2 gain of 9.55 percentage points over the Web-Agent baseline. Notably, it consistently outperforms general-purpose coding agents—including Claude Code, OpenHands, SWE-Agent, and Codex CLI—on every configuration, attaining best Pass@1 and Pass@2 while consuming 25–30× fewer input tokens.

Ablation studies show removal of design knowledge drops Pass@1 by 11.40 points, a degradation larger than code-graph retrieval, patch generation, or sandbox verification, isolating design knowledge as the most critical factor.

Robustness, Maintainability, and Error Analysis

WebDesignIter shifts dominant failure modes from regression and dependency failures to higher-level functional logic errors, indicating a transition where system-level consistency is guaranteed and performance bottlenecks depend on the base model’s reasoning ability.

Figure 6: Radar chart contrasting error distributions between Web-Agent and WebDesignIter, with regression and dependency errors substantially reduced.

Maintainability is measurably enhanced: average file length decreases by 28.4%, modified files increase by 18.8%, reflecting concise, modularized outputs. Refactoring and architectural boundary enforcement reduce contextual redundancy, improving code locality.

Patch Strategy and Token Efficiency

Patch-based code generation is central to avoiding functional regressions, a phenomenon amplified in incremental benchmarks where each task depends on prior state.

Figure 7: Case study illustrating patch strategy’s role in preserving prior functionality and minimizing regressions.

WebDesignIter’s cost efficiency is unequivocal: on Web-Bench, it achieves 26.08–33.53% Pass@1 at 523–533K tokens, while agentic-loop baselines (Claude Code, OpenHands, SWE-Agent, Codex CLI) require 14–16M tokens to reach only 5–21% Pass@1.

Architectural Modeling and Output Formats

Explicit modularization and architectural modeling underpin improved readability and maintainability.

Figure 8: Impact of modularized output formats and model output formats on readability and maintainability.

Automated refactoring redirects generation from entangled patterns to clear architectural boundaries, supporting long-term code evolution.

Implications and Future Directions

WebDesignIter establishes design knowledge as a fundamental lever for repository-level front-end code generation, enabling both higher reliability and cost efficiency. It reveals that scaling model capacities or iterative agentic loops are insufficient substitutes for architectural context and structured design intent. This insight has implications for future AI-powered development tooling: systems will need persistent knowledge graphs, explicit module modeling, and tight integration of design principles with synthesis and verification pipelines.

A foreseeable trajectory is integrating WebDesignIter-like frameworks with advanced RAG components, richer design knowledge ontologies, and fine-grained context filtering (2607.10621). Addressing the residual functional logic errors may require hybrid approaches, combining design-knowledge-driven planning with symbolic or formal reasoning for deeper correctness guarantees.

Conclusion

WebDesignIter demonstrates that explicit integration of design knowledge, persistent architectural modeling, and targeted patch generation deliver substantial gains in reliability, maintainability, and efficiency for incremental repository-level front-end code generation (2607.10621). Design knowledge is positioned as the most impactful component, fundamentally shifting the performance/cost trade-off beyond what is achievable with agentic trial-and-error or brute-force context scaling. These findings prognosticate a shift toward knowledge-driven frameworks in future AI code synthesis and maintenance ecosystems.