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

Jul 16, 2026

Upload by Riley

Front-end development evolves continuously at the repository level, creating cross-file dependencies that single-shot LLM coding agents cannot track reliably, causing functional regressions and hard-to-maintain code. The work identifies design knowledge as the missing component: architectural principles, module responsibilities, and structural constraints that preserve readability, maintainability, and evolvability. It introduces WebDesignIter, using a persistent knowledge graph (WebAppArchKG) synced across iterations through planning and diff-based generation, plus sandbox validation and automatic syntax repair.

LanguageEnglish

CategoryTechnology

FormatPDF

Pages12

Reading Time30 min

Introduction

Problem: repository-level evolution and regressions

Missing component: design knowledge

WebDesignIter Framework

WebAppArchKG persistent knowledge graph

Two-stage process: planning and generation

WebDesignIter: Co-Evolving Design Knowledge for Repository-Level Front-End Code Generation Zheng Pei Sun Yat-sen University Zhuhai Key Laboratory of Trusted Large Language Models Zhuhai, China [zhengpei516@gmail.com](zhengpei516@gmail.com) Zhenxi Chen Sun Yat-sen University Zhuhai Key Laboratory of Trusted Large Language Models Zhuhai, China [chenzhx236@mail2.sysu.edu.cn](chenzhx236@mail2.sysu.edu.cn) Mingwei Liu School of Software Engineering, Sun Yat-sen University Zhuhai Key Laboratory of Trusted Large Language Models Zhuhai, China [liumw26@mail.sysu.edu.cn](liumw26@mail.sysu.edu.cn) Zihao Wang Sun Yat-sen University Zhuhai Key Laboratory of Trusted Large Language Models Zhuhai, China [wangzh778@mail2.sysu.edu.cn](wangzh778@mail2.sysu.edu.cn) arXiv :2607 . 1062 1v 1 [ cs . SE] 12 Jul 2026 Yanlin Wang Sun Yat-sen University Zhuhai Key Laboratory of Trusted Large Language Models Zhuhai, China [wangylin36@mail.sysu.edu.cn](wangylin36@mail.sysu.edu.cn) 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, andevolvable 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 codegraph retrieval, patch-based generation, or sandbox verification, confirming that design knowledge provides a fundamentally more efficient and reliable path to repository-level code generation. Index Terms—Code Generation, Front-end Repository-Level Code, Design Knowledge, Incremental Development Front-end development is critical in modern software systems, as it directly impacts user interaction quality and overall usability. Compared to back-end development, it involves a heterogeneous technology stack and strongly componentoriented structures [1], encompassing multiple file types (e.g., HTML, CSS, JavaScript/TypeScript, and configuration files) and complex cross-file and cross-component dependencies [2] . In practice, front-end development evolves incrementally atthe repository level [3], where new features are added while preserving existing functionality. This tightly coupled, continuously evolving paradigm challenges repository-level code generation and maintenance, particularly regarding semantic understanding, contextual construction, and regression risk. Large language models (LLMs) have recently become primary assistive tools in front-end development and have demonstrated strong performance across a wide range of software engineering tasks, including code generation, completion, translation, security analysis, and automated repair [4

FAQs

How does WebDesignIter execute repository-level changes safely?

It first produces a design-informed implementation plan with test scripts, then generates targeted diff-based patches executed in a sandbox, followed by automatic syntax repair to ensure correctness.

Jul 16, 2026

Upload by Riley