Claude + Mobbin is a Design CHEAT CODE — Transcript

Claude can spin up a design in seconds, but what it can't do is the part that actually makes a design good: the research. Seeing how the top apps already solved the exact screen you're designing. That's what Mobbin's new MCP fixes. It connects Claude to one of the largest libraries of real shipped apps and websites. I'll show you the two most powerful workflows I've personally been using the Mobbin MCP for, but first, let me show you how to set it up. Quick

fixes. It connects Claude to one of the largest libraries of real shipped apps and websites. I'll show you the two most powerful workflows I've personally been using the Mobbin MCP for, but first let me show you how to set it up. Quick

note, the MCP comes with any paid Mobbin plan. So, if you're on the free tier right now, you'll just need to upgrade to one of these plans before you can continue. After that, you're going to meet me back inside Claude. To do that,

what we're going to do is click customize here in the left panel, and then we're going to choose connectors, and from this connectors menu, we're going to choose this plus sign and hit add custom connector. From here, we're

what we're going to do is click Customize here in the left panel, and then we're going to choose Connectors, and from this Connectors menu, we're going to choose this plus sign and hit Add Custom Connector. From here, we're

ahead and choose connect to get the Mobbin MCP set up. Great, so we'll go ahead and link our account and we're good to go. Okay, so let's say I want to build a custom to-do app. In my process,

going to go ahead and give it a name. I'm going to say Mobbin, and then we're going to paste this URL. Again, I'll leave a link to this down in the description below. From here, we want to select Add, and now we're going

tedious. So, instead, I just ask Claude to use the Mobbin MCP to pull references for me. Let's start with seeing how other productivity apps approach the home tab. To do that, I'm going to use this prompt where I'm telling it that I

to go ahead and choose Connect to get the Mobbin MCP set up. Great, so we'll go ahead and link our account and we're good to go. Okay, so let's say I want to build a custom to-do app. In my process,

pulled the references directly from Mobbin back into the Claude chat here. Right here, we're seeing the Todoist app screens, and if we scroll down, I'm seeing Amie, and then I'm looking at Teemo and ClickUp. And a nice thing

before I design a single screen, I like to do some research studying other productivity apps and similar apps to see what's already working or not working. Looking at things like their onboarding flows, home screens, and task views. It works, but again, it's a bit

to do as their approach is on the home tab, Amy, Timo, and ClickUp. We can see that ClickUp uses more of like a command center style home tab, and we can see that very clearly here in this design.

tedious. So, instead, I just ask Claude to use the Mobbin MCP to pull references for me. Let's start with seeing how other productivity apps approach the home tab. To do that, I'm going to use this prompt where I'm telling it that I

is just one piece, but for onboarding, I don't want to copy other to-do apps.

want to create a productivity app, and then to look at these specific apps, and to break down what each one services, as well as what the different design philosophies are. And this is what it came back with. As you can see, it

look at apps outside of the productivity category looking for patterns at how they're getting users to value before they're asking them to create an account. So, I'll go ahead and run this prompt. Same as before, it pulls all the

pulled the references directly from Mobbin back into the Claude chat here. Right here, we're seeing the Todoist app screens, and if we scroll down, I'm seeing Amie, and then I'm looking at Teemo and ClickUp. And a nice thing

continue to scroll, and it's going to show me the other flows that it pulled from. So, this first set was from finance apps. Now, we're going to look at another set from health and fitness type apps. Is that again, at the bottom,

about these two is that as I'm looking at the different screens here directly in the chat, I can click on it and open it directly inside Mobbin. Here, it provides a full breakdown of exactly what it found. It tells us exactly what

keep going. I mean, it tells us more details about where the account gate sits, and gives us some insights from each individual app here, and it talks about the value. And then it wraps with giving us its own recommendation on what

to do as their approach is on the home tab, Amy, Timo, and ClickUp. We can see that ClickUp uses more of like a command center style home tab, and we can see that very clearly here in this design.

ask a couple questions to understand more about them and their goals. Maybe generate a starter list and then let them check off their first task or complete their first project before I ask them to make an account. That first

And it's pretty cool because this was all pulled directly from the MCP. As you saw, the same screen had four completely different design approaches. Now, I've got real directions to go explore before I design anything. See, the home screen

The real test is handing it something I actually designed. So, I'm giving Claude a design concept I've been working on for my template store and telling it to roast it against the best marketing pages on Mobbin. Okay, so let me add my

is just one piece, but for onboarding, I don't want to copy other to-do apps.

their design is better than mine. And then I want it to give me the top five things I can change to improve my design. Now, my ego's about to take a hit, but let's see what it comes back

Some of the best design inspiration can often be found outside of whatever category you're designing for. So, that's where I'll look next. To do that, I'm going to go back inside the Claude chat and use this prompt telling it to

Here's the detailed critique for each section. Let's see what it says. Your hero does a few things right. The headline is large, the value prop is clear, and the floating device mockups have real polish. But two problems hold

look at apps outside of the productivity category looking for patterns at how they're getting users to value before they're asking them to create an account. So, I'll go ahead and run this prompt. Same as before, it pulls all the

And as you can see, they've linked to some references here on Mobbin and I can click these and open it up to see exactly what it's referring to. And as we see on this reference from ClickUp, they have different CTAs here in the

references directly into the Claude chat, and I can scroll through them horizontally to look at all the screens from the flow. As we can see from this Monarch example, there are 18 onboarding screens that we can look at. I can

product is for. It says that the product showcase section is pretty strong and is on strategy, but it competes with itself because it's showcasing the same three templates and and makes the store look small. That's fair feedback, I guess. It

continue to scroll, and it's going to show me the other flows that it pulled from. So, this first set was from finance apps. Now, we're going to look at another set from health and fitness type apps. Is that again, at the bottom,

agree with it because those cards that it's referring to are intentionally meant to be abstract. Another one here, social proof, and it's highlighting this as the biggest opportunity for the landing page. Again, this feedback makes sense. I don't agree with all of it, but

it gives us a full breakdown of exactly what it found, the patterns that the best apps are using. So, it says number one, it asks about the user's goals before anything else, and then you reflect it back to them. Insights just

change. You still gather references, you still benchmark against the best, and you ultimately make the final design decisions. What changed is the slow, tedious part. Mobbin's MCP does the digging and the benchmarking in seconds.

keep going. I mean, it tells us more details about where the account gate sits, and gives us some insights from each individual app here, and it talks about the value. And then it wraps with giving us its own recommendation on what

actually change, that's still your design judgment. If you want to try these workflows yourself, click the link in the description below to set up the Mobbin MCP. Again, [music] it comes with any paid plan, so you can point Claude

we should borrow from each of these apps and the insights that it found. So, here's what I'd borrow for my productivity app if it were a real project. Number one, I wouldn't gate the experience behind a sign-up wall. I'd