ScreenCoder: Fortschrittliche Visual-zu-Code-Generierung für Front-End-Automatisierung durch modulare multimodale Agenten

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

July 30, 2025

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

cs.AI

papers.abstract

Die Automatisierung der Transformation von Benutzeroberflächendesigns (UI) in Frontend-Code birgt erhebliches Potenzial, um die Softwareentwicklung zu beschleunigen und Design-Workflows zu demokratisieren. Obwohl aktuelle große Sprachmodelle (LLMs) Fortschritte bei der Text-zu-Code-Generierung gezeigt haben, stützen sich viele bestehende Ansätze ausschließlich auf natürliche Sprachprompts, was ihre Effektivität bei der Erfassung von räumlichen Layouts und visuellen Designabsichten einschränkt. Im Gegensatz dazu ist die UI-Entwicklung in der Praxis inhärent multimodal und beginnt oft mit visuellen Skizzen oder Mockups. Um diese Lücke zu schließen, führen wir ein modulares Multi-Agenten-Framework ein, das die UI-zu-Code-Generierung in drei interpretierbaren Stufen durchführt: Verankerung, Planung und Generierung. Der Verankerungsagent verwendet ein Vision-Sprache-Modell, um UI-Komponenten zu erkennen und zu beschriften, der Planungsagent konstruiert ein hierarchisches Layout unter Verwendung von Frontend-Engineering-Prioritäten, und der Generierungsagent erzeugt HTML/CSS-Code durch adaptive Prompt-basierte Synthese. Dieser Ansatz verbessert die Robustheit, Interpretierbarkeit und Treue im Vergleich zu end-to-end Black-Box-Methoden. Darüber hinaus erweitern wir das Framework zu einer skalierbaren Daten-Engine, die automatisch groß angelegte Bild-Code-Paare erzeugt. Mit diesen synthetischen Beispielen feintunen und verstärken wir ein Open-Source-VLM, was zu bemerkenswerten Verbesserungen im UI-Verständnis und der Codequalität führt. Umfangreiche Experimente zeigen, dass unser Ansatz Spitzenleistungen in Bezug auf Layoutgenauigkeit, strukturelle Kohärenz und Codekorrektheit erzielt. Unser Code ist öffentlich unter https://github.com/leigest519/ScreenCoder verfügbar.

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.