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
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.
ChatGPT's output teardown
Structured answers in the thread, reasoning in Activity, version history on regenerate, and selection refinement into writing blocks.
AI Logo Concept Generator
Generate strategic logo concept directions with rationale, symbol ideas, and style guidance before design execution.
Taste
Design DNA for agents: a Claude Code skill and marketing site that reverse-engineers any website’s taste into tokens plus the trade-offs behind them.
Why I Keep Returning to These Ten Vibe-Coded Projects
A Playground tour of portfolios, experiments, and Framer components that show where product feel actually gets built.
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.
Claude's output teardown
Short answers stay in the thread. Try again keeps prior drafts. Edit an earlier prompt to branch when the direction changes.
Logo Critique & Refinement
Critique a logo direction and get prioritized refinements for clarity, distinctiveness, scalability, and brand fit.
Newt
Code-native pixel art editor: paint like a raster tool while every pixel stays a color token in clean, editable code—export SVG, CSS, React, PNG, or GIF.
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.
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.
Perplexity's citations teardown
Evidence woven into the answer: from inline sourcing to layered verification and citation-aware feedback.
Campaign Copy Generator
Generate conversion-focused copy across landing pages, ads, email subjects, and CTAs in one pass.
Dot Shader
Halftone image tool with a polished interface: upload stills or SVG, tune dot size and color, and preview shader-driven dither in the browser.
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.
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.
Perplexity's output teardown
Answer, Links, and Images tabs. Research steps, follow-ups, export, rewrite modes, and selection refinement.
User Research Synthesis
Synthesize user research findings into actionable insights and design recommendations.
Interactive Beach
A soft watercolor beach vignette: turquoise waves wash the sand while you click to drop crabs, starfish, and shells along the shore.
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.
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.
Claude's artifacts teardown
Substantial work opens as an artifact beside the chat, preview, code, interactive tools, and publish without losing context.
UI Component Specification
Generate a detailed UI component specification with states, variants, and interaction patterns.
Space Shooter 404 Page
Free Framer Marketplace component: a fully playable retro space shooter for 404 pages, loading screens, and memorable interactive moments.
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.
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, 11 product teardowns with annotated walkthroughs, 146 copy-paste prompts, 86 agent skills (SKILL.md), 18 multi-step workflows, and a curated Playground of 48 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 (11 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.