Skip to content
C
Library

Every pattern, in the order I'd teach them.

Teardowns are sorted by collection, not by date. Start at the top of a collection and work down — or search, filter, and sort your own way.

65 patterns
The prompt surfaceHow the box asks for intent.
  1. The composer at rest
    What your input box says when no one is typing into it.
    9 min
  2. The suggestion chip
    A pre-written prompt the user can tap instead of type.
    7 min
  3. The context pill
    How attached sources sit next to the cursor.
    8 min
  4. The slash command menu
    Discoverable power, triggered by a single character.
    9 min
  5. The mention trigger
    Using @ to invoke a scope, a person, or a tool.
    7 min
  6. The file drop zone
    What happens the moment a file crosses the threshold.
    7 min
  7. The shortcut overlay
    Teaching the keyboard without a tour.
    8 min
  8. The capability inventory
    A quiet list of what this product can actually do.
    9 min
  9. Keyboard navigation
    The composer a power user can drive without touching the mouse.
    8 min
The responseHow the model performs the answer.
  1. The streaming cadence
    Why your token rate is a design decision, not a backend one.
    11 min
  2. The thinking indicator
    Everything you put on screen between enter and the first token.
    8 min
  3. The citation footer
    Where the sources go, and how you know they back the claim.
    10 min
  4. The confidence gradient
    Showing uncertainty in typography, not in hedging prose.
    9 min
  5. The partial answer
    What the model does when it only half-knows.
    8 min
  6. The regenerate affordance
    Asking for another take, without losing the first one.
    8 min
  7. The long-form spine
    What to do when the answer is longer than the screen.
    10 min
  8. The table response
    When the right shape for the answer is rows and columns.
    9 min
  9. The ambiguity prompt
    Asking a clarifying question without breaking flow.
    10 min
  10. The error surface
    When the model fails, don't pretend it didn't.
    8 min
  11. The empty-state answer
    Responding when there's genuinely nothing to say.
    7 min
  12. The Socratic check
    When the model asks before answering.
    9 min
Agentic flowsHow the model shows its work, in the world.
  1. The plan preview
    How to show the model's intent before it spends your time.
    12 min
  2. The tool call, visible
    When and how to show the model reaching for a tool.
    10 min
  3. The interrupt handle
    How the user stops a running agent without losing state.
    9 min
  4. The diff preview
    Before-and-after for anything the agent is about to change.
    10 min
  5. The approval checkpoint
    A pause-for-human-signoff, named and scoped.
    8 min
  6. The step receipt
    An after-the-fact trail of what the agent actually did.
    8 min
  7. The rollback affordance
    Undoing what the agent did, when undo is possible.
    9 min
  8. The rate-limit display
    Making invisible quotas visible without anxiety.
    9 min
  9. The model fallback
    Choosing a cheaper model without surprising the user.
    10 min
  10. The macro recorder
    Turning a good agent run into a reusable recipe.
    11 min
  11. The cost ticker
    A running total the agent can't hide from.
    10 min
  12. Background task dock
    Where long-running work lives while you keep typing.
    11 min
Memory & contextWhat the model carries with it.
  1. The context source tray
    A visible list of everything the model is reading right now.
    9 min
  2. The memory chip
    Persistent facts about the user, editable in one click.
    8 min
  3. The thread summary
    Compressing a long conversation into something the user can scan.
    8 min
  4. The context handoff
    Carrying state between sessions, without magic and without loss.
    10 min
  5. The prompt history search
    Finding the turn from last Tuesday in three keystrokes.
    9 min
  6. The session onboarding
    Opening a new thread with just enough of yesterday.
    8 min
  7. Branching conversation
    When you want to try two versions of the same thought.
    10 min
  8. The knowledge map
    A view of what the model has learned about you.
    12 min
Trust & evidenceHow the model earns the reader's belief.
  1. The reasoning trace
    Showing how the model got there, without overwhelming.
    12 min
  2. Data provenance
    Linking every claim to the exact row it came from.
    11 min
  3. The counterfactual toggle
    Letting the user ask 'what if that input changed?'
    10 min
  4. Hedge calibration
    Saying 'probably' in a way the reader can actually parse.
    9 min
  5. Answer pinning
    Freezing a turn so the model can't rewrite it later.
    8 min
Multimodal & artifactsWhen chat isn't enough.
  1. The voice composer
    Dictating a prompt without losing the option to edit.
    10 min
  2. Image annotation
    Pointing at a screenshot without leaving the chat.
    9 min
  3. The canvas artifact
    Giving the model a second surface to build on.
    12 min
  4. Artifact playback
    Scrubbing the history of a generated artifact.
    10 min
  5. Screen context
    Letting the model see what you see, with consent.
    11 min
  6. Read-aloud
    Text-to-speech that you can follow with your eyes.
    9 min
  7. Cross-app handoff
    Passing an artifact to the tool it wants to live in.
    10 min
CollaborationWhen the session has more than one human in it.
  1. Multiplayer cursor
    Two humans, one model, no elbow fight.
    11 min
  2. Shared memory
    Team-scoped facts with a legible ownership trail.
    12 min
  3. Comment thread
    Inline replies on a model's output.
    10 min
  4. Role switcher
    One user, many hats, one honest session.
    9 min
OrchestrationHow many agents, at what cadence, inside what ceiling.
  1. Subagent dispatch
    When the parent agent spawns named helpers.
    13 min
  2. Work queue
    All the tasks the agent has accepted but not yet started.
    11 min
  3. Scheduled run
    Tasks that the agent runs at a time or on a trigger.
    11 min
  4. Budget guard
    A hard cap the agent cannot silently blow through.
    10 min
Dev & evalThe surfaces that make AI products debuggable.
  1. Prompt diff
    Two prompts, side by side, same inputs, different outputs.
    11 min
  2. The eval dock
    A live pass/fail grid across a frozen test set.
    12 min
  3. Latency trace
    A waterfall of where the seconds went.
    10 min
  4. Token map
    A picture of which tokens did what, and why.
    11 min