Towards Human-AI Synergy in UI Design: Supporting Iterative Generation with LLMs

TL;DR

This paper introduces PrototypeFlow, a human-centered system that enhances iterative UI design with LLMs, enabling designers to refine and control generated interfaces through multi-modal inputs and transparent intermediate results.

Contribution

The paper presents PrototypeFlow, a novel system that supports iterative UI design by integrating natural language, layout preferences, and transparent control mechanisms, addressing limitations of existing end-to-end systems.

Findings

PrototypeFlow effectively supports iterative refinement of UI designs.

User studies show PrototypeFlow improves design control and flexibility.

System demonstrates high fidelity in generated UI prototypes.

Abstract

In automated UI design generation, a key challenge is the lack of support for iterative processes, as most systems focus solely on end-to-end output. This stems from limited capabilities in interpreting design intent and a lack of transparency for refining intermediate results. To better understand these challenges, we conducted a formative study that identified concrete and actionable requirements for supporting iterative design with Generative Tools. Guided by these findings, we propose PrototypeFlow, a human-centered system for automated UI generation that leverages multi-modal inputs and models. PrototypeFlow takes natural language descriptions and layout preferences as input to generate the high-fidelity UI design. At its core is a theme design module that clarifies implicit design intent through prompt enhancement and orchestrates sub-modules for component-level generation. Designers retain full control over inputs, intermediate results, and final prototypes, enabling flexible and targeted refinement by steering generation and directly editing outputs. Our experiments and user studies confirmed the effectiveness and usefulness of our proposed PrototypeFlow.