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.
Download the skill for this workflow. Version 1.0.1.
with 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
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.
How to recover when the loop fails and where human judgment helps.
Connect data from your hobbies (like golf scores or chess games) to an AI agent to get automated analysis, visual dashboards, and actionable coaching insights. Turn raw data into a story that helps you improve.
Turn your unstructured Instagram 'Saved' collection into a fun, personalized shopping catalog. This workflow uses an AI agent to organize your saves and present them in a nostalgic, engaging format like the SkyMall magazine.
Resurrect your old digital content, like a forgotten blog from Blogger or Tumblr, by using an AI agent to find, consolidate, and transform it into a daily personal podcast. Reconnect with your past self in a new, listenable format.
Join 250,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.
