Full Prototyping Tutorial in 18 Minutes

Pricey subscribers,

Google simply dropped Gemini 3.1 and up to date AI Studio to be full stack. Collectively, I believe they make the most effective free AI prototyping and vibe coding instrument available in the market.

I’ve been prototyping with AI Studio for six months now and it’s fully modified how I construct merchandise at work.

As an alternative of beginning with specs and designs, I now begin with prototypes that I can validate with stakeholders and actual customers in hours.

Watch my tutorial to see how I prototype new options with AI Studio in 5 steps.

Timestamps:

• (00:00) Waterfall vs. prototype-first product improvement

• (01:33) What Google AI Studio can construct (poker, picture gen, video games)

• (03:08) Step 1: Construct a base template to your present product

• (05:43) Step 2: Work together with your AI design associate so as to add a brand new characteristic

• (10:32) Step 3: Iterate with AI to refine your characteristic

• (13:08) Step 4: Collaborate with others on the prototype

• (15:05) Step 5: Flip your prototype into an actual product

• (16:12) Recap: The best way to grasp AI prototyping

Watch now on YouTube or learn the written information under.

I’m proud to associate with…Linear

I’ve been speaking to many AI-native firms and the best way they construct is simply fully completely different. As an alternative of doing handbook work, their greatest workers deal with delegating work to AI brokers by giving them the suitable context and suggestions loops.

Linear is constructed for the most effective groups to onboard and work with AI brokers. It offers transparency on what brokers like Cursor and Codex are engaged on and offers them context routinely from Slack, help tickets, and your codebase.

Attempt Linear for Free

P.S., I’m hiring a Senior PM for Creator Hub at Roblox — the platform tens of millions of creators use to construct and develop their video games. When you have 7+ years of PM expertise (particularly in creator/gaming) and a “get shit carried out” mindset, apply right here.

Right here’s the distinction between waterfall and prototype-led improvement:

• Waterfall is if you begin with a spec, the designer makes a design, and you then hand every thing off to engineering. By the point you get suggestions, you’ve already invested weeks.

• Prototype-led is if you begin with a prototype that you simply iterate on together with your staff and actual customers. When you validate your concept with the prototype, you then create the spec and design.

The important thing distinction is:

One caveat: I stated prototype-led, not prototype-only. For advanced merchandise, it is best to nonetheless create a PRD and design to seize the milestones and edge circumstances. For less complicated options, you possibly can go straight from prototype to actual product.

Let me present you the way.

For this tutorial, let’s be meta and prototype a brand new characteristic for Google AI Studio itself.

I like Google AI Studio as a result of it is quick, free, and integrates with Google APIs like Nano Banana straight.

Nevertheless, I believe AI Studio’s interface is method too busy. There are too many buttons and toggles. So let’s prototype a simplified AI Studio by following the 5 steps under.

Let’s begin by taking some screenshots of Google AI Studio’s Residence and Construct screens and asking AI:

Replicate these screens as intently as attainable. Attempt to match the types and colours and make it interactive.

Google AI Studio will now construct a working duplicate of its personal interface. Put it aside as “Google AI Studio template” and clone it earlier than making adjustments.

This manner, you possibly can simply begin over from what’s reside within the product right this moment if issues go flawed. Anybody in your staff may also clone the prototype off the identical base.

Now let’s simplify Google AI Studio’s UX. First, we have to resolve what to simplify.

Let’s create a Gemini Gem referred to as “UX designer” and set it up as follows:

1. Ask AI: “Give me a immediate to make you an skilled UX designer. I need you to work with me to simplify the UX for Google AI Studio.”

2. Paste the immediate that AI generates into the Gem and share some screenshots of Google AI Studio.

Now, let’s ask the Gem:

I need to redesign Google AI Studio’s interface to be a lot easier. Take a look at the hooked up pictures and record the highest 5 issues to simplify. Ask me any questions first.

Gemini will ask you a couple of questions and give you an inventory. I additionally did some analysis on Reddit and the highest request is to have challenge folders similar to Codex.

With this analysis in hand, let’s ask AI to replace our prototype with this immediate: