Aakash GuptaI learned AI designing more in this 1 hr than any course ever
CHAPTERS
- 0:00 – 1:36
Why most PMs get AI product design wrong: workflow, constraints, and empathy
Aakash opens with the claim that PMs often misuse AI in product design, and Xinran reframes “designing with AI” as a workflow problem—not a prompting trick. They set expectations for the episode: real tooling, real prototypes, and the human role (intentionality and empathy) that AI can’t replace.
- •Designing with AI is more than prompts: it’s systems, constraints, behaviors
- •AI can generate, but it lacks human empathy and context sensitivity
- •Goal is to build well-designed prototypes, not just fast mockups
- •Preview of tools discussed: Google AI Studio, Stitch, and others
- 1:36 – 3:16
The AI design mind map: four pillars (prompting, ideation, prototyping, conscious design)
Xinran introduces a mind map to organize the ‘Design with AI’ landscape. The map separates tactical usage (prompting, ideation, prototyping) from the less-discussed but critical layer: designing consciously with risk awareness and intention.
- •Design-with-AI scope is broad; a mind map reduces confusion
- •Four key areas: prompting, ideation, design/prototyping workflows, conscious design
- •Tactics are only part of the story; intention and risk mitigation matter
- •Sets up the rest of the episode’s structure
- 3:16 – 7:02
Prompting for design outcomes: clarify the ask, engineer context, add references
They zoom into prompting fundamentals and why most frameworks overcomplicate things. Xinran emphasizes clarity of request, providing only necessary context (not more), and using references to improve output quality.
- •Clarify the ask: what to include/avoid; ask AI to help clarify if needed
- •Context engineering > prompt engineering: outcomes determine what context matters
- •Useful context: role, user needs, constraints, prioritization criteria, audience, brand/design principles
- •References (text/format/visual/code) improve reliability and fidelity
- •Tactical tips: structure, simplicity, reset chats, reverse prompting
- 7:02 – 8:32
Balancing control vs exploration: structured mega-prompts vs short prompts
Aakash probes the tension between specifying exact requirements and leaving room for AI creativity. Xinran frames it as an ‘art’ akin to managing a teammate—more specificity for control, less for divergence—while noting early structure usually saves time and tokens.
- •Too-specific prompts reduce exploration; too-vague prompts cause loops
- •Best approach depends on whether you want control or divergent ideas
- •Introducing structure early reduces iteration cost and token waste
- •Tokens/time become practical constraints in real workflows
- 8:32 – 14:42
Ideation + prototyping with AI: convergent thinking, evaluating sources, tracking variants
Xinran explains how ideation and prototyping blend together in AI-era workflows. They discuss using AI for broad brainstorming and then forcing convergence via ranking, examples, and evaluation—plus the operational challenge of tracking and navigating variants.
- •Ideation inputs: business goals, user goals, constraints, user insights
- •Converge using ranking, evaluation criteria, and example-based grounding
- •Ask for sources to reduce hallucination risk and support diligence
- •Prototyping best practices: specify instruction/context, generate variations, track and navigate options
- 14:42 – 19:00
Designing consciously with AI: hallucinations, bias, low-quality insights, and mitigation
They shift from tactics to responsibility: AI can amplify flawed assumptions if inputs are weak. Xinran outlines common risk modes and mitigation strategies—especially keeping humans in the loop and maintaining empathy for real users beyond transcript-level data.
- •Risks: hallucinations, bias, outdated/irrelevant insights, generic output
- •Mitigations: human-in-the-loop, source checking, diverse perspectives
- •Empathy matters more when AI makes output easy and plentiful
- •Beware nuance loss: sarcasm/hesitation/behavior cues don’t survive in transcripts
- 19:00 – 20:03
Workflow 1 overview: Custom GPT → ‘PRD for prototyping’ → any prototyping tool
Xinran introduces the first core workflow: a custom GPT that interviews you, then outputs a lightweight design spec/PRD optimized for AI prototyping. The emphasis is on front-end screens, components, and interactions—excluding backend complexity—so downstream tools generate better prototypes.
- •Custom GPT acts as a guided prompt-builder for the *first* prototyping prompt
- •Outputs a lightweight ‘PRD for prototyping’ focused on UI/interaction
- •Designed to reduce blank-canvas anxiety and avoid looping prompts
- •Spec is portable: can be pasted into Claude, Lovable, V0, Bolt, etc.
- 20:03 – 23:38
Building the Custom GPT correctly: ask the right questions and avoid irrelevant detail
Aakash asks how to build this custom GPT from scratch; Xinran explains the guiding principles. The GPT enforces key context (user, needs, goals), forces focus on one platform and a narrow user flow, and deliberately removes default “login/sign-up first” recommendations to keep early prototypes useful.
- •Include structured intake: who it’s for, needs, goals, platform
- •Force focus: pick the primary experience/flow before expanding scope
- •Avoid default boilerplate (e.g., login/logout) that dilutes core value
- •‘First prompt sets the stage’—optimize for the initial prototyping handoff
- 23:38 – 28:11
Live demo: GPT-generated spec → preview checkpoint → Markdown output for clean copy/paste
Xinran demonstrates the custom GPT: it asks step-by-step questions (goal, user, platform, key flows), then shows a preview for user approval before generating a final markdown spec. The markdown hierarchy is meant to preserve structure when pasted into prototyping tools, improving model comprehension and output consistency.
- •Guided Q&A captures requirements without overwhelming the user
- •Preview checkpoint ensures humans validate the spec before generating final output
- •Markdown in a code block preserves hierarchy for better tool ingestion
- •Spec is intentionally short to avoid context rot while staying UI-specific
- 28:11 – 36:07
Toolchain strategy: use Claude as a fast ‘mock run’ and save Claude tokens for code work
Xinran pastes the spec into Claude to sanity-check what the prompt produces visually. They discuss why she prefers using ChatGPT/Gemini for clarity work and reserving Claude’s context/tokens for code-heavy tasks, treating Claude as a quick validation layer before more robust prototyping tools.
- •Claude can quickly visualize whether the spec is coherent
- •Use ChatGPT/Gemini for non-code clarity work; reserve Claude for code tasks
- •Token limits are a real workflow constraint; allocate model usage strategically
- •If mock run looks ‘off,’ revise the spec before moving to heavier tools
- 36:07 – 41:30
Comparing prototyping tools: Lovable vs V0 vs Bolt (and where Magic Patterns/Replit fit)
They move from Claude to Lovable and discuss how tool choice depends on design quality, cost, and scope. Xinran characterizes Lovable as the most well-rounded (with a distinct ‘glamorous’ aesthetic), V0 as similarly strong and more accessible for code editing, and Bolt/Replit as better when full-stack integration is the goal.
- •Lovable: polished, well-rounded, distinct vibrant aesthetic; often paid
- •V0: comparable quality; easier code editing on free tier; aesthetic preference varies
- •Bolt: less used by Xinran now, but stronger for full-stack prototyping/integrations
- •Magic Patterns: design-focused (no backend by design); Replit: full-stack but higher cost
- 41:30 – 43:30
Workflow 2 setup: Stitch + Google AI Studio for ideation-to-interaction (existing UI → variants)
Xinran introduces a second workflow built around Google’s ecosystem: Stitch for early design exploration and Google AI Studio for interactive prototyping. The key idea is using Stitch to generate divergent design directions from existing UI screenshots—filling a gap many prototyping tools still miss.
- •Stitch (formerly Galileo AI) is optimized for early-stage design exploration
- •Google AI Studio is better for interaction prototyping and code-centric iteration
- •Combo yields ‘best of both worlds’: ideation (Stitch) + interaction (AI Studio)
- •Workflow focuses on redesigning an existing experience, not blue-sky prompts
- 43:30 – 54:13
Stitch live demo: redesigning Redfin’s ‘Ask’ AI chat using variation + YOLO mode
Using a screenshot of a real estate listing’s AI chat section, Xinran prompts Stitch to critique and improve the experience, then generates multiple options. She shows how to push divergence using the Variation feature and ‘YOLO’ creativity range to quickly explore radically different layouts and content approaches.
- •Paste a screenshot + structured context (business goal, user goal, ask)
- •Generate multiple options by default; increase options for broader exploration
- •Variation controls: number of options, aspects to vary, and creativity range
- •YOLO mode produces divergent concepts quickly—useful for exploration, then refine
- 54:13 – 57:32
Stitch → Google AI Studio handoff: export frames, prototype interactions, and advanced AI Studio tips
Xinran exports selected Stitch designs into Google AI Studio to turn static UI concepts into interactive prototypes. She shares two advanced AI Studio tips: add a system instruction for consistent styling/constraints, and use ‘Annotate App’ to comment directly on UI and batch-send feedback back into the chat for revisions.
- •Export from Stitch to AI Studio (noting model/export quirks)
- •Select multiple frames for a fuller flow, not just a single screen
- •AI Studio tip: hidden system instruction field to enforce style/constraints
- •AI Studio tip: ‘Annotate App’ enables comment-driven iteration similar to design review
- 57:32 – 59:37
How Cursor stacks up: power and flexibility vs learning curve and speed
Aakash asks about Cursor’s visual editing and where it fits relative to browser-based prototyping tools. Xinran argues Cursor remains harder for non-technical users and slower to start, but becomes valuable when you need serious build flexibility and deeper control over implementation.
- •Cursor has notable updates (browser + visual editing), but still technical
- •Learning curve remains higher than Stitch/V0/Claude-style workflows
- •Browser tools win on speed and setup simplicity
- •Cursor wins when you want flexible, serious building beyond quick prototypes
- 59:37 – 1:01:56
Final synthesis: two core workflows and the competitive edge of ‘AI superpowers’
Aakash summarizes the episode’s core framework and the two key workflows: (1) build a prompt/spec generator (custom GPT/Claude project/Gemini gem) to produce clean prototyping specs, and (2) use Stitch-like tools for divergent exploration (YOLO/redesign/variations), then move to prototyping. The closing message is that AI won’t replace PMs/designers—those who use it well will replace those who use it generically.
- •Four pillars recap: prompting, ideation, prototyping workflows, conscious design
- •Workflow 1: custom prompt/spec generator to set the stage with the first prompt
- •Workflow 2: divergent exploration via Stitch (YOLO/redesign/variations) → prototype
- •Differentiation comes from new capabilities, not generic AI usage
