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