Agent access to design references
Connects an AI agent to Refero’s curated library of real product interfaces and user flows so the agent can research before producing output.
Overview
Refero MCP for AI agents is a design-research tool that connects an MCP-compatible agent to Refero’s library of real product interfaces and user flows. It is positioned to help agents study existing layouts and interaction patterns before generating a design, so the result is grounded in examples rather than generic assumptions.
The underlying Refero platform focuses on web and iOS UI/UX references, with tens of thousands of screens and user flows organized for search and comparison. The MCP offering extends that library to agent workflows, while the site also shows related products such as a Refero Skill and a Figma plugin for browsing references inside Figma.
Features
Large screen and flow library
Provides a large searchable collection of web and iOS screens, including onboarding, paywalls, empty states, settings, permissions, and other product states.
Structured screen metadata
Includes structured metadata such as descriptions, UX patterns, UI patterns, and layouts so the agent can evaluate references before viewing the image.
Fast pattern review
Supports design research across hundreds of screens and flows in seconds, which is intended to reduce manual browsing during agent tasks.
Search and filtering workflow
Lets users search by tags, text content, and site name, and switch between web and iOS results with a platform toggle.
Refero Skill for design methodology
Includes a Refero Skill that installs into an agent as a methodology for research-first design work, with craft rules for typography, color, spacing, and motion.
Use Cases
Research before building UI
An agent can look up related product screens and user flows before generating an interface, which is useful when the task requires a specific layout or interaction pattern.
Pattern research for product flows
Teams can search for examples of onboarding, billing, account setup, and other common app flows to compare how real products handle those states.
Reference lookup inside agent workflows
A designer working with an MCP-capable coding tool can ask the agent to search Refero for relevant references instead of manually switching between browser tabs and screenshots.
Cross-platform design inspiration
Because the library includes both web and iOS examples, it can support cross-platform inspiration when a product needs consistent design language across surfaces.
Research-first design methodology
The Refero Skill can be used when a team wants an agent to research references first and then apply craft rules around typography, color, spacing, and motion.
Pros and Cons
Pros
- Connects agents to a large library of real web and iOS product screens and flows.
- Adds structured metadata that can support more targeted design research than image-only browsing.
- Works with MCP-capable tools and shows a simple authorization flow after the first sign-in.
- Supported by broader Refero search features such as tags, text search, site search, and web/iOS switching.
- Backed by a pricing page that indicates MCP access is included in the Pro plan.
Cons
- The source does not provide a full step-by-step install guide beyond a one-line configuration and browser sign-in flow.
- Compatibility is described broadly as any tool that supports MCP, but the page does not list deeper integration details or platform requirements.
- Some product areas, such as team usage and exact plan boundaries, are only partially documented on the source pages.
FAQ
How do I access Refero MCP?
Refero MCP is included with a Refero Pro subscription. The first time you use it, you sign in through a browser window and then the connection becomes automatic for later use.
What tools does Refero MCP work with?
The page says Refero MCP works with any tool that supports MCP, and it specifically shows Claude Code, Cursor, Antigravity, Lovable, Codex, Manus, and other compatible tools.
How does setup work?
The install flow shown on the page is a one-line configuration followed by browser-based sign-in and authorization. After that, your agent can search Refero screens and user flows during tasks.
When is Refero MCP useful?
Refero MCP is aimed at AI agents that need design references, especially when they are generating interfaces, researching patterns, or choosing layouts for product work.
Are there any limitations or setup details to know?
The source does not describe every compatibility detail or the full installation steps. It does show that the product is built around MCP support and browser-based authorization.
Quick Facts
- Category
- Developer Tool
- Primary use
- AI-agent design research
- Product type
- MCP-connected reference library
- Platform scope
- Web and iOS design references
- Access
- Included with Refero Pro
- Source domain
- refero.design
Refero MCP 替代品
Napkin AI
Napkin AI 將文字轉成可編輯視覺圖，適用於簡報、文件與可分享內容；支援以文字優先生成，並可協作後匯出為 PPT、PNG、SVG 或 PDF。
Pixso
Pixso 是一款新一代的 AI 原生 UI 設計工具，允許用戶一鍵生成設計草稿和代碼，是 Figma 的國內替代品。
创客贴 AI
創客貼 AI 是一個 AI 智能設計平台，包含了多種 AI 設計工具，幫助用戶降低設計難度，提升設計效率。
Make Real
Make Real is a Next.js app that turns hand-drawn wireframes into working HTML prototypes using the tldraw SDK and AI models. It helps users sketch on a canvas, generate code, and review the result in an embedded preview.
Frames
Frames 讓你快速製作發佈海報與社群行銷圖，提供高級裝置框與模板（Instagram、Twitter、Product Hunt），可免費開始。
GPTIMG2 AI
GPTIMG2 AI is a web-based image generator built around OpenAI’s GPT Image 2 model. It supports prompt-driven generation, reference-based edits, readable text, and higher-resolution outputs for product visuals, posters, UI mockups, ads, and similar production assets.