Wrap Figma extraction, implementation, and browser comparison in one `/figma` command so a teammate can paste a frame link and get a close first pass that corrects its own obvious misses.
Source episode · 23:03
How Notion Designs with AI: Brian Lovin's Prototype Playground and Claude Code Workflowswith Claire Vo
Brian’s `/figma` command checks MCP setup, extracts the selected frame, implements it, and loops through browser comparison until the result stabilizes or reaches its iteration cap.
A working frontend implementation that matches the selected Figma frame closely enough for focused follow up work.
Collaborative design tool
Anthropic AI assistant
AI pair programmer
Step by step
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
5 steps
Create a /figma command that accepts one frame URL and names the target route or component. Make it responsible for the full sequence instead of relying on the model to guess when to invoke each tool.
/figma [public or authorized Figma frame URL] --target [route or component]
Check that the Figma MCP server is installed, running, and authorized. If not, stop and return the exact setup steps. If it is ready, extract the frame hierarchy, layout, tokens, assets, and component references.
Implement the frame with the project’s existing stack and components. Preserve real assets and interactions where available, and keep the change limited to the requested target.
Implement the extracted Figma frame at [target]. Reuse existing project components, tokens, and icons before creating new ones. Preserve responsive layout and visible interaction states. Run the project checks after implementation.
Open the generated page with browser tooling and compare it with the original frame. Check layout, spacing, typography, colors, assets, overflow, and obvious interaction states. Return a concrete discrepancy list.
Feed the discrepancy list back into the coding pass and repeat the browser comparison. Stop when two passes produce no material changes or after three unchanged iterations, then surface the remaining differences.
Compare the rendered page with the Figma frame. List specific discrepancies by element and property, fix them, and rerun the comparison. Stop after two clean passes or three iterations with no material improvement. Report any remaining differences.
Instruct the AI to stop after a set number of iterations (e.g., three) if no progress is made to prevent infinite loops.
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.