[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"doc-detail-86503-en":3,"doc-seo-86503-105":29,"detail-sidebar-cat-0-en-105":83},{"code":4,"msg":5,"data":6},0,"success",{"doc_id":7,"user_id":8,"nickname":9,"user_avatar":10,"doc_module":4,"category_id":11,"category_name":12,"doc_title":13,"doc_description":14,"doc_content":15,"file_id":16,"file_url":17,"file_type":18,"file_size":19,"view_count":20,"is_deleted":4,"is_public":20,"is_downloadable":20,"audit_status":20,"page_count":21,"language":22,"language_code":23,"site_id":24,"html_lang":23,"table_of_contents":25,"faqs":26,"seo_title":13,"seo_description":14,"update_tm":27,"read_time":28},86503,1374391975076,"Riley","https://ap-avatar.wpscdn.com/avatar/14000253ca4ec9f6853?x-image-process=image/resize,m_fixed,w_180,h_180&k=1783305029341752051",6,"Technology","WebDesignIter: Co-Evolving Design Knowledge for Repository-Level Front-End Code Generation","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.","WebDesignIter: Co-Evolving Design Knowledge for Repository-Level Front-End Code Generation  \nZheng Pei  \nSun Yat-sen University Zhuhai Key Laboratory of Trusted Large Language Models Zhuhai, China [zhengpei516@gmail.com](zhengpei516@gmail.com)  \nZhenxi Chen  \nSun Yat-sen University Zhuhai Key Laboratory of Trusted Large Language Models Zhuhai, China [chenzhx236@mail2.sysu.edu.cn](chenzhx236@mail2.sysu.edu.cn)  \nMingwei Liu  \nSchool 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)  \nZihao Wang  \nSun Yat-sen University  \nZhuhai Key Laboratory of Trusted Large Language Models Zhuhai, China [wangzh778@mail2.sysu.edu.cn](wangzh778@mail2.sysu.edu.cn)  \narXiv :2607 . 1062 1v 1 [ cs . SE] 12 Jul 2026  \nYanlin Wang  \nSun Yat-sen University Zhuhai Key Laboratory of Trusted Large Language Models Zhuhai, China [wangylin36@mail.sysu.edu.cn](wangylin36@mail.sysu.edu.cn)  \nAbstract—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.  \nOn 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.  \nIndex Terms—Code Generation, Front-end Repository-Level Code, Design Knowledge, Incremental Development  \nFront-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  \na 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.  \nLarge 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","cbCaipAlK2jqGA5u","https://ap.wps.com/l/cbCaipAlK2jqGA5u","pdf",742372,1,12,"English","en",105,"# Introduction\n## Problem: repository-level evolution and regressions\n## Missing component: design knowledge\n# WebDesignIter Framework\n## WebAppArchKG persistent knowledge graph\n## Two-stage process: planning and generation","[{\"question\":\"How does WebDesignIter execute repository-level changes safely?\",\"answer\":\"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.\"}]",1784212240,30,{"code":4,"msg":30,"data":31},"ok",{"site_id":24,"language":23,"slug":32,"title":13,"keywords":33,"description":14,"schema_data":34,"social_meta":78,"head_meta":80,"extra_data":82,"updated_unix":27},"webdesigniter-co-evolving-design-knowledge-for-repository-level-front-end-code-generation","",{"@graph":35,"@context":77},[36,53,68],{"@type":37,"itemListElement":38},"BreadcrumbList",[39,43,47,50],{"item":40,"name":41,"@type":42,"position":20},"https://docshare.wps.com","Home","ListItem",{"item":44,"name":45,"@type":42,"position":46},"https://docshare.wps.com/document/","Document",2,{"item":48,"name":12,"@type":42,"position":49},"https://docshare.wps.com/document/technology/",3,{"item":51,"name":13,"@type":42,"position":52},"https://docshare.wps.com/document/webdesigniter-co-evolving-design-knowledge-for-repository-level-front-end-code-generation/86503/",4,{"url":51,"name":13,"@type":54,"author":55,"headline":13,"publisher":57,"fileFormat":60,"inLanguage":23,"description":14,"dateModified":61,"datePublished":62,"encodingFormat":60,"isAccessibleForFree":63,"interactionStatistic":64},"DigitalDocument",{"name":9,"@type":56},"Person",{"url":40,"name":58,"@type":59},"DocShare","Organization","application/pdf","2026-07-17","2026-07-16",true,{"@type":65,"interactionType":66,"userInteractionCount":20},"InteractionCounter",{"@type":67},"ViewAction",{"@type":69,"mainEntity":70},"FAQPage",[71],{"name":72,"@type":73,"acceptedAnswer":74},"How does WebDesignIter execute repository-level changes safely?","Question",{"text":75,"@type":76},"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.","Answer","https://schema.org",{"og:url":51,"og:type":79,"og:title":13,"og:site_name":58,"og:description":14},"article",{"robots":81,"canonical":51},"index,follow",{"doc_id":7,"site_id":24},{"code":4,"msg":5,"data":84},[85,89,93,97,102,105,110,114,119,122,126],{"id":20,"doc_module":4,"doc_module_name":45,"category_name":86,"show_sort_weight":87,"slug":88},"Story & Novel",90,"story-novel",{"id":46,"doc_module":4,"doc_module_name":45,"category_name":90,"show_sort_weight":91,"slug":92},"Literature",80,"literature",{"id":52,"doc_module":4,"doc_module_name":45,"category_name":94,"show_sort_weight":95,"slug":96},"Exam",70,"exam",{"id":98,"doc_module":4,"doc_module_name":45,"category_name":99,"show_sort_weight":100,"slug":101},5,"Comic",60,"comic",{"id":11,"doc_module":4,"doc_module_name":45,"category_name":12,"show_sort_weight":103,"slug":104},50,"technology",{"id":106,"doc_module":4,"doc_module_name":45,"category_name":107,"show_sort_weight":108,"slug":109},7,"Healthcare",40,"healthcare",{"id":111,"doc_module":4,"doc_module_name":45,"category_name":112,"show_sort_weight":28,"slug":113},8,"Research & Report","research-report",{"id":115,"doc_module":4,"doc_module_name":45,"category_name":116,"show_sort_weight":117,"slug":118},9,"Religion & Spirituality",20,"religion-spirituality",{"id":117,"doc_module":4,"doc_module_name":45,"category_name":120,"show_sort_weight":117,"slug":121},"World Cup","world-cup",{"id":123,"doc_module":4,"doc_module_name":45,"category_name":124,"show_sort_weight":123,"slug":125},10,"Lifestyle","lifestyle",{"id":127,"doc_module":4,"doc_module_name":45,"category_name":128,"show_sort_weight":98,"slug":129},19,"General","general"]