ScreenCoder: Avanzando en la Generación Visual-a-Código para la Automatización de Front-End mediante Agentes Multimodales Modulares

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

July 30, 2025

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

cs.AI

Resumen

La automatización de la transformación de diseños de interfaces de usuario (UI) en código front-end tiene un gran potencial para acelerar el desarrollo de software y democratizar los flujos de trabajo de diseño. Si bien los modelos de lenguaje de gran escala (LLMs) recientes han demostrado avances en la generación de texto a código, muchos enfoques existentes dependen únicamente de indicaciones en lenguaje natural, lo que limita su eficacia para capturar la disposición espacial y la intención del diseño visual. En contraste, el desarrollo de UI en la práctica es inherentemente multimodal, comenzando a menudo con bocetos o maquetas visuales. Para abordar esta brecha, presentamos un marco modular de múltiples agentes que realiza la generación de UI a código en tres etapas interpretables: fundamentación, planificación y generación. El agente de fundamentación utiliza un modelo de visión y lenguaje para detectar y etiquetar componentes de UI, el agente de planificación construye una disposición jerárquica utilizando conocimientos previos de ingeniería front-end, y el agente de generación produce código HTML/CSS mediante síntesis adaptativa basada en indicaciones. Este diseño mejora la robustez, interpretabilidad y fidelidad en comparación con los métodos de caja negra de extremo a extremo. Además, extendemos el marco a un motor de datos escalable que produce automáticamente pares de imagen-código a gran escala. Utilizando estos ejemplos sintéticos, afinamos y reforzamos un modelo de visión y lenguaje de código abierto, obteniendo mejoras notables en la comprensión de UI y la calidad del código. Experimentos extensivos demuestran que nuestro enfoque alcanza un rendimiento de vanguardia en precisión de disposición, coherencia estructural y corrección del código. Nuestro código está disponible públicamente en 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.