FullFront: Valutazione dei MLLM nell'intero flusso di lavoro dell'ingegneria front-end

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

May 23, 2025

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

cs.AI

Abstract

L'ingegneria front-end coinvolge un flusso di lavoro complesso in cui gli ingegneri concettualizzano i design, li traducono in codice e affinano iterativamente l'implementazione. Mentre i recenti benchmark si concentrano principalmente sulla conversione di design visivi in codice, presentiamo FullFront, un benchmark progettato per valutare i Modelli Linguistici Multimodali di Grande Dimensione (MLLM) lungo l'intera pipeline di sviluppo front-end. FullFront valuta tre compiti fondamentali che si mappano direttamente sulla pipeline dell'ingegneria front-end: Progettazione di Pagine Web (fase di concettualizzazione), QA sulla Percezione delle Pagine Web (comprensione dell'organizzazione visiva e degli elementi) e Generazione del Codice delle Pagine Web (fase di implementazione). A differenza dei benchmark esistenti che utilizzano siti web raschiati con codice ridondante o HTML generato da LLM eccessivamente semplificato, FullFront impiega un processo innovativo in due fasi per trasformare pagine web reali in HTML pulito e standardizzato, mantenendo design visivi diversificati ed evitando problemi di copyright. Test estensivi sugli MLLM più avanzati rivelano significative limitazioni nella percezione delle pagine, nella generazione del codice (in particolare per la gestione delle immagini e del layout) e nell'implementazione delle interazioni. I nostri risultati dimostrano quantitativamente le disparità di prestazione tra modelli e compiti, e evidenziano un divario sostanziale tra le capacità attuali degli MLLM e le prestazioni degli esperti umani nell'ingegneria front-end. Il benchmark FullFront e il codice sono disponibili su 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.