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
More teardowns
View all
Patterns to reuse
View allEssential guides
View all
Recently published
KeyUI
Interactive keyboard components with optional haptic and mechanical sound: Mac and Keychron layouts that track physical keystrokes in the browser.
Kinetics
144 spring-physics micro-interactions for web UI: tune stiffness and damping, then copy CSS, React, or a ready-made AI prompt.
Liquid Gooey
Liquid UI effects for React: Morph merges and dissolves touching pieces; Move trails a moving element as liquid rubber. Cross-browser, including Safari.
Animation Vocabulary
Turn vague motion descriptions into precise animation terms so you can brief designers or prompt agents accurately.
Better Accessibility
Accessibility engineering for product UI: focus, keyboard support, ARIA, forms, hit areas, and reduced-motion patterns.
Better Colors
OKLCH color systems for the web: palette generation, contrast, gamut, semantic tokens, and light/dark theming.
Better Layout
Layout structure for web UI: grouping, spacing, reading order, progressive disclosure, breakpoints, and RTL-aware layout.
Better Typography
Web typography craft: font choice and pairing, type scales, wrapping, OpenType features, and component text details.
Better UI
Design-engineering polish for interfaces: surfaces, shadows, icons, micro-interactions, and motion restraint that make UI feel intentional.
Find Animation Opportunities
Find where motion would help—and reject where it would not. Restraint-first opportunity scan with exact motion recipes.
GPT Taste
Strict anti-slop frontend and GSAP motion rules: layout variance, wide editorial type, gapless bento grids, and cinematic scroll.
Imagegen Frontend Mobile
Generate premium mobile app screen concepts and flows as images only—readable type, coherent multi-screen sets, phone mockup framing.
Weekly AI UX in your inbox
Weekly AI interface UX notes for designers and builders. No spam.
Frequently asked questions
What is AI UX Playground?
AI UX Playground is a free reference for people who design AI products. It catalogs 155+ interface patterns with live demos, 3 versioned UX frameworks, 36 product teardowns with screenshot walkthroughs, 172 copy-paste prompts, 148 agent skills (SKILL.md), 18 multi-step workflows, and a curated Playground of 56 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 (148) 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.