Search papers, labs, and topics across Lattice.
The paper introduces ComUICoder, a framework designed to improve UI code generation from mock-ups for complex, multi-page websites by addressing issues like fragmented segmentation and redundant code. ComUICoder incorporates hybrid semantic-aware block segmentation, visual-aware graph-based block merge, and priority-based element-wise feedback to enhance code quality and reusability. Experiments on the newly introduced ComUIBench benchmark demonstrate that ComUICoder significantly outperforms existing methods in generating reusable UI code for complex websites.
Achieve higher-quality, more reusable UI code for complex websites by breaking down the generation process into semantic-aware segmentation, visual-aware component merging, and priority-based element refinement.
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.
