Toward Frontier-Quality Declarative UI Generation at Small-Model Cost
2026-09-03 • Human-Computer Interaction
Human-Computer Interaction
AI summaryⓘ
The authors studied how small, efficient AI models can create user interfaces by choosing components from a catalog instead of writing code from scratch. They tested different ways to train these models, varied model sizes, and catalog sizes on UI tasks using React/TypeScript. Their results showed that a moderately sized model can nearly match the quality of larger models but at much lower cost. They also found that certain training strategies improve performance better than others, and even small models work well with big catalogs. Finally, they offer practical advice on balancing model size, training methods, and catalog size for deploying these UI generation systems.
Declarative UIA2UIComponent catalogSupervised fine-tuningModel sizeReactTypeScriptSemantic qualityVisual qualityLow-latency
Authors
Yingxiang Yang, Weihang Xiao, Ben Bullough, Tushar Deshpande, Niresh Agarwal
Abstract
Declarative UI protocols such as A2UI let applications generate interactive UIs by selecting pre-built components from a catalog and binding their props to application data, rather than emitting frontend code from scratch. This contract is attractive for production systems because of safety and consistency. An open question is: can low-latency and low-cost small models achieve the required quality for A2UI-based UI generation? To answer this, we systematically study three controllable design choices for catalog-conditioned A2UI generation: supervised fine-tuning (SFT) data construction method, model size, and component-catalog size. Across two React/TypeScript domains and four base checkpoints spanning two model families (Qwen 3.5 0.8B/2B/4B; SmolLM 3B), we find: (i) a 4B fine-tuned student recovers ~98% of teacher semantic quality and ~97% of teacher visual quality at more than an order of magnitude lower cost than frontier API calls; (ii) both augmented strategies (Perturbed-catalog and Constrained-GT) Pareto-dominate the unaugmented Full-catalog baseline, while specializing on different axes; (iii) even small models can handle and benefit from relatively large component catalog size. We distill these results into practitioner-facing trade-offs and deployment recommendations across the three design choices.