FullFront : Évaluation des MLLM à travers l'ensemble du flux de travail d'ingénierie front-end

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

May 23, 2025

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

cs.AI

Résumé

L'ingénierie front-end implique un flux de travail complexe où les ingénieurs conceptualisent des designs, les traduisent en code, et affinent itérativement l'implémentation. Alors que les benchmarks récents se concentrent principalement sur la conversion de designs visuels en code, nous présentons FullFront, un benchmark conçu pour évaluer les Modèles de Langage Multimodaux (MLLMs) à travers l'ensemble du pipeline de développement front-end. FullFront évalue trois tâches fondamentales qui correspondent directement au pipeline de l'ingénierie front-end : la Conception de Page Web (phase de conceptualisation), les Questions-Réponses sur la Perception de Page Web (compréhension de l'organisation visuelle et des éléments), et la Génération de Code de Page Web (phase d'implémentation). Contrairement aux benchmarks existants qui utilisent soit des sites web scrapés avec un code gonflé, soit du HTML généré par LLM trop simplifié, FullFront emploie un processus novateur en deux étapes pour transformer des pages web réelles en HTML propre et standardisé tout en conservant des designs visuels variés et en évitant les problèmes de droits d'auteur. Des tests approfondis des MLLMs de pointe révèlent des limitations significatives dans la perception des pages, la génération de code (notamment pour la gestion des images et des mises en page), et l'implémentation des interactions. Nos résultats démontrent quantitativement les disparités de performance entre les modèles et les tâches, et mettent en lumière un écart substantiel entre les capacités actuelles des MLLMs et la performance des experts humains en ingénierie front-end. Le benchmark FullFront et son code sont disponibles sur 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.