Design AI products
people
Curated AI UX patterns, frameworks, prompts, and skills for designers, PMs, and builders, with real examples from shipped AI products.
Liquid Metal Logo
Free Framer Marketplace component: transform any logo into a flowing liquid-metal surface with chromatic WebGL reflections.
AI Logo Concept Generator
Generate strategic logo concept directions with rationale, symbol ideas, and style guidance before design execution.
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.
Conversation Summaries in Spaces
Google Chat shows an AI-generated summary card for unread messages in Spaces so users can quickly catch up on the key topics.
Customer Journey Map
Create end-to-end customer journey maps with stages, touchpoints, emotions, pain points, and opportunities. JTBD personas, awareness through advocacy, and Mermaid or table output formats.
Design and ship polished sites without code. Use code partner25proyearly for 3 months free on yearly Pro.
Try Framer freeInstant Buy
One-click purchase from AI
Design & Analyze a Survey
Create effective surveys, collect responses, and analyze results for actionable insights.
Interactive Distort
Free Framer Marketplace interaction: cursor-driven image distortion for hero sections and editorial layouts.
Logo Critique & Refinement
Critique a logo direction and get prioritized refinements for clarity, distinctiveness, scalability, and brand fit.
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.
Incognito Mode
Claude offers an incognito (private) mode that lets users have conversations without saving them to history or using them to improve the model. The mode is toggled via a ghost icon in the header.
Design Motion Principles
Motion and interaction design through Emil Kowalski, Jakub Krehel, and Jhey Tompkins lenses. Create purposeful animations or audit for AI-slop motion. Includes frequency gates, context weighting, cookbooks, and accessibility rules.
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.
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.
Campaign Copy Generator
Generate conversion-focused copy across landing pages, ads, email subjects, and CTAs in one pass.
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.
Shopping Tab & Instant Buy
Perplexity features a dedicated Shopping tab with a discovery feed of recommended products, displaying curated product cards with images, prices, ratings, and one-click purchase options.
Figma Use
Mandatory prerequisite for Figma MCP: execute Plugin API scripts to create, edit, and inspect nodes, variables, components, and auto-layout. Pairs with design-system screen workflows for implementing designs in Figma.
Context Chip Management
Adding context sources via menu with removable chips
Newsletter · Substack
Weekly insights in your inbox
A weekly newsletter for designers, PMs, and builders shipping AI products. Practical AI UX: patterns, real products, no hype.
Handoff to Engineering
Prepare designs for development with clear specs, assets, and communication.
Floating Books
3D floating book cards with tactile motion by Oluwasefunmi Akomolafe.
User Research Synthesis
Synthesize user research findings into actionable insights and design recommendations.
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.
Image Generation
ChatGPT's image generation feature allows users to create images using DALL·E directly within the conversation interface, with tool selection, prompt input, and result display integrated seamlessly.
Interview Prep Generator
Generate STAR stories, practice questions, and talking points from a resume. Behavioral interview prep with role-specific prompts and answer frameworks.
Input Mode Toggle
Switch between text, voice, and dictation modes
Lead a Cross-Functional Project
Successfully lead a project across teams without formal authority.
Interactive Turntable UI
Technics SL-1200MK2 tribute in the browser: pitch control, upload your track and cover art, and a tactile deck UI built as a React component from Figma with Claude.
UI Component Specification
Generate a detailed UI component specification with states, variants, and interaction patterns.
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.
Response Refinement
ChatGPT provides a contextual menu on AI responses that allows users to refine or modify the output with specific instructions like "Try again", "Add details", "More concise", "Search the web", or "Think longer" without retyping their prompt.
LinkedIn Profile Optimizer
Optimize LinkedIn profiles for recruiter search, headline and summary rewrites, keyword placement, and engagement patterns without inflating or misrepresenting experience.
Streaming
Token by token
Prepare for a Promotion
Build your case, align with your manager, and position yourself for the next level.
Liquid DOM Showcase
WebGPU liquid-glass demo that paints live HTML into canvas via the experimental HTML-in-Canvas API, with React and Three.js integration paths.
Career Development Plan
Create a structured career development plan with goals, skills to develop, and actionable steps.
Designing Better AI Chat: A Deep Dive (Part 2 of 2)
Citations, memory, thread navigation, export, and recovery patterns that turn AI chat from a demo into dependable infrastructure.
Personalization
ChatGPT provides a dedicated Personalization interface that allows users to customize how the AI behaves, including conversation style, response format, and contextual preferences, separate from technical settings.
Resume ATS Optimizer
Optimize resumes for Applicant Tracking Systems: parse formatting issues, extract job-description keywords, calculate match scores, and suggest placements with before/after examples. Includes industry guidance for tech, finance, healthcare, and marketing, plus career changers and recent graduates.
Newsletter · Substack
Weekly insights in your inbox
A weekly newsletter for designers, PMs, and builders shipping AI products. Practical AI UX: patterns, real products, no hype.
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, 27 real-product screenshots, 146 copy-paste prompts, 59 agent skills (SKILL.md), 18 playbooks, and a curated Playground of 43 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 the Gallery?
Patterns are documented UX solutions with definitions, when-to-use guidance, anti-patterns, and interactive demos you can study in the browser. The Gallery (27 entries) is a screenshot library of how shipped AI products solve similar problems in production—useful for visual 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 Playbooks differ?
Prompts (146) are single copy-paste instructions for design tasks. Skills (59) are full SKILL.md files for Cursor, Claude Code, and similar agents—workflow rules teams install in their repo. Playbooks (18) are multi-step workflows that chain prompts across a goal (research, design systems, career, and more). Use prompts for one-offs, skills for repeatable agent behavior, playbooks 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, gallery shots, 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.