PromptInfuser: How Tightly Coupling AI and UI Design Impacts Designers' Workflows

Savvas Petridis, Michael Terry, Carrie J. Cai
10/24/2023
cs.HCcs.AI

No confident code implementation found for this paper.

Abstract

Prototyping AI applications is notoriously difficult. While large language model (LLM) prompting has dramatically lowered the barriers to AI prototyping, designers are still prototyping AI functionality and UI separately. We investigate how coupling prompt and UI design affects designers' workflows. Grounding this research, we developed PromptInfuser, a Figma plugin that enables users to create semi-functional mockups, by connecting UI elements to the inputs and outputs of prompts. In a study with 14 designers, we compare PromptInfuser to designers' current AI-prototyping workflow. PromptInfuser was perceived to be significantly more useful for communicating product ideas, more capable of producing prototypes that realistically represent the envisioned artifact, more efficient for prototyping, and more helpful for anticipating UI issues and technical constraints. PromptInfuser encouraged iteration over prompt and UI together, which helped designers identify UI and prompt incompatibilities and reflect upon their total solution. Together, these findings inform future systems for prototyping AI applications.

View on arXivView PDF

Code Implementations

No confident code match yet

We couldn't find an author-owned or strongly-evidenced community implementation for this paper. Any repos shown below are weak matches — verify before relying on them.

No code implementations found yet.

Know of an implementation? Let us know in the comments below!

Similar Papers

Cite this paper

@article{petridis2023promptinfuser,
  title  = {PromptInfuser: How Tightly Coupling AI and UI Design Impacts Designers' Workflows},
  author = {Savvas Petridis and Michael Terry and Carrie J. Cai},
  year   = {2023},
  eprint = {2310.15435},
  archivePrefix = {arXiv},
  url    = {http://arxiv.org/abs/2310.15435v1}
}

Add a badge to your README

Shows whether official code is linked for this paper.

Code of Paper badge
[![Code of Paper](https://codeofpaper.com/badge/2310.15435.svg)](https://codeofpaper.com/paper/2310.15435)

Discussion