Vision2Web: A Hierarchical Benchmark for Visual Website Development with Agent Verification

Each language version is independently generated for its own context, not a direct translation.

¡Hola! Imagina que quieres construir una casa. En el pasado, los "robots programadores" (las Inteligencias Artificiales) eran muy buenos poniendo ladrillos individuales o arreglando una ventana rota. Pero, ¿podrían diseñar, construir y amueblar una casa completa desde cero, asegurándose de que la cocina se vea exactamente como el dibujo del arquitecto y que las puertas funcionen?

El paper que me has compartido, "Vision2Web", es como un examen de conducir muy estricto para estos robots, pero en lugar de conducir un coche, tienen que construir sitios web completos basándose en dibujos.

Aquí te lo explico con analogías sencillas:

1. El Problema: ¿Por qué necesitamos este examen?

Antes, los exámenes para estas IAs eran como pedirles que "arreglen un grifo que gotea". Es útil, pero no nos dice si pueden construir todo el baño, la tubería y la decoración. Además, nadie les pedía que el baño se viera igual que el plano original, solo que funcionara.

Los creadores de Vision2Web dijeron: "Oye, si queremos que estas IAs sean verdaderos arquitectos digitales, necesitamos un examen que pruebe si pueden leer un plano (una imagen), entender las instrucciones escritas y construir el edificio entero, desde la fachada hasta el sistema de fontanería".

2. La Prueba: Tres Niveles de Dificultad

El examen está dividido en tres niveles, como un videojuego que se vuelve más difícil:

Nivel 1: La Foto Estática (La Fachada).
- La tarea: Tienes un dibujo de cómo se ve una página web en un ordenador, una tablet y un móvil. La IA debe dibujar esa página exactamente igual.
- El reto: ¿Puede la IA copiar los colores, las formas y el tamaño sin que se vea "feo" o desordenado?
Nivel 2: El Frontend Interactivo (La Casa con Puertas).
- La tarea: Ahora no es solo una foto. Tienes varios dibujos y la IA debe conectarlos. Si haces clic en "Inicio", debe llevarte a "Contacto". Si haces clic en un botón, debe pasar algo.
- El reto: ¿Puede la IA entender que la página A y la página B son hermanas y deben caminar juntas? ¿Puede hacer que los botones funcionen?
Nivel 3: El Sitio Web Completo (La Ciudad Entera).
- La tarea: Aquí es donde se pone serio. La IA recibe un plano complejo, una lista de requisitos (ej: "necesito un sistema de login, una base de datos y un carrito de compras") y debe construir todo el sistema, incluyendo la parte oculta (el servidor).
- El reto: ¿Puede la IA mantener todo el sistema funcionando sin que se caiga? ¿Puede recordar lo que pasó hace 10 minutos (como si tuvieras una memoria a largo plazo)?

3. El Árbitro: ¿Cómo sabemos si aprobaron?

Aquí está la parte más ingeniosa. En lugar de un humano revisando todo (lo cual tardaría años), usan un sistema de dos árbitros:

El Árbitro "Ojos de Águila" (El VLM): Es una IA especializada en ver. Compara el sitio web que construyó el robot con el dibujo original. Si el botón rojo está un poco a la izquierda, el árbitro lo nota y baja la nota. Es como un inspector de calidad que revisa la estética.
El Árbitro "Manitas" (El Agente GUI): Es un robot que actúa como un usuario real. Entra al sitio, hace clic en los botones, intenta comprar cosas, intenta registrarse. Si el botón no funciona o la página se rompe, el árbitro lo anota. Es como un cliente que prueba si la casa tiene fugas de agua.

4. Los Resultados: ¿Cómo les fue a los robots?

Después de poner a los mejores robots del mundo (como Claude, GPT-5, Gemini) a pasar este examen, descubrieron algunas cosas interesantes:

