AI Patterns
A portable UX contract, not a skin

The UX pattern language for AI agents

Distilled from the teams pioneering AI workflows. Agentic patterns with machine-readable specs. Each pattern ships with a UX spec the harness can read, not just markup — guardrails for what to render, when, and why.

Browse the catalogue →Install as a Claude Code skill

Try it

View details →
Ask about a pattern, or try one below…

Prompt Bar Pro

A first-run composer with suggestion chips, @ sources, / commands, an environment picker, and an orchestrator picker.

New

View all →
WHERE
Try
10 rows
order_idplaced_atproductchanneltotalstatus
ORD-1000013Oct 30Standing deskWeb$640Shipped
ORD-1000116Oct 30Noise-cancelling headsetMobile app$289Placed
ORD-1000201Oct 294K monitorPhone$420Placed
ORD-1000187Oct 24WebcamWeb$129Shipped
ORD-1000142Oct 18Ergonomic chairMobile app$515Returned
ORD-1000098Oct 11Ring lightMobile app$59Shipped
ORD-1000077Oct 3Desk lampWeb$74Shipped
ORD-1000054Sep 27USB microphoneWeb$149Cancelled
ORD-1000031Sep 19Monitor armPhone$112Shipped
ORD-1000012Sep 8Mechanical keyboardMobile app$165Returned

Natural Language QueryNew

A SQL-first query bar that also takes plain language — the mode badge flips to Ask, and Enter translates the request into a visible, editable WHERE clause before running it.

CompanyIndustry

AI Fill DrawerNew

A record drawer of key/value fields where the model fills the empty values — each arrives as a sourced suggestion to accept, edit or reject.

    PatternCategoryUpdatedStatus
    Tool ApprovalpermissionsOct 28, 2026Stable
    Human in the LoopagentsOct 21, 2026Stable
    Thinking LoaderloadersSep 12, 2026Stable
    Analysis ListloadersOct 30, 2026Beta
    Background TasksagentsOct 14, 2026Beta
    Rate LimiterrorsOct 2, 2026Stable
    Generation ErrorerrorsNov 1, 2026Stable
    Listening StatevoiceAug 19, 2026Beta
    Live TranscriptvoiceSep 3, 2026Beta
    Confidence IndicatorindicatorsOct 9, 2026Stable
    Source Trust CardtextOct 25, 2026Stable
    Multi-Agent TracetracesSep 27, 2026Beta

    Describe FiltersNew

    A Describe button in a table toolbar that turns a plain-language request into removable filter chips — column filters where a column exists, marked semantic matches where none does.

    2. Ask the customer for a photo of the damaged or missing item and check it against ReadOrder details.

    3. IF

      1. Thank the customer and TagEvidence verified

      ELSE
      2. Escalate to

    Procedure BuilderNew

    A doc-style editor for an agent's step-by-step procedure — a / step picker, IF / ELSE branches with plain-language or code conditions, section jumps, and escalate / switch actions.

    1. 1.
    2. 2.

    Type / after a space to pick a tool, then a connector.

    Instruction Tool InsertNew

    A numbered instruction editor where typing / opens a two-step inline picker — choose a tool, then its connector or target — inserting an atomic, editable chip into the prose.

    Original draft
    Onboarding is the design of early success. It helps new users reach their first meaningful outcome quickly by combining motivation, ability, timely prompts, learning scaffolds, and trust, so that the product feels worth coming back to after the very first session.

    Refinement ControlsNew

    One-tap adjustments (Rephrase, Shorten, More formal, Bulletize…) and a free-form instruction field docked under an AI output, with every result kept as a steppable version.

    The agent at work

    Show what the agent is doing, and let people step in before it matters.

    12 patterns
    4 agents working

    Multi-Agent Trace

    A tree of parallel sub-agent tasks, each with its own status and step list.

    Answers you can trust

    Cite, compare and steer — so a response earns belief instead of assuming it.

    8 patterns

    Tailwind v4 moved its configuration into CSS itself, dropping the old tailwind.config.js file entirely. Motion, formerly Framer Motion, now ships a smaller core bundle aimed specifically at this kind of micro-interaction.

    Inline Citation

    A hoverable, clickable footnote-style source marker inline within text.

    Input

    Compose, attach and interrupt without losing the thread.

    5 patterns
    Write a message...

    Try typing @ to reference a source or / for commands.

    Prompt Bar

    A composer with @ sources, / commands, a model picker, and dictation.

    Voice

    Listening, speaking and transcribing as first-class states.

    3 patterns
    Listening…

    Listening State

    A pulsing mic indicator showing the AI is actively listening.

    Building agents

    Give people the controls to define when and how an agent runs.

    4 patterns

    New agent

    Name your agent

    Give it a name, instructions, and an icon.

    • Require approvalHuman must approve before any write action
    • Read-only by defaultCannot push code or send messages directly
    • Limit to 1 action per triggerPrevents runaway loops on rapid events

    Create Agent

    A two-step wizard card for naming an agent, picking its icon, and selecting which event sources activate it.

    When things go wrong

    Fail honestly, keep the partial work, and offer the next step.

    5 patterns

    Generation Error

    A console-style error card for a failed generation, with details and retry.

    Onboarding & teams

    Get people to a first good prompt, then bring their team along.

    4 patterns

    Add AI Patterns to your app

    AI promptRecommended

    Paste this prompt into an AI coding tool like Claude Code or Cursor — it picks a pattern and builds it in your design system.

    Add one pattern from the ai-patterns catalogue to this app: a real screen, built in this codebase's own design system, that I can open and use.

1. Read the catalogue index at https://github.com/carlosmarch/ai-patterns/tree/main/plugins/ai-patterns/skills/ai-patterns/reference/index.md and shortlist patterns that fit a screen this app already has or needs (e.g. a composer, a pending-response loader, a tool approval prompt).
2. Detect the stack and design system: framework, styling (Tailwind, CSS modules, tokens), and component library. Note what's already installed.
3. Pick one pattern, open its spec (<category>/<slug>.md in the same folder) and follow it: Anatomy, Behavior, Content guidelines, Accessibility.
4. Build it into the existing components folder. If the app has its own design system, re-express the reference implementation with its components and tokens; only use the demoed Tailwind + Motion code verbatim if there's none. Add only the dependencies the pattern needs (e.g. motion, lucide-react).
5. Render it on a real route, run the app, and summarize the files you changed and where to see the pattern.
    or set up another way
    Waiting for your first pattern…
    Copy the prompt or open it in a tool to simulate setup

    Prompt-Driven Onboarding

    A setup screen that hands users a pre-filled prompt to paste into their AI coding agent, with a snippet fallback and a live listener that confirms the first event.

    Let's build agents people can trust.

    PatternsClaude Code skillGitHub