VSA:Visual-Structural Alignment for UI-to-Code

TL;DR

VSA introduces a multi-stage approach combining visual-structural alignment, pattern matching, and schema-driven synthesis to generate organized, component-based UI code from visual inputs, improving modularity and maintainability.

Contribution

The paper presents a novel multi-stage framework that transforms visual UI designs into structured, component-oriented code, addressing limitations of prior unstructured code generation methods.

Findings

Significantly improves code modularity and architecture consistency.

Outperforms existing methods on benchmark datasets.

Produces type-safe, reusable UI components suitable for production.

Abstract

The automation of user interface development has the potential to accelerate software delivery by mitigating intensive manual implementation. Despite the advancements in Large Multimodal Models for design-to-code translation, existing methodologies predominantly yield unstructured, flat codebases that lack compatibility with component-oriented libraries such as React or Angular. Such outputs typically exhibit low cohesion and high coupling, complicating long-term maintenance. In this paper, we propose \textbf{VSA (VSA)}, a multi-stage paradigm designed to synthesize organized frontend assets through visual-structural alignment. Our approach first employs a spatial-aware transformer to reconstruct the visual input into a hierarchical tree representation. Moving beyond basic layout extraction, we integrate an algorithmic pattern-matching layer to identify recurring UI motifs and encapsulate them into modular templates. These templates are then processed via a schema-driven synthesis engine, ensuring the Large Language Model generates type-safe, prop-drilled components suitable for production environments. Experimental results indicate that our framework yields a substantial improvement in code modularity and architectural consistency over state-of-the-art benchmarks, effectively bridging the gap between raw pixels and scalable software engineering.