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

翻译：自动化前端工程能大幅缩短开发周期并减少手动编码开销。尽管生成式人工智能在将设计转换为代码方面展现出潜力，但现有方案通常生成单一化脚本，无法原生支持如React、Vue或Angular等现代生态系统。此外，生成代码常存在模块化程度低的问题，导致维护困难。为弥补这一缺陷，我们提出模块化布局合成（MLS）——一种融合视觉理解与结构规范化的层次化框架。该框架首先通过视觉语义编码器将屏幕截图映射为序列化的树状拓扑结构，以捕捉核心布局层次。我们采用启发式去重与模式识别技术替代简单解析，从而隔离可复用区块并创建框架无关的范式。最后，基于约束的生成协议引导大语言模型合成具备严格类型与组件属性的生产级代码。评估结果表明，MLS在多个框架中显著超越现有基线，确保了卓越的代码可复用性与结构完整性。