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

Dit paper introduceert Vision2Web, een hiërarchisch benchmark voor visuele webontwikkeling dat 193 taken omvat en een nieuw agent-verificatiekader voorstelt om de prestaties van coderingsagenten te evalueren, waarbij blijkt dat zelfs de meest geavanceerde modellen nog moeite hebben met full-stack ontwikkeling.

De kern

Stel je voor dat je een architect bent die een compleet huis moet bouwen, maar je hebt geen blauwdrukken, alleen een foto van het eindresultaat en een lijst met wensen. En je hebt een robot die moet bouwen. De vraag is: kan die robot het huis echt bouwen, of maakt hij alleen een nepgevel?

Dit is precies het probleem dat het nieuwe onderzoekspapier Vision2Web aanpakt. Hier is een uitleg in simpele taal, met een paar verhelderende vergelijkingen.

1. Het Probleem: De "Robot-Bouwer" is nog niet klaar

Tegenwoordig zijn slimme computers (AI) heel goed geworden in het schrijven van code, net als een robot die snel muren kan metselen. Maar tot nu toe hebben we ze alleen getest op kleine klusjes, zoals "maak een raam" of "repairs een lek". We hebben ze nog nooit getest op het bouwen van een heel huis, met elektriciteit, loodgieterswerk en een interieur dat eruitziet als op de foto.

Bestaande tests zijn te simpel. Ze kijken of de code werkt, maar niet of het huis er mooi uitziet of of de deuren echt open gaan.

2. De Oplossing: Vision2Web (De "Bouwwerkplaats")

De onderzoekers hebben Vision2Web bedacht. Dit is een enorme testbaan voor robots die websites moeten bouwen. Het is geen simpele test, maar een drie-trapsraket:

