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 allPrompt Starters
Chip suggestions above the composer so people know what to ask. Ask Maps and Ask YouTube do this too.
Citations
Open the source without leaving the answer. Video cards, place reviews, or a chip that expands.
Chat Artifacts
Park guides, tables, itineraries, and drafts beside the thread so they stay usable.
Essential guides
View all
Recently published
Pablo's World
A hand-drawn portfolio you walk around: arrow keys to move through a black-and-white isometric world instead of scrolling a grid of case studies.
Pane
Staggered gradient panels from playgrnd: each row splits on its own so no edge runs the full height, then export PNG, SVG, or a short loop.
Ask YouTube: guides built from video
Ask YouTube teardown: full-page guides synthesized from the video catalog with cited clips, compare metadata, and structured feedback.
Karpathy Guidelines
Behavioral guidelines to reduce common LLM coding mistakes. Use when writing, reviewing, or refactoring code to avoid overcomplication, make surgical changes, surface assumptions, and define verifiable success criteria.
Reddit Automation
Find Reddit threads where people genuinely need what you offer, then draft honest, disclosed replies. Discovery scans the right subreddits; drafting respects community rules and keeps a human in the loop.
vgpu
WebGPU library for agents: one typed API for browser canvases, headless Node, and serverless, with CLI discovery, MCP, and copy-ready examples.
Critters
Soft vinyl creatures raymarched from signed distance fields. They morph between forms on one continuous surface and react to your cursor.
Ask Maps by Google Maps: chat beside the map
Ask Maps teardown: chat beside Google Maps that writes place cards, itineraries, and review grounding onto the live map.
Qwen composer: a quiet bar for a multimodal studio
First send should feel like chat. Image, video, research, and live voice open when intent shows.
Qwen output: keep the chain in the thread
Photo to prompt to image to video stays one conversation. Search answers bring sources alongside the reply.
Bible Strong Avatar Lab
Procedural 2D avatar studio in the browser: build characters with SVG geometry, compose expressions and blink animations, then export snapshots, ZIP packages, or a standalone engine.
Aurorasaur
Aurora borealis generator: design ribbon-path aurora textures on artboards, tune curtain and vortex shapes, then export stills, transparent PNGs, or seamless looping clips.
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 150+ interface patterns with live demos, 3 versioned UX frameworks, 45 product teardowns with screenshot walkthroughs, 185 copy-paste prompts, 159 agent skills (SKILL.md), 17 multi-step workflows, and a curated Playground of 64 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 (185) are single copy-paste instructions for design tasks. Skills (159) 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.