ScreenCoder: Avançando na Geração de Código a partir de Visual para Automação de Front-End por meio de Agentes Multimodais 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

Resumo

A automação da transformação de designs de interface do usuário (UI) em código front-end apresenta um potencial significativo para acelerar o desenvolvimento de software e democratizar fluxos de trabalho de design. Embora modelos de linguagem de grande escala (LLMs) recentes tenham demonstrado avanços na geração de código a partir de texto, muitas abordagens existentes dependem exclusivamente de prompts em linguagem natural, limitando sua eficácia na captura de layouts espaciais e intenções de design visual. Em contraste, o desenvolvimento de UI na prática é inerentemente multimodal, frequentemente começando com esboços visuais ou mockups. Para abordar essa lacuna, introduzimos uma estrutura modular de multiagentes que realiza a geração de UI para código em três estágios interpretáveis: fundamentação, planejamento e geração. O agente de fundamentação utiliza um modelo de visão e linguagem para detectar e rotular componentes de UI, o agente de planejamento constrói um layout hierárquico usando conhecimentos prévios de engenharia front-end, e o agente de geração produz código HTML/CSS por meio de síntese adaptativa baseada em prompts. Esse design melhora a robustez, interpretabilidade e fidelidade em comparação com métodos de caixa-preta de ponta a ponta. Além disso, estendemos a estrutura para um motor de dados escalável que produz automaticamente pares de imagem-código em grande escala. Utilizando esses exemplos sintéticos, ajustamos e reforçamos um VLM de código aberto, obtendo ganhos notáveis na compreensão de UI e na qualidade do código. Experimentos extensivos demonstram que nossa abordagem alcança desempenho de última geração em precisão de layout, coerência estrutural e correção de código. Nosso código está disponível publicamente em 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.