New Framework Cuts AI Model Overhead for Converting UI Designs into Code by Nearly Half

Multimodal large language models (MLLMs) have become powerful tools for converting user interface designs directly into working code. Yet the computational demands of these systems remain steep: they must process large numbers of image tokens from screenshots and generate extensive output code simultaneously.

A team of researchers has developed EfficientUICoder, a framework designed to cut through this inefficiency by identifying and removing redundancy throughout the generation pipeline—without sacrificing output quality.

The Core Problem#

The bottleneck emerges from two sources. Feeding image data into the model generates token bloat, while the code generation phase produces lengthy, repetitive HTML and CSS with numerous structural duplicates. These redundancies force the model to spend computational resources on information that doesn't directly impact the final webpage, leading to inflated processing times and unnecessarily long output files.

How EfficientUICoder Works#

The framework operates in three complementary stages:

• Element and Layout-Aware Compression detects distinct UI components and builds a structural tree of the interface, preserving only the tokens that carry meaningful design information.
• Region-Aware Token Refinement examines attention patterns within the model, discarding tokens that receive little focus from selected regions while pulling in high-attention tokens from elsewhere.
• Adaptive Duplicate Token Suppression tracks repetitive patterns in HTML and CSS generation and dynamically suppresses them by applying escalating penalties based on frequency.

Results and Impact#

Testing on 34B-parameter MLLMs showed substantial gains across the board. The system achieves a 55–60% compression ratio without degrading webpage quality. Compared to baseline approaches, it reduces overall computational cost by 44.9%, cuts generated tokens by 41.4%, speeds up prefill time by 46.6%, and trims inference time by 48.8%.

These improvements translate to faster, cheaper UI code generation at scale—a meaningful step toward making AI-powered design automation more practical for real-world applications.