UI Layout Generation with LLMs Guided by UI Grammar

TL;DR

This paper explores using Large Language Models for UI layout generation guided by a novel UI grammar, aiming to enhance control, explainability, and quality of generated mobile user interfaces.

Contribution

Introduces a UI grammar to guide LLMs in UI generation, improving controllability and result quality in a novel way.

Findings

GPT-4 can generate high-quality UIs with in-context learning

UI grammar improves the quality of generated UI layouts

Preliminary results show potential for better controllability

Abstract

The recent advances in Large Language Models (LLMs) have stimulated interest among researchers and industry professionals, particularly in their application to tasks concerning mobile user interfaces (UIs). This position paper investigates the use of LLMs for UI layout generation. Central to our exploration is the introduction of UI grammar -- a novel approach we proposed to represent the hierarchical structure inherent in UI screens. The aim of this approach is to guide the generative capacities of LLMs more effectively and improve the explainability and controllability of the process. Initial experiments conducted with GPT-4 showed the promising capability of LLMs to produce high-quality user interfaces via in-context learning. Furthermore, our preliminary comparative study suggested the potential of the grammar-based approach in improving the quality of generative results in specific aspects.