AI writes the code. AI spins up the design. That part's gotten pretty easy. But here's the real problem: if you can't tell whether what AI produced is actually good, none of it matters.
What Is It?
Tools like Cursor, Claude Code, and Bolt have made it possible for almost anyone to ship an app. "Vibe coding" is a real thing now. But here's the thing — even if AI handles the code, judging the quality of what gets built is still on you.
Design reference sites are curated libraries of real UI/UX from apps and web services that are actually live and in use. Agency designers treat them as essential starting points before any project kicks off. Even if you're not a designer, they're the fastest way to build an intuition for what good design actually looks and feels like.
In the age of AI, these references have gotten even more valuable. If you want to tell AI "make it feel like this," you first need to know what "this" actually is. As one designer put it, "finding good references and building your own insights from them is what separates good outcomes from generic ones".
The four sites we're covering today each have a different strength — interaction videos, screenshot libraries, product UI archives, recorded UX flows — so you can pick the right one depending on what you need.
What Changes?
You might be thinking: "Isn't this just like Dribbble or Behance?" Not even close. Dribbble and Behance are designer portfolios. Most of what you'll find there is concept work made for job applications, not real shipped products. The sites we're covering today collect actual screens from apps and services people are using right now.
| Portfolio sites (Dribbble, etc.) | Real product references | |
|---|---|---|
| Content | Concept designs, mockups | UI from live, shipped apps |
| UX flow | Mostly single screens | Full flows: onboarding → checkout |
| Practical use | Inspiration only | Directly applicable |
| For AI prompts | Abstract references | Specific patterns you can describe |
The practical difference is real. Ask AI to "build a checkout screen" and you'll get something generic. But if you spend five minutes in Mobbin looking at Airbnb's checkout flow first, then say "build something with this pattern" — the output is completely different. Figma's Marco Cornacchia put it well: "Mobbin is my favorite resource because you can see how real apps actually handle specific UI patterns and flows".
Let's break down all four sites.
| Site | Strength | Content format | Pricing |
|---|---|---|---|
| Mobbin | UX flow search, 600K+ screenshots | Screenshots + flow videos | Free (Pro paid) |
| 60fps.design | Interaction & animation video clips | 1,880+ video captures | Free |
| Refero | SaaS/web product UI + MCP support | Desktop screenshots + flows | Free (Pro paid) |
| Page Flows | Recorded UX flow videos + annotations | Screen recording videos | Paid ($99/year) |
Getting Started
- When you need interaction or animation ideas → 60fps.design
This site has captured over 1,880 app interactions as video clips. Everything is organized across 88 filter categories — button animations, swipe gestures, loading states, onboarding sequences, and more. Over 62,800 designers subscribe, and you can watch detailed interactions from apps like Duolingo, Airbnb, and Instagram. It's the best tool when you're trying to communicate a specific "feel" for how an app should move. - When you're hunting for a specific UX pattern → Mobbin
Mobbin is enormous: 601,500 screenshots and 320,000 flows pulled from over 1,150 apps. You can search by UX flow type — "onboarding," "checkout," "profile setup" — and pull results directly into Figma with their plugin. Design teams at Visa, Shopify, and Figma use it in their day-to-day work. The free tier is genuinely useful, so the barrier to getting started is low. - When you need SaaS or web product UI references → Refero
Refero collects desktop UI from real SaaS products like Stripe, Shopify, and Notion. It's organized across 45 page types, 87 UX patterns, and 69 UI elements, which makes searching surprisingly powerful. What makes it stand out is that it also supports MCP (Model Context Protocol) for AI agents. That means AI coding tools can pull from Refero's reference library directly while generating designs — a genuinely useful connection. Its 4.9 rating on Product Hunt is worth noting too. - When you want to watch an entire user journey → Page Flows
Page Flows records real app UX flows as screen capture videos. Where screenshots fall short — transitions, micro-interactions, the actual rhythm of using a product — video fills in the gaps. There are 2,000+ recorded flows from apps like Airbnb, Dropbox, and Slack, used by over 100,000 designers. It's paid ($99/year), but there's a 3-day free trial.
Key Takeaway
When prompting AI for a design, get specific about the patterns you've seen in reference sites — it makes a huge difference. Instead of "build a checkout screen," try "build a step-by-step checkout flow in the style of Airbnb, with a progress bar at the top." The more concrete your reference, the better the output.
