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.
AI SEO
Optimize for AI search: Google AI Overviews, ChatGPT, Perplexity, Claude. Structure content to get cited in LLM answers (GEO/AEO).
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.
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.
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.
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.
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.
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.
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.
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.
Product Launch
Plan product launches with the ORB framework (owned, rented, borrowed channels) and phased rollout from internal alpha to full launch.
Streaming
Token by token
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.
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 product case studies with screenshots, 146 copy-paste prompts, 65 agent skills (SKILL.md), 18 multi-step workflows, 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 Case studies?
Patterns are documented UX solutions with definitions, when-to-use guidance, anti-patterns, and interactive demos you can study in the browser. Case studies (27 entries) are screenshot-backed breakdowns 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 Workflows differ?
Prompts (146) are single copy-paste instructions for design tasks. Skills (65) 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, case studies, 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.