AI features are non-deterministic by nature — exceptional AI design embraces uncertainty with progressive streaming, clear attribution, immediate human overrides, and predictable error states.
1. Design progressive streaming & generation feedback
- Streaming response: Animate streaming tokens smoothly without jarring scroll jumps; provide an auto-scroll toggle that pauses when the user scrolls up.
- Thinking / Processing state: Differentiate between "Connecting/Thinking" (animated shimmering indicator or pulsing dot) vs "Rendering" (progressive text/card reveal).
- Cancel affordance: Always provide an immediate "Stop Generating" button (
motion-fast reaction) during streaming.
2. Establish AI attribution and confidence indicators
- Provenance & citation: Highlight generated content clearly with distinct AI badging (e.g. subtle badge or sparkle icon) and clickable source links/tool citations.
- Confidence levels: When an AI output is probabilistic, display confidence badges or alternate suggestions instead of pretending certainty.
- Non-destructive suggestions: AI-generated code, text, or data edits should appear in a diff/staging preview (accept/reject controls) rather than overwriting user work directly.
3. Provide immediate human override & correction mechanisms
- Every AI output card must provide simple feedback buttons (👍 / 👎, "Copy", "Regenerate", "Edit").
- Allow users to edit generated text inline without re-prompting from scratch.
- If an agent task fails or hallucinates, provide a direct "Undo" or "Revert to Previous Version" action.
4. Optimize prompt input and conversational ergonomics
- Expanding textarea: Auto-grow prompt inputs up to a maximum height (e.g. 200px) before enabling internal scrolling.
- Context attachments: Visual chips indicating attached files, screenshots, or referenced documents with clear remove buttons.
- Quick suggestions & shortcuts: Provide one-tap starter prompt pills to reduce blank-slate anxiety.
5. Handle AI-specific failure modes
- Rate limiting / Quota: Clear message indicating when quota resets with an option to upgrade or switch models.
- Safety / Policy refusal: Transparent, non-accusatory explanation of why a request was filtered, with suggestions to rephrase.
- Model degradation / Timeout: Graceful fallback with cached responses or manual fallback options.
Completion Criteria
Output
An ai-interaction-spec.md detailing the component states, streaming protocols, feedback loops, and human-in-the-loop override controls for all AI-enabled features.
Anti-patterns
- Silently overwriting user documents with AI output without preview or undo.
- Infinite un-cancellable streaming that traps user interaction.
- Blaming the user when model safety blocks occur with accusatory error copy.
- Hiding the fact that content was machine-generated.
1---2name: ai-feature-ux-patterns3description: Design intuitive UX patterns for AI interfaces including streaming, confidence, overrides, and prompts. Use when AI features, prompt UX, streaming UI, LLM interface, or AI assistant.4---56**AI features are non-deterministic by nature — exceptional AI design embraces uncertainty with progressive streaming, clear attribution, immediate human overrides, and predictable error states.**78### 1. Design progressive streaming & generation feedback9- **Streaming response**: Animate streaming tokens smoothly without jarring scroll jumps; provide an auto-scroll toggle that pauses when the user scrolls up.10- **Thinking / Processing state**: Differentiate between "Connecting/Thinking" (animated shimmering indicator or pulsing dot) vs "Rendering" (progressive text/card reveal).11- **Cancel affordance**: Always provide an immediate "Stop Generating" button (`motion-fast` reaction) during streaming.1213### 2. Establish AI attribution and confidence indicators14- **Provenance & citation**: Highlight generated content clearly with distinct AI badging (e.g. subtle badge or sparkle icon) and clickable source links/tool citations.15- **Confidence levels**: When an AI output is probabilistic, display confidence badges or alternate suggestions instead of pretending certainty.16- **Non-destructive suggestions**: AI-generated code, text, or data edits should appear in a diff/staging preview (accept/reject controls) rather than overwriting user work directly.1718### 3. Provide immediate human override & correction mechanisms19- Every AI output card must provide simple feedback buttons (👍 / 👎, "Copy", "Regenerate", "Edit").20- Allow users to edit generated text inline without re-prompting from scratch.21- If an agent task fails or hallucinates, provide a direct "Undo" or "Revert to Previous Version" action.2223### 4. Optimize prompt input and conversational ergonomics24- **Expanding textarea**: Auto-grow prompt inputs up to a maximum height (e.g. 200px) before enabling internal scrolling.25- **Context attachments**: Visual chips indicating attached files, screenshots, or referenced documents with clear remove buttons.26- **Quick suggestions & shortcuts**: Provide one-tap starter prompt pills to reduce blank-slate anxiety.2728### 5. Handle AI-specific failure modes29- **Rate limiting / Quota**: Clear message indicating when quota resets with an option to upgrade or switch models.30- **Safety / Policy refusal**: Transparent, non-accusatory explanation of why a request was filtered, with suggestions to rephrase.31- **Model degradation / Timeout**: Graceful fallback with cached responses or manual fallback options.3233## Completion Criteria34- [ ] Streaming animation, autoscroll pause, and "Stop Generating" controls defined35- [ ] Generated content clearly marked with AI badges, citations, and confidence cues36- [ ] Inline editing, accept/reject diffs, and regeneration affordances designed37- [ ] Prompt input ergonomically designed with attachment chips and starter pills38- [ ] Error states defined for rate limits, safety refusals, and service timeouts3940## Output41An `ai-interaction-spec.md` detailing the component states, streaming protocols, feedback loops, and human-in-the-loop override controls for all AI-enabled features.4243## Anti-patterns44- Silently overwriting user documents with AI output without preview or undo.45- Infinite un-cancellable streaming that traps user interaction.46- Blaming the user when model safety blocks occur with accusatory error copy.47- Hiding the fact that content was machine-generated.
Uwayxt