Progress steps is an AI interface design pattern that surfaces the model's work as collapsible "thinking" traces or tool steps (search, retrieval, code execution, API calls, and similar). It threads a usability needle: collapsed by default so dense sessions and power users are not punished with noise, while still expandable on demand so curiosity and skepticism both have a clear door to open. Users who want flow stay in the answer; users who want provenance or debugging detail can peel back the timeline without leaving the thread. The pattern supports trust, education, and supportability in assistants, search-style products, and agentic flows where "what happened" matters as much as the final reply.
Use when the system performs visible intermediate work (search, tools, multi-step reasoning) and you need both a calm default UI and optional transparency for verification, learning, or troubleshooting.
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Progress Steps" AI interface design pattern.
Pattern Description:Weekly AI interface UX notes and resources on Substack, no spam, unsubscribe anytime.