The argument in one line.
Connecting an AI coding agent to a library of 600,000+ real app screens through an MCP server replaces guessed-at UI patterns with citable references from companies like Mercury, Wise, and Notion, so every interface decision traces back to a live example instead of a training-data hunch.
Read if. Skip if.
READ IF YOU ARE…
- You build interfaces with an AI coding agent and want UI decisions backed by real shipped patterns instead of generic defaults.
- You're a solo developer or indie designer without a design team to sanity-check choices like settings pages, profile pages, or dashboard layouts.
- You already use Claude Code, Cursor, or Codex for full builds and want a way to feed the agent real design references instead of describing screens from memory.
SKIP IF…
- You already have a dedicated product designer or a mature design system -- this solves a research gap, not a design-team gap.
- You're not interested in adding another paid subscription on top of your existing AI tooling.
The full version, fast.
Claude Code can now search a library of over 600,000 real app screens through the Mobbin MCP, turning 'describe a screen and hope the AI guesses well' into 'pull the actual pattern real companies ship.' After a one-line connector URL and an OAuth authorization, the agent gets three tools -- search_screens, search_flows, and search_sections -- and can produce a cited HTML report before writing a line of code. The video walks through two live builds: a profile page assembled from patterns pulled from Campsite, Workable, and Basecamp, and a financial dashboard redesign that adopts Mercury's sidebar-navigation and money-in/money-out hero pattern. Every referenced screen links back to Mobbin so the sourcing is checkable, not just asserted.
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 →Where the time goes.
00:00 – 00:43
01 · Intro
Cold open: Claude Code can now search 600,000+ real UI screens through the Mobbin MCP before designing anything.
00:43 – 01:41
02 · About Mobbin
What Mobbin actually is: a library of real onboarding, checkout, settings, and empty-state screens from shipped web and mobile apps, not community mockups.
01:41 – 03:05
03 · Project intro
A conceptual analytics dashboard and settings page already built with Mobbin-sourced patterns, citing Notion, Vercel, Cloudflare, and Claude.
03:05 – 04:23
04 · Setup
Connecting Claude Code to the Mobbin MCP: paste one server URL into a custom connector, authorize the Mobbin account, verify the three exposed tools.
04:23 – 07:13
05 · Research + Plan
Prompting Claude to search Mobbin for the top profile-page designs, generating a cited HTML report (32 screens across 4 searches) and a build plan before writing code.
07:13 – 09:39
06 · Build
Building the profile page section by section against the Mobbin-sourced plan, then checking the finished sections against the proposed structure.
09:39 – 12:15
07 · UI Redesign
Handing Claude an existing generic financial dashboard file and asking for a Mobbin-referenced redesign; Claude adopts Mercury/Wise/Quicken's sidebar-nav and balance-hero patterns.
12:15 – 12:43
08 · Outro
Wrap-up: the takeaway is that Mobbin replaces guesswork with citable references for any AI coding agent, plus the affiliate CTA.
Lines worth screenshotting.
- Claude Code can now search over 600,000 real app screens through the Mobbin MCP instead of guessing at UI patterns from training data.
- The Mobbin MCP exposes exactly three tools to the agent: search_screens, search_flows, and search_sections.
- Connecting the MCP takes one server URL pasted into a custom connector, followed by an OAuth authorization to the Mobbin account.
- For one profile-page research pass, Claude searched 32 web screens across four separate Mobbin searches before proposing a plan.
- The profile page's 'basic details in one bordered card' pattern was pulled from Campsite, Workable, Reloom, and Basecamp -- not invented by the model.
- Every screen Claude references through Mobbin is clickable, linking straight back to the source app on Mobbin's site for manual verification.
- The redesigned financial dashboard adopted a sidebar-navigation-with-inline-accounts pattern the agent attributed specifically to Mercury, Wise, and Quicken.
- A large serif balance figure with pending amounts called out separately ('$127.84 pending') was copied from Mercury's transactions-page pattern.
- Asking an AI agent clarifying questions before it builds, rather than after, produces output closer to what you actually wanted.
- The workflow separates research from build: one prompt gathers and cites patterns, a second prompt approves the plan and tells the agent to proceed.
- You don't need a from-scratch project to use this -- an existing generic HTML dashboard can be handed to the agent for a pattern-backed redesign in place.
- Grouping transactions under date headers with a running-balance column, instead of a flat list, is what turns a table into an actual bank ledger.
Feed your AI agent real references, not just prompts.
DESIGN RESEARCH
An AI coding agent defaults to generic patterns unless you hand it real, citable references first -- a searchable screen library turns 'guess what good design looks like' into 'copy what already works.'
02About Mobbin
- A design-reference library is only as useful as its sourcing -- real, shipped screens beat community-submitted mockups because they reflect decisions a company actually tested and shipped.
- Reference material spanning both web and mobile, and both full flows and single components, covers decisions at every scale from onboarding down to a single toast.
03Project intro
- Naming the exact companies behind a borrowed pattern turns a design choice into something you can defend, not just something that looks fine.
- A settings or profile page built from cited references reads as more intentional than one designed from memory, even before a user opens it.
04Setup
- Verify a brand-new MCP connection with a direct 'what tools do you have' question before trusting it inside a real build -- don't assume the handshake worked.
- A connector that only exposes read/search tools, not write access, is the safer default for a new external data source.
05Research + Plan
- One scoped research prompt -- find the top designs, write a report -- can return dozens of cited screens across multiple searches before any UI gets built.
- Asking the agent to propose a section-by-section plan before building gives you a checkpoint to edit out what doesn't apply before code gets written.
06Build
- Splitting identity from sign-in and security settings, rather than mixing them on one page, is a pattern that repeats across unrelated products for a reason: it separates who you are from how you get in.
- Ending a settings page with a clearly separated, higher-friction danger zone for destructive actions is a convention worth copying wholesale.
- Comparing the built result against the agent's own stated plan, section by section, is how you catch drift before calling something done.
07UI Redesign
- A generic, low-hierarchy dashboard can be redesigned in place by pointing an agent at the existing file and asking for reference-backed changes -- no rebuild from scratch required.
- Replacing several flat account cards with sidebar navigation plus one large money-in/money-out hero figure is a pattern borrowed specifically from Mercury, Wise, and Quicken.
- Grouping transactions under date headers with a running-balance column, rather than a flat list, is the pattern that distinguishes a real bank ledger from a generic table.
Terms worth knowing.
- MCP (Model Context Protocol)
- A standard that lets an AI agent like Claude Code connect to external tools and data sources through a single server connection -- in this case, a searchable library of real app screens.
- Mobbin
- A design-reference library of real, shipped app and website screens, browsable by screen type, flow, or component, now queryable directly by an AI coding agent through its MCP server.
- search_screens / search_flows / search_sections
- The three tools Mobbin's MCP exposes to an agent -- for finding single UI screens, multi-step user flows, or specific reusable sections and components.
Things they pointed at.
Lines you could clip.
00:00
“Claude Code can now pull from over 600,000 real UI screens before it designs anything.”
06:24
“An AI agent like Claude Code doesn't know all of these best practices on its own. You have to teach it what all these patterns look like. Otherwise, it'll just default to all the basic generic design choices that you've seen before.”
12:12
“Every design project starts from real reference instead of just a blank prompt. No more describing a screen and hoping Claude guesses what good design looks like.”
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.
metaphor
00:00Cloud Code can now pull from over 600,000 real UI screens before it designs anything. These are real onboarding flows, paywalls, settings pages, empty states, all from apps that have actually shipped and people use every day.
00:13And I just connected the entire library to Claude code through the Mobin MCP. So now, instead of describing a screen and hoping that Claude guesses what good design looks like, it pulls real reference designs from real apps and builds off those. I've been using this MCP for a couple weeks now, and it's changed how I start every single real world design project.
00:32In this video, I'll show you exactly how to set it up, how to prompt it so that your agent pulls the right references, and my workflow as a working product designer that make this incredibly useful. Let's get into it. Before we dive into this demo, I wanna give you all a little bit more context about what Mobin really is.
00:47As designers, we, of course, all need to find inspiration from somewhere. And not only inspiration, but also references that help us understand how we should approach and design a particular type of Whether that's designing an ecommerce site, a checkout flow, a settings screen, a login screen, or even down to a specific UI element, like a toast, a progress indicator, a dialogue modal, a navbar menu.
01:09We don't just magically know how to design all these things. We need to get reference and inspiration from somewhere. And Maubin is a fantastic place to get all that from because you can get inspiration for both web and mobile apps.
01:20You can dive into specific flows for everything from creating an account, all the way to logging and tracking. And it's not even just for apps, it's also for sites as well. And these aren't just sites that anyone can upload to a site like Dribbble.
01:31These are all references that you can study from established startups all the way up to some of the biggest companies out there, so you can see what design patterns and guidelines actually work. So here's a dashboard that I built a couple weeks ago using the Claude Fable five model. It's a good old conceptual analytics dashboard that would theoretically be used by a tech company to track performance and activity over time.
01:52And it's not just this one overview page either. We also have a revenue page, all with working tool tips, date range selectors, some beautifully laid out KPIs right here, and a couple more cards with data visualizations down here.
02:04And then just to show you the extent of this conceptual app that I built, we also have the accounts page and a settings page. And if you watched my video on Fable five for UI design, this might look familiar to you. I actually used the Mobin MCP to design this entire settings page here, including each of these tabs.
02:19And you can see the result of using the Mobin MCP is a beautiful and intuitive list of settings. And the way I did this was I told Claude Code to go through Mobin and find the most relevant setting screens from popular apps like Notion, Vercel, Claude, Cloudflare.
02:33Basically, of the biggest companies that pour millions of dollars into the design of their products. And using the Mob and MCP, I was able to extract some of the most popular patterns and guidelines for designing setting screens, and then apply those same patterns to my very own app. Now, I wanna go through the same workflow for building out a profile page.
02:52You can see up in this drop down that there's a profile button, but it doesn't go anywhere right now. There's a toast that says opening profile, but the profile page doesn't exist yet. So to build out a research backed profile page, I'm gonna do the same thing and use the mob in MCP.
03:05Let's start with the setup process and it's really, really simple and quick. And remember, to get started with Mobin and follow along with me, you can get 20% off your Mobin subscription using the first link in the description. Once you're in Mobin, click on your profile icon, go to settings, head over to the MCP tab, and here's where you're gonna get the instructions for connecting your AI tool of choice to the Maven MCP.
03:27But I use the Cloud Code desktop app and these instructions below are optimized more for the Cloud Code CLI. So, if you are using the Cloud Code CLI, then use these instructions. But for me, I'm gonna switch over to other to see the instructions for the Cloud Code desktop app.
03:41So, in Cloud Code, all I have to do is open the sidebar, go to customize, open your MCPs which you find in connectors, hit this plus button, Add custom connector.
03:51Name this new custom connector Mobin, and then copy this one line server URL from the instructions. Then paste that into the second field here. No advanced settings needed, so let's click add.
04:00Now it's time to authorize my Mobin account. Remember, you need a Movin subscription for this. Hit continue to grant access.
04:06And now, just like that, my Claude code is connected to Movin's entire library of over 600,000 UI screens. Just to make sure it's connected, I'm gonna ask Claude, are you connected to the Mobin MCP?
04:17And there we go. It says it's connected and the three tools that it has available, search screens, search flows, and search sections. And now it's time to get started building out this profile page.
04:26And the first step is that is asking Claude to reference Mobin's library and searching through the top profile page designs to understand the best practices and patterns for that type of design. So I'm telling Claude, let's design the profile page. Using the Mobin MCP, find the top profile page designs and create a visual HTML report showing the most relevant profile page designs to our type of app and the best practices that top companies are using.
04:49Just so Claude works extra hard on this research part, I'm gonna switch from Sonnet to Opus. So now that I've prompted Claude with this, my AI agent is now gonna do what I used to have to do manually, sift through hundreds of screens, taking screenshots along the way, and feeding those all into my AI, which honestly used to take hours.
05:05But now, with the Mob and MCP giving my AI direct access to that huge library of UI screens, this process is pretty much automated, saving me a ton of time and teaching my AI agent what good design looks and feels like. Alright. There we go.
05:19It's finished gathering references from Maven. It says it studied 32 web screens across four searches. So here's the report that I built, and you'll notice it's using all the same styling and overall design aesthetic as the actual dashboard.
05:30So the first search that Claude did was all about identity and profile basics. So this is what you would see right when you land on the profile page, and it's gonna consist of things like profile picture, username, display name, email.
05:41And the companies it's gathered references from for this section are Campsite, Workable, Reloom, whose product I actually really enjoy myself, and Basecamp. Then section two was security, like password and two factor authentication. And notice that any of these UI screens that it's referenced, can click on to open in Maven.
05:58That's the power of the Maven MCP. I'm not taking screenshots of all these screens over and over again on maven.com. Instead, I'm just having the AI agent that I already do so much of my work in do all that for me.
06:09And by the way, all these patterns that you see in something like a profile page, an AI agent like Claude Coe doesn't know all of these best practices on its own. You have to teach it what all these patterns look like. Otherwise, it'll just default to all the basic generic design choices that you've seen before.
06:25 The next section is notifications and preferences, which is actually already included in the settings page in my dashboard, so it's not quite as relevant, but still good that it's referencing that. And then the last section is sessions, connected accounts, and API access, which makes sense that this is the last section because this is the most technical part.
06:45And then toward the end of this report, it tells us the best practices that top companies converge converge on. Really important things like make two factor authentication first class and recommended, show every active session marking the current one, danger zone last like deleting your account, for example. And then here's the most important part.
07:01At the end, it's proposing the actual profile page for my app. So it's taken all the mob in profile pages that it synthesized so far, understanding how it's all gonna fit into our existing app, and laying out a plan for us. So I'm saying everything in the plan looks good besides notifications, which is already in the settings page of our app.
07:19Otherwise, proceed and start building the profile page. So at this point, we've already done the research that we need to for a profile page, and it was all done through one prompt with that mob and m c p connected. Now, we're not gonna get whatever Cloud Code just defaults to.
07:32We're gonna end up with something that's backed by real world references that real users are using. Another useful strategy you can use is before you actually start building, ask your AI agent to ask you clarifying questions about what you want from it before it builds. That's a great way to get something that's more tailored to your needs and how your end users are gonna be using your app.
07:50So let's go ahead and review this new research backed profile page that Claude has built. We can see already right off the bat, it's maintaining the same styling as the rest of the dashboard, which I love. I didn't have to tell it to use a particular design system.
08:02It's just working off what we already have. Now, this isn't some randomly thrown together profile page that Claude guessed about as far as design patterns and guidelines. First off, we can see that Claude has separated this whole, uh, basic details card into its own section at the top, which you can see here in the report that this was actually the first thing that Claude mentioned that we should do based off of its findings from Mobin.
08:22Based off of profile pages from sites like campsite, workable, reloom, contract book, all the basic details like avatar, full name, job title, etcetera, live in a single bordered card with one save button. So because Claude established that that was a common pattern through Maven, Claude implemented the same pattern for my profile page.
08:39Now, here's one more thing that I'm noticing Claude paid attention to that it wouldn't otherwise normally think about. We have a live password validation checklist right here. I can see if I start typing a new password, that checklist actually updates live.
08:51And if I go back to the report, we can see it's actually just following the seventh principle that it established, which is validating in line, meaning live password rule checklists and a few other things as well. Now below these principles, let's look at the plan that Claude had come up with for itself. It structured out the profile page beforehand with identity, security and sign in, two factor, active sessions, connected apps, notifications, and then danger zone at the bottom, which is like deleting your account or deactivating your account for a total of seven different sections on this page.
09:20So let's see if it followed that structure. Identity, password, sign in method, two factor authentication, active sessions, connected accounts and API keys, and danger zone at the bottom.
09:33And we can see notifications isn't here, but that's because I had told Claude after the fact that we already have notification settings configured in the settings page. Now here's another example. You don't have to use the Mobin MCP to design something entirely new.
09:45You could take a design you already have and redesign it based on best practices that Claude finds through Mobin. So I have this pretty basic HTML dashboard that I generated with Claude a few months ago. What I can do is give it to Claude and say redesign it based on best UI UX guidelines for financial dashboards that you find through the Maven MCP.
10:04Now, normally, I would stick with Opus or even Sonnet for the first prompt, but let's go with Fable five so that we can push it to the max and end up with a beautiful, intuitive, research backed dashboard. So now Claude just finished this redesign, and it went from this generic grayscale dashboard with not much hierarchy or differentiation between elements.
10:22And now we have this. It looks elegant. There's actual hierarchy.
10:25There's a clear color palette, and it passes as something that you would see in an actual production application. But it doesn't just look pretty. Claude has told us what changed and the mob and research behind it.
10:35We now have a sidebar navigation with accounts in line, meaning all the navigation is on the sidebar, including these accounts that were previously listed on their own in giant cards here. And it's pointed out that this is the pattern that Mercury, Wise, and Quicken all use.
10:49It's even included hyperlinks to each of these examples on Maubin, which makes it very easy for me to check Claude's work when it references Maubin like this. Then we could see in the original dashboard that there's not really a main point of focus on this page. Besides this active checking account card, there's not really an element that my eyes are most drawn to right when I land on it.
11:07And this is something that Claude noticed too. Now we have an account hero with money in money out shown clear and center right at the top here. It's the single most obvious element on the page that your eyes notice first.
11:18And again, we have a hyperlink to Mercury's transaction page showing us where it's getting that net money in and money out pattern from. And what you get from Mobin isn't just the content of the page. You can also have your AI agent pull a visual system.
11:30So Claude didn't just come up with this redesigned styling in a vacuum. It synthesized the design styling of financial dashboards that it found from Mobin and applied that same styling to the content of our page. The main thing that you should take away from the Mobin MCP is that besides all the dedicated user research you do for your work, like user interviews, usability tests, you know, all the types of user research that AI can never replace.
11:52Mobin is pretty much the only source of inspiration and a reference that you need. Instead of switching between apps, taking screenshots, and manually figuring out what design patterns you should be using for your work, you can just go straight to Mobin and access the library of over 600,000 screenshots.
12:06And the Mobin MCP at the end of the day is what makes this possible when you do so much of your work inside your AI agent of choice, whether it's Cloud Code, Cursor, or otherwise. So that's the mob and MCP running inside Claude code. Like I said, you can use this MCP server no matter what AI agent you use, whether that's Claude, cursor, codex, or any other agent.
12:26Every design project starts from real reference instead of just a blank prompt. No more describing a screen and hoping Claude guesses what good design looks like. To get started with Mobin and get 20% off your subscription, the link is down in the description.
12:39I'll see you in the next one, and subscribe to become a better designer.
The Hook
The bait, then the rug-pull.
A working product designer wires Claude Code into a 600,000-screen reference library and lets the agent cite real Mercury, Wise, and Notion patterns before it writes a single line of interface code.
Named ideas worth stealing.
04:11list
Mobbin MCP's three tools
- search_screens
- search_flows
- search_sections
The complete tool surface Claude gets once the Mobbin MCP is connected: single screens, multi-step flows, or specific reusable sections.
Steal forany project where you want an agent to justify UI choices with citable examples instead of asserting them
08:35list
Profile-page best practices (per Mobbin research)
- One identity card, edited in place
- Separate who you are from how you sign in
- Make 2FA first-class and recommended
- Show every active session, mark the current one
- Give power users API tokens and SSO controls
- Notifications as a channel matrix
- Validate inline, confirm with a toast
- Danger zone last, with consequences spelled out
Eight patterns Claude extracted from Mobbin-sourced profile pages (Campsite, Workable, Reloom, Basecamp, Contract Book) before building anything.
Steal forany SaaS profile or settings page
10:31concept
Sidebar navigation + money-in/money-out hero
Replacing a flat multi-account dashboard with sidebar navigation plus inline accounts, and a large balance hero with pending amounts called out separately, attributed to Mercury, Wise, and Quicken.
Steal forany dashboard where a user switches between multiple accounts or entities
How they asked for the click.
VERBAL ASK
00:51product
“Get 20% off your Mobbin subscription using the first link in the description.”
Delivered as a direct affiliate ask tied to the exact product being demonstrated (marked #ad in the description), repeated once more mid-video during the setup walkthrough.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
AFFILIATECommission earned if you click.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
