Skip to main content
Refero MCP gives your agent 4 tools. Two for screens, two for flows. Search first, then get details.

​
refero_search_screens

Semantic search across Refero’s full screen library. Describe what you’re looking for in plain language. Parameters
ParameterTypeRequiredDescription
querystringyesWhat you’re looking for. Supports: company names (“Notion”), screen types (“pricing page”), UI patterns (“dark mode toggle”), styles (“minimalist”), on-screen text (“Get started”). Combine freely.
platform"web" | "ios" | "all"noDefault: "all"
limitnumbernoResults per page, 1-50. Default: 20
offsetnumbernoFor pagination. Use next_offset from response. Default: 0
Example queries
  • pricing page with toggle
  • Notion settings
  • dark mode dashboard with sidebar
  • iOS paywall with social proof
  • onboarding welcome screen with illustration
  • 2FA setup with QR code and recovery codes
Response 
{
  "pagination": {
    "total_count": 2804,
    "next_offset": 20
  },
  "records": [
    {
      "screen_id": 87051,
      "platform": "web",
      "site_name": "Framer",
      "site_categories": ["Design & Photo Editing"],
      "description": "A pricing page with plan comparison cards...",
      "page_types": ["Pricing & Plans"],
      "ux_patterns": ["Plan Comparison"],
      "ui_elements": ["Button", "Toggle"],
      "fonts": ["Inter"],
      "thumbnail_url": "https://images.refero.design/...",
      "url": "https://refero.design/s/..."
    }
  ]
}
Descriptions are detailed — often 200-400 words covering layout, colors, typography, and interaction patterns. Great for giving your agent design context.

​
refero_get_screen

Get full details for a specific screen by ID. Optionally include a screenshot and similar screens. Parameters
ParameterTypeRequiredDescription
screen_idnumberyes*Single screen ID
screen_idsnumber[]yes*Array of IDs for batch requests. One of screen_id or screen_ids required.
image_size"none" | "thumbnail" | "full"no"none" = text only. "thumbnail" ~100KB. "full" ~500KB-2MB. Default: "none"
include_similarbooleannoInclude similar screens. Default: true
similar_limitnumbernoHow many similar screens. 1-20. Default: 4
Response 
{
  "screen_id": 87051,
  "site": {
    "name": "Framer",
    "categories": ["Design & Photo Editing"],
    "tagline": "The internet is your canvas"
  },
  "platform": "web",
  "page_types": ["Pricing & Plans"],
  "ux_patterns": ["Plan Comparison"],
  "ui_elements": ["Button", "Toggle"],
  "fonts": ["Inter"],
  "content": {
    "description": "Detailed prose about the screen's design...",
    "layout": "How elements are arranged...",
    "functions": "What users can do on this screen..."
  },
  "image": null,
  "similar_screens": [
    { "screen_id": 92341, "site_name": "Linear", "description": "..." }
  ],
  "url": "https://refero.design/s/...",
  "thumbnail_url": "https://images.refero.design/..."
}
Start with image_size: "none" to save tokens. Request thumbnails only for screens you want to visually inspect.
Search results use flat fields (site_name). Detail results use nested objects (site.name, content.description).

​
refero_search_flows

Search Refero’s library of user flows — multi-step journeys like onboarding, checkout, or account settings. Parameters
ParameterTypeRequiredDescription
querystringyesFlow types (“onboarding”), companies (“Revolut”), actions (“password reset”), combinations (“checkout with promo code”)
platform"web" | "ios" | "all"noDefault: "all"
limitnumberno1-50. Default: 10
offsetnumbernoDefault: 0
Response 
{
  "pagination": { "total_count": 475 },
  "records": [
    {
      "flow_id": 774,
      "platform": "web",
      "flow_name": "Start onboarding with optional pre-boarding email",
      "screens_count": 4,
      "description": "A user starts an onboarding process for a new hire...",
      "problem": "User needs to initiate onboarding for a new employee...",
      "steps_preview": [
        { "name": "Onboarding draft overview", "thumbnail_url": "https://..." }
      ],
      "site_name": "Aboard",
      "site_categories": ["Collaboration Tools"]
    }
  ]
}

​
refero_get_flow

Get the complete flow — every screen, every step, with goals, actions, and system responses. Parameters
ParameterTypeRequiredDescription
flow_idnumberyes*Single flow ID
flow_idsnumber[]yes*Array for batch. One required.
Response 
{
  "flow_id": 774,
  "app": {
    "name": "Aboard",
    "categories": ["Collaboration Tools"],
    "tagline": "Joyful HR"
  },
  "flow_name": "Start onboarding with optional pre-boarding email",
  "screens_count": 4,
  "description": "...",
  "problem": "User needs to...",
  "steps": [
    {
      "step": 1,
      "screen_id": 95102,
      "screen_name": "Onboarding draft overview",
      "goal": "Review draft onboarding contents",
      "action": "User inspects sections and tasks...",
      "system_response": "Page shows the onboarding structure...",
      "page_types": [],
      "ux_patterns": ["Add & Create", "Task"],
      "ui_elements": ["Accordion", "List", "Button"],
      "fonts": ["Inter"],
      "content": {
        "description": "...",
        "layout": "...",
        "functions": "..."
      },
      "thumbnail_url": "https://..."
    }
  ],
  "related_queries": [
    "onboarding modal dialog",
    "pre-boarding email template",
    "onboarding checklist"
  ]
}
Each step includes full screen metadata. Use related_queries to discover related flows and screens.
refero_get_flow uses "app" as the top-level key for product info. This is different from refero_get_screen, which uses "site".

​
Next

Data Model

Full reference for every field in screen and flow responses.

Examples

Real workflows: competitive analysis, page redesign, flow research.

Refero Skill

Automate the research-to-design pipeline in Claude Code.