Design AI products
people

We break down how the best AI products are built, then hand you the patterns, prompts, and skills to build yours.

Top stories

Teardown

ChatGPT human-in-the-loop UX: clarify before you act

How ChatGPT stages review before consequential actions, and what to steal for your own agent flows.

ChatGPT

Product teardown

Read

More teardowns

View all

Patterns to reuse

View all

Essential guides

View all
  1. How to prompt AI for accessibility (a11y)

    8 min read

  2. The Rise of the Design Engineer in the Era of AI

    14 min read

  3. How to Design AI Chat Composer UX

    12 min read

Recently published

Guide

How to Design AI Memory & Personalization UX

A build playbook for inspectable continuity: memory controls, persona settings, and ChatGPT vs Claude vs Perplexity teardown lessons.

Guide

How to Design AI Onboarding & First-Value UX

A build playbook for time-to-first-success: example prompts, wizards, and Notion AI vs Lovable vs Manus teardown lessons.

Guide

How to Design AI Output, Artifacts & Refinement UX

A build playbook for keepable AI output: artifacts, refinement, and ChatGPT vs Claude vs Perplexity vs Gemini teardown lessons.

Skill

Ad Creative

Generate and iterate ad creative at scale: headlines, descriptions, primary text, and full variations for Google, Meta, LinkedIn, and other paid platforms.

Skill

AI Image Generation

Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, and 50+ models via inference.sh. Text-to-image, inpainting, LoRA, upscaling, and marketing visuals.

Skill

Churn Prevention

Reduce churn with cancellation flows, save offers, exit surveys, win-back sequences, and retention experiments for SaaS and subscription products.

Teardown

Perplexity shopping UX: discovery feed & instant buy

Perplexity shopping UX: dedicated Shopping tab, curated product cards, in-product checkout, and wallet setup. Patterns for AI-native commerce.

Skill

Design an Interface

Generate multiple radically different interface designs for a module using parallel exploration, then compare. Based on "Design It Twice" from A Philosophy of Software Design.

Skill

DOCX

Create, read, edit, and manipulate Word documents (.docx): formatting, tables of contents, tracked changes, comments, templates, and professional reports.

Skill

Lead Magnets

Plan, create, and optimize lead magnets for email capture: format selection, value framing, landing page structure, and distribution strategy.

Playground

Film Library Gallery

Film photography gallery with illustrated canister cards, location rolls, and editorial type on a gridded cream field.

Playground

Wiki Spy

Explore nearly 44,000 isolated Wikipedia object images in chaotic collages: search by color or theme, or shuffle the field.

Weekly AI UX in your inbox

Weekly AI interface UX notes for designers and builders. No spam.

Subscribe on Substack

Frequently asked questions

What is AI UX Playground?

AI UX Playground is a free reference for people who design AI products. It catalogs 173+ interface patterns with live demos, 3 versioned UX frameworks, 36 product teardowns with screenshot walkthroughs, 172 copy-paste prompts, 131 agent skills (SKILL.md), 18 multi-step workflows, and a curated Playground of 53 projects. The site is built for product designers, PMs, and engineers shipping chat, agents, and multimodal AI.

How is this different from a general UI pattern library?

General UI libraries cover buttons, forms, and navigation for static apps. AI UX Playground focuses on problems that appear when models stream, act autonomously, need trust signals, handle tools, or work across voice and ambient surfaces. Patterns are tagged by product examples (ChatGPT, Claude, Perplexity, and others) and grouped for agentic, chat, trust, and commerce workflows, not generic web chrome.

What is the difference between Patterns and Teardowns?

Patterns are documented UX solutions with definitions, when-to-use guidance, anti-patterns, and interactive demos you can study in the browser. Teardowns (36 live guides) are job-first, screenshot-backed walkthroughs of how shipped AI products solve specific design problems in production, useful for benchmarking before you pick a pattern to spec.

What are Frameworks on this site?

Frameworks are deep, versioned references, not just filters on the pattern grid. The live catalog includes 3 frameworks (for example Agentic UX with 36 patterns across seven territories, and Chat UX for composer and turn-taking). Each framework names territories, guiding questions, anti-patterns, and links into related catalog patterns.

How do Prompts, Skills, and Workflows differ?

Prompts (172) are single copy-paste instructions for design tasks. Skills (131) are full SKILL.md files for Cursor, Claude Code, and similar agents, workflow rules teams install in their repo. Workflows (18) chain prompts across a goal (research, design systems, career, and more) with timing and deliverables. Use prompts for one-offs, skills for repeatable agent behavior, workflows for end-to-end process.

Do pattern pages include working demos?

Yes. Most pattern detail pages embed a live UI demo in the same view as the write-up. There is no separate demos section. Open a pattern from the catalog to see the interaction, states, and notes together. Demos are for learning and reference, not production drop-in code.

Who maintains AI UX Playground and is it free to use?

AI UX Playground is an editorial catalog curated for the design community by Bestfolios.com. Browsing patterns, frameworks, teardowns, prompts, and skills is free. You may cite and link to pages with attribution; check individual skill sources for their licenses. Subscribe to the newsletter on the homepage for weekly AI product UX notes.