Son buenos en lo fácil, pero se atascan en lo difícil: Si les pides una página estática, lo hacen bastante bien. Pero si les pides construir un sistema completo con bases de datos y muchas páginas conectadas, se confunden mucho. Es como si un arquitecto pudiera dibujar una casa bonita, pero cuando intenta poner los cimientos y la electricidad, todo se derrumba.
El tamaño importa: Funcionan mejor en pantallas grandes (ordenadores) que en pantallas pequeñas (móviles). Es como si les costara más trabajo ajustar los muebles a una habitación pequeña.
El "cerebro" no es suficiente: Tener un modelo de lenguaje muy inteligente no garantiza que sepa construir un sitio web complejo. Necesitan aprender a planificar a largo plazo y a coordinar muchas partes a la vez.

En resumen

Vision2Web es como un simulador de vuelo para los programadores de IA. Nos dice que, aunque estos robots son muy inteligentes, todavía les falta madurez para construir edificios digitales complejos por su cuenta. No son arquitectos expertos todavía, son más bien aprendices que necesitan mucha más práctica en planificación y coordinación.

Este examen ayuda a los científicos a saber exactamente dónde fallan los robots para poder mejorarlos y, algún día, tener asistentes que realmente puedan construirnos una web completa con solo decirles "hazme una tienda online".

Each language version is independently generated for its own context, not a direct translation.

A continuación presento un resumen técnico detallado del artículo "Vision2Web: A Hierarchical Benchmark for Visual Website Development with Agent Verification", estructurado según los puntos solicitados.

1. El Problema

A pesar de los avances recientes en los Grandes Modelos de Lenguaje (LLM) que han mejorado las capacidades de los agentes de codificación, la evaluación sistemática del desarrollo de sitios web complejos y de extremo a extremo sigue siendo limitada. Los benchmarks existentes presentan tres deficiencias principales:

Formulación de tareas limitada: Benchmarks como SWE-Bench se centran en ediciones de código incrementales y basadas en problemas específicos, fallando al evaluar habilidades de ingeniería de software holísticas y de extremo a extremo.
Cobertura multimodal desalineada: Los benchmarks multimodales actuales suelen restringirse a la reproducción estática de páginas web (UI-to-Code), careciendo de escenarios de desarrollo de sitios web completos que requieran interacción y lógica de backend.
Mecanismos de verificación insuficientes: La evaluación de sistemas complejos y de largo alcance es difícil de reproducir debido a definiciones de tareas poco especificadas y procedimientos de verificación que no están suficientemente restringidos, lo que lleva a comportamientos inestables de los agentes.

2. Metodología

Para abordar estas brechas, los autores introducen Vision2Web, un benchmark jerárquico diseñado para evaluar agentes de codificación multimodal en el desarrollo de sitios web visuales.

A. Diseño Jerárquico de Tareas

El benchmark organiza las tareas en tres niveles progresivos de dificultad, permitiendo la desvinculación de capacidades:

Nivel 1: Páginas Web Estáticas: Evalúa la capacidad de interpretar prototipos de UI y generar código ejecutable responsivo (escritorio, tablet, móvil).
Nivel 2: Frontend Interactivo: Requiere generar un frontend multi-página totalmente interactivo con coherencia estructural y flujos de navegación lógicos, basándose en múltiples prototipos y descripciones textuales.
Nivel 3: Sitio Web Full-Stack: Simula escenarios de ingeniería realistas, donde el agente debe interpretar documentos de requisitos, gestionar estados de aplicación complejos, realizar depuración integrada y entregar sistemas completos (frontend + backend + base de datos).

B. Construcción del Dataset

Fuente de Datos: Las tareas se extraen exclusivamente del conjunto de validación de C4 (Common Crawl) para evitar fugas de datos de sitios web populares conocidos.
Pipeline de Filtrado: Se utiliza un proceso de tres etapas:
1. Evaluación Estructural: Análisis de propiedades a nivel DOM (profundidad del árbol, distribución de etiquetas).
2. Filtrado de Contenido: Uso de VLM (Modelos de Lenguaje Visuales) para puntuar la riqueza funcional y la coherencia visual.
3. Revisión Manual: Anotadores expertos verifican la consistencia, dificultad y diversidad.
Estadísticas: El benchmark consta de 193 tareas (100 estáticas, 66 frontend, 27 full-stack) divididas en 16 subcategorías, con 918 imágenes de prototipos y 1,255 casos de prueba.

