ScreenCoder: Vooruitgang in Visueel-naar-Code Generatie voor Front-End Automatisering via Modulaire Multimodale Agents

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

July 30, 2025

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

cs.AI

Samenvatting

Het automatiseren van de transformatie van user interface (UI)-ontwerpen naar front-end code biedt aanzienlijke mogelijkheden om softwareontwikkeling te versnellen en ontwerpworkflows te democratiseren. Hoewel recente grote taalmodellen (LLMs) vooruitgang hebben geboekt in tekst-naar-code generatie, vertrouwen veel bestaande benaderingen uitsluitend op natuurlijke taalprompts, wat hun effectiviteit beperkt in het vastleggen van ruimtelijke lay-out en visueel ontwerpintentie. In tegenstelling hiermee is UI-ontwikkeling in de praktijk inherent multimodaal, vaak beginnend vanuit visuele schetsen of mockups. Om deze kloof te overbruggen, introduceren we een modulair multi-agent framework dat UI-naar-code generatie uitvoert in drie interpreteerbare fasen: grounding, planning en generatie. De grounding agent gebruikt een vision-language model om UI-componenten te detecteren en te labelen, de planning agent construeert een hiërarchische lay-out met behulp van front-end engineering priors, en de generatie agent produceert HTML/CSS-code via adaptieve prompt-gebaseerde synthese. Dit ontwerp verbetert robuustheid, interpreteerbaarheid en trouw ten opzichte van end-to-end black-box methoden. Bovendien breiden we het framework uit naar een schaalbare data-engine die automatisch grootschalige beeld-code paren produceert. Met behulp van deze synthetische voorbeelden fine-tunen en versterken we een open-source VLM, wat aanzienlijke verbeteringen oplevert in UI-begrip en codekwaliteit. Uitgebreide experimenten tonen aan dat onze aanpak state-of-the-art prestaties bereikt in lay-outnauwkeurigheid, structurele samenhang en codecorrectheid. Onze code is publiekelijk beschikbaar gemaakt op 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.