How to use AI in product design: Lessons from building VibeLab at Miro

The short version: To use AI in product design, start with the idea and build a working prototype as fast as you can. That's what VibeLab does at Miro. It's the internal platform I built so designers can go from idea to a shareable prototype in seconds or minutes using Claude Code, and since launching in March 2026 it has grown to more than 400 users and nearly 1,000 prototypes, with 100% of our design org working in it.

Designers at Miro used to spend days getting an idea in front of stakeholders. Today, they do it in minutes, with a working prototype that has a backend, a database, and the look and feel of the real product.

I'm Mauricio, a staff product designer at Miro, also known as a design engineer because of my development background. I built the platform behind this shift, and in this article, I'll share how it started, what broke along the way, and what I learned about using AI in product design, including where I think designers, product managers, and engineers go from here.

A designer who spent years as a webmaster

I started in the early 1990s as a graphic designer. When the internet turned commercial, building for it meant knowing some development was necessary, and we humbly called ourselves webmasters back then. So, out of a need, I became a developer and went deep into the whole SDLC (Software Development Life Cycle) spectrum and later A/B testing. When product design became a real discipline, with UX design and product design as their own roles, I came back to design with my development background intact. That lets me work on products end-to-end, from zero to one, and it taught me infrastructure concepts that designers don't usually get access to. I built VibeLab with both skill sets, and that mix matters for everything that follows.

Static screens couldn't keep up, so I built VibeLab

About a year and a half ago, design started changing, at Miro and everywhere else. Teams were moving from static screens in Figma to coding tools that build prototypes quickly and explain concepts and ideas. I wanted to catch that wave before everybody else, so I started studying what was happening and then explored the landscape at Miro to see how we could bring the whole design team along.

We began with existing tools, and two problems showed up fast. They didn't give us exactly what we needed, then or now, and our concepts and intellectual property could leak onto the public internet, which none of us liked.

So I used my infrastructure and development background to build a tool of our own, and we call it VibeLab. It's an internal platform where designers use Claude Code to produce concept prototypes that look and feel like the final product, and they go from idea to a shareable link on our internal network in seconds or minutes. Before VibeLab, designers spent days prototyping in production code or staging code, or they delivered static screens. Now they can illustrate a concept with a whole end-to-end experience and share it securely.

One button, around 25 tools

My first obstacle came right away, because designers without a development background struggled to install and handle the tools they needed. So I built a project called the vibe code toolkit, which puts everything a designer needs behind a single button:

1. Open the toolkit page on our internal network.
2. Click the copy button.
3. Paste the command into your computer's terminal.

Your computer does the rest. It installs around 25 tools, plus the Miro credentials and authorizations you need, and leaves you ready to start prototyping with Claude Code.

From a handful of friends to nearly 1,000 prototypes

I released VibeLab internally in March 2026 with a handful of users, mostly friends I asked to try it and tell me where it broke. I fixed what broke, and then growth took off like a hockey stick. Today almost 1,000 apps and prototypes run on VibeLab, with more than 400 users, and nobody ran a training or an advertising campaign to get there. People found out by word of mouth.

The bigger change is how design works at Miro. All of our design org is now on VibeLab. A designer starts with an idea, analyzes the concept with Claude Code, and produces a prototype that looks and feels like Miro, and then they either sell the idea to stakeholders or keep iterating until it's right.

We don't work with static screens anymore, and instead, we build live prototypes that have backends, databases, AI models, and everything else you need to experience an idea instead of looking at it and listening to someone explain it. Our global head of design has a "show, not just tell" philosophy that I embraced, and this is how we put it into practice.

I think this is the future of product design. Product designers will start with the idea, build a concept prototype as fast as possible, and iterate far more than before instead of producing images. The first version takes minutes to hours instead of days, and after a bunch of iterations you end up with an end-to-end experience you can share and refine with stakeholders.

So can a prototype go straight to production? Not at Miro's scale yet. Complex software still needs a translation layer, which means developers, with the help of their agents, translate the prototype code into production code, but so much has changed in a year that I wouldn't bet on that staying true.

I've also given talks about this to other companies, where I have friends who are design engineers and architects. Everybody is trying to find a similar solution, and from what I've seen, Miro is well ahead because we started earlier.

Using AI in product design: four things that broke along the way

Anybody can build almost anything with VibeLab, and Claude is very creative at filling gaps, which taught me four lessons.

