Design AI products
people
Curated AI UX patterns, frameworks, prompts, and skills for designers, PMs, and builders, with real examples from shipped AI products.
Editor picks
Perplexity's composer teardown
Search and Computer in the bar. + for uploads and connectors. Model picker on the right when you need a specific brain.
Grok's composer teardown
Almost nothing on the landing page except the bar. Fast on the right, depth behind + on the left.
AI Logo Concept Generator
Generate strategic logo concept directions with rationale, symbol ideas, and style guidance before design execution.
Interactive Beach
A soft watercolor beach vignette: turquoise waves wash the sand while you click to drop crabs, starfish, and shells along the shore.
The Rise of the Design Engineer in the Era of AI
Why the most valuable product people of the next decade might sit between design and code—and what taste, systems thinking, and builder energy look like in practice.
Design and ship polished sites without code. Use code partner25proyearly for 3 months free on yearly Pro.
Try Framer freeAI SEO
Optimize for AI search: Google AI Overviews, ChatGPT, Perplexity, Claude. Structure content to get cited in LLM answers (GEO/AEO).
Instant Buy
One-click purchase from AI
Design & Analyze a Survey
Create effective surveys, collect responses, and analyze results for actionable insights.
ChatGPT's composer teardown
One calm input bar. Tools, modes, and attach funnel through a + menu on the left; voice and send stay on the right.
Logo Critique & Refinement
Critique a logo direction and get prioritized refinements for clarity, distinctiveness, scalability, and brand fit.
Space Shooter 404 Page
Free Framer Marketplace component: a fully playable retro space shooter for 404 pages, loading screens, and memorable interactive moments.
How to Save Tokens in Claude Design Without Killing Creative Quality
A practical playbook for reducing Claude Design usage, avoiding rework, and getting better output from every prompt without sacrificing creative quality.
Conversion Rate Optimization
Optimize marketing pages and forms for conversions: diagnosis, hypotheses, experiments, and copy/UX fixes for homepages, landing pages, and signup flows.
Tool Switching in Composer
Switch between AI capabilities within composer
Design & Analyze A/B Tests
Design rigorous A/B tests, run them correctly, and analyze results for clear decisions.
Claude's composer teardown
Web search on by default, model and effort visible on the right. + on the left handles everything else.
Campaign Copy Generator
Generate conversion-focused copy across landing pages, ads, email subjects, and CTAs in one pass.
Liquid Metal Logo
Free Framer Marketplace component: transform any logo into a flowing liquid-metal surface with chromatic WebGL reflections.
Top 10 AI Prompts Every Visual Designer Should Save
10 copy-paste prompts for mood boards, polish passes, handoff QA, and stakeholder feedback so you can make faster, sharper visual design decisions with AI.
Copy Editing
Edit and polish existing marketing copy with seven focused passes: clarity, voice, proof, specificity, and conversion readiness.
Context Chip Management
Adding context sources via menu with removable chips
Handoff to Engineering
Prepare designs for development with clear specs, assets, and communication.
Gemini's composer teardown
One + menu for uploads and tools. Flash on the right. Drive and Deep research live inside the same flyout tree.
User Research Synthesis
Synthesize user research findings into actionable insights and design recommendations.
Interactive Distort
Free Framer Marketplace interaction: cursor-driven image distortion for hero sections and editorial layouts.
The Week I Realized I Was Learning the Wrong Thing
In a week of nonstop AI launches, why the best investment is still timeless design fundamentals: trust, craft, and clear decision quality.
Directory Submissions
Submit your product to startup, SaaS, AI, and review directories with positioning variants, tracking, and prioritization for backlinks and discovery.
Input Mode Toggle
Switch between text, voice, and dictation modes
Lead a Cross-Functional Project
Successfully lead a project across teams without formal authority.
ChatGPT's output teardown
Refinement menus on each reply, images inline in the thread, and iteration without rewriting the original prompt.
UI Component Specification
Generate a detailed UI component specification with states, variants, and interaction patterns.
glimm
React and Next.js library for shader-driven page transitions: a WebGL band sweeps across route changes, with presets, easing, and agent-ready install prompts.
Companies like Ramp are hiring AI-first designers and we built a skill for that
A practical decode of "AI-first" design hiring language, including before-vs-after workflows and a reusable skill to prep for interviews and team alignment.
Product Launch
Plan product launches with the ORB framework (owned, rented, borrowed channels) and phased rollout from internal alpha to full launch.
Schema Markup
Add and fix JSON-LD structured data for rich results: FAQ, Article, Product, Breadcrumb, and Organization schema on marketing sites.
Career Development Plan
Create a structured career development plan with goals, skills to develop, and actionable steps.
Top Prompts
See allFrequently asked questions
What is AI UX Playground?
AI UX Playground is a free reference for people who design AI products. It catalogs 172+ interface patterns with live demos, 3 versioned UX frameworks, 8 product teardowns with annotated walkthroughs, 146 copy-paste prompts, 86 agent skills (SKILL.md), 18 multi-step workflows, and a curated Playground of 45 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 (8 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 (146) are single copy-paste instructions for design tasks. Skills (86) 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.