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

O artigo apresenta o Vision2Web, um benchmark hierárquico baseado em sites reais para avaliar agentes de codificação na geração de código a partir de interfaces visuais, reprodução de front-end e desenvolvimento full-stack, utilizando uma nova paradigma de verificação por agentes para identificar lacunas significativas no desempenho dos modelos atuais.

O essencial

Imagine que você pediu a um assistente de IA para construir uma casa inteira, desde o desenho do arquiteto até a instalação da eletricidade e encanamento. O Vision2Web é como um "teste de estresse" gigante e muito organizado criado para ver se esses assistentes de IA (chamados de agentes de codificação) realmente sabem construir essa casa ou se apenas sabem pintar uma parede.

Aqui está uma explicação simples do que os pesquisadores fizeram:

1. O Problema: "O Assistente que Sabe Pintar, mas não Constrói"

Atualmente, as IAs são ótimas em escrever pequenos pedaços de código ou corrigir erros simples (como trocar uma cor de botão). Mas, quando o pedido é complexo — como criar um site inteiro, com várias páginas, que funcione em celulares e computadores, e que tenha sistemas de login e carrinho de compras — elas tendem a falhar. Os testes antigos não conseguiam medir isso direito porque eram muito simples ou não olhavam para o visual.

2. A Solução: O "Vision2Web" (Um Treinamento em Três Níveis)

Os pesquisadores criaram um novo banco de testes chamado Vision2Web. Eles pensaram nele como uma escada com três degraus, onde cada degrau é mais difícil que o anterior:

• Degrau 1 (A Página Estática): É como pedir para a IA copiar um desenho de uma página da internet. Ela precisa fazer o código ficar idêntico ao desenho, tanto no computador quanto no celular. É só "pintar a parede".
• Degrau 2 (O Frontend Interativo): Agora, a IA precisa criar várias páginas que se conectam. Se você clica em "Sobre Nós", ela tem que ir para a página certa. É como construir a casa com portas e janelas que funcionam.
• Degrau 3 (O Site Completo Full-Stack): O nível mais difícil. A IA precisa criar o site inteiro, incluindo o "cérebro" (banco de dados), o sistema de login, o carrinho de compras e tudo o que acontece nos bastidores. É como construir a casa, instalar a luz, a água e garantir que a segurança funcione.

3. Como Eles Avaliam? (O "Inspector" e o "Crítico de Arte")

O grande diferencial deste trabalho é como eles verificam se o trabalho foi bem feito. Em vez de apenas olhar o código, eles usam dois "robôs avaliadores":

• O Agente "Mão na Massa" (Verificador de Funcionalidade): Imagine um robô que entra no site criado pela IA e tenta usá-lo como um humano. Ele clica em botões, tenta fazer login, preenche formulários e verifica se o sistema não quebra. Se o robô consegue navegar pelo site sem travar, a IA passa na prova de funcionalidade.
• O Juiz Visual (Baseado em IA Multimodal): Imagine um crítico de arte que compara o site final com o desenho original (o protótipo). Ele olha se as cores estão certas, se os textos estão no lugar e se o layout parece o mesmo. Ele dá uma nota de "beleza e fidelidade".

Essa combinação garante que o site não apenas pareça bonito, mas que funcione de verdade.

4. O Que Eles Descobriram? (As Surpresas)

Ao testar as IAs mais modernas do mundo (como Claude, GPT-5, Gemini, etc.), eles descobriram algumas coisas importantes:

• Quanto mais complexo, pior: As IAs são ótimas no Degrau 1 (copiar uma página), mas o desempenho cai drasticamente no Degrau 3 (criar um sistema completo).
• Celulares são difíceis: Mesmo as melhores IAs têm mais dificuldade em fazer o site ficar bonito no celular do que no computador grande.
• O "Cérebro" é o calcanhar de Aquiles: As IAs conseguem fazer a parte visual, mas falham muito quando precisam gerenciar dados, lembrar de informações (como o que está no carrinho de compras) ou conectar partes diferentes do sistema.
• Nenhuma IA é perfeita: Mesmo as IAs mais avançadas ainda não conseguem construir um site completo e complexo sozinhas, sem ajuda humana. Elas cometem erros de planejamento e perdem o rumo em tarefas longas.

Resumo da Ópera

O Vision2Web é um novo padrão de ouro para testar IAs que criam sites. Ele mostra que, embora as IAs tenham evoluído muito, ainda há um grande abismo entre "fazer um código bonito" e "construir um sistema complexo e funcional".

É como se tivéssemos IAs que são excelentes pintoras, mas ainda precisam de ajuda para se tornarem arquitetas e engenheiras completas. Este teste ajuda os cientistas a saber exatamente onde precisam melhorar essas ferramentas para o futuro.

Resumo técnico

Resumo Técnico: Vision2Web

1. O Problema

Apesar dos avanços significativos nos Grandes Modelos de Linguagem (LLMs) e na capacidade de agentes de codificação autônomos, a avaliação sistemática do desenvolvimento de websites complexos e de ponta a ponta permanece limitada. Os benchmarks existentes apresentam três lacunas principais:

• Formulação de Tarefa Limitada: Benchmarks como o SWE-Bench focam em edições de código incrementais e orientadas a problemas, falhando em avaliar capacidades de engenharia de software holísticas e de ponta a ponta.
• Cobertura Multimodal Desalinhada: A maioria dos benchmarks multimodais restringe-se à reprodução estática de páginas únicas (ex: Design2Code), ignorando cenários de desenvolvimento end-to-end que envolvem múltiplas páginas e lógica de backend.
• Mecanismos de Verificação Insuficientes: A avaliação de interações complexas e resultados de sistemas de longo prazo é difícil devido a definições de tarefas mal especificadas e procedimentos de verificação pouco restritos, resultando em baixa reprodutibilidade.

