Big Idea

The argument in one line.

Connecting the Mobbin MCP server's 600,000+ real app screens to Claude Design lets an AI design tool ground its mockups in actual shipped UI instead of generic templates, but the workflow still depends on a human-written PRD and UX direction before any screen gets designed.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You use Claude Design (or a similar AI design tool) and want mockups that reference real, shipped UI patterns instead of generic AI-default layouts.
You're a solo founder or indie builder who needs fast mobile app mockups and can't afford a dedicated UX researcher or reference library.
You're curious what an MCP server actually does in practice and want one concrete, followable example of connecting a third-party MCP to a design tool.
You want a repeatable process for going from a rough app idea to structured UX directions before opening any design software.

SKIP IF…

You won't pay for a Mobbin Pro subscription — the entire workflow requires it, and the presenter says it costs at least $45/month.
You're designing web apps rather than mobile — the presenter says Mobbin's website section is thin compared to its mobile coverage.
You're looking for guidance on defining what an app should actually do — this video skips straight to visual execution, and the presenter admits he invented the app's features with no real user research.

TL;DR

The full version, fast.

Sean Kochel connects Mobbin — a subscription library of 600,000+ real app screens, UI elements, and onboarding flows — to Claude Design through a community-built MCP server, wiring it up via Claude desktop's connector settings since Claude Design's web interface has no direct way to add one. He demos three scoped uses against an invented lactation-support app: generating three structurally distinct UX directions, building a full onboarding flow modeled directly on WhisperFlow's real onboarding sequence, and pulling one highly-rated time-picker component for a feeding-schedule feature. He frames all of it inside his own process — PRD, then Requirements, then UX Direction, then Sync & Tech — arguing that skipping straight to visuals produces apps that look finished but don't functionally deliver. He also openly admits every feature and user need in the demo app is invented on the spot with zero real research, undercutting his own design calls throughout.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →

Chapters

Where the time goes.

00:00 – 01:46

01 · Cold open: 600,000 screens and an odd topic

States the premise — Claude Design pulling from a library of real app screens — then flags that the demo app is a lactation-support app someone in real life asked him to help design.

01:46 – 03:50

02 · Touring Mobbin's library

Walks through Mobbin's screen library organized by category (onboarding, dashboard, payment method, etc.), noting mobile coverage is much stronger than web.

03:50 – 05:55

03 · Wiring the Mobbin MCP into Claude Design

Since Claude Design's web UI has no direct way to add an MCP server, connects Mobbin through Claude desktop's connector settings, which then appears inside Claude Design's manage-connectors menu; names the three available tools (search screens, sections, flows).

05:55 – 11:25

04 · Generating three UX directions

Explains his PRD → Requirements → UX Direction → Sync & Tech process, then prompts Claude Design (via the Mobbin MCP) to produce three distinct UX/UI directions for a breastfeeding-support app from a short bullet-point brief.

11:25 – 14:10

05 · Building the onboarding flow from a named reference

Browses Mobbin's onboarding category, picks WhisperFlow's real onboarding sequence as a structural reference, and has Claude Design rebuild that same flow — full-bleed hero screen and questioning sequence included — for the demo app.

14:10 – 15:58

06 · Pulling one component, then the close

Scopes the same MCP connection down to a single UI element — a highly-rated time picker — to mock up a feeding-schedule feature, admits he invented every feature with no user research, and closes by pointing to the free PRD skill and paid community.

Atomic Insights

Lines worth screenshotting.

Mobbin's library holds more than 600,000 screens and real user flows pulled from shipped apps, and Claude Design can query the whole thing through a community-built MCP server.
Accessing Mobbin's full library through its MCP server requires a paid Pro subscription, which the presenter says costs at least $45 a month.
Claude Design's web interface has no native way to attach an MCP server — the connection has to be made first through Claude desktop's connector settings, which then carries over to the web tool.
The Mobbin MCP server exposes exactly three tools: search screens, search UI sections/elements, and search flows — covering full screenshots, individual components, and multi-screen sequences respectively.
The presenter's process runs PRD, then Requirements, then UX Direction, then Sync & Tech, and he insists on locking what the app must functionally do before touching layout, color, or typography.
Skipping straight to visual design without first locking product requirements is named as the reason people end up with an app that looks finished but 'doesn't really feel like it does the thing' it was meant to do.
Asked for three distinct UX/UI directions for a lactation-support app, Claude Design returned genuinely different structural approaches rather than three color variants of one layout.
To build a new onboarding flow, the presenter had Claude pull a specific named competitor's onboarding sequence (WhisperFlow) through the Mobbin MCP and use its structure directly for an unrelated app.
The same MCP connection scales down to a single component request — the demo asks for one highly-rated time-picker UI element to mock up a feeding-schedule feature.
The presenter openly admits he invented every feature and user need in the demo app on the fly with zero real user research, calling one of his own design picks right after saying 'I'm not a woman, obviously.'