C. Paradigma de Verificación Basado en Flujos de Trabajo (Workflow-Based Agent Verification)

Para garantizar una evaluación reproducible y fiable, se propone un sistema de verificación dual:

Verificador de Agente GUI (Funcional): Un agente autónomo (basado en WebVoyager) ejecuta flujos de trabajo diseñados por expertos. Estos flujos son grafos dirigidos donde los nodos representan sub-procedimientos de verificación. El agente sigue acciones guiadas ( $A_i$ ) para validar la corrección funcional, reportando un Puntaje Funcional (FS).
Juez Basado en VLM (Visual): Un modelo VLM especializado compara las páginas renderizadas con los prototipos de referencia a nivel de componentes, asignando puntuaciones de fidelidad visual. Esto genera el Puntaje Visual (VS).

Anotación Asistida por Agentes: Se utiliza una estrategia "humano-en-el-bucle" donde expertos definen flujos de alto nivel y Claude Code refina y expande estos flujos en secuencias de interacción ejecutables.

3. Contribuciones Clave

Diseño de Tareas Jerárquico: La primera formulación que descompone sistemáticamente las capacidades del agente en etapas de desarrollo de sitios web (estático $\to$ interactivo $\to$ full-stack).
Datos Multimodales Realistas: Un benchmark a gran escala basado en sitios web reales con especificaciones explícitas, superando las limitaciones de las tareas sintéticas.
Verificación de Agentes Reproducible: Un paradigma de evaluación agnóstico a la implementación que combina flujos de trabajo estructurados con la ejecución de agentes, permitiendo medir simultáneamente la corrección funcional y la fidelidad visual sin sacrificar la flexibilidad.

4. Resultados Experimentales

Los autores evaluaron 8 modelos multimodales de última generación (incluyendo Claude-Opus-4.5, GPT-5, Gemini-3-Pro, Qwen3-VL) en dos frameworks de agentes (OpenHands y Claude Code).

Degradación por Complejidad: El rendimiento cae consistentemente a medida que aumenta la complejidad de la tarea. Los modelos que funcionan bien en páginas estáticas (ej. Gemini-3-Pro con ~52 puntos en escritorio) caen drásticamente en tareas full-stack (VS ~11.7, FS ~22.6).
Limitaciones en Dispositivos Móviles: El rendimiento disminuye sistemáticamente al adaptarse a formularios más pequeños (tablets y móviles) y en imágenes de prototipos más densas.
Mejor Desempeño: Claude-Opus-4.5 demostró ser el modelo más robusto, superando a los demás en todas las categorías, aunque aún muestra limitaciones en tareas full-stack complejas.
Impacto del Framework: La elección del framework de agente influye significativamente; OpenHands generalmente obtuvo mejores resultados que Claude Code para la mayoría de los modelos (excepto los propios de Claude).
Categorías de Fallo:
- Estáticas: Fallos en alineación visual fina y manejo de activos.
- Interactivas: Dificultad para mantener coherencia visual y funcional entre múltiples páginas.
- Full-Stack: Fallos dominantes en la planificación a largo plazo, gestión de estado persistente y coordinación entre módulos (especialmente en plataformas SaaS).
Validación del Verificador: El verificador de agente GUI alcanzó un 87.2% de acuerdo con anotaciones humanas, y el juez VLM mostró una correlación de Spearman de 0.66 con preferencias humanas, validando la fiabilidad de la métrica.

5. Significado e Impacto

Vision2Web establece un nuevo estándar para la evaluación de agentes de codificación multimodal. Sus hallazgos revelan que el alto rendimiento en tareas aisladas no se traduce automáticamente en la capacidad de construir sistemas completos de extremo a extremo.

El benchmark destaca deficiencias críticas en:

La coordinación multi-página.
El razonamiento sobre estados persistentes.
La planificación de tareas de largo alcance.

Este trabajo impulsa la investigación hacia diseños de tareas progresivamente desafiantes y paradigmas de evaluación autónoma rigurosos, esenciales para el avance real de la ingeniería de software asistida por IA. Además, al estar construido íntegramente con recursos públicos y sin datos sensibles, ofrece un marco ético y reproducible para la comunidad académica.