5 Patterns for Designing Agentic Interfaces
Pedro Bacelar
Lead AI Product Designer @ supermodular.ai // Founding Designer
Chat isn't enough anymore
Most AI interfaces still look like a chat box. But the moment AI stops answering and starts acting - using tools, handling steps, generating outputs, coordinating actions - chat stops being the right container.
Designers ship chat UIs anyway. Not because chat is the answer, but because we haven't named the alternatives yet.
This deck names five of them.
Five patterns inside
1. Don't rely on chat as the whole interface. Chat is good for intent. Structured UI is good for operation.
2. Show system state, not just output. Current step, tool use, status, sources, uncertainty, failures — make the work visible.
3. Human-in-the-loop. Not maximum automation. The right autonomy boundary.
4. Use system-level UI for multi-step work. Flows, timelines, logs, inspectors, dependency maps, status boards.
5. Design for recovery, not just success. Partial completion, ambiguity, tool failures, retries, handoffs. In agentic products, the microstates are the product.
Patterns, systems, and a working demo
The deck goes past principles into working systems:
Three patterns in production - ticketing, agentic flow management, and assessment platforms, with the reusable components behind each.
The Figma → Claude Code → Storybook workflow supermodular.ai uses to ship agentic products in days, not weeks.
A live demo prompt that built and deployed a working refund-review dashboard from a single spec.
With real examples pulled apart: Devin, Claude Code, Claude Artifacts, GitHub Copilot Workspace, Langflow.