Modular Layout Synthesis (MLS): Front-end Code via Structure Normalization and Constrained Generation
- URL: http://arxiv.org/abs/2512.18996v1
- Date: Mon, 22 Dec 2025 03:24:11 GMT
- Title: Modular Layout Synthesis (MLS): Front-end Code via Structure Normalization and Constrained Generation
- Authors: Chong Liu, Ming Zhang, Fei Li, Hao Zhou, Xiaoshuang Chen, Ye Yuan,
- Abstract summary: Automated front-end engineering drastically reduces development cycles and minimizes manual coding overhead.<n>Current solutions often produce monolithic scripts, failing to support modern ecosystems like React, Vue, or Angular.<n>We introduce Modular Layout Synthesis (MLS), a hierarchical framework that merges visual understanding with structural normalization.<n>MLS significantly outperforms existing baselines, ensuring superior code reusability and structural integrity across multiple frameworks.
- Score: 18.154715745625328
- License: http://creativecommons.org/licenses/by/4.0/
- 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
Related papers
- Theory of Code Space: Do Code Agents Understand Software Architecture? [0.0]
Theory of Code Space (ToCS) is a benchmark that evaluates ability to construct, maintain, and update coherent architectural beliefs.<n>ToCS requires agents to build structured belief states over module dependencies.<n>Preliminary Architectural Constraint Discovery is a code-specific evaluation.
arXiv Detail & Related papers (2026-02-28T11:40:17Z) - AnCoder: Anchored Code Generation via Discrete Diffusion Models [36.226700922319075]
Diffusion language models offer a compelling alternative to autoregressive code generation.<n>We introduce AnchorTree, a framework that anchors the diffusion process using structured, hierarchical priors native to code.<n>We validate this framework via AnCoder, a family of models showing that structurally anchored diffusion offers a parameter-efficient path to high-quality code generation.
arXiv Detail & Related papers (2026-02-05T22:46:43Z) - VSA:Visual-Structural Alignment for UI-to-Code [29.15071743239679]
We propose bfVSA (VSA), a multi-stage paradigm designed to synthesize organized assets through visual-text alignment.<n>Our framework yields a substantial improvement in code modularity and architectural consistency over state-of-the-art benchmarks.
arXiv Detail & Related papers (2025-12-23T03:55:45Z) - What You See Is What It Does: A Structural Pattern for Legible Software [0.29434930072968585]
Software today is often "illegible" - lacking a direct correspondence between code and observed behavior.<n>A new structural pattern offers improved legibility and modularity.<n>A domain-specific language for synchronizations allows behavioral features to be expressed in a granular and declarative way.
arXiv Detail & Related papers (2025-08-20T08:03:00Z) - Data Dependency-Aware Code Generation from Enhanced UML Sequence Diagrams [54.528185120850274]
We propose a novel step-by-step code generation framework named API2Dep.<n>First, we introduce an enhanced Unified Modeling Language (UML) API diagram tailored for service-oriented architectures.<n>Second, recognizing the critical role of data flow, we introduce a dedicated data dependency inference task.
arXiv Detail & Related papers (2025-08-05T12:28:23Z) - ScreenCoder: Advancing Visual-to-Code Generation for Front-End Automation via Modular Multimodal Agents [40.697759330690815]
ScreenCoder is a modular multi-agent framework that decomposes the task into three interpretable stages: grounding, planning, and generation.<n>By assigning these distinct responsibilities to specialized agents, our framework achieves significantly higher robustness and fidelity than end-to-end approaches.<n>Our approach achieves state-of-the-art performance in layout accuracy, structural coherence, and code correctness.
arXiv Detail & Related papers (2025-07-30T16:41:21Z) - WGRAMMAR: Leverage Prior Knowledge to Accelerate Structured Decoding [58.1177179119881]
We introduce wgrammar, a lightweight decoding engine that integrates domain-aware simplification, constraint decomposition, and mask caching.<n> wgrammar achieves up to 250x speedup over existing systems.
arXiv Detail & Related papers (2025-07-22T17:13:47Z) - Type-Constrained Code Generation with Language Models [51.03439021895432]
We introduce a type-constrained decoding approach that leverages type systems to guide code generation.<n>For this purpose, we develop novel prefix automata and a search over inhabitable types, forming a sound approach to enforce well-typedness on LLM-generated code.<n>Our approach reduces compilation errors by more than half and significantly increases functional correctness in code synthesis, translation, and repair tasks.
arXiv Detail & Related papers (2025-04-12T15:03:00Z) - HiVeGen -- Hierarchical LLM-based Verilog Generation for Scalable Chip Design [24.46771930751068]
HiVeGen is a hierarchical Verilog generation framework that decomposes generation tasks into hierarchical submodules.<n> automatic Design Space Exploration (DSE) into hierarchy-aware prompt generation, introducing weight-based retrieval to enhance code reuse.<n>Real-time human-computer interaction to lower error-correction cost, significantly improving the quality of generated designs.
arXiv Detail & Related papers (2024-12-06T19:37:53Z) - CodeChain: Towards Modular Code Generation Through Chain of Self-revisions with Representative Sub-modules [51.82044734879657]
We propose CodeChain, a novel framework for inference that elicits modularized code generation through a chain of self-revisions.
We find that CodeChain can significantly boost both modularity as well as correctness of the generated solutions, achieving relative pass@1 improvements of 35% on APPS and 76% on CodeContests.
arXiv Detail & Related papers (2023-10-13T10:17:48Z) - Outline, Then Details: Syntactically Guided Coarse-To-Fine Code
Generation [61.50286000143233]
ChainCoder is a program synthesis language model that generates Python code progressively.
A tailored transformer architecture is leveraged to jointly encode the natural language descriptions and syntactically aligned I/O data samples.
arXiv Detail & Related papers (2023-04-28T01:47:09Z) - Contrastive Learning for Source Code with Structural and Functional
Properties [66.10710134948478]
We present BOOST, a novel self-supervised model to focus pre-training based on the characteristics of source code.
We employ automated, structure-guided code transformation algorithms that generate functionally equivalent code that looks drastically different from the original one.
We train our model in a way that brings the functionally equivalent code closer and distinct code further through a contrastive learning objective.
arXiv Detail & Related papers (2021-10-08T02:56:43Z)
This list is automatically generated from the titles and abstracts of the papers in this site.
This site does not guarantee the quality of this site (including all information) and is not responsible for any consequences.