Refero.design MCP guide: Refero vs Fudge

A practical guide to Refero.design MCP and Fudge, with a clear workflow for discovering interface patterns and inspecting references for AI-built products.

refero.design mcp

[Decide by the question](#decide-by-the-question)
[What each workflow returns](#what-each-workflow-returns)
[A comparison checklist](#a-comparison-checklist)
[Use this in your AI agent](#use-this-in-your-ai-agent)

Refero.design MCP is a good starting point when an AI coding agent needs product-interface and user-flow references. Fudge is the stronger next step when you need to inspect a captured website closely, compare its visible design details, and prepare a grounded implementation plan.

Decide by the question

Ask what you need answered:

"Where can I find examples of this screen or flow?" Start with Refero.
"How is this reference put together visually?" Use Fudge.
"Which pattern should my agent implement, and what should it preserve?" Compare references in Fudge after discovery.
"Do I need a ready-made style reference?" Check Refero Styles, while verifying how much of the result is a reference rather than a complete product system.

Refero's official documentation says its remote MCP works with MCP-compatible AI tools. It describes searches for product interfaces and user flows, with structured screen metadata. That makes it useful for broad discovery: finding examples of onboarding, settings, dashboards, checkout, navigation, or other recurring product screens.

Fudge covers a different part of the process. It searches captured references by description and observed design details, then supports closer checks of page structure, sections, components, layout, viewport, and page state. It also exposes typography families and variants, color roles and contrast, spacing, borders, radii, shadows, gradients, images, motion, overlays, and clipping when those details are present in the capture.

The examples below are not a substitute for checking your own reference. Use them as a visual comparison exercise. Raycast and boringBar show how focused utility products can keep a clear action close to supporting proof. Monocle is a restrained reference for varying feature sections without losing product visibility. Cosmos is useful when you are studying warm editorial surfaces and readable text.

Captured pages

What each workflow returns

Refero is most useful when the agent needs a searchable stream of interface examples and screen-level context. Refero Styles publishes references in formats such as DESIGN.md, Tailwind v4, CSS variables, and design tokens, which can help an agent begin implementation from a selected direction.

Fudge is most useful when the agent needs to answer detailed questions about a particular captured page:

What sections appear, and in what order?
Which components repeat?
Which fonts, variants, sizes, weights, and line heights are visible?
Which colors serve as background, text, border, accent, or state colors?
How much space separates the main blocks?
Which images, crops, videos, overlays, or interactions shape the experience?
How does the page change between captured viewports or states?

Those questions matter because a screen reference is more than a color palette. A page can feel wrong even when its colors look close if the type scale, spacing rhythm, component proportions, or content order differs.

A comparison checklist

Before asking an agent to code, compare each candidate on five points:

Task fit: Does the pattern support the same user goal as your screen?
Structure: Are the sections and repeated components understandable?
Type: Do the font proportions and hierarchy fit your content?
Visual rules: Are color roles, spacing, borders, radii, and shadows consistent?
Behavior: Are responsive changes, motion, overlays, and states visible enough to implement responsibly?

Mark each point as observed, uncertain, or recommended. This prevents an agent from presenting a guess as a fact. It also makes comparison fair: Refero may give you broader discovery, while Fudge may give you a deeper review of the references you selected.

For official setup details, read the Refero MCP getting-started documentation. For style-oriented references, visit Refero Styles. To see the related Fudge comparison material, open Fudge vs Refero.

Use this in your AI agent

> I am building a [screen or flow] for a [product]. Use Refero to discover several relevant product-interface references, then use Fudge to compare the selected captures. Return a table of observed structure, typography, color roles, spacing, borders, radii, shadows, responsive behavior, motion, and overlays. Label each item observed, uncertain, or recommended. Choose the best pattern for the user's task and produce an implementation checklist for [framework], without claiming details that are not visible.

Install Fudge for your AI agent.

How do I compare two Refero references without making my product look copied?

Compare the references by job and rule, not by isolated decoration. First write down the user task both screens support. Then identify the shared structural idea, such as a prominent search area, a two-column settings layout, or a progressive onboarding sequence. Keep the useful pattern while changing content, hierarchy, spacing choices, imagery, and visual emphasis for your product.

Use a table with these columns: user task, main sections, repeated components, typography hierarchy, color roles and contrast, spacing and container behavior, states and responsive changes, and what your product should keep, adapt, or reject.

Use Fudge to inspect selected captures when you need evidence about visible details. Label anything not shown as uncertain. Ask your agent to explain which decisions are general interaction patterns and which are original choices for your product. This is more useful than requesting a pixel-for-pixel imitation.

Can Refero Styles or Fudge give me a complete design system for my product?

Treat both as starting material for your own design system, not automatic ownership of another product's official internal system. Refero Styles can provide reference formats such as DESIGN.md, Tailwind v4, CSS variables, and design tokens. Fudge helps inspect observed type, color, spacing, component, and layout details from captured pages, with supported observed details available for export to common implementation formats.

Before adopting anything, define semantic names for colors, spacing, type, borders, and radii; map them to your product's content and accessibility needs; add component states the reference does not show; test narrow and wide viewports; and document which values were observed versus chosen by your team.