Learn how I utilize AI prototyping to cut down on design time and streamline the developer handoff process.
I’ve embraced AI as part of my design workflow to boost speed, creativity, and output, using tools like Bolt, Lovable, Galileo, and ChatGPT in practical, task-specific ways. While I find these tools helpful to review my work and offer me new approaches to a design, I've often struggled with the overall output of these AI applications. It sometimes feels like the suggested designs are all very similar, and complex design problems are given the same treatment as simple issues.
However, AI offers one major improvement to the design process: express prototyping! Anyone using Figma knows how tedious and delicate the prototype tool is. You're forced to create variants for every interaction, and then connect those frames in a way that will play smoothly when presented. Don't even get me started on the process to edit the prototype once it's complete.
ENTER……. AI prototyping!
The process is as simple as:
Copy your design into Bolt or Lovable by:
Uploading a screenshot or png of your design
Pasting a link of your file (right click - copy link to selection in Figma)
Using a Figma html plugin like builder.io to copy code if you want to get very specific
Explain to the AI system how you want users to interact with you design
Publish your design and send the link to developers
Case Study: How I used AI to build & prototype a retirement calculator
I was tasked with building a retirement calculator for users, and I wanted to make sure this retirement calculator was understandable and easy to use for all users, regardless of their financial know-how.
Highlights:
I conducted competitor analysis of 15 retirement calculators to identify gaps and opportunities
I used ChatGPT to quickly learn financial concepts and align outputs with investor needs
I then designed and tested a user-friendly calculator with finance-savvy users for validation
Once complete, I leveraged Bolt to build an interactive prototype that updates results in real time
Both the Figma design & the prototype example was delivered to the team and helped stakeholders & developers clearly visualize the end product
My Figma Design:
