How many hours did you spend pulling inspo for your last feature? Going into Mobbin, guessing the right query, screenshotting the good ones, dragging them into Claude Code, and then asking for a wireframe? I did all of that for years. Last week I did the same thing in one prompt, with zero screenshots.
The difference is Mobbin MCP — a connection that lets Claude Code reach into Mobbin's library of real, shipped app screens directly, using the context of the product you're actually building. I want to be clear up front: I'm not telling you to skip the inspiration step. If you lead product or design, you already know how important it is. The MCP just collapses hours of manual searching into something you can do without leaving your editor.
In this guide I'll walk through what Mobbin MCP is, why the inspo step still matters even when you're shipping with AI, a real redesign I ran on a live page, and the exact step-by-step workflow you can copy. Then we'll cover the tools you need to set it up.
Table of contents:
- What is Mobbin MCP?
- Why the inspo step still matters
- A real example: redesigning a booking page
- How to use Mobbin MCP in Claude Code
- Tools and resources
What is Mobbin MCP?
Mobbin MCP is an integration that connects Mobbin's design library directly to AI coding tools like Claude Code. Instead of browsing Mobbin in your browser and copying screenshots, you prompt the MCP in your editor and it pulls relevant, real-world UI references based on the product you're working on — then it can use those references to build a wireframe right in your repo.
In practice, this looks like:
- Asking Claude Code "find me inspiration for a consolidated calendar view" and getting back real examples with links
- The AI reading your actual codebase and the page you're redesigning before it suggests a direction
- Going from references straight to a wireframe or mockup without ever opening a screenshot folder
The shift is subtle but big: the inspiration comes to you, already filtered through the context of what you're building, instead of you hunting for it tab by tab.
Mobbin MCP vs. the old screenshot workflow
The old way: open Mobbin, figure out the right search term, take screenshots of the screens you like, pull those screenshots into Claude Code, then ask for a wireframe based on them. Every wrong guess meant another round of searching and screenshotting.
With Mobbin MCP, you prompt once and Claude pulls the inspiration itself — informed by your product's context. You're still doing the deep research; you're just not doing the manual labor around it.
Mobbin MCP vs. "just let AI design it"
Letting an AI generate a UI from scratch gives you generic, default-looking layouts. Mobbin MCP grounds the AI in patterns from real, shipped products, so you land on a credible direction faster — and you still make the design calls. The MCP speeds up discovery; it doesn't replace your judgment about what's right for your users.
Why the inspo step still matters
There's a trap in the design-to-code workflow: because AI lets us move so fast and see things so quickly, we start skipping the discovery, inspiration, and wireframe parts of the process. I think that's a mistake. I'm finding those steps more important than ever, because they're what let me see different ideas and explore concepts before committing to one.
This isn't about slowing down for the sake of it. The whole reason teams hire designers — and the reason non-designers go looking for design help — is that we understand the UX and UI and we run the full design process. AI doesn't remove that. It just lets us do it in a fraction of the time.
When you keep the inspo step but speed it up, you get benefits like:
- Faster direction-setting. You explore real patterns and land on a credible direction in minutes instead of an afternoon.
- More concepts, less effort. You can spin up a second or third option to put in front of your team or users without starting over.
- Grounded decisions. Your wireframes are based on what already works in shipped products, not on a model's default guess.
A real example: redesigning a booking page
Here's exactly how this played out on a real feature, so you can see the workflow end to end rather than in the abstract.
Example: consolidating a public calendar view
The problem: I was looking at a public booking page built on Cal.com (the open-source platform I use for my projects). The event-type cards were laid out in a single vertical scroll with a lot of empty space around them. It felt like a waste of the layout, and I wanted to rethink how the different calendars were presented — something easier to scan, friendlier, and more delightful. The solution: I opened a branch (public-page-view), then asked Mobbin MCP to help. The key was the prompt: I told it to find the page in the codebase and read it, described the experience I wanted, and explicitly asked it to return links to each example so I could click through and see them myself. We're visual — early on, an MCP would tell me "use this cool design from Airbnb" without ever showing me the screen, which is useless. Asking for the actual references is what makes the inspo phase fast and real.
From there it asked me a few clarifying questions to narrow the direction (richer cards, marketplace rows with right-aligned CTAs, or a two-column layout with a sticky side panel), and I iterated. When it kept surfacing the same handful of examples — or pulling Cal.com itself as a reference — I pushed back, gave it more context, and asked it to rethink how the cards showed up. That back-and-forth is normal, the same as any design-to-code loop. I landed on a service-menu grid / multi-card layout, then had it build a mid-fidelity HTML mockup directly in the repo so I could feel the layout before committing.
The results:
- Hours of manual inspo work collapsed into a few prompts
- A clickable, in-repo wireframe of a new direction — ready to share with the team
- The option to spin up a second variant instantly if I wanted to A/B a direction with users
A quick honesty note: the first wireframe came back too high-fidelity and in dark mode, ignoring the design system entirely. I asked it to go back to simple boxes, and the simpler mid-fi version was exactly what I needed to hand off. The iteration is part of the process — the MCP just gets you to the starting line much faster.
How to use Mobbin MCP in Claude Code
You don't need a complicated setup to start. The trick is to treat the MCP as a research partner that can read your code, not just a search box. Here's the playbook I use.
1. Install the Mobbin MCP
Go to Mobbin's MCP page and click Install MCP. Pick your client — I'm using Claude Code, but you can choose whichever you use. Copy the registration snippet, open your project in Claude, and paste it in. You'll get a confirmation once it's installed. Note: you need a paid Mobbin account (I use the Pro subscription) and it may ask you to verify on first use.
2. Set up the page you want to work on
Start your dev server and open the actual page you're redesigning. Open a branch for the work. The whole point is that the MCP can read your codebase and the specific page — so give it something real to anchor to.
3. Write a context-rich prompt — and ask for links
Describe the page, attach a screenshot of the current state, and tell it what you want ("consolidate how we view the calendars in a way that's easier to scan and more delightful"). Then add the two instructions that make this work:
- "Find this page in the codebase and read it."
- "Give me a link to each example so I can click through and look myself."
Ask yourself: Have I given it enough context to understand my product, and have I forced it to show me the references, not just name-drop them?
4. Iterate on the direction
Let it ask clarifying questions and answer them. When it repeats examples or pulls irrelevant ones, push back and add context — "rethink how the cards show up; what if we show multiple cards instead of single-line cards?" Treat it like a design crit. This is where your judgment does the work the AI can't.
5. Build a wireframe and refine fidelity
Once you like a direction, ask it to build a mockup in the repo and specify the fidelity (low or mid). If it comes back too polished or off your design system, tell it to go back to boxes. Turning on auto-accept in Claude Code keeps the loop fast so you're not approving every step. When you've got something you like, pull in real content and share it with your team — or spin up a second variant to compare.
Doing inspo well doesn't have to be slow. With the right prompt and a little back-and-forth, you can go from a live page to a shareable wireframe in the time it used to take just to find your references.
Tools and resources
Everything here runs on a small, accessible stack:
- Mobbin MCP — the official server connecting Mobbin's 600k+ real app screens to AI agents (requires a paid Mobbin account)
- Claude Code — the AI coding environment I prompt the MCP from
- Cal.com — the open-source scheduling platform I build my projects on
If your team is spending more time hunting for inspiration and fighting design-to-dev handoffs than actually shipping, that's exactly what we help with at TDP. I'm currently taking on workshops where I audit your design-to-code process and build a playbook your team can use to go from inspo → design → code → handing finished designs and front end to engineers.
Want a design-to-code playbook built around your team's workflow? Book a workshop with TDP →
