FullFront: Оценка 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

Аннотация

Фронтенд-разработка включает сложный рабочий процесс, в рамках которого инженеры концептуализируют дизайны, переводят их в код и итеративно совершенствуют реализацию. Хотя современные бенчмарки в основном сосредоточены на преобразовании визуальных дизайнов в код, мы представляем FullFront — бенчмарк, разработанный для оценки мультимодальных больших языковых моделей (MLLM) на всех этапах фронтенд-разработки. FullFront оценивает три фундаментальные задачи, которые напрямую соответствуют этапам фронтенд-инжиниринга: проектирование веб-страниц (фаза концептуализации), QA восприятия веб-страниц (понимание визуальной организации и элементов) и генерация кода веб-страниц (фаза реализации). В отличие от существующих бенчмарков, которые используют либо скопированные веб-сайты с избыточным кодом, либо упрощённый HTML, сгенерированный LLM, FullFront применяет новый двухэтапный процесс для преобразования реальных веб-страниц в чистый, стандартизированный HTML, сохраняя при этом разнообразие визуальных дизайнов и избегая проблем с авторскими правами. Обширное тестирование современных MLLM выявляет значительные ограничения в восприятии страниц, генерации кода (особенно для обработки изображений и компоновки) и реализации интерактивности. Наши результаты количественно демонстрируют различия в производительности моделей и задач, а также подчеркивают существенный разрыв между текущими возможностями MLLM и производительностью экспертов-людей в области фронтенд-инжиниринга. Бенчмарк 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.