AI UX case studies & teardowns

An AI UX teardown is a screenshot-backed case study of how a shipped AI product solves a specific design problem: composer layout, onboarding, output refinement, or trust signals. This hub includes 35+ live guides with walkthroughs, tradeoffs, and links to reusable patterns in the main catalog.

Patterns document named UX conventions with demos and when-to-use guidance. Teardowns show how real products (ChatGPT, Claude, Perplexity, Gemini, and others) implement those conventions in production, useful for competitive benchmarking before you write a spec or pick a pattern.

Live guides cover ChatGPT, Claude, Perplexity, Gemini, Grok, Google AI Mode, Lovable, DeepSeek, and Notion AI across composer design, output and artifacts, onboarding, personalization, human-in-the-loop, and citations. New products are added as screenshots and analysis are completed.

Open the composer comparison at /teardowns/compare/design-the-composer for a table-first synthesis of ChatGPT, Claude, Perplexity, and Gemini, then drill into each product teardown for screenshots and tradeoffs. The comparison covers default bar, tools, model cost, attachments, and voice.

Open the citations comparison at /teardowns/compare/trust-privacy-settings for a table-first synthesis of ChatGPT and Perplexity sources design: inline chips, claim previews, audit surfaces, research steps, and wrong-source feedback. Then open each product citations teardown for screenshots.

Open the personalization comparison at /teardowns/compare/personalization-memory for tone controls, profile, memory model, and off-ramps across ChatGPT, Claude, and Perplexity. Use the table to pick a posture, then drill into each product personalization teardown.

Open the output comparison at /teardowns/compare/output-artifacts-refinement for how ChatGPT, Claude, Gemini, and Manus handle answers, side panels, refinement, and deliverables. Then open each product output teardown for screenshots.

Open the onboarding comparison at /teardowns/compare/ai-onboarding-first-value for role pickers, first-home empty states, and early upsells across products, then drill into each product onboarding teardown.

Open the human-in-the-loop comparison at /teardowns/compare/human-in-the-loop for approval cards, clarifying questions, send gates, and handoffs. Use it when designing agent actions that need user consent before side effects.

Open the model selection comparison at /teardowns/compare/model-mode-selection for nicknames vs raw IDs, effort controls, and mode chips across ChatGPT, Claude, Perplexity, and Gemini.

Open the pricing comparison at /teardowns/compare/pricing-upgrade for where products surface locks, plan gates, and upgrade CTAs inside the composer and workflow—not only on a pricing page.

Product designers, design engineers, and PMs shipping chat assistants, copilots, and agentic products. Use teardowns in design reviews, PRDs, and competitive audits when you need evidence from shipped interfaces, not generic wireframes.

Each guide shows a last-updated date when copy or screenshots change. AI products ship UI updates frequently; we refresh walkthroughs when major composer, onboarding, or trust patterns change in production.