How To Make Your Apps Beautiful Without a Designer (Claude Code & Codex + Mobbin MCP)

So if your app's UI looks generic and AI-generated, the fix isn't just sending a better prompt. Instead, you need to give it high-quality examples to work from. So in this video, I'll show you how to use a tool called Mobbin and their new MCP server, which gives your AI agents real app design patterns from successful apps that have already figured it out. And that means you can start building apps that look and feel more polished, especially if you're doing everything solo without a designer. So if you haven't heard of Mobbin before, it's the world's largest UI UX reference library with a massive catalog of app screens, UI elements, and user flows, all from the most popular apps on the market. You can use it just to browse for design inspiration for your own apps, or you can connect the new MCP server to your AI agents like Claude Code or CodeX to let it search through the entire library to explore best practices and analyze the latest design patterns. And this is all intended to help you make better design decisions when you're building your own apps. And if you don't know about MCP, it stands for Model Context Protocol. You can just think of it as a way for AI agents to connect to external tools and data sources to help them with their work. So now, I'm going to give you a quick guide on how to install Mobbin's MCP server to your AI agents. Specifically, I'm going to install it on Claude Code and CodeX. So the first thing to know is that in order to use Mobbin's MCP server, it does require a paid plan. You can try out Mobbin for free on the web app without a subscription, but it just means you'll need to manually search and copy and paste examples into your prompt and give explanations to your AI rather than having the agent do everything for you. And personally, I think the amount of resources and data you get access to with a subscription is actually well worth the price if you're serious about building apps. So as you can see here, Mobbin already provides instructions on how to install their MCP server on the most popular AI tools. So first, I'm going to show you how to install it on Claude Code. Now, you can either run the commands here in your terminal, or I'll show you now how to install it on the desktop app. So first, I'm going to copy the MCP URL, then I'm going to open Claude desktop app, click customize, go to connectors, click on the plus button, add a custom connector, give it a name, we'll call it Mobbin, and then paste the MCP URL. Click add, and just like that, the Mobbin MCP server has been added to Cloud Code. And here you can see all of the tools it has access to, which I'll show you how it works later on. And now, I'll also show you how to add it for Codex, because that's what I'm using for my main coding agent. So, for Codex, just click on settings, click on MCP servers, click on add server, streamable HTTP, paste the MCP URL, and give the MCP server a name. Let's save, and there we go, it's added just like that. And now Codex has access to the MCP server as well. Here are three scenarios where I think the Mobbin MCP is especially useful for solo app builders. The first is when you're building out your app UI completely from scratch. Before your agent implements a new screen or component, ask it to search Mobbin's library for similar flows from successful apps. Let it analyze the patterns first, then ask it to apply the parts that make sense for your own product. The second use case could be when you're stuck on a small UI UX decision, and you're not quite sure what the best approach is given from a design perspective. Maybe you're not sure how to structure an onboarding flow that drives sign-ups. Or maybe you feel like your paywall or pricing page feels too aggressive, and you would like to optimize it to boost conversion. Instead of debating it in your head for a few hours, just ask your agent to find real examples and then summarize the trade-offs. And third is when your UI feels dated, but you're not exactly sure why or what to change. Because your app currently works. The layout is fine, and nothing is obviously broken, but it just doesn't have that polished feeling most of the modern apps on the market have. In that case, you can use Mobbin to pull in the most up-to-date design patterns that are being adopted from all of the top apps. And then you can have the agent critique its findings against your current screens or components, and suggest specific changes you can make. So, now that we've set up the MCP

server, I want to show you some of the ways I've used it to level up my design process when I'm building my apps. So, one of the first use cases I've had for the Mobbin MCP server is to research and analyze the UI and design patterns of my competitors. So, in this example, I gave it a prompt to use the Mobbin MCP server to compare my app, Create Skills, against some of my competitors, like Pocket Matter, Readwise, Raindrop, and then I asked it to only focus on the feed component of my app and return patterns that my app should borrow, avoid, and then give five recommended improvements I could make. And as you can see, it first takes a look at the screenshots of my app to have a context of what the current UI looks like. Then, it makes multiple tool calls to the Mobbin MCP and actually looks at the screens of my competitors and see how they are handling similar components. It analyzes my competitors' app layout and says what they're doing well, and then towards the end, it gives a summary of the patterns found in my own app as well as my competitors' apps and gives me useful suggestions on what to borrow from my competitors. And something that's just as useful is what kind of UI patterns to avoid that my competitors are currently doing. And finally, it gives me five recommended improvements make right now to improve my feed components for my apps. And all of these suggestions were based off real research of my current competitors. So, another use case I've had for the Mobbin MCP server is to discover design patterns and trends of the most current popular apps. And one example is the onboarding flow, which is an important thing to nail down, especially for mobile apps, as it directly affects user sign-ups and conversions. So, it'll be very useful to see how the biggest apps on the market are currently implementing it and how I can apply their techniques to my own apps. So, in this example, I used the MCP server to study onboarding patterns of the most popular iOS productivity apps. And then, I asked Codex to apply it to Create Skills and return suggestions on how I can improve my own onboarding based on the research found within Mobbin. And as you can see, it grabbed the onboarding screens from ChatGPT and Claude and many other of the most popular productivity apps. And I think the suggestions it gave me to implement in my own app is actually quite useful. It tells me exactly what type of components to add. It gives me suggestions on how to structure my onboarding flow that makes the most sense, and it tells me what to avoid based on all of the research it conducted from analyzing all of the top apps. And lastly, I use it a lot to critique my existing UI and get feedback on how I can make improvements. And as you can see, it always gathers real references from Mobbin's library, so it can ground its suggestions in real data rather than giving you something vague from the model's training data. I've already used this feature a ton to improve UI on my web apps and mobile apps. And I think this will be super useful for beginners building their first apps that don't come from a design background. As the responses always give you clear and actionable steps that you can feed to your agents whenever you need to make some UI changes. And everyone these days says taste is the most important thing when it comes to building apps, but no one really explains how to actually develop an intuition for what makes a design good or bad. And the more I've used this MCP to iterate and improve my own apps, the more I feel like I'm finally developing my taste of what good software is supposed to be. Because once you use it enough and see the same patterns emerging again and again, it's for good reason because these apps all have dedicated teams of designers and researchers working on them to make it look and feel as engaging as possible. And the fact I can access all of this data now within my coding agents without having to context switch has been a really nice addition to my coding workflow because previously I would mostly rely on custom agent skills and better prompting to get the UI to come out decent. And that still helps, but the agent was still only working from instructions, not real references. But now I can add this extra research step before making any UI changes. I can ask the agent to look at real examples, extract the patterns, and then make design decisions based on real data, giving it better context before it writes any code. So if you haven't already, go check out Mobbin to get high-quality design references and inspiration for your next app. It's something I use every day when I'm building, and it has saved me hours of making difficult design choices when I'm implementing new features. It's free to sign up and start browsing, so give it a try and let me know what you think.