Front-end developers create UI prototypes to evaluate alternatives, which is a time-consuming process of iteration and refinement. The Generated AI Code Assistant enables rapid prototyping by prompting you through a chat interface instead of writing code. However, while this interaction gives developers flexibility by allowing them to create arbitrary prompts, it makes it difficult to control what is generated. First, natural language itself is ambiguous, making it difficult for developers to accurately convey their intentions. Second, the model may respond unexpectedly, requiring developers to use trial and error to repair unwanted changes. To address these weaknesses, we introduce Squire, a system designed for guided prototype exploration and refinement. In Squire, developers build a UI component tree step by step by pointing and clicking on different choices suggested by the system. Additional affordances allow developers to adjust the appearance of the target UI. All interactions are explicitly scoped, guaranteeing which parts of the UI will or will not change. The system is supported by a new intermediate representation called SquireIR with language support for controlled exploration and refinement. Through a user study in which 11 front-end developers implemented a mobile web prototype using Squire, we found that developers effectively explored and iterated on different UI alternatives with a high level of perceptual control. Developers also rated Squire positively for ease of use and overall satisfaction. Our findings suggest that by combining chat with explicitly scoped affordances, it is likely that rapid UI prototyping tools can control code generation.
