Refero — 142,000 real product screens and flows, plus DESIGN.md styles for AI agents

• Refero

  This page

  PricingRoughly even

  • Free tier is the same shape as most libraries here: a small slice of the collection — the site quotes roughly three percent — with search limited to tags and company names
  • Pro is what unlocks everything the library is sold on: the full web and iOS set, user flows, weekly additions, the Figma plugin, the MCP connection and the agent Skill
  • Billing is unusually flexible for the category — monthly, annual or a one-off lifetime purchase — and students get a discount on Pro
  • Team is per seat and adds collaborative bookmarks plus centralised member and billing management; Enterprise is a sales conversation covering custom terms, volume seats, SSO and procurement support

• Mobbin

  PricingRoughly even

  • Free tier is deliberately narrow: a handful of collections, and flows, search and Deep Search all sit behind the paid plan
  • Pro covers apps and sites, flows and animations, and includes MCP — but the REST API does not start until Team
  • Billing intervals are quarterly or yearly only; there is no monthly option to drop into and out of for a single project
  • Team is billed per member and adds shared collections, comments, centralised billing and SOC 2 reports; Enterprise is custom with SAML, SCIM and invoice or purchase-order terms
  • Students and educators can claim a discount on Pro for a limited number of years

• Page Flows

  PricingRoughly even

  • There is no free tier to evaluate against — access begins with a short paid trial window
  • Individual plans are a single seat billed quarterly or yearly, with the yearly rate materially lower than the quarterly one
  • A three-seat Team plan exists for small groups and adds shared bookmarks and centralised billing
  • The whole product is one price band rather than a ladder of capability tiers

• ScreensDesign

  PricingRoughly even

  • One paid plan sold at three intervals — weekly, monthly or annual — rather than a free-to-paid ladder
  • The higher tier bundles the AI allowances: a monthly cap on library questions, an annual pool of generation credits, and MCP access
  • Positioned at founders and indie app teams, so the pricing is sized for a single buyer rather than a design org
  • Priority support from the founders is part of the top tier instead of an enterprise add-on

1. Refero — official site
2. Refero — plans, billing intervals and student discount
3. Refero Styles — DESIGN.md design systems for AI agents
4. Refero — MCP, styles, screens and flows for agents
5. Refero — MCP setup documentation
6. Refero — Figma plugin on the Figma Community
7. Refero — terms of use
8. Refero — privacy policy
9. Mobbin — official site
10. Mobbin — plans, billing intervals and feature limits
11. Page Flows — official site
12. Page Flows — plans and what each one includes
13. ScreensDesign — official site
14. ScreensDesign — plans and AI allowances

Free tier

Yes

Pricing summary

There is a free tier, and it is the usual shape for this category: the site quotes access to roughly three percent of the collection with search limited to tags and company names. It is enough to judge whether the library suits your product, and not enough to do a month of work in. Pro is the tier most people land on, and it is what unlocks everything the product is sold on — the full web and iOS collection, user flows from signup to cancellation, weekly additions, the Figma plugin, the MCP connection and the agent Skill. Billing is more flexible here than with the closest rival: monthly, annual, or a one-off lifetime purchase, plus a student discount on Pro. Team turns Pro into per-seat access with collaborative bookmarks and centralised member and billing management, and Enterprise is a sales conversation covering custom terms, volume seats, SSO and procurement support. Refero also sells itself as an ingredient rather than only a destination — the pricing page offers MCP or API access for teams that want the library inside their own product as a design knowledge layer. Refero Styles, the DESIGN.md layer, is in beta and its gallery is browsable and copyable without a paid plan. Confirm live numbers, intervals and allowances on the official pricing page, since these are exactly the details that move.

Reviewed on 24 September 2026 · Refero — plans and billing intervals

• A screen library organised by pattern

  The collection runs to hundreds of thousands of web and iOS screens drawn from a few hundred named products and grows weekly. The useful part is not the count but the taxonomy on top of it: page type, UX pattern, UI element, industry, company and font, with a similar-screen panel that turns one good hit into a set of variants worth comparing.

• User flows rather than isolated frames

  Flows run the whole journey — signup, onboarding, the core task, billing, cancellation — so step order, friction and edge cases are visible. This is the capability that separates a research library from an inspiration gallery, and it is also what makes the free tier feel narrow, because flows sit behind the paid plan.

• Research mode

  Instead of returning thumbnails, research mode takes a described design task and returns analysis grounded in the library. It is the feature that maps least well to a screenshot grid, and the one worth trying on a real problem before deciding that a filter panel is all you need.

• Figma plugin

  References land directly inside the Figma file rather than being downloaded, re-uploaded and re-labelled by hand. It is the difference between a research session that informs a file and one that runs alongside it, and it belongs to the paid tier.

• MCP access for coding agents

  The MCP connection lets an agent query screens, flows and styles live rather than working from whatever you pasted in. Refero also ships a Skill that carries the research process itself into the agent, which matters more than the raw connection: the sequence of looking before deciding is the part agents usually skip.

• Refero Styles — DESIGN.md design systems

  A second surface, in beta, that extracts design systems from real websites as DESIGN.md files covering colours, typography, spacing and components, browsable by brand, mood, colour, font or category and free to copy. You paste the file into Cursor, Claude Code, Codex, v0 or Lovable as context before the design request, which is the practical difference between an agent inventing taste and an agent working inside one.

