Skip to main content
Refero MCP returns structured design research data. The exact fields can grow over time, but these are the core shapes to expect.

​
Styles

A style is a semantic design reference extracted from a real web marketing or product page. Use styles for visual direction before choosing screen-level patterns. Search results include:
  • uuid — style UUID used with refero_get_style
  • title — source name, such as Depot or Webflow
  • url — source website URL
  • platform — usually desktop
  • preview_url — preview image for the style
  • description — rich summary of the visual language
Full style details may include:
  • northStar — short visual thesis
  • theme — light, dark, or mixed direction
  • colors — named colors with roles and groups
  • typography and typeScale — font families, roles, sizes, line-height, tracking
  • spacing — density, base unit, radius, gaps, padding
  • layout — composition and section rhythm
  • elevation and elevationPhilosophy — how depth is created
  • components — component treatments and sometimes HTML examples
  • imagery — product screenshots, photography, illustration, graphics, or placeholder guidance
  • dos and donts — rules to preserve the style’s character
  • customSections — implementation notes, prompt guidance, or extra style-specific material
Styles are guidance, not templates. Preserve token roles and media roles instead of copying the source wholesale.

​
Screens

A screen is a single page or view from a real product. Screens are best for concrete UI decisions. Search results and detail results can include:
  • uuid — screen UUID used with refero_get_screen, refero_get_similar_screens, and refero_get_screen_image
  • platform — web or ios
  • thumbnail_url — small screenshot preview
  • preview_url — larger preview URL, usually in detail results
  • page_url — original page URL when available
  • refero_url — link to the screen on Refero
  • site — product metadata object
  • page_types — page categories, such as Dashboard, Settings, or Paywall & Subscription
  • ux_patterns — patterns used, such as Billing & Plans, Empty State, or Dark Mode
  • ui_elements — visible UI elements, such as Button, Table, Modal, or Switch & Toggle
  • fonts — detected or inferred fonts, often present in detail results
  • hex_colors and colors — dominant colors, when available
  • content.description — prose description of visual design and content
  • content.layout — layout structure, when available
  • content.functions — user actions and product behavior, when available
  • flows — related flow references if the screen belongs to a captured flow
site usually looks like: 
{
  "id": 400,
  "domain": "lu.ma",
  "name": "Luma",
  "description": "Luma is all you need to host a memorable event.",
  "refero_url": "https://refero.design/websites/400",
  "categories": ["Social Networking", "Entertainment"]
}

​
Images

refero_get_screen returns text metadata. To inspect the actual screenshot, use refero_get_screen_image with the screen UUID. Image sizes:
  • thumbnail — useful for quick visual inspection
  • full — useful when typography, fine spacing, or small UI details matter

​
Similar screens

refero_get_similar_screens returns screens that are visually or functionally related to a screen UUID. Use it to expand from one strong reference into comparable examples. The records use the same screen shape as search results: uuid, site, thumbnail_url, page_types, ux_patterns, ui_elements, content.description, and related fields.

​
Flows

A flow is a multi-step user journey, such as onboarding, checkout, cancellation, account deletion, or password reset. Flow search results include:
  • id — numeric flow ID used with refero_get_flow
  • platform — web or ios
  • name — flow name
  • screens_count — number of captured steps
  • refero_url — link to the flow on Refero
  • description — happy path, entry point, exit point, and assumptions
  • problem — user goal and system responsibilities
  • steps — compact list of step names
  • site — product metadata object
Full flow details include:
  • steps — array of detailed step objects
  • related_queries — suggested searches for adjacent research
A detailed step can include: 
{
  "name": "Account subscription overview",
  "screen_id": "76822c91-6db9-42f4-a1a4-b8f30f2a7ca7",
  "refero_url": "https://refero.design/pages/76822c91-...",
  "thumbnail_url": "https://images.refero.design/screenshots/...",
  "goal": "See current subscription status...",
  "action": "User reviews the subscription card...",
  "system_response": "Navigates to the subscription detail view...",
  "page_types": ["Settings"],
  "ux_patterns": ["Billing & Plans"],
  "ui_elements": ["Button", "Tabs", "Navigation Bar"],
  "fonts": ["Franklin Gothic", "Georgia"],
  "content": {
    "description": "Detailed screen description...",
    "layout": "Layout details...",
    "functions": "Available actions..."
  }
}

​
Search vs detail

Search tools return compact records for scanning. Detail tools return deeper metadata and longer descriptions.
LayerSearch toolDetail tool
Stylesrefero_search_stylesrefero_get_style
Screensrefero_search_screensrefero_get_screen
Flowsrefero_search_flowsrefero_get_flow
For screenshots and adjacent examples:
  • use refero_get_screen_image for raw image content
  • use refero_get_similar_screens for comparable screens

​
Platform notes

  • Screen and flow search use platform: "web" or platform: "ios".
  • Style search does not take a platform parameter. Style records usually describe desktop web pages.
  • Screens use UUIDs. Flows use numeric IDs.

​
Next

Tools

Current tools, parameters, and examples.

Examples

Simple workflows showing how to combine styles, screens, and flows.