Big Idea

The argument in one line.

Connecting Claude Code to a curated library of 600,000 real-world UI screens via MCP transforms it from a code generator into a research-backed design strategist that can build mood boards, identify winning patterns, and critique your own work in a single conversation.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

A designer or developer who currently spends 30+ minutes manually collecting UI screenshots before starting a new screen or flow.
Someone already using Claude Code, Cursor, or a similar AI coding tool who wants to extend it with a design research layer.
A freelancer or indie builder who needs to present a client with a reference-grounded concept quickly.
Anyone preparing a landing page or app welcome screen who wants an outside critique tied to specific real-world benchmarks.

SKIP IF…

You work exclusively in Figma and have no AI coding tools in your current workflow.
You already have a Mobbin paid subscription and a settled research process you are happy with.
You are looking for a no-code design tutorial — this workflow requires Claude Code and basic prompt literacy.

TL;DR

The full version, fast.

Mobbin is a curated library of 600,000 real UI screens from top-tier apps; its MCP server lets Claude Code query that library in plain language. The workflow runs in two modes: generation (Claude pulls reference screens and assembles an annotated Figma file automatically) and critique (Claude cross-references your own design against Mobbin comps and returns a section-by-section breakdown with ranked fixes). Both modes eliminate hours of manual screenshot hunting, and every design decision comes with a Mobbin reference attached, making the recommendations independently verifiable rather than opinion-driven.

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 – 00:15

01 · Cold open + promise

Hook line and workflow teaser: Mobbin MCP + Claude Code as designer/strategist.

00:16 – 01:48

02 · What is Mobbin

Manual tour of Mobbin's library: apps, flows, categories; Booking.com, Duolingo, Tesla, Tonal examples; value of flow-level research.

01:49 – 02:50

03 · Installing the MCP

Requires Mobbin paid plan; add custom connector in Claude Code settings; URL: api.mobbin.com/mcp; OAuth authentication.

02:51 – 04:09

04 · Mood board generation

Prompt for 10 fitness sign-up screens from Mobbin into a Figma file. Claude queries library and populates Figma automatically. Figma MCP also connected.

04:10 – 05:38

05 · Analysis and cross-category references

Claude ranks screens and explains reasoning. Strava, Gymshark, Peloton flagged as best. Non-fitness references (Tide, Klima) added for restraint and urgency patterns.

05:39 – 06:31

06 · Concept generation

Claude generates original STRIDE sign-up screen concept on iPhone 16 frame using gathered references. Result is a solid starting point requiring brand specifics.

06:32 – 08:42

07 · Landing page critique

Kyle uploads his Future Designer course landing page. Claude cross-references Mobbin landing pages section-by-section; pulls MasterClass, Contra, Runway, Deel as references. Top 3 fixes ranked.

08:42 – 09:09

08 · Wrap and CTA

Recommendation to try Mobbin link in description; plug for Future Designer course.

Atomic Insights

Lines worth screenshotting.

Wiring a real UI library into Claude's context turns it from a code generator into a research-backed design strategist.
The bottleneck in early-stage design is reference gathering — the Mobbin MCP removes it entirely by making 600,000 screens queryable in plain language.
Figma MCP and Mobbin MCP together let Claude pull references and place them directly into a Figma file without any copy-paste from the designer.
Winning sign-up screens share three recurring traits: real people over illustrations, a single dominant CTA, and minimal-friction social auth stacking.
Claude's critique is most useful when it names the specific problem before suggesting a fix — 'one tier below premium because of layout proportions, not taste' is far more actionable than a generic improvement suggestion.
Cross-category reference pulls routinely surface design moves the primary category has already converged away from, and that surprise is often the most valuable output.
An AI-generated design concept has no value without the human judgment step — agreeing or disagreeing with each rationale node is what converts AI output into a real design decision.
Mobbin's flow data is more portable than its screen data; onboarding flows between app categories are structurally similar and can be studied across verticals.
Claude identified that Strava wins on community signal (real people), Gymshark wins on brand voice (single CTA, confident caps), and Peloton wins on friction reduction (three social sign-ins, near-zero cognitive load).
The most effective prompts pair a category constraint with an explicit output format, giving the agent a concrete deliverable rather than an open-ended research task.

Takeaway

What the Mobbin MCP actually changes about research

