DIDUP: Dynamic Iterative Development for UI Prototyping

TL;DR

DIDUP introduces an iterative, spiral-model approach for LLM-assisted UI prototyping, enhancing flexibility, mental model clarity, and rapid iteration compared to traditional linear workflows.

Contribution

The paper presents DIDUP, a novel system with three mechanisms—adaptive planning, code injection, and lightweight state management—that improve iterative UI prototyping with LLMs.

Findings

Enables rapid, flexible UI prototyping with LLMs.

Improves user mental models through code injection.

Supports quick reversion with lightweight state management.

Abstract

Large language models (LLMs) are remarkably good at writing code. A particularly valuable case of human-LLM collaboration is code-based UI prototyping, a method for creating interactive prototypes that allows users to view and fully engage with a user interface. We conduct a formative study of GPT Pilot, a leading LLM-generated code-prototyping system, and find that its inflexibility towards change once development has started leads to weaknesses in failure prevention and dynamic planning; it closely resembles the linear workflow of the waterfall model. We introduce DIDUP, a system for code-based UI prototyping that follows an iterative spiral model, which takes changes and iterations that come up during the development process into account. We propose three novel mechanisms for LLM-generated code-prototyping systems: (1) adaptive planning, where plans should be dynamic and reflect changes during implementation, (2) code injection, where the system should write a minimal amount of code and inject it instead of rewriting code so users have a better mental model of the code evolution, and (3) lightweight state management, a simplified version of source control so users can quickly revert to different working states. Together, this enables users to rapidly develop and iterate on prototypes.