FullFront: Benchmarking von MLLMs über den gesamten Front-End-Engineering-Workflow hinweg

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

May 23, 2025

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

cs.AI

Zusammenfassung

Frontend-Engineering umfasst einen komplexen Workflow, bei dem Ingenieure Designs konzipieren, in Code übersetzen und die Implementierung iterativ verfeinern. Während sich aktuelle Benchmarks hauptsächlich auf die Umwandlung von visuellen Designs in Code konzentrieren, stellen wir FullFront vor, einen Benchmark, der darauf ausgelegt ist, Multimodale Large Language Models (MLLMs) über den gesamten Frontend-Entwicklungsprozess hinweg zu bewerten. FullFront bewertet drei grundlegende Aufgaben, die direkt dem Frontend-Engineering-Workflow zugeordnet sind: Webseiten-Design (Konzeptionsphase), Webseiten-Wahrnehmungs-QA (Verständnis der visuellen Organisation und Elemente) und Webseiten-Code-Generierung (Implementierungsphase). Im Gegensatz zu bestehenden Benchmarks, die entweder gescrapte Websites mit aufgeblähtem Code oder stark vereinfachtes, von LLMs generiertes HTML verwenden, nutzt FullFront einen neuartigen, zweistufigen Prozess, um reale Webseiten in sauberes, standardisiertes HTML zu transformieren, während vielfältige visuelle Designs beibehalten und Urheberrechtsprobleme vermieden werden. Umfangreiche Tests von state-of-the-art MLLMs zeigen erhebliche Einschränkungen bei der Seitenwahrnehmung, Code-Generierung (insbesondere bei der Bildverarbeitung und Layoutgestaltung) und der Implementierung von Interaktionen. Unsere Ergebnisse demonstrieren quantitativ Leistungsunterschiede zwischen Modellen und Aufgaben und verdeutlichen eine erhebliche Lücke zwischen den aktuellen Fähigkeiten von MLLMs und der Leistung menschlicher Experten im Frontend-Engineering. Der FullFront-Benchmark und der Code sind unter https://github.com/Mikivishy/FullFront verfügbar.

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.