Turn a static Figma direction into a disposable interactive prototype that reveals responsive, resizing, toggling, and edge behavior, then hand engineering the decisions and evidence rather than presenting prototype code as production code.
Source episode · 04:00
How I AI: Atlassian's Joel Unger on Prototyping UI, Animating Logos, and Illustrating Puppieswith Claire Vo
Joel starts from Figma explorations for Trello's inbox, planner, and board panels, pastes a screenshot into Cursor, asks for a three panel system with toolbar toggles and drag resizing, then uses the working prototype to discover min width, stacking, collapse, and full screen edge cases with engineering.
A working prototype plus a short interaction specification covering panel order, resizing, minimum widths, collapse rules, toggles, keyboard behavior, and known gaps, with screenshots or video engineering can inspect.
AI-first code editor
Collaborative design tool
Step by step
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
5 steps
Identify the interaction the static mockup cannot answer. Define the panel state model, resizing and toggle rules, minimum widths, collapse behavior, breakpoints, content extremes, input methods, and accessibility needs.
Open a sandbox prototype repository with the approved libraries and paste the Figma screenshot plus a link or exported tokens. Keep production credentials and data out of the experiment.
Ask Cursor for the smallest functioning panel system that preserves the visual hierarchy while making every rule observable.
Build a disposable prototype of this three panel layout from the attached Figma reference. Panels: [names]. Implement toolbar toggles, drag resizing, minimum and maximum widths, ordering, collapse thresholds, all off and restore states, keyboard controls, focus, and responsive behavior at [viewports]. Use realistic synthetic content. Do not represent this code as production ready.
Exercise every panel combination and extreme width. Record where controls disappear, content overflows, resizing becomes ambiguous, or a previous layout cannot be restored, then turn discoveries into explicit behavior rules.
Share a recording, state matrix, decision log, and relevant prototype with engineering. Call out which code is disposable, which behavior is intended, which production constraints remain, and which edge cases need joint resolution.
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
Log your workouts effortlessly without ever opening a spreadsheet. This workflow uses the Claude mobile app to parse a simple voice note and automatically update your workout tracking spreadsheet in the background.
Create a custom email management interface within Claude to read, triage, and draft replies without opening the Gmail tab. This workflow helps you reclaim focus and compound your learnings by training your AI on every interaction.
Build a fully automated system in Claude to generate personalized, interactive HTML proposals and client onboarding materials, saving hours on administrative work and creating a high-touch experience.
Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.