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

Automatiser la transformation des maquettes d’interface utilisateur (UI) en code front-end représente un potentiel considérable pour accélérer le développement logiciel et démocratiser les workflows de conception. Bien que les modèles linguistiques massifs (LLM) récents aient montré des progrès dans la génération de code à partir de texte, de nombreuses approches existantes s’appuient exclusivement sur des promps en langage naturel, ce qui limite leur efficacité pour capturer la disposition spatiale et l’intention visuelle de la conception. À l’inverse, en pratique, le développement d’interfaces utilisateur est intrinsèquement multimodal, souvent initié à partir de croquis visuels ou de maquettes. Pour combler cet écart, nous proposons un cadre modulaire à agents multiples, qui réalise la génération UI-to-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 UI, l’agent de planification construit une disposition hiérarchique en s’appuyant sur des connaissances préalables en ingénierie front-end, et l’agent de génération produit du code HTML/CSS par synthèse adaptative basée sur des promps. Ce design améliore la robustesse, l’interprétabilité et la fidélité par rapport aux méthodes monolithiques à boîte noire. Par ailleurs, nous étendons ce cadre en un moteur de données évolutif, capable de produire automatiquement de grandes quantités de paires image-code. À l’aide de ces exemples synthétiques, nous fine-tunons et renforçons un modèle vision-langage open-source, obtenant des gains significatifs en compréhension des interfaces et en qualité du code. Des expériences étendues démontrent que notre approche atteint un niveau d’excellence dans la précision de la disposition, la cohérence structurelle et la correction du code. Le code source est mis à disposition publiquement à l’adresse suivante : https://github.com/leigest519/ScreenCoder.