Getting Started

Give your AI agent design taste

Refero MCP connects your agent to curated design styles, real product screens, and user flows. It studies before it builds, so output is grounded in shipped product patterns instead of generic model taste. Models are strong at code and logic, but product design needs references: visual systems, interface patterns, flow sequencing, and the details that make a UI feel intentional. Refero gives agents that research layer.

What you need

Refero Pro — an active subscription is required. Get Refero Pro.
An MCP-compatible tool — Claude Code, Cursor, Antigravity, Lovable, Codex, Manus, or another tool that supports remote MCP servers.

Connect your tool

Use this MCP server URL:

https://api.refero.design/mcp

Depending on your tool and account setup, authorization may happen through OAuth or through a Bearer token from Refero.

Claude Code
Cursor
Codex
Other

claude mcp add --transport http refero https://api.refero.design/mcp --header "Authorization: Bearer <token>"

If your setup uses OAuth instead of an API token, omit the --header part and follow the sign-in flow your MCP client opens.

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "refero": {
      "url": "https://api.refero.design/mcp",
      "headers": {
        "Authorization": "Bearer <token>"
      }
    }
  }
}

If Cursor offers OAuth for the connector, you can use that instead of a static token.

Add to your Codex MCP config:

[mcp_servers.refero]
enabled = true
url = "https://api.refero.design/mcp"

[mcp_servers.refero.http_headers]
Authorization = "Bearer <token>"

Field	Value
Server name	`Refero`
Server URL	`https://api.refero.design/mcp`
Authentication	OAuth or `Authorization: Bearer <token>`

Refer to your tool’s MCP documentation for where to add remote server credentials.

Refero MCP works best with Refero Skill. If the skill is missing, your agent may offer to run npx skills add https://github.com/referodesign/refero_skill --skill refero-design. Refero MCP tells the agent to ask for your approval before running the command. If you decline, Refero MCP continues to work normally.

Try a search

Ask your agent:

Search Refero styles for developer tool websites with product screenshots

or:

Search Refero screens for pricing page annual monthly toggle on web

or:

Search Refero flows for subscription cancellation with retention offer on web

How it works

Refero has three research layers:

Styles for visual direction: typography, color, layout, spacing, surfaces, components, imagery, and do/don’t rules.
Screens for concrete UI patterns: page structure, content hierarchy, copy, states, and components.
Flows for journey logic: step count, decisions, friction, recovery paths, and system responses.

Your agent -> MCP over HTTP -> Refero API -> styles, screens, and flows

All data stays server-side. Only the results your agent requested come back.

Limits

Refero Pro includes 8,000 MCP tool calls per month — enough for regular design research and build work. Need more? See Refero for Business for higher limits, custom integrations, and usage-based pricing. For questions, write to mike@refero.design.

Tools

Current tools for styles, screens, images, similar screens, and flows.

Examples

Simple workflows for combining the research layers.

Refero Skill

Install a research-first design methodology into your agent.

MCP Server

Refero Skill

Figma Plugin

Help

Getting Started

Give your AI agent design taste

What you need

Connect your tool

Try a search

How it works

Limits

Next

Tools

Examples

Refero Skill

​Give your AI agent design taste

​What you need

​Connect your tool

​Try a search

​How it works

​Limits

​Next

Tools

Examples

Refero Skill

Give your AI agent design taste

What you need

Connect your tool

Try a search

How it works

Limits

Next