Modular Layout Synthesis (MLS): Front-end Code via Structure Normalization and Constrained Generation

TL;DR

MLS introduces a hierarchical framework that combines visual understanding and structural normalization to generate modular, framework-agnostic front-end code, improving reusability and maintainability over existing AI solutions.

Contribution

The paper presents a novel hierarchical approach that integrates visual-semantic encoding, pattern recognition, and constraint-based generation for modular front-end code synthesis.

Findings

MLS outperforms existing methods in code reusability

Ensures structural integrity across frameworks

Produces production-ready, modular code

Abstract

Automated front-end engineering drastically reduces development cycles and minimizes manual coding overhead. While Generative AI has shown promise in translating designs to code, current solutions often produce monolithic scripts, failing to natively support modern ecosystems like React, Vue, or Angular. Furthermore, the generated code frequently suffers from poor modularity, making it difficult to maintain. To bridge this gap, we introduce Modular Layout Synthesis (MLS), a hierarchical framework that merges visual understanding with structural normalization. Initially, a visual-semantic encoder maps the screen capture into a serialized tree topology, capturing the essential layout hierarchy. Instead of simple parsing, we apply heuristic deduplication and pattern recognition to isolate reusable blocks, creating a framework-agnostic schema. Finally, a constraint-based generation protocol guides the LLM to synthesize production-ready code with strict typing and component props. Evaluations show that MLS significantly outperforms existing baselines, ensuring superior code reusability and structural integrity across multiple frameworks