FullFront: Benchmarking MLLMs Across the Full Front-End Engineering Workflow
Journal:
arXiv
Published Date:
May 23, 2025
Abstract
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) \textbf{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.