Prototypes drifted away from our design system

In the beginning, people built prototypes without any concern for the Miro design system. The prototypes reproduced the look and feel, but they drifted further and further from Miro. To fix that, we created templates that use the Miro design system, so now the whole design system sits behind whatever a designer creates.

Duplicating wasn't enough

In the first version of VibeLab, you could only duplicate a prototype you found interesting. Now we have branches, where a designer takes a template as a base, creates a version from that point, and can send that version back to the template. Say I create a new interaction that becomes production code. I can easily put it back into the template, so everyone who branches out afterward gets it too, and we build on top of each other instead of building in parallel.

The platform buckled at 500 apps

I started with a very small infrastructure because I honestly expected around 200 apps running at the same time. When we crossed about 500, things started to break, and it happened during Canvas, of all times. People were building the widget creator in VibeLab for the Canvas presentation, and VibeLab couldn't handle the load.

I had to jump in right away and add memory and CPUs to our pods. Now we're close to 1,000 apps, and the platform handles them well. It came with a good side effect too: deploying a prototype used to take minutes after you hit the deploy button, and now with more memory and CPU, it takes 11 seconds on average.

Everyone wanted AI inside their prototypes

People wanted to use AI in their own prototypes, so they started requesting OpenAI and other API keys, and those requests flooded our network teams. We took that problem and built a fix: VibeLab now has an API proxy. You flip a switch, and your prototype can use AI through one shared API key, so you don't have to worry about it. I try to react to demand on VibeLab as fast as I can, and most of these improvements come straight from what people ask for.

Then marketing showed up

VibeLab started as a design tool, and design still owns most of it, with more than 70% of the prototypes coming from the design org. Then other teams found it, and people turned out to be very creative. Marketing builds dashboards with real-time data so they can follow what's happening with Miro on the internet and iterate on those dashboards quickly. Teams deploy Slack bots on VibeLab that answer questions automatically, and people have built SDK tools, some of which did things we didn't know were possible.

That's the idea behind the platform: help people innovate faster and more easily.

What comes next: Claude Code as a sidekick in Miro

Right now, designers branch out from a Miro template prototype and build on top of it in Claude Code, so nobody starts from scratch. It's still a single-player flow, though. A designer has an idea and builds the prototype alone. The team only sees it once it's shared.

Miro's Intelligent Canvas already handles most of the round trip. With the Miro MCP connected, Claude Code reads the board as context and can push an HTML prototype onto the canvas. The prototype stays clickable there, next to the specs and research. The team reviews it on the board, and when you share the board link back, Claude Code reads their changes and picks up from there.

The board also keeps context for future agents. You can add docs with specs, images with screenshots, sticky notes with quick notes, and comments, and all of it becomes context. That matters because a prototype's history is very linear right now. Tracing where a prototype came from, or why the team made a decision, is hard. You keep that in markdown files or in your head. When the board holds that history, the whole group can follow how a prototype or a design got where it is.

The loop works today, but it still runs through one person's terminal. What I want next is Claude Code as a sidekick inside the board, so anyone looking at a prototype can call on the agent right there and keep iterating together. That's the direction we're exploring for VibeLab. The hard parts are token efficiency and speed.

Designers aren't going away, but the how is changing

Will AI replace product designers? Some people with a doom mindset thought so, because models can be so capable at design. I've watched this play out for a year, and models keep getting more capable while still not replacing designers. Designers have to change how they think about design and how they add value. I don't see models replacing designers anytime soon, and I think the same goes for product managers.

I started as a graphic designer and became a developer because I wanted to make tangible things on the internet, and I think the same shift is happening now. Designers and product people will become builders, and after that explosion of builders we'll see specialization again. Everybody builds, but designers focus on the end-to-end user experience and product people focus on user needs and prioritization.

We'll keep doing the same things we do today, but the how changes and the what stays. You can delegate everything to a model, but you'll get a very average experience. Models aren't humans, and we are, so we know what humans expect. Those expectations change over time, and we can use models to adapt faster.

Try it on a free Miro board

You don't need to build your own VibeLab to start working this way. Start with the idea I'm most excited about, which is keeping your prototype's context in one shared place: put the specs, screenshots, sticky notes, and comments for your next concept on a single Miro board and connect Claude Code to it through the Miro MCP, so your agent can work from the same context. Start today and see how much easier it gets for your team to trace decisions.

Sign up for free and try it on your next prototype.