Each pattern is a named interaction or UI convention for AI products, streaming replies, tool pickers, citation chips, autonomy budgets, and similar, with a short definition, when to use, when not to use, anti-patterns, and product examples. High-intent pattern pages also include a product implementation table and a per-page FAQ.

How many patterns are in the catalog?

The browse catalog lists 150 patterns organized across 11 categories (chatbot, agents, trust, onboarding, commerce, inputs, outputs, and more). New patterns are added as products ship new conventions; category filters and search help you narrow the grid.

How do I use these patterns in product work?

Start from the user risk: trust, cost, reversibility, or latency. Pick a category filter or search by product name, open 2-3 similar patterns, compare anti-patterns, then link the pattern URL in your spec or Figma brief. Pair with a Guide when you need the patterns for one feature in build order.

Can I filter patterns by AI product or company?

Yes. Use search on this page or scan the examples listed on each card. Patterns reference products like ChatGPT, Claude, Perplexity, Cursor, and others where that convention appears in production.

How do patterns relate to Teardowns and Guides?

Patterns are the reusable conventions you implement. Teardowns show how shipped products such as ChatGPT, Claude, and Perplexity apply them, with screenshots. Guides put the patterns for one feature (citations, composer, memory, onboarding) into a step-by-step build plan with anti-patterns to avoid.

Are interactive demos available for every pattern?

Most pattern detail pages include a live demo illustrating states and flows. If a pattern is conceptual or documentation-only, the page still lists real-world examples from shipped products so you can research behavior in context.