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

Framework

Chat UX

How the composer, turn state, streaming, memory, and repair should behave when a conversation gets messy.

AI UX Playground

Framework · v2.0

Read

More teardowns

View all

Patterns to reuse

View all

Essential guides

View all
  1. How to Design AI Citations & Sources UX

    12 min read

  2. How to Design AI Memory & Personalization UX

    12 min read

  3. How to Design AI Onboarding & First-Value UX

    12 min read

Recently published

Framer Agent
Sponsored

Best AI site builder for designers, PMs, and founders.

Try Framer free
Prompt

Answer security questionnaires

Copy-paste security questionnaire prompt that drafts clear answers from your real architecture and policies.

Skill

App Store Screenshots

Create App Store and Google Play screenshots and preview videos with platform specs, gallery ordering, device mockups, and ASO-ready listing assets.

Skill

CLAUDE.md Improver

Audit and improve CLAUDE.md files across a repo: scan all project memory files, score against quality templates, report gaps, then apply targeted updates with approval.

Prompt

Close a pilot

Copy-paste pilot prompt for a proposal or LOI with scope, success metrics, pricing, and exit criteria.

Skill

Create DESIGN.md

Create or update a DESIGN.md from a product repo or public site—document the governing design language, tokens, and guidance without copying every implementation detail.

Prompt

Define activation

Copy-paste activation prompt for aha moments, activation events, and onboarding experiments for an AI product.

Prompt

Define your ICP

Copy-paste ICP prompt for B2B AI: firmographics, buyer, trigger events, and disqualifiers.

Prompt

Demo and handle objections

Copy-paste demo prompt with a story arc, proof moments, and rebuttals to common AI product objections.

Prompt

Design pricing

Copy-paste pricing prompt to design good-better-best tiers, usage limits, and upgrade paths for an AI product.

Prompt

Email investors

Copy-paste investor outreach prompt for short cold emails and LinkedIn notes that earn a reply.

Prompt

Explain an equity offer

Copy-paste offer prompt that explains cash, equity, dilution, and what has to go right in plain language.

Prompt

Fix retention and churn

Copy-paste retention prompt to diagnose churn leaks and prioritize save and retention experiments.

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 150+ interface patterns with live demos, 3 versioned UX frameworks, 45 product teardowns with screenshot walkthroughs, 210 copy-paste prompts, 165 agent skills (SKILL.md), 17 multi-step workflows, and a curated Playground of 65 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 (45 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 (210) are single copy-paste instructions for design tasks. Skills (165) are full SKILL.md files for Cursor, Claude Code, and similar agents, workflow rules teams install in their repo. Workflows (17) 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.