FullFront: Benchmarking van MLLMs over het volledige front-end engineeringwerkproces

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

Samenvatting

Front-end engineering omvat een complexe workflow waarbij ingenieurs ontwerpen conceptualiseren, deze omzetten in code en de implementatie iteratief verfijnen. Hoewel recente benchmarks zich voornamelijk richten op het omzetten van visuele ontwerpen naar code, presenteren wij FullFront, een benchmark die is ontworpen om Multimodale Grote Taalmodellen (MLLMs) te evalueren over de volledige front-end ontwikkelingspijplijn. FullFront beoordeelt drie fundamentele taken die direct aansluiten bij de front-end engineering pijplijn: Webpagina Ontwerp (conceptualisatiefase), Webpagina Perceptie QA (begrip van visuele organisatie en elementen), en Webpagina Code Generatie (implementatiefase). In tegenstelling tot bestaande benchmarks die gebruikmaken van geschraapte websites met opgeblazen code of oversimplified LLM-gegenereerde HTML, hanteert FullFront een nieuw, tweestaps proces om real-world webpagina's om te zetten in schone, gestandaardiseerde HTML terwijl diverse visuele ontwerpen behouden blijven en auteursrechtelijke kwesties worden vermeden. Uitgebreide tests van state-of-the-art MLLMs onthullen aanzienlijke beperkingen in paginaperceptie, codegeneratie (met name voor beeldverwerking en lay-out), en interactie-implementatie. Onze resultaten tonen kwantitatief prestatieverschillen tussen modellen en taken aan, en benadrukken een aanzienlijke kloof tussen de huidige MLLM-capaciteiten en de prestaties van menselijke experts in front-end engineering. De FullFront benchmark en code zijn beschikbaar op 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.