AI product UX teardowns & case studies

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 15+ 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, and citations. New products are added as screenshots and analysis are completed.

Open the AI chat composer design section on this page, then read the ChatGPT and Claude composer guides side by side. Each walkthrough covers calm defaults, tool disclosure, attachments, and model or mode pickers, with a vs-others strip linking peer products.

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.