FullFront: Avaliação de MLLMs em Todo o Fluxo de Trabalho de Engenharia de Front-End

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

May 23, 2025

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

cs.AI

Resumo

A engenharia de front-end envolve um fluxo de trabalho complexo no qual os engenheiros conceituam designs, os traduzem em código e refinam iterativamente a implementação. Embora os benchmarks recentes se concentrem principalmente na conversão de designs visuais em código, apresentamos o FullFront, um benchmark projetado para avaliar Modelos de Linguagem Multimodais de Grande Escala (MLLMs) em todo o pipeline de desenvolvimento de front-end. O FullFront avalia três tarefas fundamentais que mapeiam diretamente o pipeline de engenharia de front-end: Design de Página Web (fase de conceituação), QA de Percepção de Página Web (compreensão da organização visual e dos elementos) e Geração de Código de Página Web (fase de implementação). Diferente dos benchmarks existentes, que utilizam sites raspados com código inflado ou HTML gerado por LLMs excessivamente simplificado, o FullFront emprega um processo inovador de duas etapas para transformar páginas web do mundo real em HTML limpo e padronizado, mantendo designs visuais diversos e evitando problemas de direitos autorais. Testes extensivos dos MLLMs mais avançados revelam limitações significativas na percepção de páginas, geração de código (especialmente no tratamento de imagens e layout) e implementação de interações. Nossos resultados demonstram quantitativamente as disparidades de desempenho entre modelos e tarefas, e destacam uma lacuna substancial entre as capacidades atuais dos MLLMs e o desempenho de especialistas humanos em engenharia de front-end. O benchmark FullFront e o código estão disponíveis em 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.