WebCompass: Hacia una Evaluación Multimodal de Codificación Web para Modelos de Lenguaje de Programación
WebCompass: Towards Multimodal Web Coding Evaluation for Code Language Models
April 20, 2026
Autores: 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
Resumen
Los modelos de lenguaje grande están evolucionando rápidamente hacia agentes de codificación interactivos capaces de realizar codificación web de extremo a extremo; sin embargo, los benchmarks existentes evalúan solo porciones reducidas de esta capacidad, típicamente la generación condicionada por texto con métricas de corrección estática, dejando en gran medida sin medir la fidelidad visual, la calidad de la interacción y el razonamiento a nivel de base de código. Presentamos WebCompass, un benchmark multimodal que proporciona una evaluación unificada del ciclo de vida de la capacidad de ingeniería web. Reconociendo que la codificación web en el mundo real es un ciclo iterativo de generación, edición y reparación, WebCompass abarca tres modalidades de entrada (texto, imagen, video) y tres tipos de tareas (generación, edición, reparación), dando lugar a siete categorías de tareas que reflejan flujos de trabajo profesionales. Mediante un pipeline multietapa con intervención humana, seleccionamos instancias que cubren 15 dominios de generación, 16 tipos de operaciones de edición y 11 tipos de defectos para reparación, cada una anotada en niveles Fácil/Medio/Difícil. Para la evaluación, adoptamos un protocolo de LLM-como-Juez guiado por checklist para edición y reparación, y proponemos un nuevo paradigma de Agente-como-Juez para generación que ejecuta autónomamente los sitios web generados en un navegador real, explora comportamientos interactivos mediante el Protocolo de Contexto del Modelo (MCP) y sintetiza iterativamente casos de prueba específicos, aproximándose estrechamente a las pruebas de aceptación humanas. Evaluamos modelos representativos de código cerrado y abierto y observamos que: (1) los modelos de código cerrado siguen siendo sustancialmente más fuertes y equilibrados; (2) la edición y la reparación exhiben perfiles de dificultad distintos, siendo que la reparación preserva mejor la interactividad pero sigue siendo difícil en términos de ejecución; (3) la estética es el cuello de botella más persistente, especialmente para los modelos de código abierto; y (4) la elección del marco de trabajo afecta materialmente los resultados, siendo Vue consistentemente desafiante, mientras que React y Vanilla/HTML tienen un rendimiento más sólido dependiendo del tipo de tarea.
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.