Turn a static Figma screenshot into a fully interactive, resizable prototype using Cursor. This workflow helps designers test dynamic layouts and improve collaboration with engineers before writing production code.
with Claire Vo
Start with your design in a tool like Figma. Recognize when a static mockup is insufficient for conveying complex interactions, such as layouts with user-resizable panels, which require a real, tactile feel to evaluate.
Get your development environment and Cursor, an AI-first code editor, set up. Instead of writing code from scratch, simply paste a screenshot of your Figma design directly into the Cursor chat.
Give Cursor a simple prompt in plain English describing the functionality you want to see. The AI will interpret the screenshot and the prompt to generate the necessary HTML, CSS, and JavaScript.
build me a three panel system with a toolbar to toggle on and off panels.Run the generated code to get a working prototype. Physically drag, resize, and interact with the elements to test the user experience in real-time. This process helps uncover subtle responsive design issues that are invisible in static mockups.
Record a short Loom video of you interacting with the prototype to show your engineering team the exact desired behavior. This serves as a powerful communication tool, making the handoff smoother and more precise than static specs.
Follow Sahil Lavingia's method for delegating small but impactful maintenance tasks, like fixing an internal Slack report, to the AI agent Devin. This workflow shows how to use simple, clear prompts to fix code and update system prompts without distracting your engineering team.
Learn Gumroad CEO Sahil Lavingia's process for rapidly prototyping a UI with v0, then using the AI agent Devin to autonomously code, implement, and submit the feature for review, turning a multi-day task into a one-hour workflow.
Improve your writing in real-time by using ChatGPT as a first reader. Get instant feedback on structure, clarity, and flow as you write, allowing you to polish your work section by section.
We've made ChatPRD affordable so everyone from engineers to founders to Chief Product Officers can benefit from an AI PM.