ScreenCoder: Fortschritt bei der visuell-zu-Code-Generierung für die Front-End-Automatisierung durch modulare multimodale Agenten

Die Automatisierung der Umwandlung von Benutzeroberflächen-(UI-)Entwürfen in Frontend-Code verspricht erhebliche Fortschritte bei der Beschleunigung der Softwareentwicklung und der Democratization von Design-Workflows. Während neuere große Sprachmodelle (LLMs) Fortschritte bei der Text-zu-Code-Generierung gezeigt haben, basieren viele bestehende Ansätze ausschließlich auf natürlichsprachlichen Prompting, was ihre Effektivität bei der Erfassung von räumlichen Layouts und visuellen Gestaltungsvorstellungen 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, stellen wir einen modularen Multi-Agenten-Framework vor, der die UI-zu-Code-Generierung in drei interpretierbaren Phasen durchführt: Grundlegung, Planung und Generierung. Der Grundlegungs-Agent verwendet ein Vision-Sprache-Modell, um UI-Komponenten zu erkennen und zu kennzeichnen, der Planungs-Agent erstellt mithilfe von Frontend-Ingenieur-Prinzipien eine hierarchische Layoutstruktur, und der Generierungs-Agent erzeugt HTML/CSS-Code mittels adaptiver, prompt-basierter Synthese. Diese Architektur verbessert Robustheit, Interpretierbarkeit und Treue gegenüber end-to-end-Black-Box-Methoden. Darüber hinaus erweitern wir den Rahmen zu einer skalierbaren Daten-Engine, die automatisch große Mengen an Bild-Code-Paaren generiert. Mit diesen synthetischen Beispielen feinjustieren und stärken wir ein Open-Source-Vision-Sprache-Modell, was zu signifikanten Verbesserungen bei der UI-Verständnis und der Codequalität führt. Umfangreiche Experimente zeigen, dass unser Ansatz führende Leistung in Bezug auf Layoutgenauigkeit, strukturelle Kohärenz und Codekorrektheit erzielt. Unser Quellcode ist öffentlich unter https://github.com/leigest519/ScreenCoder verfügbar.