A searchable library of over 130,000 real product screens and thousands of full user flows from top apps like Stripe, Linear, Notion, and Spotify.

Do I need to install anything?

No. With Method 1 you just search, highlight, and paste a screen straight into Claude Code. The MCP in Method 2 is optional.

What does the Refero MCP do?

It lets Claude pull references from Refero's database itself, without you ever opening the site.

Can I use it as a skill instead?

Yes. The official Refero design skill makes Claude research real screens before it builds.

Steal the Look of Any App with Refero + Claude Code

What Refero is

Refero (refero.design) is a searchable library of real product screens from the best-designed apps out there, and it plugs straight into Claude Code so you build off actual interfaces instead of vague descriptions. It scraped and organized over 130,000 real screens and thousands of full user flows from products like Stripe, Linear, Notion, and Spotify. You can search by the exact page you need, like a billing page or a dashboard, right down to the individual UI pieces. Claude Code is Anthropic's terminal coding tool, where you do the actual build.

Why describing design in words never works

When you know good design but can't put it into words, you end up screenshotting your favorite apps and trying to describe them to Claude Code in words you don't really have. Refero flips that: instead of describing a look you can only recognize, you hand Claude the real thing and it studies real shipped products that already solved the same page.

Before you start

You need two things.

Claude Code — Anthropic's terminal coding tool, where you run the build.
A Refero account — free to make; the MCP sign-in in Method 2 uses it.

Method 1 — Search and paste (no setup)

Go to refero.design, search for the page or pattern you want, and highlight the screen you'd like to copy. Paste that screenshot into Claude Code, and now it has a real visual to build from rather than guessing off your description. This works immediately with nothing to install.

Method 2 — Connect the MCP

The MCP is a direct pipe between Claude Code and Refero's whole database, so Claude pulls references itself without you ever opening the site. Set it up from refero.design/mcp, which gives you the exact one-line config to paste. It looks like this:

claude mcp add --transport http refero <the URL shown on refero.design/mcp>

The first time Claude uses it, a browser window opens so you can sign in with your Refero account, and after that it's automatic.

Prefer it as a skill? Install the official Refero design skill instead, which forces Claude to research real screens before it builds:

npx skills add https://github.com/referodesign/refero_skill --skill refero-design

Step — Now just ask

Once it's connected, you describe the build and name the product whose design you want to borrow:

Build me a billing page the way Spotify built theirs. Pull real references from Refero first, then apply that layout and visual style to my project.

Claude studies the actual screens and drops those design elements onto your app, so the result looks designed instead of generated.

Frequently asked questions

What is Refero? — A searchable library of over 130,000 real product screens and thousands of full user flows from top apps like Stripe, Linear, Notion, and Spotify.
Do I need to install anything? — No. With Method 1 you just search, highlight, and paste a screen straight into Claude Code. The MCP in Method 2 is optional.
What does the Refero MCP do? — It lets Claude pull references from Refero's database itself, without you ever opening the site.
Can I use it as a skill instead? — Yes. The official Refero design skill makes Claude research real screens before it builds.

Get Refero

The library, the MCP config, and the design skill live here: https://refero.design