Technische Samenvatting: VISTA – Een End-to-End Benchmark voor Visuele Spec-naar-Web-app Coderende Agenten

Probleemstelling

Hoewel Large Language Models (LLM's) bekwaamheid hebben aangetoond in geïsoleerde coderingstaken (bijvoorbeeld functiesynthese, bugfixing), blijft hun vermogen om als autonome agenten te fungeren in end-to-end webapplicatieontwikkeling onderbeoordeeld. Bestaande benchmarks richten zich vaak op algoritmische problemen of statische reconstructie van ontwerp naar code, en slagen er niet in de complexiteit van moderne front-end workflows vast te leggen. Specifiek lijden huidige evaluaties aan vier ontwerpgaten:

1. Stack-verwarring: Veel benchmarks standaardiseren de implementatiestack, waardoor modelcapaciteit wordt verward met geschiktheid van de stack.
2. Input-homogeniteit: Taken fixeren doorgaans één inputmodaliteit (tekst, screenshot of ontwerpbestand), en negeren het spectrum aan visuele/structurele fideliteit dat beschikbaar is in real-world specificaties.
3. Ontkoppelde evaluatie: Evaluaties scheiden de LLM vaak van het uitvoeringsharnas, en negeren hoe agent-computerinterfaces de prestaties materieel beïnvloeden.
4. Evaluatie-instabiliteit: De afhankelijkheid van LLM's als rechter of browser-agent-evaluatoren introduceert gevoeligheid voor promptformulering en grondingsfouten, vooral voor UI-taken waar ongemarkeerde bedieningselementen uitkomsten kunnen veranderen.

VISTA adresseert deze gaten door een rigoureuze benchmark te vestigen voor het evalueren van op LLM's gebaseerde agenten die functionele, visueel coherente webapplicaties moeten genereren uit ondergespecificeerde inputs.

Methodologie

Constructie van de Benchmark

VISTA definieert een taakset die 10 applicatiecategorieën (bijvoorbeeld e-commerce, reisboeking, chat) en 128 pagina's omvat. De ground truth is afgeleid van Figma-ontwerpen, geëxporteerd als gerenderde PNG's en bijgesnoeide JSON-structuren om contaminatie door bestaande webcrawls te voorkomen.

Prompt-Informatiecondities:
De benchmark evalueert agenten over vijf condities (C0–C4) die variëren langs twee assen: visuele/structurele fideliteit en stackbeperking.

• C0: Alleen tekstprompt; agent kiest de stack vrij.
• C1: Tekst + screenshots; agent lost de taak op onder drie gespecificeerde stacks (gemiddeld).
• C2: Tekst + screenshots; agent kiest de stack vrij.
• C3: Tekst + screenshots + bijgesnoeide Figma JSON; agent gebruikt een enkele gespecificeerde stack (sjabloon verstrekt).
• C4: Tekst + screenshots + bijgesnoeide Figma JSON; agent kiest de stack vrij.

Menselijke Annotatie:
Om de beperkingen van geautomatiseerde testen in open-ended generatie te overwinnen, hebben de auteurs handmatig 3.253 interactieve componenten (knoppen, links, invoervelden) en 458 visuele ankerpunten geannoteerd in de dataset. Dit maakt een nauwkeurige, deterministische evaluatie mogelijk in plaats van te vertrouwen op instabiele visuele gronding.

Evaluatiemetrics

Het evaluatiekader combineert drie complementaire signalen:

1. DOM-gegronde Structuur-Functie Score ($S$): Een gezamenlijke metric die structurele uitlijning en gedragscorrectheid meet.
   • Localisatie ($L_i$): Verifieert of interactieve doelen bestaan als echte DOM-elementen nabij referentiecoördinaten, gebruikmakend van affiene uitlijning en IoU/centrum-afstandstiers.
   • Gedrag ($B_i$): Voert specifieke checks uit (navigatie, statusschakelaars, inputverwerking) op gematchte elementen.
   • Formule: $S = \frac{1}{N} \sum L_i \cdot B_i$.
2. Visuele Fideliteit: Gebruikt CLIP-gebaseerde beeldgelijkheid om hoge-niveau visuele overeenkomst te meten tussen de gegenereerde app en de Figma ground truth, geïnterpreteerd naast structurele scores.
3. Agent-efficiëntie en Traject: Analyseert actietrajecten (inspecteren, schrijven, verifiëren, falen) en definieert een Surgical Diff Score. Deze metric kwantificeert het aandeel bewerkingswerk dat wordt geleverd via gelokaliseerde patches versus volledige bestands herschrijvingen, en onderscheidt tussen "chirurgische" en "herschrijvingszware" workflows.

Experimentele Opstelling

De benchmark evalueerde vier agentsystemen van twee model families (GPT-5.4, GPT-5.5) en twee harnassen (Codex patch-georiënteerd; Claude Code met Write/Edit/MultiEdit-tools).

Belangrijkste Resultaten

Impact van Inputcondities

• Stackvrijheid is cruciaal: De hoogste prestatie (Gecombineerde score) werd bereikt onder vrije-stackcondities (C2 en C4). Hoewel het toevoegen van visuele inputs (screenshots, Figma JSON) de localisatiescores verbeterde, verminderde het fixeren van de stack (C1, C3) vaak de functionele correctheid, wat suggereert dat agenten moeite hebben om correct gedrag te componeren bovenop rigide steigers.
• Visuele versus functionele ontkoppeling: Visuele fideliteit (CLIP) en functionele correctheid (Gedrag) zijn gedeeltelijk ontkoppeld. Bijvoorbeeld, GPT-5.5 behaalde de hoogste localisatie (0,602) en CLIP-scores (0,853) maar de laagste gedragsscore (0,283), wat aangeeft dat het visuele structuur goed reproduceert maar faalt in het implementeren van correcte interacties. Omgekeerd behaalde Claude Opus de hoogste functionele correctheid (0,336) en gecombineerde score (0,261) ondanks lagere visuele gelijkheidsscores.

Analyse van Bewerkingsstijl

• Orthogonaliteit van Stijl en Kwaliteit: De Surgical Diff Score (die gelokaliseerd bewerken meet) toonde een zwakke negatieve correlatie ($\rho = -0,145$) met taaksucces.
• Model-specifieke strategieën:
  • Claude Opus: Behaalde de beste taakkwaliteit maar leunde zwaar op volledige bestands herschrijvingen (98,8% herschrijvingsaandeel), wat wijst op een "genereren-en-vervangen"-strategie.
  • GPT-5.5: Toonde de hoogste Surgical Diff Score (33,6) maar de laagste taakkwaliteit, wat suggereert dat een "chirurgische" bewerkingsstijl geen betere uitkomsten garandeert.
• Workflowpatronen: Trajectanalyse onthulde dat Claude-familie modellen sterkere "inspecteren $\to$ inspecteren" en "falen $\to$ inspecteren" overgangen vertonen (diagnostische lussen), terwijl GPT-familie modellen meer verspreide overgangen tonen na falen.

Betekenis en Claims

Het artikel positioneert VISTA als een fundament voor de vooruitgang van agent-gebaseerd software engineering-onderzoek door:

1. Capaciteiten ontkoppelen: Aantonen dat visuele reproductie en functionele correctheid distincte capaciteiten zijn die afzonderlijk moeten worden geëvalueerd.
2. Agent-harnas koppeling valideren: Aantonen dat de interactie tussen het model en het coderingsharnas (bijvoorbeeld toolbeschikbaarheid, bewerkingsmogelijkheden) zowel de bewerkingsstijl als de uiteindelijke taakkwaliteit significant beïnvloedt.
3. Robuuste evaluatie bieden: Een reproduceerbare, door mensen geannoteerde evaluatiepijplijn bieden die de instabiliteit van LLM's als rechter en script-gebaseerde testen in open-ended UI-generatie mitigeert.

De auteurs concluderen dat hoewel rijkere structurele inputs (Figma JSON) de gronding verbeteren, ze de functionele kwaliteit niet automatisch verbeteren tenzij ze worden gekoppeld aan de flexibiliteit om de implementatiestack te kiezen of aan te passen. Bovendien is de bewerkingsstijl van een agent (chirurgisch versus herschrijvingszwaar) grotendeels orthogonaal aan zijn taaksucces, wat suggereert dat huidige evaluatiemetrics zich moeten richten op de bruikbaarheid van de uiteindelijke applicatie in plaats van op de efficiëntie van het bewerkingsproces.