THE WORKFLOW SHIFT

The barrier to good design research has always been time — Mobbin's MCP collapses it by letting you prompt for references instead of hunting for them.

Querying 600,000 real screens in plain language is faster than manual screenshot collection and produces a traceable annotated output rather than a folder of unlabelled images.
The most effective prompts pair a category constraint with an explicit output format — 'generate a Figma file with 10 sign-up screens from fitness apps' — so the agent has a concrete deliverable, not an open-ended research task.
Cross-category reference pulls routinely surface design moves the primary category has converged away from; non-fitness apps in a fitness mood board is where the most unexpected inspiration shows up.
Claude's critique is reference-grounded rather than opinion-driven: every problem flag comes with a Mobbin comp that shows the alternative, making the feedback independently verifiable.
Winning sign-up screens across the Mobbin library share three recurring traits — real people over illustrations, a single dominant CTA, minimal-friction social auth stacking — and these work as a scoring rubric for any new screen.
The workflow's value cap is human judgment: the agent proposes, the designer ratifies. Shipping the concept directly without that ratification step produces generic output without brand specificity.

Glossary

Terms worth knowing.

MCP (Model Context Protocol): An open protocol that lets AI coding tools like Claude Code connect to external data sources and services via a standardised server interface, giving the model access to real-time or curated data it was not trained on.
Mobbin: A subscription UI reference library containing 600,000+ real screens from top iOS, Android, and web apps, organised by flow type, UI element, and category.
Mood board: A collection of reference screens or images assembled early in a design process to establish visual direction, pattern choices, and competitive context before original work begins.
Flow (in UI design): A sequence of screens a user moves through to complete a task such as onboarding or checkout. Flows tend to follow similar structural patterns across apps in the same category.
Social auth stacking: Placing multiple one-tap sign-in options (Continue with Apple, Continue with Google, Continue with Email) stacked vertically on a sign-up screen to reduce registration friction.

Resources

Things they pointed at.

00:06toolMobbin ↗

01:49linkapi.mobbin.com/mcp ↗

06:32productFuture Designer course ↗

00:00channelKyle Skelly on X ↗

00:00linkkyleskelly.com ↗

Quotables

Lines you could clip.

02:54

“We've essentially given Claude Code superpowers because it now has access to Mobbin's selection of over 600,000 of the world's best UIs.”

Punchy shareable claim; stands alone without context→ TikTok hook↗ Tweet quote

04:43

“The winning pattern: show people, not mascots. Reduce friction without going cold.”

Tight memorable design principle delivered in two sentences→ IG reel cold open↗ Tweet quote

07:31

“Currently, we're sitting one tier below premium because of layout proportions and pacing — not taste. The taste is good.”

Specific actionable critique structure that validates the creator while identifying the exact fix→ newsletter pull-quote↗ 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.

metaphoranalogystory

00:00In today's video, I'm gonna show you guys how to turn Claude code into a master designer and a strategist. To do this, we are gonna be connecting mobbin using an MCP.

00:08And honestly, this workflow is so incredibly powerful. You guys are gonna wanna see this.

00:16Okay. So if you guys aren't familiar with mobbing, mobbing is one of, if not the biggest collection of UIs from across the Internet, across all the biggest companies out there. So you can see here all the different apps.

00:27We have, like booking.com, Duolingo, Disney Plus, Tesla.

00:31And if we click into one of these, you can see that it's not got just one, but it's got all sorts of different screens. It's got everything from UI elements all the way down to certain flows within the app.

00:42It's very, very comprehensive, and I think it's one of the best ways to see what other companies are doing out there, see what works. So we go up here. They've got everything from, like, iOS apps.

00:51They've also got web apps, and then they've also just got websites as well, like landing pages. But all the stuff on here is kind of the top of the top, and these are generally just high performing websites, so a great source of inspiration. So let's just say a client comes to you and they need a new app design.

01:05You write down everything they need for their MVP, and you get an idea of how you're gonna bring this all together. Generally, for me, I'll jump into similar sort of apps, things that are doing similar sort of things. How do they do it?

01:16What works? What doesn't? And that's where Movin is incredibly powerful because you could search by, like, categories.

01:22Well, let's say it's a fitness app, or you could look at something like tonal, and you can get a lot of inspiration. But further than that, like what I said, the flows are where this can be really powerful. Because your app itself might differ in design, but the flows from one fitness app to the other probably be kinda similar.

