FullFront: Benchmarking MLLMs Across the Full Front-End Engineering
  Workflow
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.
6833fd69fe87d9433d098068
Haoyu Sun
admin_assigned
2025-05-26T13:19:50.579Z
63a2a51ef30c464227924fc6
/avatars/e109e85abd25b97bb29dbbe007119e34.svg
Haoyu Sun
user
Mikivis
6833fd69fe87d9433d098069
Huichen Will Wang
6833fd69fe87d9433d09806a
Jiawei Gu
claimed_verified
2025-05-26T08:09:01.542Z
645b4819f9d4ec91fdd54852
/avatars/e12efb8e030688a0afcc72176b453fb3.svg
Jiawei Gu
user
kuvvi
6833fd69fe87d9433d09806b
Linjie Li
6833fd69fe87d9433d09806c
Yu Cheng
claimed_verified
2025-06-02T07:49:17.199Z
67017abfe4d49b157ac534d9
/avatars/997e1b9f54b27a7728a9d4abfee4ba91.svg
Yu Cheng
user
ych133
FullFront: Benchmarking MLLMs Across the Full Front-End Engineering
  Workflow
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.
FullFront is a benchmark evaluating Multimodal Large Language Models across conceptualization, comprehension, and implementation phases in front-end engineering.
Multimodal Large Language Models MLLMs Webpage Design Webpage Perception QA Webpage Code Generation front-end engineering