08:49Kyle Skelly · Tutorial
Claude Code + Seedance 2.0 = Insane Websites
A 9-minute live build from Figma screenshot to animated, deployed landing page using Claude Code and AI-generated character videos.
April 15thThe 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.
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.
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 →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.
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.
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.
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.
Things they pointed at.
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.”
04:43
“The winning pattern: show people, not mascots. Reduce friction without going cold.”
07:31
“Currently, we're sitting one tier below premium because of layout proportions and pacing — not taste. The taste is good.”
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
In 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.
And honestly, this workflow is so incredibly powerful. You guys are gonna wanna see this.
Okay. 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.
We have, like booking.com, Duolingo, Disney Plus, Tesla.
And 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.
It'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.
They'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.
You 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?
What works? What doesn't? And that's where Movin is incredibly powerful because you could search by, like, categories.
Well, 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.
So 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.
So if we head to mobin.com/mcp now installing it is quite easy. So you can see here the setup.
So 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.
If 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.
You 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.
Here 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.
You 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.
Target a specific platform, tune the search, get inline previews. We've essentially because it now has access to Mobin's selection of over 600,000 of the world's best UIs.
So 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.
Just 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.
So 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.
So 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?
We'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.
And 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.
And 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.
So 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.
Now 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.
You've got one button. It's very clear what you should do. Peloton is saying it's the best overall.
We've got a dark cinematic photo, tight stack of three social sign ins, logo overlay, brand, product in one frame, near zero friction.
I 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.
The 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.
Restraint is the lesson. This is showing a very minimal approach. Depending what we're building, this could be the best choice.
And 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.
And 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.
But 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.
But 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.
We'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.
So 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.
Give 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.
Alright. So here's when Cloud Co. Tells me that my design sucks.
So it's pulled together some reference images from Mobin, and here's its detailed critique. The color system is cohesive and on trend.
The 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.
The taste is good. Well, that's that's fine. Then we've got detailed feedback about each section.
Hero 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.
If anything, I think this is maybe a little too big. Trailer video seems a little disconnected. It's giving us this reference here.
Obviously, 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.
But, 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.
And 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.
If 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.
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
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
FROM THE DESCRIPTION
AFFILIATECommission earned if you click.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