• Niveau 1: De Postkaart (Statische pagina's)
  De robot krijgt een foto van een webpagina en moet die exact natrekken. Het is alsof je een tekening moet kopiëren. De robot moet zorgen dat de kleuren, de afmetingen en de lay-out perfect kloppen.

  • Vergelijking: Het is als een schilder die een foto moet nabewerken.

• Niveau 2: Het Speelhuisje (Interactieve front-end)
  Nu wordt het lastiger. De robot moet niet alleen de foto nabouwen, maar ook zorgen dat de deuren open gaan, dat je van kamer naar kamer kunt lopen en dat de knoppen werken. Het moet een compleet, bewoonbaar huis zijn, niet alleen een schildering.

  • Vergelijking: Je bouwt nu een poppenhuis waar je de poppetjes kunt verplaatsen en de lampjes kunt aan doen.

• Niveau 3: De Stad (Full-stack ontwikkeling)
  Dit is de ultieme test. De robot moet een heel systeem bouwen: een website met een database, inlogsystemen, winkelwagentjes en alles wat erbij hoort. Het moet werken als een echte, complexe stad met verkeer, stroom en bewoners.

  • Vergelijking: Je bouwt nu een heel dorp met wegen, huizen en elektriciteitscentrales, en alles moet met elkaar communiceren.

3. De Scheidsrechters: Hoe testen ze of het goed is?

In het verleden keken mensen handmatig naar de resultaten, wat traag en onnauwkeurig is. Vision2Web gebruikt twee speciale "scheidsrechters" die als een team werken:

1. De "Grijp-robot" (GUI Agent Verifier):
   Deze robot doet precies wat een mens zou doen: hij klikt, scrolt en vult formulieren in. Hij controleert of de knoppen werken, of je kunt inloggen en of de winkelwagen leegmaakt. Hij is de functionele scheidsrechter.

   • Vergelijking: Een proefpersoon die het huis betreedt om te kijken of de kraan water geeft en de verwarming werkt.

2. De "Oog-robot" (VLM Judge):
   Deze robot kijkt naar het eindresultaat en vergelijkt het met de originele foto. Hij kijkt of de kleuren kloppen, of de tekst op de juiste plek staat en of het er "mooi" uitziet. Hij is de visuele scheidsrechter.

   • Vergelijking: Een architect die kijkt of het gebouw eruitziet als op de tekening, zonder dat hij erin hoeft te lopen.

4. Wat hebben ze ontdekt? (De Resultaten)

Toen ze de beste AI-modellen van vandaag op deze testbaan zetten, was het resultaat verrassend en een beetje teleurstellend:

• Ze zijn goed in simpele klusjes: De robots konden de "Postkaarten" (Niveau 1) redelijk goed nabouwen.
• Ze raken in de war bij complexiteit: Zodra het ging om het "Speelhuisje" (Niveau 2) en zeker het "Dorp" (Niveau 3), vielen de robots flink terug.
• De "Grote Broer" wint het: Het model Claude-Opus-4.5 deed het het beste, maar zelfs die kon geen perfect dorp bouwen. Andere modellen, zoals die van Google en OpenAI, hadden grote moeite met de langere taken.
• Het probleem: De robots kunnen goed één ding doen, maar ze verliezen het overzicht als het te groot wordt. Ze vergeten hoe de deuren werken als ze de elektriciteit moeten leggen, of ze bouwen een mooie gevel maar de deuren zitten vast.

Conclusie: Waarom is dit belangrijk?

Vision2Web is als een grote, eerlijke examencommissie voor AI. Het laat zien dat we nog ver weg zijn van robots die volledig zelfstandig complexe software kunnen bouwen.

De boodschap is duidelijk: we moeten stoppen met kleine tests en beginnen met grote, realistische uitdagingen. Alleen zo kunnen we zien waar de robots echt vastlopen en hoe we ze kunnen leren om niet alleen muren te metselen, maar ook een heel huis te bouwen dat bewoonbaar is.

Kortom: De robots zijn slim, maar ze zijn nog geen meesterbouwers. Vision2Web helpt ons om ze te trainen tot echte experts.

Technische samenvatting

Hieronder volgt een gedetailleerde technische samenvatting van het paper "Vision2Web: A Hierarchical Benchmark for Visual Website Development with Agent Verification", geschreven in het Nederlands.

1. Het Probleem

Ondanks de snelle vooruitgang van grote taalmodellen (LLM's) en hun toepassing in autonome software-agenten voor codering, blijft de systematische evaluatie van complexe, end-to-end websiteontwikkeling beperkt. Bestaande benchmarks vertonen drie fundamentele tekortkomingen:

• Beperkte taakformulering: Populaire benchmarks (zoals SWE-Bench) focussen op incrementele, issue-gedreven code-aanpassingen in plaats van holistische, end-to-end engineering.
• Misalignment in multimodale dekking: Bestaande benchmarks zijn vaak beperkt tot statische pagina-reproductie (UI-naar-code) of missen visuele input voor end-to-end scenario's.
• Onvoldoende verificatiemechanismen: Het betrouwbaar en reproduceerbaar beoordelen van complexe interacties en langetermijnresultaten is moeilijk door vaag gedefinieerde taken en gebrek aan gestructureerde verificatieprocedures.

2. Methodologie: Vision2Web

Vision2Web is een hiërarchisch benchmarkplatform dat is ontworpen om multimodale coderingsagenten te evalueren op visuele websiteontwikkeling via een workflow-gebaseerde agent-verificatieparadigma.

A. Hiërarchische Taakstructuur

De benchmark verdeelt taken in drie progressief complexere niveaus, gebaseerd op echte websites:

1. Level 1: Statische Webpagina's: Agenten moeten UI-prototypen (desktop, tablet, mobiel) vertalen naar responsieve, statische code. Focus ligt op visuele trouw en layout.
2. Level 2: Interactieve Frontends: Agenten genereren multi-pagina frontends met logische navigatie en interactieve componenten, gebaseerd op meerdere prototypen en tekstuele beschrijvingen.
3. Level 3: Full-Stack Websites: Agenten moeten volledige systemen bouwen (frontend, backend, database) op basis van gestructureerde requirements en prototypen, inclusief state management en debugging.

Het dataset bevat 193 taken (16 categorieën), 918 prototypen en 1.255 testgevallen, afkomstig van de C4-validatieset om data-lekkage te voorkomen.

B. Workflow-gebaseerde Agent Verificatie

Om de evaluatie betrouwbaar en reproduceerbaar te maken, introduceert Vision2Web een uniek verificatiesysteem bestaande uit twee complementaire componenten:

• GUI Agent Verifier (Functionele Correctheid): Een autonome agent voert vooraf gedefinieerde testworkflows uit. Deze workflows zijn gericht dependency-graafstructuren die testknooppunten (zoals inloggen, navigeren, formulieren invullen) koppelen. De agent voert acties uit en valideert logica en state-transities. Dit resulteert in een Functional Score (FS).
• VLM-based Judge (Visuele Trouw): Een Vision Language Model (VLM) fungeert als rechter die de gerenderde pagina's vergelijkt met de originele UI-prototypen. Het beoordeelt componenten op visuele consistentie en levert een Visual Score (VS).

Deze aanpak combineert de flexibiliteit van agent-interactie met de rigiditeit van gestructureerde workflows, waardoor evaluatie onafhankelijk is van de specifieke implementatie van de website.

3. Belangrijkste Bijdragen

1. Hiërarchisch Taakontwerp: Een systematische ontleding van agent-capaciteiten van visueel begrip tot holistische systeemconstructie.
2. Realistische Multimodale Data: Een grote dataset gebaseerd op echte websites met expliciete specificaties, wat evaluatie onder realistische, multimodale randvoorwaarden mogelijk maakt.
3. Workflow-gebaseerde Verificatie: Een reproduceerbaar, implementatie-onafhankelijk evaluatiekader dat functionele correctheid en visuele integriteit tegelijkertijd meet.

4. Resultaten

De auteurs hebben acht state-of-the-art multimodale modellen (waaronder Claude-Opus-4.5, GPT-5, Gemini-3-Pro, Qwen3-VL) getest binnen twee coderingsframeworks (OpenHands en Claude Code). De belangrijkste bevindingen zijn:

• Prestatiedaling bij complexiteit: Er is een consistente daling in prestaties naarmate de taakcomplexiteit toeneemt (van statisch naar full-stack). Zelfs de beste modellen worstelen met full-stack ontwikkeling.
• Device-afhankelijke daling: Prestaties nemen af bij kleinere schermformaten (tablet/mobiel) en bij visueel complexere prototypen.
• Modellenvergelijking: Claude-Opus-4.5 presteert over het algemeen het beste, maar toont ook hier dalingen bij full-stack taken. Modellen zoals Seed-1.8-VL en Qwen3-VL falen grotendeels bij complexe, multimodale coderingstaken.
• Framework-invloed: De keuze van het agent-framework (OpenHands vs. Claude Code) heeft een significante invloed op de prestaties; OpenHands presteerde vaak beter voor niet-Claude-modellen.
• Specifieke zwaktes: Agenten presteren goed bij navigatie en authenticatie, maar falen systematisch bij state management, CRUD-operaties en bestands/media-bewerkingen.
• Foutpatronen:
  • Visueel: Slechte afstemming van layout en assets.
  • Cross-module: Visuele en functionele coherentie gaat verloren over meerdere pagina's.
  • Systeem: Gebrek aan langetermijnplanning en autonome verificatie leidt tot crashes of afwijkende functionaliteit in full-stack projecten.

5. Betekenis en Impact

Vision2Web biedt een cruciaal fundament voor het begrijpen van de huidige beperkingen van autonome coderingsagenten. Het paper toont aan dat succes op geïsoleerde taken niet garandeert dat een agent een compleet, functioneel systeem kan bouwen.

De belangrijkste implicaties zijn:

• Er is een verschuiving nodig naar hiërarchische, progressief uitdagende taakontwerpen om agenten echt te trainen en evalueren.
• De geïntroduceerde workflow-gebaseerde verificatieparadigma biedt een nieuwe standaard voor reproduceerbare en objectieve evaluatie van end-to-end softwareontwikkeling.
• De benchmark identificeert specifieke gebieden (zoals state management en cross-page coördinatie) waar toekomstig onderzoek zich moet richten om de volgende generatie agenten te ontwikkelen.

Kortom, Vision2Web stelt een nieuwe maatstaf neer voor het evalueren van visuele websiteontwikkeling en benadrukt dat er nog een aanzienlijke kloof bestaat tussen huidige AI-capaciteiten en de eisen van professionele, full-stack software-engineering.