One of the biggest inspiration platforms for UX and UI designers is Mobbin. They’ve just released their MCP, which allows you to connect your favorite AI tools to their entire catalog of over 600,000+ real design pattern and flow examples from real apps.
This opens up a world of possibilities for both research and UI design.
I’m going to show you exactly how to connect Mobbin to your AI tools and real use cases of what I’m doing with it right now as a product designer.
The Biggest Missing Piece in AI UX/UI Design Right Now
Getting anything good out of AI right now requires a lot of input, examples, and prompting. Otherwise, the AI is doing a lot of guessing. It’s guessing at what you mean when you describe visuals with words, and approximating what effective onboarding flows and checkout flows actually are.
But with Mobbin’s new MCP, you can start training it with real examples so it can give you something more intentional and accurate.
So let’s go through this together.
Installing the Mobbin MCP + Claude Code
First, use the link in the description to grab the Mobbin MCP and install it. Yes, you will need a plan to do this, but it’s very affordable. Most of you probably already have a subscription. The Pro plan is just $10 a month and gives you access to everything.
For this example, I'm going to install it with Claude Code (but it's a similar process with any AI agent - just follow the steps that Mobbin provides).
Step 1: I’m going to use the command line to do this. I know it can seem a little scary to use terminal, but this one is quite simple just follow along with me and we’ll do it together.
All you need to do is copy this setup command. Then open Terminal on your Mac or Bash on your Windows.
Once that comes up, paste the command right in and hit enter
Step 2: Then we’re going to run this command in a Claude Code session. For that, I’m using the Claude Code desktop app.
So we can switch out of Terminal now and jump into Claude Code.
According to the instructions on Mobbin, you should be able to trigger a session when you type /mcp. But in some cases, you may need authentication, and for that, you’ll need Terminal again.
Step 3 (If step 2 doesn't work): Type /mcp into Terminal and it will show that Mobbin needs authentication. Use your arrow keys to move down to Mobbin, hit Enter to confirm, and then select authenticate.
This opens a browser window where you can log in. It shows my account, I click “Allow,” and there we go — authentication successful.
So if you have trouble doing it inside the Claude Code desktop app, use Terminal. It gives you more direct access and makes things cleaner.
Use Case 1: Analyzing Patterns and Flows with AI
Now back in Claude Code desktop, I’m ready to try this out.
I’m going to paste in a prompt and ask it to analyze the top onboarding flows from Mobbin and give me four examples.
Prompt:
Please analyze the top 4 onboarding flows from Mobbin and give me 4 examples
I clicked the link inside Claude Code and it’s showing me these four patterns and examples:
- Brand immersive
- Lead with identity
- Mascot and personalization
- Social proof gate
- Media narrative
This is amazing because if you need to analyze existing patterns and see the full range of options, you can use this to help you decide which pattern matches your own user research best.
It takes a lot of the guessing out of the process.
And now, you can reference these examples when you generate something with AI, or when you’re designing these flows manually in Figma.
Use Case 2: Copywriting, UX Writing and Microcopy
Another way I’ve really liked using this is for writing and analyzing copy.
So I’m going to ask it about microcopy in these Mobbin examples:
Prompt:
“What patterns help users recover from mistakes faster?”
And I’m going to ask it to specifically write for the product I’m building, because it already has context about the project in the session.
This is really great because there’s a table here showing the kind of default responses we often get when engineers code these experiences without explicit direction or copy from a designer.
So we need to design the copy and the words we use.
Instead of just saying there’s an error, explain what the error is and how the user can fix it. The personality of your product should come through too.
Maybe it’s more playful and says: “Oops, don’t worry. You didn’t do anything wrong. The file is just a little too big for us.” These are the kinds of principles you gather from doing really great research and analysis.
Why UX Research Matters More in the Age of AI
For nearly eight years now I've running a Product (UX/UI) Design Course, and it’s become one of the most popular and beloved comprehensive courses for product and UX/UI designers because there’s a lot of stuff to learn that even great tools like this still can’t do.
Even with Mobbin and AI, we can see examples from successful products, but we don’t really know why those decisions were made.
Those decisions come from research:
- How you analyze themes
- How you observe users
- How you talk to them
- How you extract insights
- Understanding the business goals and KPIs
That’s a big part of what I teach in my course, along with how to use AI tools to speed things up while still keeping a human touch and producing something genuinely valuable for the people using it.
You also get access to Figma and all of their AI products free for an entire year when you enroll.
Use Case 3: Generating Similar UI Concepts
Now, because Claude Code has all of these references, I can ask it to design something based on them.
So now I might ask it to analyze dashboard screens and flows from Mobbin, then generate an original design based on my research. I can upload my own findings and analysis too.
So it extracted a bunch of examples and rendered its own concept based on those patterns.
And this is what it created.
It’s using a lot of the best practices it synthesized from the patterns it observed:
- Time-of-day greeting
- Streak dots with a flame counter
- Mood arc ring
- Atmospheric cards
This is really interesting because it’s helping you analyze what you’re generating — not just generate it — and it’s doing it using tried-and-true examples already out in the wild.
Use Case 4: UX Audit Comparison with Figma MCP
All right, I’ve saved the best for last.
If you also have the Figma MCP set up, you can now start communicating back and forth between Figma and Mobbin via Claude.
First, I’m going to ask it to do a side-by-side audit comparison of my landing page design against common landing pages from Mobbin.
Prompt:
Do a side-by-side comparison of my landing page structure and content against common B2B website landing pages from /mcp Mobbin
I’ll copy a link to the frame in Figma and paste it into Claude.
Now it’s grabbing the Figma design using the Figma MCP while simultaneously searching Mobbin using the Mobbin MCP.
What it’s done is:
- Grabbed the file from Figma
- Performed a deep audit of the page structure
- Rated what’s strong, weak, and missing
- Referenced examples and explained why they work
- Broken everything down section by section
- Given prioritized recommendations
This is an incredible audit and comparison process.
And this is the kind of thing that can save you an enormous amount of time when working on products.
Use Case 5: Sending AI-Generated Designs Back into Figma
Finally, I’m can send all of this back into Figma.
Prompt:
“Generate me a design that includes all of these best practices and recommendations, redesign the page for me, and send it to Figma.”
In about three minutes, Claude Code redesigned the entire page based on those priority recommendations and sent it directly to Figma.
It even named the page “Wonderlust Version 2.”
So let’s go find it in Figma.
It created a new page called Wonderlust Version 2, and here it is.
Of course, we still need to fix some margins and padding, but it added all of the improvements it recommended.
It still needs a designer’s touch.
But it’s amazing that you can get a rough wireframe or layout idea, refine it, send it back to Claude Code, and then have it code everything up for you.
This continuous cycle from research and inspiration all the way through to creating something real is honestly incredible.
Final Thoughts
I’ve also done other experiments showing how to bring designs directly from Mobbin into Figma so that's another way to use this too.
Mobbin is honestly the gift that keeps on giving.
If you don’t have a subscription yet, it’s too good not to get. Grab yours here.