Frequently asked questions

AI UX Playground is a free reference for people who design AI products. It catalogs 150+ interface patterns with live demos, 46 product teardowns with screenshot walkthroughs, 221 copy-paste prompts including 18 multi-step prompt packs, 175 agent skills (SKILL.md), 92 glossary terms, step-by-step guides, and a curated Inspirations collection of 65 projects. The site is built for product designers, PMs, and engineers shipping chat, agents, and multimodal AI.

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.

Patterns are documented UX solutions with definitions, when-to-use guidance, anti-patterns, and interactive demos you can study in the browser. Teardowns (46 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.

Guides are step-by-step build plans for one AI feature at a time (citations, composer, memory, onboarding, human-in-the-loop) that link the patterns and teardowns you need in order. The Glossary defines 92 AI product terms, from RAG to agent handoffs, in plain language you can paste into a spec or PRD.

Prompts (221) are single copy-paste instructions for one design task. Prompt packs (18) chain several prompts toward a goal, such as a design sprint, PRD, or accessibility audit, with steps and deliverables. Skills (175) are SKILL.md files that give Cursor, Claude Code, and similar agents standing rules for your repo. Use prompts for one-offs, packs for end-to-end process, and skills for repeatable agent behavior.

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.

AI UX Playground is an editorial catalog curated for the design community by Bestfolios.com. Browsing patterns, teardowns, guides, 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.

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.

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.

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.

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.

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.

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.

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 45+ 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 an approach, 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.

A framework is a versioned, opinionated reference for a territory of AI UX. It introduces named patterns, anti-patterns, and open problems, not just tags on the main catalog. Use frameworks when you need shared vocabulary for specs, design reviews, and agent scoping.

There are 3 live frameworks: Agentic UX and Chat UX and Trust Scaffolding. Each has a version number, cover art, territories or chapters, and links into related patterns in the main catalog. Roadmap frameworks stay in the data layer until content is complete, then join this hub as live entries.

Agentic UX (2.0) defines 36 patterns across seven territories: permission, reversibility, autonomy, cost, cross-app handoffs, ambient and voice, and trust. It answers what an agent may touch, how to undo actions, and how users verify what happened.

Chat UX covers composer, streaming, memory, and repair patterns for conversational AI surfaces.

Use a framework when you are scoping a new surface or aligning a team on vocabulary (for example before writing an agent PRD). Use the pattern grid when you know the interaction you need and want demos, anti-patterns, and product examples for that specific UI convention.

Each framework page shows a version and last-updated date. Territories and pattern lists evolve as the field matures; linked catalog patterns may gain demos or new examples without changing the framework version until the editorial structure changes.

The AI UX glossary defines 92 practical terms for designers, PMs, and marketers building AI products (LLMs, RAG, agents, guardrails, latency, and more) in plain English with UX-focused examples.

Product designers, UX researchers, PMs, and marketers who need shared vocabulary for specs, critiques, and AI feature reviews without reading ML research papers.

Glossary terms explain concepts; patterns show interface conventions with demos; frameworks organize territories like agentic UX or chat UX. Term pages link to related patterns, prompts, and frameworks when a concept maps to shipped UI.

Use definitions in PRDs and design reviews, link term pages in specs for alignment, and follow related patterns when a term implies interface requirements: citations for RAG, approval steps for agents, streaming affordances for latency.

Guides are 36 curated essays organized as tutorials (13), deep dives (16), and industry trends (7). They complement the pattern catalog with step-by-step workflows, pattern essays with demos, and perspective on where AI product design is heading.

Patterns are named UX solutions with definitions and demos. Teardowns are screenshot walkthroughs of shipped products. Guides teach process and connect patterns into narratives: how to build an AI-native design system, how trust patterns work together, or how roles and tools are shifting.

Choose Tutorials when you need a step-by-step workflow. Choose Deep dives when you are specing chat, trust, or agents and want pattern context with demos. Choose Trends when you are aligning stakeholders on tooling, roles, or deliverables.

AI design prompts are ready-made instructions for product design, UX research, visual design, branding, content, and engineering tasks. This hub (/prompts) is the library for those prompts: each entry includes a title, when to use it, and text for Cursor, Claude Code, Codex, ChatGPT, or Claude. Browse by role or search instead of hunting for one mega prompt that tries to do everything.

Start on this hub, then open Prompts for designers for UX and visual work. For a full craft pipeline in Cursor, Claude Code, or Codex, use the UI polish pack. For single prompts: Unslop my UI, Polish frontend UI, Polish UI motion, or Add taste to my design. For identity, use Build a brand kit. To stress-test a plan, use Grill my design. Pair any of those with a matching skill from the Skills hub when you want standing rules.

Open a prompt detail page, click Copy prompt, and paste into your coding agent or chat. Adapt names, constraints, or deliverables in brackets before you send. UI and code prompts belong in Cursor, Claude Code, or Codex with the files open; writing and strategy prompts also work in ChatGPT or Claude. For recurring work, bookmark the URL, pair the prompt with a matching SKILL.md skill, or run a prompt pack that chains the steps for you.

Prompts (220+) solve one task in a single message. Prompt packs (18, at /prompts/for-*) chain several prompts across a goal with steps and deliverables, such as a design sprint, PRD, or accessibility audit. Skills (170+) install persistent rules in Cursor or Claude Code. Start with prompts for quick wins; move to packs and skills when you repeat the same process weekly. See /guides/skill-vs-prompt.

This hub lists 220+ curated prompts organized by UX design, visual design, branding, product, research, AI Workflows (AGENTS.md, DESIGN.md, skills), content, and career. Use category filters or search to narrow the grid; editorial sections highlight popular picks for specs, PRDs, accessibility audits, and research synthesis.

All prompts are plain text. UI, motion, and repo prompts assume Cursor, Claude Code, or Codex with file context. Writing, branding, research, and strategy prompts also work in ChatGPT or Claude without a repo.

Start with Unslop my UI and Polish frontend UI for visual craft, Add taste to my design to lock a direction, Grill my design to lock decisions, then UI component specification, PRD generation, research synthesis, and accessibility audit. Browse UX design and Visual design on this hub for journey maps, usability scripts, and critique; Branding for Build a brand kit; Product for scoping and strategy.

A SKILL.md file is a markdown document that teaches coding agents (Cursor, Claude Code, VS Code Copilot, Codex) how to behave on repeatable design and product tasks, accessibility audits, UI specs, critique, SEO, design systems, and more. Install it once in your agent config and the rules apply across sessions without re-pasting instructions.

Open a skill on this site, copy the SKILL.md body or download the file, then place it in your agent skills folder (for example ~/.cursor/skills/your-skill/SKILL.md for Cursor). Each skill page includes install paths and a copy button. Full steps for Cursor, Claude Code, Codex, and VS Code are in /guides/how-to-install-an-agent-skill.

The Frontend Design SKILL.md skill is the most searched entry for AI interface work. It covers layout, typography, components, and polish for chat and copilot surfaces. Browse it from this hub under UX Design or Visual Design, or open /skills/frontend-design directly. Pair with design-system and accessibility skills for production-ready UI.

Skills (170+ on this site) are persistent agent rules you install in your repo or editor. Prompts (220+) are one-off instructions for a single task in Cursor, Claude Code, Codex, ChatGPT, or Claude. Use skills when you want the same standards every session; use prompts when you need a quick template for a specific deliverable. The comparison is in /guides/skill-vs-prompt.

This hub lists 170+ curated SKILL.md files across UX design, product, marketing, engineering, design systems, accessibility, brand, content, and career. Filter by category, search by keyword, or browse role collections for designers, founders, PMs, marketers, and engineers.

Skills are written for product designers, UX researchers, PMs, marketers, founders, and design engineers shipping AI-native products. Role pages group skills by job, design critique and handoff for designers, PMF and fundraising for founders, CRO and SEO for marketers, with sources from Vercel, Anthropic, community maintainers, and original editorial picks.

Inspirations is a catalog of 65+ live references for AI product work: demos, tools, and experiments with previews, short write-ups, and often source code. Use it when vibe coding, prototyping copilots, or pushing AI-facing UI past stock components.

Most inspiration sites reward browsing. Inspirations picks projects you can reuse in a build: study the interaction, link the demo in a brief, or fork the repo. It sits beside Patterns (AI UX conventions) and Teardowns (shipped product UI), not instead of them.

Pick one project close to your problem. Use the preview, live URL, or repo with a coding agent, in Figma, or in a PRD. Related picks on each detail page narrow the next reference. Drop the project URL in a critique when the team needs a shared example.

Shaders and WebGPU, motion and interaction, design tools, UI components, Framer builds, and portfolio-grade craft. Tags list stack and topic; collection pages group projects by type.

Designers, design engineers, and builders shipping chat, agents, multimodal AI, and copilots who want references they can plug into a workflow, not a moodboard.

Patterns document reusable AI UX conventions with demos. Teardowns walk through shipped product UI with screenshots. Inspirations collects third-party experiments and tools you can study or fork for your own AI UI.

Use the collection chips on the hub: Shaders & WebGPU, Motion, Tools, Components, Framer, and Portfolios. Each lane has its own page, for example aiuxplayground.com/inspirations/shaders.

Yes. Use Submit a project on this page. We look for strong craft and clear value for people building AI interfaces, not another generic landing page.