NeuroFront: A Hierarchical Neuro-Symbolic Multi-framework for Semantic-Aware Frontend Code Generation

LiHan, Rui Zhang, Bin Wang, fen Huang

Abstract:

The automatic derivation of runnable applications from UI screenshots is a persistent challenge in engineering. Although MLLMs have advanced static web generation, their application to complex multis such as Vue, React, and Angular remains unstable. Standard prompting strategies often yield substantial performance deficits due to strict multi-framework specific syntax requirements.
While Large Multimodal Models (LMMs) have demonstrated remarkable capabilities in translating visual designs into executable code, existing approaches often struggle with maintaining semantic consistency in complex, interactive user interfaces and fail to capture the hierarchical granularity of modern frontend multi-frameworks. To address these challenges, we introduce NeuroFront, a novel neuro-symbolic multi-framework that integrates a hierarchical vision-encoder with a syntax-constrained decoder to generate production-ready frontend code from static design mockups. Unlike direct image-to-text translation, our method utilizes a latent intermediate representation that aligns visual layout structures with the Document Object Model (DOM) tree, reinforced by a self-correcting feedback loop that iteratively refines the generated code based on rendered visual fidelity and functional logic compliance. Extensive experiments on the Design2Code-V2 benchmark demonstrate that NeuroFront achieves state-of-the-art performance, surpassing current proprietary models by 14\% in structural accuracy while significantly reducing hallucinated CSS attributes. Furthermore, our detailed error analysis reveals that NeuroFront reduces layout-breaking syntax errors by 65\% compared to GPT-4V, paving the way for fully autonomous frontend development agents that effectively bridge the gap between design intent and implementation.