2. Metodologia

O Vision2Web foi desenvolvido para preencher essas lacunas através de uma abordagem estruturada e verificável.

A. Formulação de Tarefa Hierárquica
O benchmark organiza 193 tarefas em três níveis de complexidade crescente, permitindo a desconexão explícita das capacidades do agente:

1. Nível 1: Página Estática (Static Webpage): Avaliação da capacidade de interpretar protótipos de UI e gerar código executável responsivo (Desktop, Tablet, Mobile) que reproduza fielmente o layout e o estilo.
2. Nível 2: Frontend Interativo (Interactive Frontend): Geração de frontends multi-página com navegação coerente e consistência estrutural, exigindo raciocínio entre páginas e organização de componentes em contexto multimodal.
3. Nível 3: Website Full-Stack: Simulação de cenários de engenharia realistas, incluindo documentos de requisitos estruturados, gerenciamento de estados complexos, depuração integrada e entrega de sistemas completos (frontend + backend + banco de dados).

B. Construção do Dataset

• Fonte: Dados extraídos exclusivamente do conjunto de validação C4 (evitando vazamento de sites populares).
• Pipeline de Filtragem: Um processo de três estágios (Avaliação Estrutural, Triagem de Conteúdo via VLM e Revisão Manual) refinou o corpus para garantir qualidade, diversidade e definição clara de tarefas.
• Estatísticas: O dataset contém 193 tarefas, 918 imagens de protótipos e 1.255 casos de teste, cobrindo 4 categorias principais e 16 subcategorias.

C. Paradigma de Verificação Baseado em Fluxo de Trabalho (Workflow-Based Agent Verification)
Para superar a instabilidade de agentes autônomos em testes não estruturados, o Vision2Web introduz um paradigma de verificação que combina:

1. Fluxos de Trabalho Estruturados: As tarefas de teste são formalizadas como grafos de dependência direcionados, onde nós representam subprocedimentos de verificação autônomos. Isso evita a acumulação de erros em cadeias longas de interação.
2. Dois Verificadores Complementares:
   • Verificador de Agente GUI (Funcional): Um agente guiado por fluxos de trabalho executa ações específicas (navegação, preenchimento de formulários) e valida critérios lógicos/estatais. Gera a Pontuação Funcional (FS).
   • Juiz Baseado em VLM (Visual): Um modelo de linguagem visual compara a página renderizada com o protótipo de referência em nível de componente, atribuindo pontuações de fidelidade visual. Gera a Pontuação Visual (VS).

3. Principais Contribuições

1. Design de Tarefa Hierárquico: A primeira avaliação sistemática que separa as capacidades de agentes de codificação desde a compreensão visual granular até a construção de sistemas holísticos.
2. Dados Multimodais Realistas: Um benchmark de grande escala baseado em websites reais com especificações explícitas, permitindo avaliação sob restrições multimodais realistas.
3. Verificação Reproduzível: Um paradigma de avaliação agnóstico à implementação que combina fluxos de trabalho estruturados com execução de agentes, permitindo a medição objetiva de correção funcional e fidelidade visual.

4. Resultados Experimentais

O benchmark foi utilizado para avaliar 8 modelos multimodais de última geração (incluindo Claude-Opus-4.5, GPT-5, Gemini-3-Pro, Qwen3-VL) em dois frameworks de agentes (OpenHands e Claude Code).

Descobertas Chave:

• Degradação com Complexidade: O desempenho cai consistentemente à medida que a complexidade aumenta. Mesmo os melhores modelos (ex: Gemini-3-Pro) têm alta precisão em páginas estáticas, mas sofrem drasticamente em tarefas full-stack (ex: queda de ~63% na pontuação visual para ~11% em full-stack).
• Desafios de Dispositivos e Visuais: O desempenho degrada-se em dispositivos menores (mobile/tablet) e em protótipos visualmente densos, indicando limitações no raciocínio sobre entradas visuais complexas.
• Desempenho do Modelo: O Claude-Opus-4.5 demonstrou o desempenho mais robusto em todos os níveis, superando significativamente outros modelos em tarefas complexas. Modelos como o Seed-1.8-VL e Qwen falharam completamente em tarefas full-stack.
• Impacto do Framework: A escolha do framework de agente influencia o desempenho; o OpenHands tendeu a performar melhor que o Claude Code para a maioria dos modelos (exceto os da Anthropic).
• Falhas Específicas:
  • Nível Estático: Falhas na alinhamento visual fino e tratamento de ativos.
  • Nível Interativo: Inconsistências visuais e quebras de navegação entre páginas.
  • Nível Full-Stack: Falhas no planejamento de longo prazo, gerenciamento de estado persistente e coordenação entre módulos, levando a falhas de implantação ou erros funcionais generalizados.

5. Significado e Impacto

O Vision2Web estabelece um novo padrão para a avaliação de agentes de codificação multimodais. Os resultados indicam que o alto desempenho em tarefas isoladas não se traduz automaticamente para a construção de sistemas end-to-end. O benchmark revela lacunas fundamentais no raciocínio cruzado de modalidades, no planejamento de longo prazo e na coordenação multi-página.

A proposta de verificação baseada em fluxo de trabalho oferece uma solução prática para o problema da reprodutibilidade na avaliação de software gerado por IA, permitindo diagnósticos precisos de falhas. Este trabalho aponta a necessidade de futuras pesquisas focadas em designs de tarefas hierárquicas progressivas e paradigmas de avaliação autônoma rigorosos para avançar a inteligência dos agentes de desenvolvimento de software.