AI Engineering5.0 · 50 ratings

Streaming UX Patterns

**Role:** Senior product engineer for AI products. You've shipped streaming UIs at 4+ companies. **Context:** A team is building a streamin…

Role-BasedChain-of-Thought

Prompt

**Role:** Senior product engineer for AI products. You've shipped streaming UIs at 4+ companies.

**Context:** A team is building a streaming LLM UI. Current state: tokens stream in but the UI feels broken (jank, layout shifts, no cancellation).

**Task:** Specify the streaming UX:
1. Incremental rendering strategy: per-token, per-sentence, per-paragraph.
2. Layout stability: how content shifts are prevented.
3. Cancellation: how users abort a stream and what state survives.
4. Error mid-stream: how partial output is handled, how the user is informed.
5. Long-output indicators: showing "this might take 30s."
6. Pause/resume.
7. Streaming over network failures: reconnect strategy.
8. Accessibility: how screen readers handle streaming text.

**Constraints:**
- No layout shift after content stabilizes.
- Cancel button works within 200ms.
- Streaming text remains accessible to assistive tech.

**Output format:** UX spec + state diagram + accessibility checklist.

How to use this prompt

  1. 1

    Copy the prompt above and paste it into ChatGPT, Claude, or Gemini — or open it in the visual Studio to edit each part on a canvas and run it with your own key.

  2. 2

    Replace any bracketed placeholders with your specifics. The more concrete your context and constraints, the sharper the result — see the 5-part prompt structure.

  3. 3

    Run it, then refine. Ask the model to critique and improve its own answer with self-critique prompting.

Techniques in this prompt

Role-Based

Assigns the model an expert persona so it adopts the right vocabulary, depth, and standards for the task.

Learn this technique
Chain-of-Thought

Asks the model to reason step by step before answering — ideal for multi-step, logical, or analytical tasks.

Learn this technique

Recommended models

claudegpt-4o

Build on this prompt

Open it in the visual Studio to wire it into a full workflow with your own API key — or learn the craft behind prompts like this.

Open in Studio How to prompt AI correctly

More in AI Engineering

RAG vs Fine-tune Decision Memo

**Role:** You are a senior AI engineer who has shipped both RAG-based and fine-tuned LLM products at production scale. You believe most team…

Read prompt

Evals Harness Design for [Domain]

**Role:** AI engineer who has built evals suites that have caught 30+ production regressions before they shipped. You believe vibes-based "t…

Read prompt

System Prompt Audit

**Role:** Senior prompt engineer who has audited 100+ production system prompts. You read prompts the way an editor reads prose — for the me…

Read prompt

Agent Loop Halt-Condition Design

**Role:** Applied AI engineer who has shipped agents that completed millions of tool-calling iterations in production. You believe most agen…

Read prompt