フルフロント：フロントエンドエンジニアリングワークフロー全体におけるMLLMのベンチマーキング

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

May 23, 2025

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

cs.AI

要旨

フロントエンドエンジニアリングは、エンジニアがデザインを概念化し、それをコードに変換し、実装を反復的に洗練させる複雑なワークフローを伴う。近年のベンチマークは主に視覚的デザインをコードに変換することに焦点を当てているが、我々はフロントエンド開発の全工程にわたってマルチモーダル大規模言語モデル（MLLMs）を評価するために設計されたベンチマーク、FullFrontを提案する。FullFrontは、フロントエンドエンジニアリングのパイプラインに直接対応する3つの基本的なタスクを評価する：ウェブページデザイン（概念化フェーズ）、ウェブページ知覚QA（視覚的構成と要素の理解）、およびウェブページコード生成（実装フェーズ）。既存のベンチマークが肥大化したコードを持つスクレイピングされたウェブサイトまたは過度に簡略化されたLLM生成のHTMLを使用するのとは異なり、FullFrontは、現実世界のウェブページを多様な視覚デザインを維持しつつ、著作権問題を回避したクリーンで標準化されたHTMLに変換するための新規の2段階プロセスを採用する。最先端のMLLMsの広範なテストにより、ページ知覚、コード生成（特に画像処理とレイアウト）、およびインタラクション実装における重大な制限が明らかになった。我々の結果は、モデルとタスク間の性能差を定量的に示し、現在のMLLMsの能力とフロントエンドエンジニアリングにおける人間の専門家の性能との間に大きなギャップがあることを強調する。FullFrontベンチマークとコードは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.