Logo
ScienceStack
Table of Contents
Fetching ...
Sign In

DIDUP: Dynamic Iterative Development for UI Prototyping

Jenny Ma, Karthik Sreedhar, Vivian Liu, Sitong Wang, Pedro Alejandro Perez, Lydia B. Chilton

TL;DR

The paper addresses the fragility of current LLM-assisted UI prototyping tools, which tend to follow a rigid, waterfall-like process. It proposes DIDUP, a system that enforces an iterative spiral development model for code-based UI prototyping, and introduces three mechanisms—adaptive planning, code injection, and lightweight state management—to support dynamic, incremental progress. Empirical evaluation shows DIDUP yields more complete and stylistically refined UIs with safer change management and rollback capabilities, outperforming a GPT Pilot baseline. The work demonstrates that a spiral-development approach can significantly improve rapid, user-guided UI prototyping in front-end development with LLMs, enhancing adaptability to evolving requirements and design exploration.

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.

DIDUP: Dynamic Iterative Development for UI Prototyping

TL;DR

The paper addresses the fragility of current LLM-assisted UI prototyping tools, which tend to follow a rigid, waterfall-like process. It proposes DIDUP, a system that enforces an iterative spiral development model for code-based UI prototyping, and introduces three mechanisms—adaptive planning, code injection, and lightweight state management—to support dynamic, incremental progress. Empirical evaluation shows DIDUP yields more complete and stylistically refined UIs with safer change management and rollback capabilities, outperforming a GPT Pilot baseline. The work demonstrates that a spiral-development approach can significantly improve rapid, user-guided UI prototyping in front-end development with LLMs, enhancing adaptability to evolving requirements and design exploration.

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.
Paper Structure (6 sections, 2 figures)

This paper contains 6 sections, 2 figures.

Table of Contents

  1. Introduction
  2. Background and Approach
  3. System
  4. Evaluation
  5. Future Work
  6. Conclusion

Figures (2)

  • Figure 1: DIDUP system walkthrough. Users begin by inputting their UI goal. DIDUP generates a plan, then implements the tasks iteratively, while keeping the user in control. At every stage, users have the opportunity to approve or change the direction of the code implementation. The implementation stage incorporates adaptive planning, code injection, and lightweight state management in order to create an iterative spiral workflow.
  • Figure 2: The figure above shows examples of the UI output at each task. DIDUP saves the code for each UI. At each task, the user can test interactions with the interface. The user can also add tasks to help prototype new features and test out more interactions.