Refero MCP

Product Introduction

1. Definition: Refero MCP (Model Component Protocol) is an AI-augmented design API that connects generative AI agents to a curated database of 125,000+ real-world product interfaces and 8,000+ user flows. It operates in the technical category of AI design augmentation tools.
2. Core Value Proposition: It eliminates the "generic AI design" problem by providing agents with contextual design intelligence from shipped products, ensuring outputs look intentionally designed rather than algorithmically generated.

Main Features

1. Curated Design Library:
   • How it works: Aggregates 63,000+ web and 61,000+ iOS screens with metadata (UX patterns, layouts, descriptions) via automated scraping and manual curation.
   • Technology: Uses semantic search algorithms and image recognition (e.g., "Search by Image" functionality) for pattern matching.
2. Structured Metadata Engine:
   • How it works: Tags each screen with machine-readable data (UI components, interaction patterns, hierarchy) for AI analysis. Agents parse this metadata before generating code.
   • Technology: Automated pattern extraction via computer vision and NLP classification.
3. Refero Skill Methodology:
   • How it works: Installs via npx to enforce research-first design workflows. Agents study references, extract patterns, and apply craft rules (typography, spacing) before coding.
   • Technology: GitHub-hosted npm package integrating with AI agent frameworks like Claude and Codex.

Problems Solved

1. Pain Point: AI-generated interfaces lack real-world context, resulting in generic, low-conversion layouts. Refero MCP solves this with data-driven design validation.
2. Target Audience:
   • AI tool developers building design assistants
   • Product teams using AI website builders
   • UX researchers automating competitive analysis
3. Use Cases:
   • Generating industry-specific onboarding flows (e.g., fintech signup sequences)
   • Replicating proven error-handling patterns from apps like Linear
   • Optimizing e-commerce paywalls using conversion-focused references

Unique Advantages

1. Differentiation: Unlike generic UI libraries (e.g., Bootstrap), Refero MCP provides shipped product examples with behavioral context, not theoretical components. Competitors lack structured metadata for AI consumption.
2. Key Innovation: Automated design research at scale – agents analyze 100+ screens in seconds, comparing patterns (e.g., "empty state treatments in SaaS apps") impossible for humans to manually benchmark.

Frequently Asked Questions (FAQ)

1. How does Refero MCP improve AI design quality?
   Refero MCP trains AI agents using real product interfaces and annotated UX patterns, replacing generic templates with context-aware layouts proven in production environments.
2. What AI tools integrate with Refero MCP?
   It works with any MCP-compatible framework including Claude, CodeCursor, and Antigravity via OAuth API authentication.
3. Can Refero MCP analyze mobile app designs?
   Yes, its database includes 61,000+ iOS screens with flow-specific metadata for mobile UX patterns like permission dialogs and gesture navigation.
4. How current is the design library data?
   The library updates weekly, with the latest additions sourced 5 days ago from live web and mobile products.
5. Does Refero replace human designers?
   No, it augments output quality for AI-generated interfaces by providing data-driven design references, reducing manual revision cycles for developers.