AI
New benchmark tests how well AI models handle real-world web design tasks
FullFront evaluates multimodal AI systems across the entire front-end development pipeline, revealing significant gaps in their design perception and code generation abilities.
Researchers have introduced FullFront, a comprehensive benchmark designed to measure how well multimodal large language models (MLLMs) perform across the complete spectrum of web development tasks—from initial design conceptualization through code implementation and refinement.
The Full Pipeline Approach#
Unlike existing evaluation frameworks that typically focus only on converting visual mockups into working code, FullFront tests MLLMs on three interconnected capabilities that mirror how professional front-end engineers actually work:
- Design Conceptualization: Can models generate webpage designs from scratch?
- Visual Comprehension: Can they accurately understand and describe the layout and structure of existing webpages?
- Code Implementation: Can they translate designs into functional HTML while handling details like image placement and responsive layouts?
Methodology and Dataset Quality#
The benchmark tackles a persistent problem in AI evaluation: existing datasets either rely on scraped real websites (which carry messy, bloated code and copyright concerns) or use oversimplified pages generated by other language models. FullFront instead employs a two-stage transformation process that converts authentic webpages into clean, standardized HTML code. This approach preserves the visual diversity and complexity of genuine designs while maintaining legal and technical clarity.
Where Current Models Fall Short#
Testing state-of-the-art MLLMs across FullFront exposed substantial limitations. The research reveals that these systems struggle particularly with:
- Perceiving page organization: Models frequently misinterpret visual structure and spatial relationships
- Image handling in code: Generating proper HTML for images and asset management remains problematic
- Layout implementation: Complex positioning, alignment, and responsive design prove difficult to execute
- Interactive elements: Building working page interactions remains beyond current capabilities
