ScreenCoder: Avanzamento nella Generazione da Visivo a Codice per l'Automazione Front-End tramite Agenti Multimodali Modulari

ScreenCoder: Advancing Visual-to-Code Generation for Front-End Automation via Modular Multimodal Agents

July 30, 2025

Autori: Yilei Jiang, Yaozhi Zheng, Yuxuan Wan, Jiaming Han, Qunzhong Wang, Michael R. Lyu, Xiangyu Yue

cs.AI

Abstract

L'automazione della trasformazione dei progetti di interfaccia utente (UI) in codice front-end promette di accelerare significativamente lo sviluppo del software e di democratizzare i flussi di lavoro di progettazione. Sebbene i recenti modelli linguistici di grandi dimensioni (LLM) abbiano dimostrato progressi nella generazione di codice a partire da testo, molti approcci esistenti si basano esclusivamente su prompt in linguaggio naturale, limitando la loro efficacia nel catturare il layout spaziale e l'intento di progettazione visiva. Al contrario, lo sviluppo di UI nella pratica è intrinsecamente multimodale, spesso partendo da schizzi visivi o mockup. Per colmare questa lacuna, introduciamo un framework modulare multi-agente che esegue la generazione da UI a codice in tre fasi interpretabili: grounding, pianificazione e generazione. L'agente di grounding utilizza un modello visione-linguaggio per rilevare ed etichettare i componenti dell'interfaccia, l'agente di pianificazione costruisce un layout gerarchico utilizzando conoscenze pregresse di ingegneria front-end, e l'agente di generazione produce codice HTML/CSS tramite sintesi adattiva basata su prompt. Questo design migliora robustezza, interpretabilità e fedeltà rispetto ai metodi end-to-end a scatola chiusa. Inoltre, estendiamo il framework in un motore di dati scalabile che produce automaticamente coppie immagine-codice su larga scala. Utilizzando questi esempi sintetici, ottimizziamo e rafforziamo un modello visione-linguaggio open-source, ottenendo miglioramenti significativi nella comprensione dell'interfaccia e nella qualità del codice. Esperimenti estensivi dimostrano che il nostro approccio raggiunge prestazioni all'avanguardia in termini di accuratezza del layout, coerenza strutturale e correttezza del codice. Il nostro codice è reso disponibile pubblicamente all'indirizzo https://github.com/leigest519/ScreenCoder.

English

Automating the transformation of user interface (UI) designs into front-end code holds significant promise for accelerating software development and democratizing design workflows. While recent large language models (LLMs) have demonstrated progress in text-to-code generation, many existing approaches rely solely on natural language prompts, limiting their effectiveness in capturing spatial layout and visual design intent. In contrast, UI development in practice is inherently multimodal, often starting from visual sketches or mockups. To address this gap, we introduce a modular multi-agent framework that performs UI-to-code generation in three interpretable stages: grounding, planning, and generation. The grounding agent uses a vision-language model to detect and label UI components, the planning agent constructs a hierarchical layout using front-end engineering priors, and the generation agent produces HTML/CSS code via adaptive prompt-based synthesis. This design improves robustness, interpretability, and fidelity over end-to-end black-box methods. Furthermore, we extend the framework into a scalable data engine that automatically produces large-scale image-code pairs. Using these synthetic examples, we fine-tune and reinforce an open-source VLM, yielding notable gains in UI understanding and code quality. Extensive experiments demonstrate that our approach achieves state-of-the-art performance in layout accuracy, structural coherence, and code correctness. Our code is made publicly available at https://github.com/leigest519/ScreenCoder.