{ "id": 4374, "status": "publish", "lang": "en", "slug": "refero-review-design-claude-code-codex", "url": "https://soymarketingultra.com/en/refero-review-design-claude-code-codex/", "title": "Refero review: real design references for Claude Code and Codex", "excerpt": "My Refero review: real design references for coding agents, an MCP test, the official skill, Lifetime pricing and using it with Impeccable.", "date_gmt": "2026-09-17T19:28:52Z", "modified_gmt": "2026-09-19T12:49:22Z", "categories": [ { "slug": "applied-ai-en", "name": "Applied AI", "url": "https://soymarketingultra.com/en/category/applied-ai-en/" } ], "tags": [ { "slug": "refero", "name": "refero" }, { "slug": "claude-code", "name": "claude-code" }, { "slug": "artificial-intelligence", "name": "artificial-intelligence" } ], "featured_image": { "url": "https://soymarketingultra.com/wp-content/uploads/refero-cover-en-16x9-20260919.png", "alt": "Marketing Ultra mascot studying real interface references before designing", "width": 1536, "height": 864 }, "translation": { "lang": "es", "url": "https://soymarketingultra.com/refero-review-diseno-web-ia-mcp/", "id": 4370 }, "seo": { "title": "Refero review 2026: MCP, skill, Lifetime price and real test", "description": "My Refero review: real design references for coding agents, an MCP test, the official skill, Lifetime pricing and using it with Impeccable.", "focus_keyword": "Refero review" }, "html": "

Ask a coding agent to design a website without showing it anything and you can guess what comes next: a polished hero, four cards and the nagging feeling that you have seen the same page twenty times. I prefer to start with a different question: how have real products solved THIS interface problem?

\n

That is why I use Refero. It does not hand me a finished website or a React component. It lets me study real screens and user flows, choose a useful pattern and tell the agent why that choice makes sense. Good references make the design conversation much more specific.

\n\n
\"Marketing

TL;DR: The No-Nonsense Summary

\"Daniel
DANIEL ESPINOSA RAMOS' EXPERIENCE

“Refero is a staple for me when designing websites with agents. Its price is competitive and, as of today, it offers a Lifetime license. Being able to feed an agent real references without another recurring fee is good news. Its skill is good, but I think it works even better alongside Impeccable.”

Dani
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
At a glanceDetail
Websiterefero.design
My useResearching screens, patterns and flows before asking for code
IncludesWeb library, Figma plugin, MCP and skill depending on plan
MCPOfficial server at https://api.refero.design/mcp; paid access for licensed Pro, Team or Lifetime users
SkillOfficial repository
Price checkedPro from €10/month when billed annually; Lifetime €250 once, on September 17, 2026
My testA real search worked in August; a later query returned 401 in September
\n\n

The problem it solves

\n

A screen can be well coded and still fail to answer the important question: what should a visitor see first? When I work with a coding agent, that decision comes before colors or components. If I only ask it to “make it modern”, it tends to fill the gap with a familiar layout.

\n

Refero helps me research how other products organize a task, a list or a decision. I can give the agent a specific reference and explain which part I would use. The reference starts a better conversation; it does not decide the content, hierarchy or main action for me.

\n

How to get started

\n

I start with the Refero web library. I search for the type of screen or flow that resembles my problem, open several examples and note three things: what stands out, what stays in the background and what I would leave out of my project. That research does not require installing code.

\n
\"Search
Refero's official visual guide shows how to browse search results. This walkthrough predates this review; the screen count visible in the image is not the current size of the library.

When I want to search from Claude Code or Codex, I connect the MCP with my account and check that a real query returns results. The official skill is a separate piece: it gives the agent a method for researching before building. I include the server, connection steps and a copyable prompt below. Adding the server to a configuration file does not prove that the account is authorized.

\n

If you want to see the manual workflow first, Tania Driskill's walkthrough shows how she searches the library and uses a reference in a website. This is another creator's experience with the library, not a test of its MCP or a replacement for my own test.

\n
Tania Driskill's video on Innovations for Education, about 3.5 minutes, in English. It demonstrates manual research and a design outcome; it does not independently verify the MCP.

Using it in a real marketing workflow

\n

If I were designing the landing page for a tool that organizes daily work, I would not begin by asking an agent for a striking hero section. First I would decide how to show the main task, pending work and the next action. I would find references for those decisions and then brief the agent with the page's real content and priorities.

\n

I connected Refero to my coding agents through OAuth and ran a real refero_search_screens query. I looked for references to three interface problems. Here are some useful results:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ProblemScreen returnedWhat I would take from it
Show what matters todaySunsamaPut today's work first and move the rest aside without hiding it
Find an action quicklyPolarOffer global search and shortcuts without forcing users to learn them
Organize several types of contentHume AISeparate categories in the sidebar and offer tabbed views with cards
\n
\"Sunsama
Sunsama screen viewed on Refero on September 18, 2026. It separates today's work from the backlog. This is a hierarchy reference, not a screen I designed or proof of conversion.
\"Polar
Polar screen viewed on Refero on September 18, 2026. Search offers quick actions without removing visible navigation. The image documents the pattern, not how it performs in another product.
\"Hume
Hume AI screen viewed on Refero on September 18, 2026. It groups models with side navigation, tabs and cards. That does not prove the same layout would suit another project.

I would not copy any of those screens in full. The point is to break a reference down into decisions that fit your own case. A command palette cannot replace visible navigation when people need it. A new color will not fix too much content either.

\n

Why I combine Refero with Impeccable

\n

Refero's skill asks an agent to research before writing code. Good. The mistake would be to treat it as another magic instruction to “have taste.” References still need judgment.

\n

Here is how I would split the work: search Refero for three examples of a specific problem, such as an empty state or a pricing screen. Write down what to borrow, reject and adapt to the brand and the actual content. Then use Impeccable to shape the interface, critique it and audit what the agent built.

\n

Refero feeds the research. Impeccable helps work on the result. Neither tool knows who your customers are, what your page promises or what visitors need to do.

\n

Refero MCP: what it does and how to connect it

\n

The official Refero MCP lets an agent search screens and flows from its coding environment. The connection guide documents https://api.refero.design/mcp, authorization and client options. Refero says licensed Pro, Team and Lifetime users get up to 8,000 MCP calls per month.

\"Official
Marketing image published by Refero. It shows the product, not proof of my current connection. Refero.
\n

The MCP and the skill do different jobs. The MCP gives the agent access to the library; the official skill proposes a research and design method. Refero publishes npx skills add https://github.com/referodesign/refero_skill as its skill installation command. It also offers a plugin for Codex; Claude Code supports the HTTP MCP server. Restart the client and authorize your account in the browser when prompted.

\n
>_Ready-to-copy agent prompt

Paste this into Claude Code or Codex:

Read https://doc.refero.design/mcp/getting-started and install the official Refero MCP for this client. The manual server URL is https://api.refero.design/mcp. Back up the configuration and preserve my other servers. Use my account's official authorization flow and do not store keys in the project. Restart the client if needed, then verify access by searching for three real screens relevant to one specific design problem. Tell me which MCP tool responded and which references it returned. If you get 401, stop and explain how to renew access.

Test the connection: installing the server does not prove that the account can search.

What you should know before relying on it

\n

The search I describe worked in August 2026. A later MCP call returned 401. I am not presenting the connection as verified today: before relying on it for another project, I would renew authorization and run another query. If the agent does not return real screens, setup is not complete.

\n

Refero does not deliver components ready to install. An attractive screen can help you choose a hierarchy, but copying it without your own content, constraints and visual identity can produce another generic website. I would keep visual research separate from implementation and inspect the finished result in the browser.

\n

Price and the Lifetime license

\n

On September 17, 2026, Refero's pricing page showed Pro at €15/month billed €45 quarterly, Pro at €10/month billed €120 annually, and Lifetime at €250 as a single payment. The free plan allows limited browsing but does not include the MCP. These terms can change.

\n

I subscribed to monthly Pro in August at €17/month plus applicable taxes. That is a different billing option from the annual and quarterly prices now shown on the site. Compare the same plan before deciding.

\n

Lifetime is particularly appealing if you regularly feed design references to coding agents. Pay once, and there is no recurring subscription to think about. For a single project, trying Pro for a month first also makes sense. I would not buy Lifetime for a promise of “automatic design”: Refero gives you material to make decisions, not judgment itself.

\n

What other users say

\n

The response is mixed. In a recent r/UXDesign discussion, one person values the MCP and the price for personal use, while another says they have used Refero for years. An earlier comparison favors Mobbin for breadth. These are individual experiences, not a controlled comparison of the two libraries.

\n
\n

“It's not as good but it has MCP and can be more cost effective for personal use.”

@Wakinghours still budgets for Mobbin at work, but sees a role for Refero when paying personally and consulting references from an agent. That distinction matches my own use case.

\n

“Can vouch for Refero.”

@fffyonnn says they have used the library for years and mentions Lifetime. I bought monthly Pro; their experience does not mean I have personally tested the Lifetime purchase.

\n

“Mobbin has more stuff 100%.”

@KeenKong considers Mobbin's library broader. That matters if coverage of many screens and flows is your priority, and it is a reason to try the specific references you need before paying.

\n

Alternatives: when I would choose something else

\n

If you already know what to build and need code components, look at catalogs such as shadcn/ui or 21st.dev. If the problem is the finish of a page that already exists, I would start with Impeccable. Refero belongs earlier in the process, while you are still deciding what the experience should be.

\n

Verdict

\n

Refero has earned a place in my toolkit. It gets me out of the loop of asking for “something modern” and forces me to point to decisions I can defend. The MCP makes that research easier when authorization works; the skill adds a method. The price and Lifetime option strengthen my recommendation for anyone who designs with agents often.

\n

I would not ask it to design for me. I would ask for good references, choose with care and then put the agent to work. And I would review the finished page, because that is where you find out whether the idea actually worked.

\n

Frequently asked questions about Refero

\n

Does Refero design the website for me?

\n

No. It provides real screens and flows to research. Choosing a direction, adapting it to your content and reviewing the result are still your jobs.

\n

Is Refero a React component library?

\n

No. Refero helps you study interface decisions. If you need reusable code, see my UI component library collection.

\n

What is the difference between the Refero MCP and its skill?

\n

The MCP gives the agent access to the library. The skill suggests how to research references and turn them into design decisions. You can use both.

\n

Do I have to pay for the MCP?

\n

Yes. Refero lists MCP access for licensed Pro, Team and Lifetime users, but not for its free plan as checked on September 17, 2026.

\n

What should I do if I get a 401 error?

\n

Check your account access, restart the client and renew authorization. Run a real search afterward. Until the MCP responds, the installation is not verified.

\n

Sources and test scope

\n\n", "markdown_url": "https://soymarketingultra.com/en/refero-review-design-claude-code-codex.md" }