01:37So here we can see the entire onboarding flow for this app. You can go into each of these and just copy it, and then within Figma, we can just start pasting these in to build out a mood board. Now there's a much better way of doing this using Mobin's MCP, and I'll show you guys how to connect it.

01:51So if we head to mobin.com/mcp now installing it is quite easy. So you can see here the setup.

01:57So first, you need a paid plan to mob in, and then you can pick your tool. So we're gonna use Claude code in this video, but you can also connect it to cursor, codex v zero, or other. So to install this, we will open Claude here, and we'll go down here to customize, and then we'll go to connectors.

02:13If we click on this plus icon, we'll do add custom connector. And then here, we wanna type mobbin. And then for the server URL, we wanna use this one here, api.mobbin.com/mcp, and then we'll add this.

02:27You can see here it's not connected yet, so we'll click connect, and then we will just authenticate this just like this. So now we got it all connected. We could say, connect the mob in MCP and tell me all the things I can use it for.

02:38Here is what the mob in MCP lets you do. So it can help you find UI patterns. So you could tell it, for example, find me some fitness onboarding flows.

02:45You can compare designs across different apps, gather references for a feature we're designing. This is like what we already did here, but we can get this to do this automatically for us and even bring it into a Figma file.

02:56Target a specific platform, tune the search, get inline previews. We've essentially given Cloud Code superpowers because it now has access to Mobin's selection of over 600,000 of the world's best UIs.

03:08So we're gonna get at this prompt here. I'm working on a fitness app generate me a Figma file with 10 different examples of different apps from Mobin, and their initial sign up screen make me a mood board.

03:18Just so you know as well, I also have Figma connected via the MCP, so this allows it to make a Figma file and connect it with Figma too. If you didn't have Figma connected, well, you could see that it'll just pull it into the chat anyway, we're gonna get this to bring it over for us directly into Figma. And this is what it's given us.

03:35So these are all the different screens that we've gotten from Mobin. We allowed Claude code to be able to search Mobin's entire library to create this file for us automatically. So as a source of inspiration, automating this whole entire process is incredibly useful.

03:49So it meant that we could save a lot of time instead of having to go into each of these and then copying and pasting these over into Figma ourselves. So let's say this to Cloud Code. Can you tell me what seems to work best between all of these and why?

04:02We're gonna get Claude Code to think like a designer here. Are there any other non fitness apps on Moabin that could be additional source of inspiration for this screen? Maybe we need some inspiration from one or two non fitness apps that have a similar sign up screen.

04:14And let's grab some of the welcome screen for non fitness apps too. We're gonna say, add this into Figma with your feedback of what works and what doesn't. Add your analysis and organize accordingly.

04:25And then we now have this generated as if by magic over in Figma. It's given us detailed feedback and its analysis of all these different screens for mobbing.

04:33So you can see down here Strava and Gymshark and Peloton seem to have best sort of flow. And the feedback for Strava, for example, is like best community signal, real people, not models, instantly tells you the app's social DNA, orange CTA, stays high contrast.

04:49Now I agree with all of that. Gymshark, strong brand voice, confident caps in the headline, cut out athlete, single back, call to action, no soft path for hesitant users.

04:59You've got one button. It's very clear what you should do. Peloton is saying it's the best overall.

05:04We've got a dark cinematic photo, tight stack of three social sign ins, logo overlay, brand, product in one frame, near zero friction.

05:13I wouldn't necessarily say it's the best overall. I think it's actually a little bit busy, but it is good. Now further down here, we have more of an analysis.

05:20The winning pattern, show people, not mascots, reduce friction without going cold. And then here we have other non fitness references that are worth borrowing things from.

05:30Restraint is the lesson. This is showing a very minimal approach. Depending what we're building, this could be the best choice.

05:35And then we have this one here, which is showing just a kind of sense of urgency. Now we're gonna say generate me our own concept for our own one now using these examples and other common practices for mobbin. Also use our analysis of what works best, use iPhone 16 frame.

05:52And this here is what has built us automatically based on all the feedback of what we've gathered here from mobbin. Now obviously we haven't given it any specific info about our fitness app, what makes it different, what it's supposed to do, who the demographic is, but just as a source of inspiration and getting a rough sort of mock up, it's already done all of these things for us and this is a great great starting point because we know that the flow of this is all tried and tested with the biggest apps in the world.

