WebCompass: Auf dem Weg zu einer multimodalen Bewertung von Web-Codierung für Code-Sprachmodelle
WebCompass: Towards Multimodal Web Coding Evaluation for Code Language Models
April 20, 2026
Autoren: Xinping Lei, Xinyu Che, Junqi Xiong, Chenchen Zhang, Yukai Huang, Chenyu Zhou, Haoyang Huang, Minghao Liu, Letian Zhu, Hongyi Ye, Jinhua Hao, Ken Deng, Zizheng Zhan, Han Li, Dailin Li, Yifan Yao, Ming Sun, Zhaoxiang Zhang, Jiaheng Liu
cs.AI
Zusammenfassung
Große Sprachmodelle entwickeln sich schnell zu interaktiven Coding-Agenten, die End-to-End-Webentwicklung beherrschen können. Bisherige Benchmarks bewerten jedoch nur Teilaspekte dieser Fähigkeit – typischerweise textgesteuerte Generierung mit statischen Korrektheitsmetriken – und lassen visuelle Treue, Interaktionsqualität und Codebase-weite Logik weitgehend unberücksichtigt. Wir stellen WebCompass vor, einen multimodalen Benchmark, der eine einheitliche Lebenszyklus-Bewertung von Webentwicklungskompetenz ermöglicht. Da reales Web-Coding einen iterativen Zyklus aus Generierung, Bearbeitung und Fehlerbehebung darstellt, umfasst WebCompass drei Eingabemodalitäten (Text, Bild, Video) und drei Aufgabentypen (Generierung, Bearbeitung, Reparatur), was sieben Aufgabekategorien ergibt, die professionelle Arbeitsabläufe widerspiegeln. Durch eine mehrstufige Pipeline mit menschlicher Beteiligung kuratieren wir Instanzen aus 15 Generierungsdomänen, 16 Bearbeitungstypen und 11 Fehlerkategorien, jeweils annotiert mit Schwierigkeitsgraden (Einfach/Mittel/Schwer). Für die Evaluation nutzen wir ein checklistengesteuertes LLM-as-a-Judge-Protokoll für Bearbeitung und Reparatur und entwickeln ein neuartiges Agent-as-a-Judge-Paradigma für die Generierung: Hierbei werden generierte Websites automatisch in einem echten Browser ausgeführt, interaktive Verhaltensweisen via Model Context Protocol (MCP) erkundet und gezielte Testfälle iterativ synthetisiert – was menschlichem Akzeptanztesting nahekommt. Die Evaluation repräsentativer Closed-Source- und Open-Source-Modelle zeigt: (1) Closed-Source-Modelle bleiben deutlich leistungsstärker und ausgewogener; (2) Bearbeitung und Reparatur weisen unterschiedliche Schwierigkeitsprofile auf – Reparatur erhält Interaktivität besser, bleibt aber ausführungsintensiv; (3) Ästhetik ist der persistenteste Engpass, besonders bei Open-Source-Modellen; (4) Framework-Wahl beeinflusst Ergebnisse maßgeblich: Vue ist durchgängig herausfordernd, während React und Vanilla/HTML je nach Aufgabentyp stärker abschneiden.
English
Large language models are rapidly evolving into interactive coding agents capable of end-to-end web coding, yet existing benchmarks evaluate only narrow slices of this capability, typically text-conditioned generation with static-correctness metrics, leaving visual fidelity, interaction quality, and codebase-level reasoning largely unmeasured. We introduce WebCompass, a multimodal benchmark that provides unified lifecycle evaluation of web engineering capability. Recognizing that real-world web coding is an iterative cycle of generation, editing, and repair, WebCompass spans three input modalities (text, image, video) and three task types (generation, editing, repair), yielding seven task categories that mirror professional workflows. Through a multi-stage, human-in-the-loop pipeline, we curate instances covering 15 generation domains, 16 editing operation types, and 11 repair defect types, each annotated at Easy/Medium/Hard levels. For evaluation, we adopt a checklist-guided LLM-as-a-Judge protocol for editing and repair, and propose a novel Agent-as-a-Judge paradigm for generation that autonomously executes generated websites in a real browser, explores interactive behaviors via the Model Context Protocol (MCP), and iteratively synthesizes targeted test cases, closely approximating human acceptance testing. We evaluate representative closed-source and open-source models and observe that: (1) closed-source models remain substantially stronger and more balanced; (2) editing and repair exhibit distinct difficulty profiles, with repair preserving interactivity better but remaining execution-challenging; (3) aesthetics is the most persistent bottleneck, especially for open-source models; and (4) framework choice materially affects outcomes, with Vue consistently challenging while React and Vanilla/HTML perform more strongly depending on task type.