🐴 How to turn existing designs into working prototypes with AI

Workflow, prompts, and tools

May 15, 2025

Say you’ve designed a screen.

Then instead of spending hours creating more screens and manually linking them into a prototype, imagine if AI could do it for you in minutes.

That’s no longer just a dream.

Last week at Figma's Config conference, they introduced a new feature called “Figma Make.” It can turn your existing designs into working prototypes. Very exciting.

However, here’s the reality:

I don’t know when this feature will be available to me. It could take months.
I don’t know how well it will work when it does roll out. It may be worse than expected.

So today, I’ll walk you through how I turned an existing design into an interactive prototype, with tools available today.

Let’s dive in.

Overview

Before: A static design

(The design was based on a random page from Zumper.com)

After: An interactive prototype

(The prototype includes clickable CTA buttons, functional input fields with error states, an interactive image gallery, and a confirmation page with relevant information.)

Tool Used: Magic Patterns

Import Design

First, I need Magic Patterns to “recreate the design”.

So instead of a static design made of vector shapes, it was converted to code-backed components. That helped lay the foundation for advanced prototyping.

I simply attached a snapshot of the design in the prompt box and asked it to create it.

The result was okay. I requested a few revisions to better match the original design.

Alternatively, if I wanted to be more accurate and didn’t mind spending more time recreating it, I could’ve used a Chrome extension they created instead. It converts one web component at a time into React code, which can then be opened and put together in Magic Patterns.

I do wish there were a Figma integration though.

First Attempt

After importing the design into the tool, I started with a simple prompt:

Make the page an interactive prototype. 

Modals will pop up when the user clicks on the CTA buttons.

Here’s the result:

It looked good!

When I clicked the “Check availability” button, a modal showed up with relevant information. All the input fields worked.

When I left the email field blank on purpose and clicked “Submit Request”, it was able to show an error message.

In addition, each photo opens in full-screen mode when clicked.

Refinement

There was room for refinement for a more extensive experience.

As you can see below, the confirmation was very basic after clicking “Submit Request”. It’s just a generic browser alert dialog.

So I wrote a follow-up prompt in the chat window.

Make a confirmation page that appears after a user submits a request to check the availability of a rental home.

The page should include the following:

- A confirmation message "Request Sent!"
- A summary of the house information
- A message "You'll receive an email confirmation shortly"
- A photo gallery of other listings
- A button to browse more listings or return to the house page

Here’s the result:

So this time, when I clicked “Submit Request”, it took me to the confirmation page it had generated.

It followed my prompt well:

The email address I entered in the form was captured.
The house information was accurate.

When I clicked “Return to House Page”, it navigated back to the house page.

Appendix

I also tried Lovable and V0 to generate interactive prototypes.

Same workflow. Same static design. Same prompts.

Here are the results without any revisions.

Lovable

The UI was clean and modern, but several parts felt a bit overdone or randomly placed.

This is the prototype from Lovable.

V0

The UI was also clean and modern with a distinct style.

It still had its common issue with blank image placeholders. Not a big deal since I can manually attach photos and prompt it to use them, but that still takes time.

When I clicked on the image gallery and then the “Submit Request” button, nothing happened…