Takeaway

Ground AI mockups in real apps, but write the PRD first

DESIGN WORKFLOW

Feeding an AI design tool real, shipped UI references produces sharper mockups than generic prompting, but the direction still has to come from a written product spec, not the design tool itself.

02Touring Mobbin's library

A UI reference library indexed by category (onboarding, dashboard, payment method, etc.) turns 'get some inspiration' into a specific, searchable request instead of a vague prompt.
Paying for real reference material (Mobbin's Pro plan, at least $45/month here) is treated as a cost of doing serious AI-assisted design work, not an optional nice-to-have.

03Wiring the Mobbin MCP into Claude Design

When a web tool has no native 'add MCP server' option, check whether it inherits connectors from a desktop version first — Claude Design picked up the Mobbin connection made through Claude desktop's settings.
An MCP server that exposes only a few well-defined tools (here: search screens, search sections, search flows) is easier to direct precisely than one with a vague, do-everything interface.

04Generating three UX directions

Run the product-requirements pass — PRD, then Requirements, then UX Direction — before opening any design tool; the visual layer only works once you know what the app functionally has to do.
Asking explicitly for multiple distinct structural directions, not visual variants of one layout, gets more useful early-stage comparisons out of an AI design tool.
Skipping the requirements step and jumping straight to visuals is named as the reason people end up with an app that looks finished but doesn't actually do the thing it was built to do.

05Building the onboarding flow from a named reference

Naming a specific, well-regarded competitor flow as the structural template gives an AI design tool a concrete target instead of an abstract 'make it good' instruction.
The output can mirror a named reference's structure closely enough to be nearly a copy — the full-bleed hero screen and question sequence carried over almost directly, so 'inspired by' needs a conscious redirect to stay original.

06Pulling one component, then the close

The same MCP connection scales down to a single component request (one time picker) just as easily as a full onboarding flow, so it's worth using for small UI decisions too, not only whole-screen mockups.
A slick-looking AI mockup is not validation that a feature is right for real users — the presenter admits he invented every feature and user need in this demo with zero actual user research.

Glossary

Terms worth knowing.

Mobbin: A subscription library of real app screenshots, UI components, and onboarding flows from shipped mobile and web apps, used as design reference material.
MCP (Model Context Protocol) server: A connector standard that lets an AI tool query an external data source or service directly — here, letting Claude Design search Mobbin's screen library from inside a design chat.
Claude Design: Anthropic's web-based design tool that generates and iterates on app mockups from a text brief; referred to informally in the video as 'Claw Design.'
PRD (Product Requirements Document): A written spec describing what an app or feature must functionally do for the user, meant to be finished before any visual design work starts.
Full bleed: A screen design where an image or color fills the entire display edge-to-edge with no margin, commonly used for splash or welcome screens.

Resources

Things they pointed at.

02:43toolMobbin ↗

02:41toolClaude Design

12:16productWhisperFlow

00:00linkPRD LITE skill (free) ↗

00:00productTech Snack Pro community ↗

Quotables

Lines you could clip.

00:31

“But we're gonna be doing a video on boobs.”

shock-value cold-open line, deliberately at odds with his stated 96%-male audience→ TikTok hook↗ Tweet quote

07:29

“A lot of people skip that step and then are very unhappy with having an app that doesn't really feel like it does the thing that you were intending for it to do.”

the core lesson of the video, stated as a single warning→ newsletter pull-quote↗ Tweet quote

11:04

“I'm not a woman, obviously, but I think this one feels the most like it would make sense for this audience, and that's without me going in and doing a bunch of in-depth user research.”

an honest, self-undermining admission mid-demo→ IG reel cold open↗ Tweet quote

14:47

“I am making up all these features off the fly, by the way, guys. I have no idea. This is why you do user research.”

the punchline that undercuts the entire demo's design decisions→ TikTok hook↗ Tweet quote

The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

metaphorstory

I gave Cloud Design access to a library with hundreds of thousands of screenshots and real user flows from actual applications, and I asked it to use what it had to build me an app and an onboarding flow from scratch. And so in this video, I'm gonna show you how to make that connection happen and how you can use it to do the same thing yourself.

So I know it's weird that I might be doing a video on this topic because according to YouTube, my audience demographic is about 96 or 98% men, but we're gonna be doing a video on boobs.

So the inspiration behind, uh, this app, it's a lactation support app for women. And the reason that I chose to design this is this is something that someone in real life actually asked me for my help with building for them. Decided to kill two birds with one stone and test out this new MCP server that I'm gonna be showing you guys and how we can use it to just get some quick concepts about what this app could potentially look like.

And so in this case, we have three different screens. So these are three different, like, fundamental directions for the same exact app.

These aren't, like, different versions of screens within the same app. It's like, hey. These are different, like, design directions that we could choose to take.

And then we built out this nice little onboarding flow. So we have this, like, full bleed screen right here in the middle where it says nightlight.

Then we're going through the user onboarding, getting the email, allowing them to upload a photo of themselves, how old is their baby with this nice little kinda, like, radio button selectors, what are they struggling with right now, how should we refer to the person, and then a few other stages to this onboarding process.

And all of this was actually built out based on inspiration of a design from a completely different industry. So let's go look now at that process.

Where are we actually getting these things from, and how are we connecting them into claw design? So the tool that we're using here is called Mobin.

I've covered this on my channel for the past year, probably. I I always come back to this because I think it's a great place to get inspiration for what you want to build, particularly if you're going to be building mobile applications.

Their website section, I don't I don't think it's super good. They don't have, like, a lot of web app examples in there. But if you are building a mobile app, this is a really nice place to come through and get, like, inspiration for screens, what different, like, UI elements could look like, what your onboarding flow might look like.

Lot of really great stuff in here. Now the one thing that's really cool is we can actually access everything we see here.

So I think there's over half a million screens inside of this tool. We can access all of these from an MCP server.

So the way that we're gonna do that is we're gonna go up into our settings. And by the way, I am on a pro plan for this, so it's gonna cost, like, at least $45 to get in on a, uh, paid plan.

But once we've done that, we can come in here, and then we can go into our settings. And then there's this option for the MCP server. And now if you wanna use this inside of, like, codex or v zero or cursor or clawed code directly or anything like that, you can do that pretty easily.

But what I'm gonna show you is how you can actually connect this to clawed design. So if you're somebody that struggles in any way whatsoever with actually making nice designs or you just want the process to be more streamlined, I highly recommend Claw Design.

It's it's an amazing tool. I also integrate it, like, deeply into my actual development process. So when I move through and I build, like, PRDs for things or I have new features that I want to build, I always go into Claw Design and design that stuff out first, and then I have skills that can help marry it with, like, my my back end so that I'm gonna build out, like, the schema and the database and the back end business logic.

And I I know what the components need to look like, and I'm kind of going back and forth with the design so that both of those two things can come together. But that being said, one of the things that's really nice about Claude design is that if we come down here and we go to our manage connectors section, anything that we have integrated within our Claude desktop app, we can connect directly into, uh, Claude design on the web.

So in this case, we can see I have n eight n connected, but I also have the Mobin MCP connected. And so the way that you actually go about doing this, because this is on the web and there's not, like, a direct way to actually connect an MCP server in this UI, is that you just go in and you do it through Claude desktop.

So if we go into our Claude account and then we go to settings and then scroll down to connectors, if we go up and we do add connector and then browse, if you come in here and you just type in Mobin, there is a community, uh, supported connector that's already here, and it allows us to do three different things.

So there's three different tools. We can search for flows. We can search for screens, and we can search for sections.

So let me explain to you exactly what that means. If we go back into Mobin, we can basically access any of these.

So number one, the screens. We can get, like, actual screenshots, which we are looking at down here. We can get specific UI elements.

So say, for example, that you want to work on, like, a specific type of button or way of displaying something, you can ask it to return you just those specific elements. So for example, maybe you're trying to think about, like, hey.

How can I display a tooltip in my app in the best way you can pull these things down into your app and get inspiration that way? And then the last piece is flow. So for example, with onboarding, if you wanted to build out maybe like an onboarding experience, you can, again, call these in directly from this MCP server.

So, basically, anything that you see inside of this mobbin interface, we are gonna be able to actually pull into claw design. Okay, guys.

So what we're gonna do from here is we're gonna come through now and try to actually build something. So, again, gonna use that same example that we had earlier. We're building a breastfeeding support app mock up for new mothers.

Now where is this gonna get different, and where does this MCP server come into play? We're gonna ask it in this first case, and we're gonna go through a few examples of these, so stay tuned. You need to use the mob and MCP server to pull inspiration from different apps.

So this first pass that we're gonna go through is is, hey. Go look at all of these other screens and try to come up with some distinctly different UI and UX directions that we can consider.

And then I'm just going to paste in what some of the features of this thing need to be. Again, these are just based on conversation that I had with my sister in this case.

And so one important thing here is that, obviously, in this case, we just came through and gave it a few bullet points. But, realistically, if you want this tool to be as effective as possible, you really wanna go out and build this into some sort of lightweight PRD.

I have a skill below that I will link to you guys if you want that. But, again, we wanna be able to take something like this that we see highlighted here, so what this app is meant to be able to do. And we wanna start molding that into a set of requirements, like, functionally, what should a user be able to actually do with this thing?

And the reason that we do that is from those decisions are going to be where we can make decisions about the actual user experience, what this app is meant to be, how it's meant to actually accomplish its goal. And then finally, we can get to, like, the UI and and the colors and the spacing of things and the layout of the typography.

We can get to that stuff later after we're sure that it's going to actually be able to functionally accomplish the thing that we want it to do. And a lot of people skip that step and then are very unhappy with having an app that doesn't really feel like it does the thing that you were intending for it to do.

That is always gonna happen to you if you skip past the actual product decisions and just hop straight into designing something. So, again, we're doing this just to show you how this Mob and MCP server works, but what you would really wanna do is integrate this into your actual build process.

Now that whole process that I just described, just to show you visually what I'm what I'm saying, is that we start with this PRD, and this is gonna be where we're describing again, like, functionally what this is meant to be able to do.

And then we translate that into actual requirements, like a requirements documentation where we're not saying precisely what shape this thing needs to have.

We're saying what jobs for the user it needs to actually accomplish. Once we have this and this, that's where we can move in.

And what I like to start doing before I even get to a tool like Claude Design typically is start thinking about the UX direction. There's a lot of different ways that you can solve the same problem for somebody.

Right? This app that we're describing right now, there's probably dozens of different directions we could choose to take something like that.

Is it gonna be a forum based experience? Is it gonna be a chat based experience? Does the app interact proactively with the user, or is it all reactive where the user is the one initiating things?

There's, like, a a ton of different ways that something like this could come together, and this is something you wanna, like, think about in the context of your like, what you are trying to do. There's a lot of different ways that you can think about doing that, but it's a really important stage that you don't want to skip.

But after we are here and we know, like, functionally what this thing needs to be able to do and the general shape that it is going to take, this is where I like to turn all of that into screen prompts and then pop into a tool like claw design, like we're looking at right now, and then design all of these things out individually.

Now after we go through here, we spend likely hours iterating and making sure we're really on the same page and getting all of the different features of our product hashed out in the empty states and the UI affordances and, like, all of that type of stuff, then the final step here is that we come back, and we actually pull down these designs from claw design back into our PRDs, and we make sure that the database schema and the data models and the back end logic and all of, like, the stories that we're gonna need to have for that are actually sequenced properly and that they're referencing the designs that we made.

I get a lot of questions about how to actually go through large builds from start to finish. This is the type of process that helps that happen.

I do have a plugin that that does all of this inside of my paid community. So if you guys want access to that, you can check out the link in the description below.

But that that free, like, light PRD generator that I mentioned, I'll I'll link that below as well if you guys just want that option. So now we can see what we got out the other side from this MCP server. So it went through, and it pulled a bunch of different screens.

It's actually still designing this, but it pulled a bunch of different screens from Mobin, and it used that to build out some different directions for us. I'm not a woman, obviously, but I think this one feels the most like it would make sense for this audience, and that's without me going in and doing, like, a bunch of in-depth user research for this video just to do this.

So what are the other areas or opportunities now to use this Mobin MCP server? We're gonna go through two of them kind of quickly. The first one is going to be an actual building of an onboarding flow.

And so if we go back into Mobin now and we come into our flows, there's this one section for onboarding. And so now we can come through here and see what are all of the different onboarding experiences that these apps have.

And if there's one that really stands out to us as something that's, like, really high quality, It fits really well for this niche that we're trying to operate in, or for whatever other reason you feel really good about it. We just wanna take a note of that.

You can, by the way, save any of these, and it creates, a a running collection of things for you. So you can save any of these things. But I'm just gonna pop through here now and scroll down until I find one that I feel like, hey.

It really makes sense for what we are trying to do. I kind of like the the whisper flow one. Just looking through this.

And we're not talking necessarily about, like, the aesthetics of what this looks like specifically, but what are the questions being asked and the general flow that we are moving through. So what we're gonna do here is now we're gonna pop back through.

We're just gonna create a new chat, and in this case, again, we're going with option one a. And so I'm gonna say use the mob in MCP server. I want you to pull the onboarding flow for WhisperFlow, and use that combined with option one a to build out a a mock app onboarding experience.

And now, again, the caveat I'll give this type of stuff is we would want to be thinking about these questions. Obviously, we're not just gonna, like, claw design, decide what the onboarding question should be. But we can see we have this, like, full bleed, uh, kind of, like, splash screen, which lands us into this first welcome screen.

We have our kind of interactive checkboxes that are, again, all, like, on brand with the designs.

We can come in here, answer questions about the baby and, you know, all these other questions. So it's it's looking pretty nice overall, and I think if you've ever tried to build your own onboarding experience from scratch, you know that this this probably feels really nice compared with what it looks like when you try to do it yourself manually.

So, again, this is following, like, fairly closely the design that we looked for inside or we were looking at inside of WhisperFlow in this case. We had the full bleed, um, hero image there, and then we have this similar way of questioning.

Like, this is exactly what we had inside of our app. And so, again, it's following, like, the structure of these screens decently well. If we wanted to have these, like, check-in moments with, like, the congratulations and, like, all of this stuff, we could again tell it to add those types of things in.

So, again, the last section that we have here inside of this that we can look at are those UI elements. So say, for example, we wanted to have some sort of, like, time picking functionality in here, we could pop back, and we could say so based on direction one a, use the Mobin MCP to select a time picker component that's highly rated, and use it to mock up a feeding schedule feature.

Right? Just as an example to show you how it can go out now, and it can pull different design inspirations again from Mobbin.

Okay. So now we can see this new feature that is mocked up where we have, like, this, like, schedule of, you know, people logging feedings and stuff. I am making up all these features off the fly, by the way, guys.

I have no I have no idea. This is why you do user research. But if we were to click in on one of these, we can see now we have this, like, nice component here where we could pick times.

So I think overall, this is really nice. And again, all of this, like, this is coming through from these pickers inside of Mobin.

So it can actually move through and make, like, intelligent decisions about what it's going to choose, like, the overall structure this is going to have, what makes sense based on the aesthetics of the app. It's actually moving through and, like, looking at these images and making those decisions.

So an awesome tool. Again, I will have this light PRD skill in the description below if you want that so you can come up with a really, like, lightweight version of one of these things. And if you want this full process and you wanna really learn how to take these, like, larger builds end to end and take them to market and sell them, This section that we're looking at here is just one small chunk of what I have inside of the the paid community.

We have about 70 people in there, time of recording this video, so highly recommend you go check it out if you're interested in that type of thing. That is it for this video, though. I will see you in the next one.

The Hook

The bait, then the rug-pull.

Sean Kochel opens by pointing Claude Design at a library of 600,000+ real app screens and asking it to design an app and onboarding flow from scratch — then admits the topic is an odd fit for his mostly-male audience, because the app in question is a breastfeeding-support app someone in his life actually asked him to help build.

Frameworks

Named ideas worth stealing.

08:02model

PRD → Requirements → UX Direction → Sync & Tech

PRD
Requirements
UX Direction
Sync & Tech

The presenter's own sequencing for any AI-assisted app build: first describe functionally what the app needs to do (PRD), translate that into concrete requirements, only then decide the UX direction and visual shape, and finally sync the resulting designs back into the backend schema and build stories.

Steal forany AI-assisted app or feature design pass, before opening a design tool

04:36list

Mobbin MCP's three tools

Search screens
Search sections/UI elements
Search flows

The Mobbin MCP server exposes only three scoped tools — full-screen references, individual UI components, and multi-screen sequences — instead of one vague, do-everything search.

Steal forsourcing real UI reference material inside any MCP-connected AI design or coding tool

CTA Breakdown

How they asked for the click.

VERBAL ASK

15:42product

“This section that we're looking at here is just one small chunk of what I have inside of the paid community. We have about 70 people in there, time of recording this video, so highly recommend you go check it out if you're interested in that type of thing.”

Soft plug folded into the closing recap rather than a hard ask, pointing at the paid Tech Snack Pro community and a separate free 'PRD LITE' skill link in the description; the same pairing (paid community + free skill link) is also mentioned once mid-video around 10:29, with no on-screen price or urgency either time.

MENTIONED ON CAMERA

02:43toolMobbin ↗

00:00linkPRD LITE skill (free) ↗

00:00productTech Snack Pro community ↗

FROM THE DESCRIPTION

PRIMARY CTAWhere the creator wants you to go next.

OTHER LINKSAlso linked in the description.

Storyboard