• Agent-oriented browsing angles

  The Styles side is organised for the way people actually brief a tool: curated entry points and prompt-style starting points rather than only a search box, plus trending, popular and newest views so you can see what other builders are reaching for instead of guessing at a query.

• Embeddable as a design knowledge layer

  Beyond the website, Refero offers MCP and API access so the library can sit inside another product. That is a different buyer from the designer browsing for a paywall example, and it is the part of the offer that ages best as more design work starts inside an agent rather than in a canvas.

1. 1

   Name the screen before you search

   Decide whether the question is a page type, a pattern or a component. “Paywall” and “trial-length selector” live in different places in the taxonomy, and picking the wrong one is why a first search returns nothing relevant.

2. 2

   Start from the flow, not the frame

   When the question is how something should work, open the journey rather than the screen. Step order is the thing that is hardest to get right alone and easiest to copy from a product that has already shipped it.

3. 3

   Use similar-screen search on your best result

   One good hit is a starting point, not a benchmark. Expanding it into variants is what shows you the range of legitimate solutions, which is the evidence you need when someone asks why you chose one over another.

4. 4

   Filter by company, not just by pattern

   Filtering to a set of products your team already respects makes the comparison land in review. References are more persuasive when the reviewer recognises the source than when they are merely attractive.

5. 5

   Bring the references into the file

   Place what you found in Figma while the reasoning is still fresh. A reference that lives in a browser tab is a link you will lose; one that sits beside the work is a decision you can revisit.

6. 6

   Paste a DESIGN.md before your agent starts

   When an agent is doing the building, put the reference in the context window first. Ask for a specific screen rather than a whole product, and name which parts of the system matter — palette, type scale or component weight.

7. 7

   Copy the system, not the site

   The point of a DESIGN.md is the rules behind the screens — how colour is used, how dense the layout feels — not a reproduction of the source. Describe your own product and audience, and let the reference set the constraints rather than the content.

8. 8

   Confirm the tier before you need the feature

   Flows, the Figma plugin and MCP all sit above the free tier, so decide which ones your workflow actually depends on before the free ceiling interrupts a piece of real work.

• Product designers defending a decision

  The hard part of a design review is rarely the craft; it is justifying a direction. Screens plus flows from products the room respects turn “I think this works better” into a comparison with shipped evidence behind it.

• Founders and product managers scoping a feature

  When the brief is open-ended, seeing how category leaders structured the same journey compresses a week of debate into an afternoon. The flow coverage is what makes this credible rather than decorative.

• Designers learning a pattern they have not shipped before

  Nobody starts out knowing what an empty state, a permission prompt or a cancellation flow should contain. Studying a set of real ones is faster and less error-prone than inventing a first attempt and iterating on feedback.

• AI-assisted builders fighting generic output

  The failure mode of agent-generated UI is not broken code, it is default taste: the same safe layout, the same spacing, the same palette choices. Pasting a real design system into the context is the cheapest available fix, and it is the part of this product aimed squarely at that problem.

• Studios building a reference habit

  Teams that benchmark consistently produce more consistent work, and a shared library makes that habit portable between projects rather than something each designer does privately in their own bookmarks.

• Solo builders on a single subscription

  The billing intervals — including a monthly and a lifetime option — suit one person paying their own way, which is not true of every product in this category. The student rate points the same direction.

Coverage is web and iOS, and that is deliberate

The library is built from web apps and iOS apps, with iOS coverage strong enough that paywall and onboarding patterns are a first-class use case. Android and cross-platform-native references are the visible gap, and if that is what you design, the collection will feel thin no matter how large it is.

Session-based access with a real free ceiling

Browsing happens in the browser against a hosted library. The free tier is a stated small percentage of the collection with search limited to tags and companies; Pro removes the ceiling and adds flows. Billing is available monthly, annually or as a one-off lifetime purchase, with a student discount on Pro and per-seat Team pricing above it.

Three integration surfaces, all paid-tier

The Figma plugin places references inside design files. The MCP connection exposes screens, flows and styles to MCP-compatible agents. The Skill packages the research process for an agent to follow. All three sit above the free tier, and MCP setup is documented separately, so budget the configuration step as part of the decision rather than assuming it is instant.

Refero Styles is a separate surface in beta

The DESIGN.md library lives on its own subdomain and is labelled beta, which is worth taking literally: the gallery is browsable and copyable for free, additions arrive weekly, and features in a beta layer can change shape. The extracted files cover palette, typography, spacing and components — the rules behind a site rather than a copy of it — and are intended as agent context, not as a system you deploy.

Research mode is grounded in the library, not open-ended

Research mode answers a described design task using the collection rather than the open web, which is what makes it different from asking a general assistant. It returns analysis and references, so the useful check is whether the references it cites are ones you would have found yourself.

What it does not do

It does not generate screens or components for you, and it does not hand you a design system to build with — the references belong to the products they were captured from. There is no Android library, no self-hosted or private archive, and no revenue or download data to size a market with. Coverage of a given niche is only as good as which products have been captured, so a specific vertical can be thinner than the headline count suggests, and the team features stop short of the security controls that regulated buyers request — those live in the enterprise conversation.

Licensing and reuse are the reader’s problem

The library is references from other companies’ products rather than assets licensed to you, so how much of a captured screen can travel into your own work is a judgment call the terms of use inform rather than settle. The practical discipline is the one the product itself describes for its own DESIGN.md files: take the system and the constraints, describe your own product, and do not reproduce the source.