FullFront: Evaluación de MLLMs a lo largo de todo el flujo de trabajo de ingeniería en el front-end

FullFront: Benchmarking MLLMs Across the Full Front-End Engineering Workflow

May 23, 2025

Autores: Haoyu Sun, Huichen Will Wang, Jiawei Gu, Linjie Li, Yu Cheng

cs.AI

Resumen

La ingeniería front-end implica un flujo de trabajo complejo en el que los ingenieros conceptualizan diseños, los traducen en código y refinan iterativamente la implementación. Si bien los puntos de referencia recientes se centran principalmente en convertir diseños visuales en código, presentamos FullFront, un punto de referencia diseñado para evaluar Modelos de Lenguaje Multimodales de Gran Escala (MLLMs) en toda la cadena de desarrollo front-end. FullFront evalúa tres tareas fundamentales que se corresponden directamente con el flujo de trabajo de la ingeniería front-end: Diseño de Páginas Web (fase de conceptualización), Preguntas y Respuestas sobre Percepción de Páginas Web (comprensión de la organización visual y los elementos) y Generación de Código de Páginas Web (fase de implementación). A diferencia de los puntos de referencia existentes que utilizan sitios web rastreados con código inflado o HTML generado por LLMs demasiado simplificado, FullFront emplea un proceso novedoso de dos etapas para transformar páginas web del mundo real en HTML limpio y estandarizado, manteniendo diseños visuales diversos y evitando problemas de derechos de autor. Las pruebas exhaustivas de los MLLMs más avanzados revelan limitaciones significativas en la percepción de páginas, la generación de código (especialmente en el manejo de imágenes y el diseño) y la implementación de interacciones. Nuestros resultados demuestran cuantitativamente las disparidades de rendimiento entre modelos y tareas, y destacan una brecha sustancial entre las capacidades actuales de los MLLMs y el rendimiento de expertos humanos en ingeniería front-end. El punto de referencia FullFront y su código están disponibles en https://github.com/Mikivishy/FullFront.

English

Front-end engineering involves a complex workflow where engineers conceptualize designs, translate them into code, and iteratively refine the implementation. While recent benchmarks primarily focus on converting visual designs to code, we present FullFront, a benchmark designed to evaluate Multimodal Large Language Models (MLLMs) across the full front-end development pipeline. FullFront assesses three fundamental tasks that map directly to the front-end engineering pipeline: Webpage Design (conceptualization phase), Webpage Perception QA (comprehension of visual organization and elements), and Webpage Code Generation (implementation phase). Unlike existing benchmarks that use either scraped websites with bloated code or oversimplified LLM-generated HTML, FullFront employs a novel, two-stage process to transform real-world webpages into clean, standardized HTML while maintaining diverse visual designs and avoiding copyright issues. Extensive testing of state-of-the-art MLLMs reveals significant limitations in page perception, code generation (particularly for image handling and layout), and interaction implementation. Our results quantitatively demonstrate performance disparities across models and tasks, and highlight a substantial gap between current MLLM capabilities and human expert performance in front-end engineering. The FullFront benchmark and code are available in https://github.com/Mikivishy/FullFront.