arXiv:2505.17399cs.CL2025-05被引 21

评测大模型在前端开发全流程中的表现,发现其代码生成与布局理解仍有明显短板。

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

  • 构建全流程前端任务基准,覆盖设计、理解到编码阶段。
  • 实测主流大模型在布局与图片处理上表现较差,生成代码质量不稳定。
  • 适合研究多模态模型在真实开发场景应用的开发者与研究员参考。

前端工程涉及复杂流程:工程师先构思设计,再转为代码,并持续迭代优化。现有基准多聚焦于从视觉设计生成代码,而本文提出FullFront,一个评估多模态大语言模型(MLLMs)在完整前端开发流程中表现的基准。该基准涵盖三个核心任务:网页设计(概念阶段)、网页感知问答(理解视觉结构与元素)、网页代码生成(实现阶段)。不同于使用冗余代码的爬取网站或过于简化的LLM生成HTML,FullFront采用新颖的两阶段流程,将真实网页转化为干净、标准化的HTML,同时保留多样视觉风格且避免版权问题。对前沿MLLMs的广泛测试揭示了模型在页面感知、代码生成(尤其是图像处理与布局)及交互实现方面的显著局限。结果量化展示了不同模型与任务间的性能差异,凸显当前大模型能力与人类专家在前端工程中的差距。FullFront基准与代码已开源:https://github.com/Mikivishy/FullFront。

原文摘要 · Abstract (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) \textbf{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.

前端生成多模态模型基准测试

Thank you to arXiv for use of its open access interoperability. PaperDance 不是 arXiv 官方产品;中文卡片由大模型生成,请以原文为准。