WebVIA: Un Marco de Agentes Visiolingüísticos Basado en Web para la Generación Interactiva y Verificable de Interfaces de Usuario a 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
Resumen
El desarrollo de interfaces de usuario (UI) requiere traducir maquetas de diseño a código funcional, un proceso que sigue siendo repetitivo e intensivo en mano de obra. Si bien los Modelos de Visión y Lenguaje (VLMs) recientes automatizan la generación de UI-a-Código, solo generan diseños estáticos en HTML/CSS/JavaScript carentes de interactividad. Para abordar este problema, proponemos WebVIA, el primer marco agencial para la generación y validación interactiva de UI-a-Código. El marco consta de tres componentes: 1) un agente de exploración para capturar capturas de pantalla de la UI en múltiples estados; 2) un modelo UI2Code que genera código interactivo ejecutable; 3) un módulo de validación que verifica la interactividad. Los experimentos demuestran que WebVIA-Agent logra una exploración de la UI más estable y precisa que los agentes de propósito general (por ejemplo, Gemini-2.5-Pro). Además, nuestros modelos WebVIA-UI2Code ajustados finamente exhiben mejoras sustanciales en la generación de código HTML/CSS/JavaScript ejecutable e interactivo, superando a sus contrapartes base en puntos de referencia tanto interactivos como estáticos de UI2Code. Nuestro código y modelos están disponibles en 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}.