让AI生成可复用的模块化前端代码，适配React等主流框架
Modular Layout Synthesis (MLS): Front-end Code via Structure Normalization and Constrained Generation
- 先提取界面布局树，再通过去重和模式识别拆分可复用组件
- 生成代码具备严格类型和组件属性，结构完整且可维护
- 适合需要快速生成高质量前端代码的开发团队
自动化前端工程能显著缩短开发周期并减少手动编码负担。尽管生成式AI在将设计转为代码方面展现出潜力，但现有方案常生成单一脚本，无法原生支持如React、Vue或Angular等现代生态。此外，生成代码模块性差，难以维护。为此，我们提出模块化布局合成（MLS），一种融合视觉理解与结构归一化的分层框架。首先，视觉语义编码器将屏幕截图映射为序列化树拓扑，捕捉关键布局层级；随后，通过启发式去重与模式识别，分离出可复用模块，形成框架无关的架构；最后，基于约束的生成协议引导大模型合成具备严格类型与组件属性的生产就绪代码。评估显示，MLS显著优于现有基线，在多个框架中均实现更高的代码复用率与结构完整性。
原文摘要 · Abstract (English)
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
Thank you to arXiv for use of its open access interoperability. PaperDance 不是 arXiv 官方产品；中文卡片由大模型生成，请以原文为准。