ScreenCoder : Faire progresser la génération visuelle vers le code pour l'automatisation front-end grâce à des agents multimodaux modulaires

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

L'automatisation de la transformation des conceptions d'interface utilisateur (UI) en code front-end présente un potentiel significatif pour accélérer le développement logiciel et démocratiser les flux de travail de conception. Bien que les grands modèles de langage (LLMs) récents aient montré des progrès dans la génération de texte à code, de nombreuses approches existantes reposent uniquement sur des invites en langage naturel, limitant ainsi leur efficacité à capturer la disposition spatiale et l'intention visuelle de la conception. En revanche, le développement d'interfaces utilisateur en pratique est intrinsèquement multimodal, commençant souvent par des esquisses visuelles ou des maquettes. Pour combler cette lacune, nous introduisons un cadre modulaire multi-agents qui effectue la génération UI-à-code en trois étapes interprétables : ancrage, planification et génération. L'agent d'ancrage utilise un modèle vision-langage pour détecter et étiqueter les composants de l'interface utilisateur, l'agent de planification construit une disposition hiérarchique en utilisant des connaissances préalables en ingénierie front-end, et l'agent de génération produit du code HTML/CSS via une synthèse adaptative basée sur des invites. Cette conception améliore la robustesse, l'interprétabilité et la fidélité par rapport aux méthodes boîte noire de bout en bout. De plus, nous étendons ce cadre en un moteur de données scalable qui produit automatiquement des paires image-code à grande échelle. En utilisant ces exemples synthétiques, nous affinons et renforçons un modèle vision-langage open-source, obtenant des gains notables dans la compréhension des interfaces utilisateur et la qualité du code. Des expériences approfondies démontrent que notre approche atteint des performances de pointe en termes de précision de la disposition, de cohérence structurelle et de correction du code. Notre code est rendu public à l'adresse 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.