Skip to patterns
Field guide · v1 · 2026

The interface
patterns of AI.

A handful of patterns have become the grammar of every AI product - from Claude and ChatGPT to Cursor, Perplexity, v0, and Bolt. This is a working catalogue of how they look, how they move, and why they feel the way they do, each one running live.

01the classic LLM feel

Streaming text

ChatGPTClaude

Text that arrives as it's generated, not after. The defining interaction of the era - and the one everything else is measured against.

Why it works
Perceived latency drops to near-zero; the wait becomes the content.
The detail
An uneven cadence and a steady caret read as thinking, not buffering.
Failure mode
A spinner before the first token, or layout that jumps as text lands.
response.streamready

Explain what makes a streaming response feel alive.

Scroll into view to begin streaming…

00 / 50 tokens

live specimen · interact with it

02showing the model think

Cognitive loops

Perplexity

Perplexity's answer flow is the reference: surface the search steps, show the reasoning, and back every claim with source cards the user can open.

Why it works
Visible steps and citations make the answer auditable, not magic.
The detail
Sources appear before the prose; the answer cites them inline as it streams.
Failure mode
Theatrical steps that don't map to anything the system actually did.
answerready

What makes a reasoning UI feel trustworthy?

  1. Searching · reasoning interface trust
  2. Reading 4 sources
  3. Comparing claims
  4. Synthesizing answer

live specimen · interact with it

03content beside the chat

Generative canvases

ClaudeChatGPT

Claude's Artifacts and ChatGPT's Canvas split generated work out of the transcript and into its own pane - editable, previewable, and never scrolled away.

Why it works
Output stops being a message and becomes a document you can revise.
The detail
Preview and code are one toggle apart; the chat keeps a link back to the artifact.
Failure mode
Burying a long artifact inline, where it pushes the conversation off-screen.
workspaceready
chat

Build me a pricing card I can drop into the marketing site.

generating artifact…
content lives outside the stream

live specimen · interact with it

04prompt to live preview

Preview & sandboxed panes

v0Bolt

v0 and Bolt.new turn a prompt into a running, interactive app in a sandboxed pane - the result isn't described, it's there to click.

Why it works
Seeing and using the output beats reading a description of it.
The detail
A skeleton mirrors the final layout, so the preview boots without a jump.
Failure mode
A static image masquerading as a preview, or a blank pane during the build.
v0prompt

A waitlist signup card with an email field and a success state.

build

  • ·resolving dependencies
  • ·scaffolding component
  • ·applying styles
  • ·starting preview server
Describe a change…
localhost:3000/preview
queued

live specimen · interact with it

05orchestration across a codebase

Multi-agent workspaces

CursorCopilotDevin

Cursor's Composer, Copilot's coding agent, and Devin plan a change and apply it across many files at once - the interface makes that orchestration legible.

Why it works
A file list with diff stats turns a black box into a reviewable change set.
The detail
Show progress per file and the running +/- totals; let the user review before merge.
Failure mode
Edits landing silently with no map of what changed or why.
composerready

Add a dark-mode toggle across the app

Cursor Composer · 4 files in this change

  • src/theme/ThemeProvider.tsx182
  • src/components/Toggle.tsx240
  • src/app/layout.tsx41
  • tailwind.config.ts30
0 / 4 files · +49 -3Working…

live specimen · interact with it

06spotlight vs docked

Floating & ambient prompts

SpotlightChatGPT

Two ways to ask: a Spotlight-style panel summoned with Command+K that floats over your work, or a chat bar docked to the bottom edge that keeps a persistent thread.

Why it works
Spotlight keeps you in place; the docked bar keeps the conversation in reach.
The detail
The overlay dims the page and returns focus on dismiss; the dock never blocks content.
Failure mode
A blocking modal that hides the very context the prompt needs to act on.
document.tsx

live specimen · interact with it