Skip to content

I Gave Claude 600,000 UI Screens… Then This Happened

Watch how Claude AI uses Mobbin MCP's 600,000+ UI screens to design a fintech onboarding flow grounded in real finance apps.

Ask about this video. Answers come from its transcript only — with the timestamp, so you can check them.

Generated from the transcript and can be wrong — check the timestamp.

Key Takeaways

  • Access to large, real-world UI libraries like Mobbin MCP significantly improves AI-generated design relevance.
  • Fintech onboarding flows require special considerations like identity verification and compliance, which generic flows miss.
  • Visual reports and pattern comparisons help identify best practices and industry standards.
  • Mobbin MCP enables deep research into competitor flows and UI elements for more informed design decisions.
  • Integrating AI with curated design data can streamline and enhance product design workflows.

What the video covers

  • Claude AI was tasked to draft onboarding flows for a fintech app, producing one generic and one grounded in real finance app patterns.
  • Mobbin MCP provides access to over 600,000 real app screens and user flows, especially in fintech and banking categories.
  • Connecting Claude to Mobbin MCP allows AI to research top app designs, compliance, identity checks, and industry-specific flows.
  • Claude studies welcome screens and account opening flows from leading fintech apps to understand industry context.
  • The AI distills best practices, common patterns, trade-offs, and blind spots from competitors’ flows and UI designs.
  • Claude generates a visual report highlighting top examples, patterns, and differences in onboarding flows.
  • Users can click references in the report to explore detailed screens on Mobbin’s platform.
  • Mobbin MCP is included with any paid Mobbin plan and offers setup instructions at mobbin.com/mcp.
  • The video also references Mobbin’s research on paywalls and onboarding flows based on thousands of analyzed examples.
  • Overall, the integration empowers AI tools to create more considered, compliant, and user-tailored fintech onboarding experiences.

Answers

Questions about this video

What is Mobbin MCP and how does it help AI design?

Mobbin MCP is a curated library of over 600,000 real app UI screens and user flows, especially in fintech and banking. Connecting AI tools like Claude to Mobbin MCP allows them to research real-world design patterns, compliance requirements, and best practices to generate more relevant and industry-specific onboarding flows.

How does Claude AI improve fintech onboarding flows using Mobbin MCP?

Claude AI uses Mobbin MCP to study top fintech apps’ onboarding and account opening flows, understanding identity checks, compliance, and user experience nuances. This results in more considered, tailored onboarding flows that reflect real finance app standards rather than generic designs.

Can users explore detailed UI screens referenced by Claude in the report?

Yes, the visual report generated by Claude includes clickable references that bring users directly to Mobbin’s platform, where they can explore detailed screens, user flows, and animations from real apps for deeper research and inspiration.

Full Transcript — Download SRT & Markdown

00:00
Speaker A
I asked Claude to draft me an onboarding flow for a fintech app, and it gave me these two flows. This one looks fine, but it's generic. As for this one, it's grounded in real finance apps. It accounts for things like identity checks and compliance requirements. This one feels much more considered. Here's why. I gave Claude access to Mobbin MCP.
00:13
Speaker A
checks, compliance requirements. This one feels much more considered. Here's why. I gave Claude access to Mobbin MCP. [music] Once you connect your AI tool to Mobbin MCP, you're essentially handing your AI a library card to over 600,000 real app
00:32
Speaker A
Once you connect your AI tool to Mobbin MCP, you're essentially handing your AI a library card to over 600,000 real app
00:50
Speaker A
their onboarding and account opening flows across fintech or banking apps. [music] Find the most relevant screens and user flows, compare patterns across products, and identify what the best apps do differently. Lastly, I'll ask it to create a visual report showing the
01:04
Speaker A
and website screens, flows, animations from products that have already been shipped. So, now I have Claude on a browser connected to Mobbin MCP. Let's say we're designing the onboarding flow for a fintech app. Using Mobbin MCP, research how top apps design
01:18
Speaker A
It studied some welcome screens from fintech apps. It understands the industry [music] context, so it knows a banking onboarding flow is not the same as a generic one.
01:28
Speaker A
their onboarding and account opening flows across fintech or banking apps.
01:41
Speaker A
you can look for similar screens or study the [music] end-to-end user flow. It also distills what the best apps do differently from the copy and the user flow, as well.
01:52
Speaker A
Find the most relevant screens and user flows, compare patterns across products, and identify what the best apps do differently. Lastly, I'll ask it to create a visual report showing the
01:58
Speaker A
I'll open a fresh Claude session on the Claude desktop app with paper MCP connected.
02:04
Speaker A
top examples, common patterns,
02:14
Speaker A
Using paper MCP in this file, propose an onboarding flow for Curve and build it.
02:20
Speaker A
and the best practices that top companies converge on. It's actually fetching account opening flows in the finance category. It studied some welcome screens from fintech apps. It understands the industry
02:37
Speaker A
decided to put it inside the homepage right after onboarding because it has did its research and reference an app like One where the setup bonus is actually on the homepage as well.
02:49
Speaker A
context, so it knows a banking onboarding flow is not the same as a generic one.
03:03
Speaker A
for iOS screens, [music] this is what it came up with. As you can see, some of the UI are broken.
03:09
Speaker A
Now, the report is done. It pulls out all the common patterns, trade-offs, blind spots that we
03:20
Speaker A
Compare competitors head-to-head like how DoorDash and Uber Eats can do checkout tipping order summary.
03:31
Speaker A
tend to miss. If you see a reference you want to dig deeper on, click on it, it will bring you to Mobbin. From there,
03:38
Speaker A
Suggest copy tailored to your users citing the sources of inspirations that it got it from.
03:45
Speaker A
you can look for similar screens or study the
04:01
Speaker A
Go to mobbin.com/mcp for the setup instructions. Mobbin MCP is included with any paid Mobbin plan.
04:08
Speaker A
end-to-end user flow. It also distills what the best apps do differently from the copy and the user flow, as well.
04:23
Speaker A
our latest breakdown on paywalls. We studied 3,000 paywalls to find out what actually converts people. We've also studied over 1,000 onboarding flows to find out what works. I'll see you there.
Topics:Claude AIMobbin MCPfintech onboardingUI designuser flowscomplianceidentity checksapp design patternsvisual reportproduct design

Get More with the SozAI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries, speaker detection, and unlimited transcriptions.

Or transcribe another YouTube video here →