Learned visual token compression accelerates UI-to-Code generation by 9.1x

Why It Matters

This research addresses a critical bottleneck in AI-assisted design tools that translate visual interfaces into code. By optimizing the input representation, it enables faster iteration cycles and more responsive user experiences, making AI tools more practical for designers and developers.

Key Finding

By using a learned compression method called UIPress, AI models can process UI screenshots much faster and more efficiently for code generation, achieving better results than previous methods.

Key Findings

• UIPress compresses approximately 6,700 visual tokens to a fixed budget of 256.
• The system achieves a CLIP score of 0.8127 on the Design2Code benchmark, outperforming uncompressed baselines.
• A 9.1x speedup in time-to-first-token was observed compared to baselines.
• The added trainable parameters are minimal (0.26% of the base model).

Research Evidence

Aim: How can learned, encoder-side compression techniques be adapted to efficiently process UI screenshots for UI-to-Code generation, thereby reducing latency and improving performance?

Method: Machine Learning / Deep Learning

Procedure: A lightweight learned compression module (UIPress) was developed and integrated into a Vision-Language Model (VLM) architecture. This module uses depthwise-separable convolutions, spatial reweighting, and Transformer refinement to compress visual tokens from UI screenshots. The system was fine-tuned using Low-Rank Adaptation (LoRA) on the decoder.

Context: AI-assisted design tools, UI-to-Code generation

Design Principle

Optimize input data representation through learned compression to enhance the efficiency and effectiveness of AI generative models.

How to Apply

When developing or integrating AI models for tasks involving visual input (e.g., image generation, object recognition, UI design), investigate and implement learned compression strategies to reduce processing overhead and accelerate output.

Limitations

The effectiveness of the compression might vary with the complexity and type of UI designs. Further research is needed to explore its generalizability across diverse UI frameworks and styles.

Student Guide (IB Design Technology)

Simple Explanation: This research shows how to make AI that turns website designs into code much faster by 'compressing' the image information before the AI processes it, like making a large file smaller without losing important details.

Why This Matters: Faster AI tools mean designers can get feedback and iterate on their ideas more quickly, leading to better and more efficient design processes.

Critical Thinking: While UIPress shows impressive speedups, how might the learned compression process inadvertently discard subtle but crucial design elements that are important for user experience or brand identity?

IA-Ready Paragraph: The development of UIPress demonstrates a significant advancement in optimizing AI models for UI-to-Code generation. By employing learned, encoder-side compression, the system effectively reduces the computational load associated with processing visual inputs, leading to a substantial increase in generation speed (9.1x time-to-first-token) while maintaining or improving output accuracy (CLIP score of 0.8127). This approach highlights the importance of efficient data representation in AI-driven design workflows.

Project Tips

• Consider how the input data for your design project's AI model can be pre-processed or compressed to improve efficiency.
• Explore techniques for reducing the dimensionality or token count of visual inputs for generative AI tasks.

How to Use in IA

• This research can inform the development of more efficient AI-driven tools for your design project, potentially speeding up prototyping or code generation phases.

Examiner Tips

• When discussing AI tools, consider the computational efficiency and how input data is processed, not just the output quality.

Independent Variable: Compression technique (UIPress vs. no compression vs. other compression methods)

Dependent Variable: Time-to-first-token, CLIP score (or other relevant accuracy metric for UI-to-Code)

Controlled Variables: Base VLM architecture (e.g., Qwen3-VL-8B), dataset used for training and evaluation (Design2Code), token budget for compressed output.

Strengths

• Introduces a novel encoder-side learned compression approach for UI-to-Code.
• Achieves significant speedups with minimal parameter increase.
• Outperforms existing methods on a relevant benchmark.

Critical Questions

• What is the trade-off between compression ratio and the fidelity of the visual information preserved?
• How would this compression technique perform on different types of visual inputs, such as complex diagrams or interactive prototypes, rather than static UI screenshots?

Extended Essay Application

• An Extended Essay could investigate the impact of different compression algorithms (learned or traditional) on the performance of AI models used in design visualization or automated design generation.
• Students could explore the ethical implications of AI models that prioritize speed through data compression, potentially leading to a loss of nuanced design details.

Source

UIPress: Bringing Optical Token Compression to UI-to-Code Generation · arXiv preprint · 2026