ComUICoder: Component-based Reusable UI Code Generation for Complex Websites via Semantic Segmentation and Element-wise Feedback

2026-02-22

AI Summary

Existing UI code generation methods struggle with semantic fragmentation, component redundancy, and cross-page inconsistency in complex, long-page scenarios. This work proposes a component-based generation framework that innovatively integrates semantic-aware chunking, vision-driven graph-structured component merging, and a priority-aware element-level feedback mechanism, all fine-tuned on a multimodal large language model. Additionally, the authors introduce ComUIBench, the first multi-page, complex web UI benchmark annotated with component-level labels. Experimental results demonstrate that the proposed approach significantly improves the quality and reusability of generated code while effectively mitigating redundancy and inconsistency issues.

Technology Category

• Natural Language Processing: Generation
• Humans and AI: Game Design — Procedural Content Generation & Storytelling
• Machine Learning: Large Multimodal Models (LMMs)

Application Category

• Graph Algorithms and Modeling for the Web: Foundation models and LLMs for Web-related graphs
• Web Mining and Content Analysis: Web data generation and simulation
• Search and Retrieval-Augmented AI: Web learning to rank, online learning, and counterfactual learning for ranking

Abstract

Multimodal Large Language Models (MLLMs) have demonstrated strong performance on the UI-to-code task, which aims to generate UI code from design mock-ups. However, when applied to long and complex websites, they often struggle with fragmented segmentation, redundant code generation for repetitive components, and frequent UI inconsistencies. To systematically investigate and address these challenges, we introduce ComUIBench, a new multi-page complex webpage benchmark with component annotations, designed to evaluate MLLMs' ability to generate reusable UI code in realistic website scenarios. Building upon this benchmark, we propose ComUICoder, a component-based UI code generation framework that emphasizes semantic-aware segmentation, code reuse, and fine-grained refinement. Specifically, ComUICoder incorporates (1) Hybrid Semantic-aware Block Segmentation for accurate UI semantic coherent block detection, (2) Visual-aware Graph-based Block Merge to consolidate structurally similar components within and across webpages for reusable implementation, and (3) Priority-based Element-wise Feedback to refine generated code and reduce element-level inconsistencies. Extensive experiments demonstrate that ComUICoder significantly improves overall generation quality and code reusability on complex multipage websites. Our datasets and code are publicly available at https://github.com/WebPAI/ComUICoder.

Problem

• UI-to-code
• code reusability
• semantic segmentation
• UI inconsistency
• complex websites

Innovation

• component-based code generation
• semantic segmentation
• code reusability
• element-wise feedback
• multimodal LLMs