Refero Design
A curated library of real product screens, flows, and UI patterns for design research, now with research mode and MCP access.
Refero is one of the fastest ways to see how real products solved a concrete screen — paywalls, onboarding, data tables, command palettes. The provenance is the point: everything is captured from production products, not pitched concepts, so it sits closer to Mobbin than to Dribbble or Behance. The interesting recent shift is Research mode plus Refero MCP, which lets you describe a task and get analysis with references back, and lets a coding agent pull the same library while it builds. If your goal is a moodboard or a finished component, look elsewhere.
Verified 5d ago · liveness 43/100 · cite: rightaichoice.com/tools/refero-design
- UI/UX designers who need real screens for a specific page type or flow
- Product teams benchmarking paywalls, onboarding, and data tables
- Designers using AI coding agents who want real interface references via MCP
- Founders validating a direction before committing to a layout
- Designers who need downloadable source files or editable Figma components
- Anyone looking for animated or clickable interactive prototypes
- Teams needing shared workspaces, comments, or collaborative review
We scan live Reddit threads, YouTube comments, X posts, G2 reviews and other communities — and hand you an honest verdict in under a minute.
- Honest verdict, not marketing
- Real pros & cons from real users
- Attributed quotes with receipts
3 free scans · no card needed
Skip Refero if you need editable source files or clickable prototypes to hand off — it is a reference and reasoning library of static, production-captured screens, not an asset store or design-system source.
If you rely on Refero MCP inside a coding agent, your agent's own token or usage costs are billed by that agent, not by Refero
Refero is a low-cost research tool sitting alongside paid design-reference libraries such as Mobbin and behind free portfolio platforms like Dribbble or Behance on price. It fits individual designers, students, and small product teams who need production screen references; teams that need editable component libraries should budget for a design-system or asset product instead.
In short
Refero Design — A curated library of real product screens, flows, and UI patterns for design research, now with research mode and MCP access. Best for UI/UX designers who need real screens for a specific page type or flow, Product teams benchmarking paywalls, onboarding, and data tables, Designers using AI coding agents who want real interface references via MCP. Free to use.
Viability Score
How well maintained and how widely used is Refero Design? Built from what the vendor actually publishes (docs, changelog, tutorials, integrations, pricing), whether the site is live, and how much real users discuss it. How we calculate this
Last calculated: October 2026
How we score →Key Features
- Browse curated screens captured from shipped web and iOS products
- Research mode: describe a task, get analysis, references, and reasoning
- Refero MCP connects AI agents to the product interface and flow library
- Figma Plugin brings the screen library into your design file
- Filter by page type: Dashboard, Pricing, Paywall, Log In, 404 Page, Careers
- Filter by flow: Signing Up & Onboarding, Subscribing, Resetting Password, Booking
- Filter by UX pattern: Testimonials, Filter & Sorting, Reviews & Rating, Dark Mode
- Filter by UI element: Dialog & Modal Window, Cards & Tiles, Table, Tabs, Navigation Bar, Sidebar & Drawer, Skeleton
- Browse by site category: AI Tools, Finance, Development Tools, Collaboration Tools, Design & Media Editing
- Popular collections such as dashboard layouts with charts and SaaS onboarding to first value
- Account creation via Google or email
- Static screens only — no interactive prototypes or downloadable source files
About Refero Design
Refero Design is a library of screens and user flows captured from shipped web and iOS products rather than concept shots. You can browse by page type (Dashboard, Pricing, Paywall & Subscription, Log In, 404 Page, Careers), by flow (Signing Up & Onboarding, Logging In, Subscribing, Adding to Cart, Resetting Password), by UX pattern (Testimonials, Filter & Sorting, Reviews & Rating, Billing & Plans, Dark Mode, Trial & Freemium), or by UI element (Dialog & Modal Window, Cards & Tiles, Table, Tabs, Navigation Bar, Sidebar & Drawer, Skeleton, Line & Bar Chart, Animation). Sites are grouped into categories such as AI Tools, Design & Media Editing, Development Tools, Finance, and Collaboration Tools. The newer half of the product is aimed at AI-era workflows. Research mode takes a described task and returns analysis, references, and reasoning instead of making you scroll screen by screen. Refero MCP connects an agent to the same curated interface and flow library so it studies real product patterns before it builds. A Figma Plugin and Log In / Sign Up extend the library into the tools you already use. It is reference material, not an asset store: no downloadable source files and no interactive prototypes. Designers, product teams, founders, and design-engineering agents use it to see how working products solved a specific interface problem before committing to a direction.
Behind the Verdict
Refero's value is narrow and specific: it answers "how have shipped products actually laid out this screen?" You browse Web apps or iOS apps, then filter down through page types (Dashboard, Paywall & Subscription, Pricing, Log In, 404 Page, Careers), flows (Signing Up & Onboarding, Subscribing, Resetting Password, Uploading & Downloading), UX patterns (Testimonials, Filter & Sorting, Reviews & Rating, Billing & Plans, Dark Mode, Trial & Freemium), and UI elements (Dialog & Modal Window, Cards & Tiles, Table, Tabs, Navigation Bar, Sidebar & Drawer, Skeleton, Line & Bar Chart, Animation). That taxonomy is the real product — it turns "show me pricing pages" into a shortlist rather than a scroll. Strengths: production provenance, deep filtering by page type/flow/pattern/element, browsable by company and site category (AI Tools, Finance, Development Tools, Collaboration Tools, Design & Media Editing), and the newer Research mode that returns analysis, references, and reasoning for a described task. Refero MCP is the most differentiated piece — it hands the same curated library to an AI coding agent so generated interfaces start from observed patterns. The Figma Plugin brings the library into a file you already have open. Weaknesses, stated plainly: there are no downloadable source files and no editable components, so it cannot be your asset source. There are no animated or clickable interactive prototypes — every entry is a static screen. It is not a collaboration tool; there are no shared workspaces or review comments. Coverage is uneven across categories, and thin categories return few relevant screens. Updates move with the team's curation schedule, not on demand. Where it fits: UI/UX designers who need real screens for one page type or flow; product teams benchmarking how competitors structure paywalls, onboarding, and data tables; designers running AI coding agents who want the agent grounded in real interfaces through MCP; founders validating a direction; design students studying production UX. Where it does not fit: teams that need an editable component library or a design-system source of truth, and anyone who needs interactive prototypes to hand to stakeholders.
Researching Refero Design? Get your full AI stack in 60 seconds.
Free, no signup — tell us your goal and get tools matched to your budget & existing stack.
Real-world workflow fit
Concrete scenarios for the personas Refero Design actually fits — and what changes day-one when you adopt it.
You open the Paywall & Subscription page type, narrow to the Subscribing flow, and scan plan-selection and trial-and-freemium patterns from shipped products in your category.
Outcome: You walk into the kickoff with three concrete reference layouts and the reasoning behind each, instead of arguing from taste.
You connect Refero MCP to your agent, describe the screen you need, and let it study the curated interface and flow library before it writes the component.
Outcome: The generated interface follows patterns real products already ship rather than defaulting to generic AI-looking output.
You use Research mode to describe the task your product solves, then read the returned analysis, references, and reasoning alongside the matching screens.
Outcome: You decide which onboarding and pricing approach to build first without paying for an asset library or a design retainer.
Use Cases
- Find real paywall and plan-selection screens before designing your own subscription flow
- Benchmark how competitors structure dashboards, data tables, and onboarding
- Point an AI coding agent at real interface patterns through Refero MCP before it builds
- Pull reference screens directly into a Figma file with the Figma Plugin
- Describe a task in Research mode and get analysis plus references instead of scrolling
- Study dark mode, testimonial, and filter-and-sorting patterns across shipped products
- Build a moodboard from production screens rather than concept shots
Limitations
- Refero is reference material, not an asset store.
- There are no downloadable source files and no editable components, and the library holds static screens only — no interactive or animated prototypes.
- It is not a collaboration product: there are no shared workspaces or review comments.
- Coverage varies by site category, so thin categories return few relevant screens.
- Library updates follow the team's curation schedule rather than demand.
as of 2026-10-03
Verification history
We have re-verified Refero Design 10 times since . Each pass re-reads the vendor's own pages and re-checks every listed field against that evidence; passes where nothing had changed are marked as such.
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
- — re-checked, vendor evidence unchanged
- — re-checked, vendor evidence unchanged
- — re-verified summary, description, our verdict, our analysis, pricing model, pricing tiers, features, integrations, who it suits, who should skip it
- — re-checked, vendor evidence unchanged
- — re-checked, vendor evidence unchanged
Showing the 6 most recent of 10 verification passes.
Free to cite with attribution — this page re-verifies continuously.
12-month cost
Project the real annual outlay, including the implied monthly cost when only an annual tier is published.
Vendor list price only. Add-on usage, seat overages, and contract minimums are surfaced under Hidden costs & gotchas.
Plans compared
For each published Refero Design tier: who it actually fits, and what it adds vs. the previous tier. Cross-reference the cost calculator above for projected annual outlay.
Free
$0/mo
Ideal for
Designers, students, and founders who want production screen references and research mode without an asset-library budget
What this tier adds
Starting tier — curated shipped-product screens, Research mode, Refero MCP access, Figma Plugin, and ad-free browsing
Where the pricing makes sense
The company stage and team size where Refero Design's pricing actually pencils out — and where peers do it cheaper.
Refero is a low-cost research tool sitting alongside paid design-reference libraries such as Mobbin and behind free portfolio platforms like Dribbble or Behance on price. It fits individual designers, students, and small product teams who need production screen references; teams that need editable component libraries should budget for a design-system or asset product instead.
Setup time & first value
How long it actually takes to get something useful out of Refero Design — broken out by persona, not the marketing-page minute.
Browsing needs no setup at all — open the site, pick a page type or flow, and start. The Figma Plugin takes a few minutes to install and start pulling screens into a file. Connecting Refero MCP to an agent is the longest path: budget an hour to wire it into your coding agent and verify the first research query returns usable references.
Switching to or from Refero Design
How to bring data in from common predecessors and how to get it back out — written for the switcher, not the buyer.
- →From Dribbble or Behance: keep them for visual inspiration, and move interface-decision research to Refero's production-captured screens and flows
- →From Mobbin: re-run your saved page-type and flow searches in Refero's page type, flow, UX pattern, and UI element filters
- →From ad-hoc screenshot folders: replace them with Refero's page-type filters and MCP connection so your agent pulls references on demand
- ↗To Mobbin: if you need a larger mobile-screen catalogue and app-level flows, move your saved searches there
- ↗To a component library or design system: when research ends and you need editable source components, build in Figma from Refero references
- ↗To Dribbble or Behance: if you want concept-led visual inspiration rather than shipped-product screens
Integrations
Resources & Guides
Tutorials & Learning
YouTube returned 6 videos for “Refero Design”, and we withheld 5: 5 did not mention Refero Design. Showing the 1 we can prove is about Refero Design.
Official links
Tools that pair well with Refero Design
Common stack mates teams adopt alongside Refero Design, with the specific reason each pairing earns its keep.
Penpot
Open-source UI design and prototyping platform with design tokens, CSS Grid and Flex layouts, open-format code handoff, and MCP-driven AI workflows.
Visily
Visily is an AI wireframing and prototyping tool that turns text prompts, screenshots, and diagrams into editable UI designs for non-designers.
Spline AI
Spline AI is a browser-based 3D design platform where an AI agent generates models, textures, and scenes alongside direct modeling tools.
Featured Head-to-Head Comparisons
Refero Design vs Make Real Tldraw
Choose Refero Design if you need a curated library of real shipped product screens for design inspiration and benchmarking. Choose Make Real Tldraw if you want to quickly turn rough sketches into clickable HTML/CSS prototypes. Both are free but serve opposite ends of the design process: research vs. ideation.
Refero Design vs Polycam
If you need free, ad-free UI/UX design inspiration from real shipped products, Refero Design is unbeatable. If you require 3D scanning, floor plans, or photogrammetry for professional use, Polycam’s freemium model and advanced features (including Gaussian splatting and HDRI lighting) make it the clear choice. Pick based on your domain: design inspiration vs. reality capture.
Refero Design vs Fusion 360
Choose Refero Design if you need free, ad-free inspiration from real shipped UI/UX designs. Choose Fusion 360 if you need a professional cloud-based CAD/CAM/CAE/PCB tool for manufacturing-ready product development. They serve completely different needs; your choice depends entirely on whether you're designing user interfaces or engineering physical products.
Alternatives to Refero Design
View all
Penpot
Open-source UI design and prototyping platform with design tokens, CSS Grid and Flex layouts, open-format code handoff, and MCP-driven AI workflows.
Frequently Asked Questions
Categories
Best-of guides
Topics
Used Refero Design? Help shape our editorial sentiment research.