Explore an AI feature in Magic Patterns by adding it to a recognizable base UI, generating genuinely different interaction models, and comparing the working prototypes against user and product criteria with design and engineering partners.
Source episode · 23:00
How I AI: Priya Badger's Workflow for AI Product Management and Prototyping at Yelpwith Claire Vo
Priya adds a photo-starting point to a recreated Yelp Assistant in Magic Patterns, then uses Inspiration mode to generate differentiated interaction options and compare how each flow guides the user.
A small set of differentiated, clickable UI directions for the same AI feature, with a recorded comparison and one direction selected for further team exploration.
AI-powered design tool for creating UI components
Step by step
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
4 steps
Recreate only the screen and flow needed for the decision. Use approved product references, components, type, color, spacing, and realistic synthetic content so the new idea has credible context.
Recreate [screen or flow] for prototyping from these approved references: [references]. Use the existing component and token conventions. Include only the states needed to explore [user problem], and use synthetic content.
Add the feature with a specific user trigger, expected response, and boundary. Include the entry point and the immediate next state before asking for broader design variations.
Add a "[entry label]" option that lets the user [action]. Show what the assistant can and cannot do, the first response, and a clear recovery path if the input is unsupported. Preserve the base product navigation and patterns.
Use Inspiration mode to generate interaction models that differ in structure. Ask for options such as a direct action, guided setup, progressive disclosure, or contextual suggestion, not four visual skins.
Generate four differentiated ways to guide the user through [feature]. Vary the entry point, amount of guidance, information revealed per step, and error recovery. Keep the same brand system. Explain the interaction model and main tradeoff for each option.
Complete the same critical task in every option at mobile and desktop widths. Compare comprehension, steps, user control, accessibility, technical risk, and fit with the golden conversations, then save the decision and unresolved questions.
Compare these options against: task completion, clarity of capability, number of decisions, user control, accessibility, responsive behavior, engineering complexity, and known AI failure modes. Recommend one direction, cite the evidence, and list questions the prototype cannot answer.
Using AI prototyping tools for UI exploration can significantly reduce the back-and-forth between PMs and designers, leading to faster decision-making.
Turn an idea into a PRD, user stories, and a plan.
After the steps
How to recover when the loop fails and where human judgment helps.
Recover
Keep building
Design a weekly meta-workflow that analyzes your interactions with your AI assistant to make it smarter. This system learns your writing style from edits, suggests new automations for repetitive tasks, and helps you filter valuable AI techniques from hype.
Create a daily AI workflow that summarizes yesterday's meetings, identifies urgent tasks, and proactively learns internal company terms it doesn't understand. This keeps your AI assistant's knowledge current and highly relevant to your work.
Build a recurring AI task that automatically gathers updates from your calendar, Slack, and notes to suggest weekly priorities and prepare you for upcoming meetings. Start every Monday with a clear, comprehensive plan without the manual effort.
Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.