Thanks to our friends at Mobbin for sponsoring this blog!
If you’ve been anywhere near the design internet in the last year, you know the cycle. Someone posts an AI-generated landing page. Half the replies: “obv slop, pass.”. Someone writes a LinkedIn essay about how taste can’t be automated. Everyone argues about whether AI is coming for their job. Repeat weekly.
The whole conversation assumes AI’s role in design is to generate the UI. Replace the designer, or fail trying.
While everyone’s been debating it, thousands of designers started using AI in their daily work. Almost none of them are using it to generate UI. They’re using it to look things up.
Just "show me how good apps do login screens."
Here are 5 practical ways to use AI as a context engine rather than a generation engine for workflows that favor creativity over automation, and the tool that makes all these possible at once.
1. Ask to See, Before You Ask to Build
Everyone’s first instinct with a new AI tool is to ask it to make something. “Design me a fintech app.” “Generate a dashboard.” Try the opposite, and ask to see what already exists first.
“Show me how banking apps handle onboarding.” “What do the best settings pages look like?” “How do fitness apps handle empty states?” Instead of asking the AI to create, ask it to show you what’s already working.
Designers have always done reference research before building. AI tools speed up the workflow.
2. Name the App, Not the Vibe
You already have a bar in your head. When someone says “make the onboarding feel polished,” you’re picturing a specific app. So, say it out loud to your AI agent.
“Duolingo onboarding.” “Stripe dashboard.” “Linear navigation.” Name the reference directly, and the AI pulls actual screens from that product. You’re studying how they approached the same problem you’re solving, the conventions they followed, and the tradeoffs they made, so you can make sharper calls on yours. Instead of guessing what you mean by “polished,” it’s looking at the same screens you are.
The more specific, the better. “Duolingo onboarding flow” gets you further than “good onboarding.” “Stripe pricing page” beats “clean pricing layout.” This works across mobile app design and web design references.
The apps designers reference most aren’t the biggest apps in the world. They’re Linear, Notion, Stripe, Duolingo, and Airbnb. The ones you’d name in a design review, not the ones topping the App Store.
3. Search Your Industry, Not Just the Pattern
“Onboarding” gets you generic onboarding screens. “Banking app onboarding” pulls up KYC verification, regulatory disclosures, and trust-building sequences that exist because a compliance team was in every design review.
Same with checkout. Search “checkout flow” and you see a standard cart-to-confirmation. Search “food delivery checkout” and now there are tip prompts, delivery window pickers, and driver tracking. These patterns only exist because someone had to solve getting dinner to your door while it’s still hot.
Or take empty states. A generic empty state is an illustration and a button. A fitness app empty state has to convince you to do your first workout, which is an entirely different problem.
The lesson here is that if you’re building in fintech, search for fintech references. If you’re building a health app, look to health apps for guidance. A fintech paywall needs to handle compliance copy. A fitness app’s empty state needs to motivate. A generic screenshot of someone else’s onboarding won’t tell you any of that.
Designers aren’t searching for “onboarding.” They’re searching for onboarding that solves the same problems as theirs.
4. Use Real Screens To Support Your Design
You’re in a design review. Your PM pushes back on a layout. You know your instinct is right but you don’t have the receipts yet. What now?
You could pull screens from five shipped apps that handle it the same way. Here’s Linear, here’s Stripe, and here’s Notion. Here’s the convention and the proof.
“I think this is the right approach” leads to one specific type of conversation. “Here’s how six apps handle this and exactly what they shipped” leads to a very different one. Especially if you’re earlier in your career, and the instinct is there but your portfolio isn’t yet.
5. Feed Your AI Real Screens For Better Output
The consensus seems to be that AI is not great at generation. But if you must use AI to build any part of your interface, you’ll have a higher chance at quality output by giving it real screens first.
The Mobbin team tested this. They asked an AI to build a settings page for a B2B app. Without reference, it came back with white cards on grey, generic blue accent, no hierarchy. The kind of page where every setting looks equally important and the delete-account button sits right next to your display name.
Then they fed it real settings screens from Notion, Linear, and Stripe. It picked up the separated danger zone, wrote descriptions that say what a setting does instead of what it is, and grouped things the way a human would.
Without solid references, AI guesses at these details. But given real screens as context, it picks up on patterns that exist for reasons and replicates them. This is the small stuff that separates “this smells AI-generated” from “oh, this is close to ship-ready.”
How To Do All of This With One Tool
MCP stands for Model Context Protocol. Fancy name, simple concept: it’s a way to connect your AI tools to external data sources they can’t normally reach. Think of it as giving your AI an entrance card to a library it didn’t have access to before.
Without it, when you ask an AI tool to build a paywall or an onboarding screen, it guesses. You can tell because everything comes out looking the same. Generic and purple, usually.
With MCP, your AI can pull in real reference material while it works. Mobbin built an MCP server that connects tools like Claude, Cursor, and ChatGPT to its library of over 600,000 web app design references. Connect it once, and your AI can search that library mid-conversation. Instead of guessing what a login screen should look like, it can see how Stripe, Duolingo, and Linear actually handle theirs.
The AI isn’t generating your design from this. It’s using it as context. The same way you’d pull up a competitor’s app on your phone before sketching something out, except you don’t have to leave your editor.
About the author
Rebekah Bek is the Marketing Lead at Mobbin, the internet’s largest library of design references. Designers and product teams use it to study how the best apps and sites handle everything from onboarding to checkout. Mobbin MCP works with Claude, Cursor, ChatGPT, and more.
👉 Set up Mobbin MCP — takes about two minutes. You’ll probably start with “login screen.” Everyone does.
Find more Community stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.
