Modular Layout Synthesis (MLS): Front-end Code via Structure Normalization and Constrained Generation
Fuente:
arXiv
Saved in:
| Main Authors: | , , , , , |
|---|---|
| Format: | Preprint |
| Published: |
2025
|
| Subjects: | |
| Online Access: | |
| Tags: |
Add Tag
No Tags, Be the first to tag this record!
|
| _version_ | 1866909973289631744 |
|---|---|
| author | Liu, Chong Zhang, Ming Li, Fei Zhou, Hao Chen, Xiaoshuang Yuan, Ye |
| author_facet | Liu, Chong Zhang, Ming Li, Fei Zhou, Hao Chen, Xiaoshuang Yuan, Ye |
| contents | 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 |
| format | Preprint |
| id |
arxiv_https___arxiv_org_abs_2512_18996 |
| institution | arXiv |
| publishDate | 2025 |
| record_format | arxiv |
| spellingShingle | Modular Layout Synthesis (MLS): Front-end Code via Structure Normalization and Constrained Generation Liu, Chong Zhang, Ming Li, Fei Zhou, Hao Chen, Xiaoshuang Yuan, Ye Information Retrieval Software Engineering 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 |
| title | Modular Layout Synthesis (MLS): Front-end Code via Structure Normalization and Constrained Generation |
| topic | Information Retrieval Software Engineering |
| url | https://arxiv.org/abs/2512.18996 |