Component-aware Multi-framework WebUI Code Generation with Lightweight Verification

Jingwu Chen, Xiaoshuang Chen, Liang Chen, Gaode Chen, Yong Jiang

Abstract: Front-end code generation from visual inputs has achieved encouraging progress with multimodal large language models. However, most existing methods remain centered on HTML-style outputs and do not adequately address the requirements of modern component-based development. When targeting frameworks such as React, Vue, and Angular, the model must generate not only visually aligned code, but also framework-compliant project structures, reusable components, valid bindings, and cross-file dependencies. This makes executability a fundamental challenge in multi-framework WebUI code generation. In this paper, we propose a component-aware generation framework for executable WebUI synthesis across multiple front-end frameworks. The key idea is to explicitly model reusable interface patterns and component boundaries before code generation, so that the system can move beyond flat page translation and produce framework-consistent project structures. Building on this representation, we introduce a framework-conditioned generation process that organizes component decomposition, file layout, and implementation decisions according to framework-specific conventions. To further improve reliability, we incorporate a lightweight verification module that detects common generation failures, including structural inconsistencies, missing dependencies, invalid bindings, and framework-specific syntax errors, and enables efficient correction before full compilation. By coupling component-aware structural modeling with low-cost verification, the proposed framework shifts WebUI code generation from visually plausible outputs toward executable and reusable front-end projects, providing a more practical solution for real-world multi-framework development.