Have you ever wondered what an AI model actually looks at when you ask it to turn a webpage screenshot into code?
When a vision-language model (VLM) processes an ordinary webpage screenshot, it first splits the image into many small patches, each converted into a "visual token." For UI screenshots, this comes out to roughly 6,700 tokens.
To put that in perspective: if you ask a model to generate HTML/CSS code based on these tokens, just "understanding the image" takes a long time. This is the familiar "time-to-first-token latency" problem — you send a request, and the model silently loads the image for several seconds before it starts responding.
A paper proposes a method called UIPress that specifically addresses visual token redundancy in UI-to-Code tasks.
Its core idea: don't make the model look at all those tokens — only the most important ones.
How it works
UIPress inserts a lightweight "compression module" between the vision encoder (ViT) and the language decoder. Acting like a smart editor, it compresses the ~6,700 visual tokens output by the encoder into a fixed 256 tokens.
The compression itself is technically sophisticated, combining depthwise separable convolutions, element-guided spatial reweighting, and Transformer refinement. The entire compression module plus LoRA fine-tuning of the decoder adds only about 21.7 million trainable parameters — just 0.26% of the 8-billion-parameter base model.
Results
The results are striking:
- On the Design2Code benchmark, UIPress with 256 tokens achieves a CLIP score of 0.8127 — 7.5% higher than the uncompressed baseline and 4.6% higher than the strongest inference-time compression method.
- Time-to-first-token (TTFT) is accelerated by 9.1x — from several seconds of waiting to nearly instant.
Why this is different
There is an important distinction here. Previous compression methods mostly "select" tokens to drop at inference time based on attention scores, or zero out low-attention features without actually shortening the sequence. Those approaches either don't truly reduce computation or don't adapt well to UI screenshots, where information density is extremely uneven.
UIPress is different: it learns compression at the encoder side. Compression isn't based on generic heuristics but is specifically trained for the UI-to-Code task. The module itself learns which regions matter (buttons, input fields) and which can be ignored (backgrounds, whitespace).
The researchers note this is the first work to apply "optical compression" (encoder-side learned compression) to UI-to-Code.
Bigger picture
This research suggests a broader vision: AI-driven UI generation is essentially an extreme form of "describing an image in words." The image is information-dense, while the code output is highly structured. Processing six to seven thousand tokens every time is hard to make commercially viable. UIPress pushes this problem from "impossible" toward "feasible."
Compute first, then render; look at what matters first, then write code. This may become the standard workflow for AI front-end development.
---
Paper info Title: UIPress: Optical Token Compression for UI-to-Code arXiv: 2604.09442 Core finding: encoder-side learned visual token compression reduces ~6,700 visual tokens to 256, delivering 9.1x faster TTFT while improving accuracy.