WebVIA: Uma Estrutura Agente de Visão e Linguagem Baseada na Web para Geração Interativa e Verificável de UI para Código
WebVIA: A Web-based Vision-Language Agentic Framework for Interactive and Verifiable UI-to-Code Generation
November 9, 2025
Autores: Mingde Xu, Zhen Yang, Wenyi Hong, Lihang Pan, Xinyue Fan, Yan Wang, Xiaotao Gu, Bin Xu, Jie Tang
cs.AI
Resumo
O desenvolvimento de interface de utilizador (UI) requer a tradução de maquetes de design para código funcional, um processo que permanece repetitivo e laborioso. Embora os Modelos de Visão e Linguagem (VLMs) recentes automatizem a geração de UI-para-Código, eles geram apenas layouts estáticos em HTML/CSS/JavaScript, carecendo de interatividade. Para resolver esta limitação, propomos o WebVIA, o primeiro framework agentivo para geração e validação interativa de UI-para-Código. O framework é composto por três componentes: 1) um agente de exploração para capturar capturas de ecrã de UI em múltiplos estados; 2) um modelo UI2Code que gera código interativo executável; 3) um módulo de validação que verifica a interatividade. Experiências demonstram que o WebVIA-Agent alcança uma exploração de UI mais estável e precisa do que agentes de propósito geral (por exemplo, Gemini-2.5-Pro). Adicionalmente, os nossos modelos WebVIA-UI2Code, fine-tuned, exibem melhorias substanciais na geração de código HTML/CSS/JavaScript executável e interativo, superando as suas contrapartes base em benchmarks tanto de UI2Code interativo como estático. O nosso código e modelos estão disponíveis em https://zheny2751-dotcom.github.io/webvia.github.io/{https://webvia.github.io}.
English
User interface (UI) development requires translating design mockups into functional code, a process that remains repetitive and labor-intensive. While recent Vision-Language Models (VLMs) automate UI-to-Code generation, they generate only static HTML/CSS/JavaScript layouts lacking interactivity. To address this, we propose WebVIA, the first agentic framework for interactive UI-to-Code generation and validation. The framework comprises three components: 1) an exploration agent to capture multi-state UI screenshots; 2) a UI2Code model that generates executable interactive code; 3) a validation module that verifies the interactivity. Experiments demonstrate that WebVIA-Agent achieves more stable and accurate UI exploration than general-purpose agents (e.g., Gemini-2.5-Pro). In addition, our fine-tuned WebVIA-UI2Code models exhibit substantial improvements in generating executable and interactive HTML/CSS/JavaScript code, outperforming their base counterparts across both interactive and static UI2Code benchmarks. Our code and models are available at https://zheny2751-dotcom.github.io/webvia.github.io/{https://webvia.github.io}.