06:18But you can see that if we added, like, a full screen image to the back of this, this would already start looking like some of a polished welcome screen. So that's one great way of connecting Claude Code and Mobin to be your design partner, your strategist, to do a lot of the research for you, collate that information, bring it into the one place, and then you, as the designer, is to review it all and decide if you agree with some of it or disagree with some of it.

06:43But at the very least, you've got a lot of stuff in front of you, and it's a really useful starting point. Another way you could use Mobin's MCP with Claude is to critique your designs. Now we're gonna do this with a landing page of my upcoming course, future designer.

06:56We're gonna send this to Claude Code, and we're gonna get it to review it. It's gonna compare it with other landing pages on Mobin and give us its feedback.

07:04So it's gonna roast me essentially, but let's see what it comes back with. So this is the design of the landing page here in Figma. We are just gonna export this, and then I'll pull this over into Cloud Code.

07:16Give me a detailed feedback on my course landing page. Use comparisons from Mobin's library of landing pages, find me better examples for sections, and overall critique my design in line with the premium designs that are on Mobin.

07:29Alright. So here's when Cloud Co. Tells me that my design sucks.

07:32So it's pulled together some reference images from Mobin, and here's its detailed critique. The color system is cohesive and on trend.

07:40The hero is undersized for what it's trying to do. Currently, we're sitting one tier below premium because the layout proportions and pacing. Not taste.

07:48The taste is good. Well, that's that's fine. Then we've got detailed feedback about each section.

07:54Hero is talking mainly about the sizing and the voicing, and you can see it's given us some references here here on mob, and you can see that their headline, super bold, and then this is super focused. We've also got this one where it's talking about maybe adding some color to our headline, and then this one, which is mainly talking about just the actual size of the headline, which this is huge here.

08:15If anything, I think this is maybe a little too big. Trailer video seems a little disconnected. It's giving us this reference here.

08:21Obviously, you can see the trailer is a big part of this hero here. It's not really what I wanted to do for mine. Other example here for this well, this is probably, like, a very high converting landing page, but, uh, I I think it's a little bit boring.

08:34But, honestly, all the feedback totally makes sense. And, honestly, being able to just quickly click into these references references and see what it's talking about, so useful.

08:43And it even asks me, want me to mock up a revised hero in Figma as a side by side comparison, which I'm not gonna do right now, but it's insane that that is even an option. If you guys are interested in trying out this workflow for yourself, I highly recommend it. There's a link in the description so you could sign up to mobbin.

09:00If you wanna become a better AI assisted designer, then sign up to my upcoming course, and I will catch you guys soon with another video. Bye.

The Hook

The bait, then the rug-pull.

A nine-minute walkthrough that re-wires Claude Code as a design research partner by connecting it to 600,000 real-world UI screens, then demonstrates the stack by building a Figma mood board and roasting a live landing page in the same session.

Frameworks

Named ideas worth stealing.

04:43list

Winning sign-up screen pattern

Show people not mascots
Reduce friction without going cold
Single dominant CTA

Three heuristics Claude extracted from analysing 10+ fitness sign-up screens across Mobbin.

Steal forAny mobile app welcome or sign-up screen

06:32model

Two-mode design workflow: Generate vs Critique

Generate mode: pull references and build Figma file before design starts
Critique mode: upload your design and cross-reference Mobbin comps section-by-section after a draft exists

The Mobbin MCP can be used in two distinct modes depending on where you are in the design process.

Steal forAny new feature screen or marketing page design process

CTA Breakdown

How they asked for the click.

VERBAL ASK

08:42link

“There's a link in the description so you could sign up to Mobbin. If you wanna become a better AI assisted designer, then sign up to my upcoming course.”

Two sequential CTAs at the end: affiliate link to Mobbin, then own course. Friendly tone, no hard sell. Mobbin CTA is more prominent (affiliate arrangement implied).

MENTIONED ON CAMERA

00:06toolMobbin ↗

01:49linkapi.mobbin.com/mcp ↗

06:32productFuture Designer course ↗

00:00channelKyle Skelly on X ↗

00:00linkkyleskelly.com ↗

FROM THE DESCRIPTION

AFFILIATECommission earned if you click.