AI-Assisted Fragmented UI Repair: From Layer Chaos to Clean Interface Structure

Abstract

Design-to-code tools fail when high-fidelity interface mockups contain fragmented layers: a button becomes a background rectangle, a text label, icons, shadows, and decoration; a card becomes many unrelated rectangles and texts; a navigation bar becomes an arbitrary stack of visual primitives. This paper presents EGFE-RePair, an AI-assisted layer repair method that converts chaotic layer sets into clean interface hierarchy nodes for button, card, navbar, and form-group components. The method combines pairwise spatial learning with a deterministic, LLM-compatible semantic repair stage that applies explicit grouping decisions to candidate layer sets. The study conducts full experimental evaluation on the packaged EGFE-v1 and EGFE-v2 datasets, containing 100 and 300 samples respectively, with JSON layer metadata and rendered interface assets. All reported values are measured by the included code over fixed train, validation, and test splits; no illustrative or estimated result is used. On EGFE-v1, EGFE-RePair reaches 0.899 pair F1 and 0.907 hierarchy accuracy. On the larger EGFE-v2 test split, it reaches 0.868 pair F1 and 0.869 hierarchy accuracy, outperforming name-pattern, proximity, visual-rule, and learned pair-only baselines. Ablation shows that removing the semantic repair stage lowers EGFE-v2 hierarchy accuracy from 0.869 to 0.564, confirming that layer grouping requires both local evidence and component-level UI semantics. The results demonstrate a reproducible path from fragmented design layers to maintainable UIUX structure.