How to turn an idea into a prototype with AI

A playbook on building prototypes, fast.

Apr 18, 2025

∙ Paid

Hey there! This is a 🔒 subscriber-only edition of ADPList’s newsletter 🔒 designed to make you a better designer and leader. Members get access to exceptional leaders' proven strategies, tactics, and wisdom. For more: Get free 1:1 advisory | Become an ADPList Ambassador | Become a sponsor | Submit a guest post

🔥 Don't Settle Conference 2025. 5 days to more! Our biggest virtual event on April 23, 2025, where top leaders share exactly how to launch a profitable side business (without quitting your full-time job). Standard tickets are now at $69. 🎟️ Get your ticket today

Friends,

This edition is all about pushing the boundaries of what AI can actually do for design.

For months, Xinran struggled to get usable UI from ChatGPT—everything looked like a cartoon. But then OpenAI quietly dropped a major update.

Suddenly, things started to click.

From responsive, code-backed layouts to surprisingly sharp visual mockups, he ran a series of experiments to test the new limits. Some results blew my mind. Others? Still glitchy (hello, weird typography). But overall—it’s a serious leap forward.

Here’s what you’ll find in this walkthrough:

Prompts that actually work for UI
Code vs. visual mockups: what ChatGPT gives you now
Design options with distinct personalities
Converting mockups into editable Figma files

Curious if AI can really be your next design collaborator? You’re in for some surprises.

Xinran Ma is the founder and author of Design with AI (designwithai.co), speaker, and award-winning designer. Design with AI (designwithai.co) is one of the fastest-growing AI newsletter and community—gaining over 2,000 new subscribers every month, from companies like Google, Amazon, Microsoft, and McKinsey. He is also the author of multiple Amazon #1 New Release books in UX and the instructor of a featured AI course on Maven: AI for Product Designers. He regularly delivers lectures and conducts AI workshops at places such as Microsoft, Columbia Business School, UXPA, University of Connecticut, and Pratt Institute.

You can find Xinran on the Newsletter, LinkedIn, the Course, and the Book.

Let’s dive in ⬇️

A playbook on building prototypes, fast.

What if you could take an idea, explore design options, and create a working prototype — all in just an hour?

What if that prototype wasn’t just a basic design in Figma, but a more advanced, code-powered one?

And what if you could achieve all of this with only minimal coding skills?

In today’s newsletter, I’ll walk you through an experiment I did step by step:

Drafting the requirements
Generating wireframes
Generating a prototype
Making revisions

Let’s get started!

The outcome

Before we dived in, here’s a brief demo of the outcome:

Step 1: Draft the requirements

I asked Claude to generate a simple product requirement document:

Focus on the core flows where users can:- Write a note.
- Browse notes from other users.
- Interact with notes by liking, reposting, and commenting on them.
- View user profiles.
- Sort notes by categories.This PRD will be used for an experiment to generate wireframes using AI tools.

Here’s Claude’s response:

The generated requirements was quite thorough, but it was much more complex than I needed.

So my next step was simplifying the requirement and making some tweaks.

💡 Tips

It is helpful to leverage Claude or ChatGPT to generate prompts. That said, it’s usually better not to copy and paste the prompts directly into other AI tools.

Instead, only pick the relevant parts and simplify them to fit your specific needs.

This gives you more control over the prompt and helps save tokens by leaving out irrelevant details.

Step 2: Generate wireframes

I could have skipped this step, but I wanted to explore some design options to have more control over the design before jumping straight into prototyping.

On top of that, I could have continued using Claude to ideate wireframes, but its responses fit better for simple proof-of-concept tasks than creating usable designs.

So I used UX Pilot, a tool I also touched upon in a newsletter last October.

I broke down the simplified PRD by pages, then provided them into UX Pilot — one page at a time.

For example, here’s my prompt for the homepage design:

The app enables bloggers to write, publish, browse, and interact with notes shared by others directly with their audience.

Home Screen Components
- Navigation tabs:
  - Following
  - Discover

- Category filter bar
- Post cards showing:
  - Writer name/avatar
  - Post preview
  - Engagement metrics
  - Timestamp

Then I used the UX Pilot’s Figma plugin to generate 3 design options:

Using the same approach, I generated 3 design options for the add/edit post page :

Add/Edit post page design options from UX Pilot

Finally, the profile page:

Profile page design options from UX Pilot

Then I selected my preferred designs and made minor revisions.

💡 Tips

I chose to use UX Pilot’s Figma plugin instead of its web platform, even though the platform offers more features — such as creating a set of screens for an entire user flow based on the prompt and exporting the wireframes to Figma for editing.

However, those features were behind a paywall. That’s why I broke the prompt down page by page and generated wireframes for each page individually in the plugin.