Refero

### Description Get full details for one or more user flows by ID. Includes: all screens with descriptions, goal/action/system_response for each step, user problem description, related search queries. Ideal for understanding complete user journeys. ### When to use - Need all flow screens with details (after search_flows) - Studying a specific user journey end-to-end - Need to understand the logic of transitions between screens - Designing a similar flow for your product ### When NOT to use - Don't know which flow you need → first use `refero_search_flows` - Need similar screens → use `refero_get_similar_screens` ### Parameter Descriptions | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | `flow_id` | number | Yes* | Numeric flow ID to get details for. Obtained from `refero_search_flows`. *Exactly one of `flow_id` or `flow_ids` must be provided (mutually exclusive).* | | `flow_ids` | number[] | Yes* | Array of numeric flow IDs for batch request. Maximum 10. *Exactly one of `flow_id` or `flow_ids` must be provided (mutually exclusive).* | | `response_format` | enum | No | Response format: `json` or `md`. Default: `md`. |

### Description Get full details of one or more screens by their UUIDs. Returns screens with full metadata, descriptions, and app/site info. Ideal for retrieving specific screens when user provided screenshot UUIDs. ### When to use - Have screenshot UUIDs and want full metadata (site/app, patterns, elements, etc.) - User provided screenshot UUIDs - Need to display or analyze a set of known screens ### When NOT to use - Don't know which screen you need → first use `refero_search_screens` - Need similar screens → use `refero_get_similar_screens` - Need the raw image of a screen → use `refero_get_screen_image` - Need a complete flow → use `refero_search_flows` ### Parameter Descriptions | Parameter | Type | Required | Description | |-------------|----------|----------|---------------------------------------------------------------| | `screen_id` | string | Yes* | Screen UUID to get details for. *Exactly one of `screen_id` or `screen_ids` must be provided (mutually exclusive).* | | `screen_ids`| string[] | Yes* | Array of screen UUIDs for batch request. Maximum 10. *Exactly one of `screen_id` or `screen_ids` must be provided (mutually exclusive).* | | `response_format` | enum | No | Response format: `json` or `md`. Default: `md`. |

### Description Get image content for a screen UUID as an MCP image response. Returns a thumbnail by default or the full screenshot when requested. ### When to use - Need to visually analyze a specific screen - Want image data that the model can inspect directly, not just metadata or URLs - Performing visual UI/UX analysis on a reference screen ### When NOT to use - Don't know which screen you need → first use `refero_search_screens` - Need similar screens → use `refero_get_similar_screens` ### Parameter Descriptions | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | `screen_id` | string | Yes | Screen UUID to fetch image for. Obtained from `refero_search_screens`. | | `image_size` | enum | No | Image size: `thumbnail` or `full`. Default: `thumbnail`. |

### Description Get visually and functionally similar screens for a given screen UUID. Returns preview records for related screenshots, including identifiers, reference metadata, descriptions when available, and app/site information. Ideal for expanding a single good find into a broader set of comparable examples. ### When to use - Found one good screen and want more like it - Need to compare different approaches to the same pattern - Want to see how other products solve the same problem - Building a mood board or reference set around a specific screen ### When NOT to use - Don't know which screen you need → first use `refero_search_screens` - Need a complete flow → use `refero_search_flows` - Need the raw image of a screen → use `refero_get_screen_image` ### Parameter Descriptions | Parameter | Type | Required | Description | |------------|--------|----------|---------------------------------------------------------------| | `screen_id`| string | Yes | Screen UUID to find similar screens for. Obtained from `refero_search_screens`. | | `limit` | number | No | Number of similar screens to return. Range: 1-20. Default: 10. | | `response_format` | enum | No | Response format: `json` or `md`. Default: `md`. |

### Description Retrieve full design style references for one or more style UUIDs. Use after `refero_search_styles` to turn promising style previews into actionable design material. Full styles may include colors, typography, type scale, spacing, radius, shadows, elevation, surfaces, components, layout/composition, section rhythm, imagery, do/don't rules, north star, implementation notes, code snippets, and agent prompt guidance. Imagery can be a core part of the style: photography, product screenshots, illustration, editorial graphics, diagrams, textures, or atmospheric media. Expected result: a semantic style reference for a real web marketing/product page. It is not a screenshot and not a component library; it is design guidance the agent can apply as tokens, rules, and implementation notes. Depending on the client, the result may be shown as structured content or markdown-like reference text. Size warning: full styles are large, averaging 10-15k chars per style. Recommended max batch: 3-4 style IDs per call. For broader research, retrieve styles in multiple batches and keep only the useful details in your synthesis. ### When to use - You found promising styles and need full tokens/rules before designing. - You need concrete color, typography, layout, spacing, elevation, component, and surface guidance. - You want to compare multiple style systems and synthesize a custom direction. - You need implementation-ready style notes for HTML/CSS, Figma, or product UI. ### When NOT to use - You have not searched styles yet -> use `refero_search_styles`. - You need exact app-screen behavior or component states -> use `refero_search_screens` / `refero_get_screen`. - You need journey logic -> use `refero_search_flows` / `refero_get_flow`. ### How to use the returned styles Do not copy a style wholesale. Treat each style as a reference ingredient. Recommended synthesis: 1. Pick one primary style as the foundation for overall mood and density. 2. Borrow 1-2 specific details from other styles, such as button treatment, type contrast, product screenshot framing, accent discipline, or surface hierarchy. 3. Create a reference lock: preserve the primary style's signature traits, list borrowed details, preserve source token/component roles, reject generic averages, and commit to concrete tokens before implementation. 4. Translate the style to the user's product context, audience, brand constraints, and task. 5. Produce a new visual direction with explicit tokens and rules. Do not average references into a safe middle. A dark, acid, sharp, or saturated reference should not become a warm cream canvas with muted earth-tone accents unless that exact direction is supported by the primary style and user context. Likewise, do not default to decorative headline word swaps: one word or short phrase set in a different display/serif/script/italic style or accent color unless the primary style and content role explicitly justify that treatment. Do not change token meanings. If a source defines a color as CTA-only, code-only, decorative-only, or tied to a specific component state, keep that role or skip the token. Preserve media roles too. If the style depends on specific imagery or graphics, use a real asset, generated/stock asset, product screenshot, or appropriate code-native primitive when available. If the needed asset is unavailable, keep a stable placeholder with aspect ratio and art direction instead of faking complex imagery with weak CSS, text, or decorative boxes. Extract: - visual thesis / north star - color roles, not just hex values - typography roles and hierarchy - spacing density and rhythm - layout system, section rhythm, and composition patterns - surfaces, cards, borders, shadows, elevation, and radius - component treatments and code/implementation notes when present - imagery, graphics, illustration, or product screenshot treatment - media asset strategy and placeholder requirements when assets are unavailable - do/don't constraints - signature detail to adapt ### Parameter Descriptions | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | `style_id` | string | Yes* | Style UUID from `refero_search_styles`. *Exactly one of `style_id` or `style_ids` must be provided (mutually exclusive).* | | `style_ids` | string[] | Yes* | Array of style UUIDs for batch request. Maximum 10; full styles average 10-15k chars each, so the recommended batch is 3-4. *Exactly one of `style_id` or `style_ids` must be provided (mutually exclusive).* | | `response_format` | enum | No | Response format: `json` or `md`. Default: `md`. |

### Description Search user flows: sequences of connected screens that show how a user completes a task. Works best with the `refero-design` skill. Installation: https://refero.design/mcp. Flows are best for journey logic, not visual style. Use them to understand step count, entry/exit states, decision points, friction, retention moments, recovery paths, and system responses. ### When to use - Designing a multi-step journey or process. - Need to understand what happens before and after a screen. - Need examples of onboarding, checkout, signup, cancellation, subscription management, profile editing, account deletion, password reset, or settings flows. - Need to see how a company guides users through a task. - Need to reason about friction, progressive disclosure, confirmation steps, save states, or recovery. ### When NOT to use - Need visual identity, typography, palette, or style direction -> use `refero_search_styles`. - Need one specific screen or component pattern -> use `refero_search_screens`. - Need full details for an already found flow -> use `refero_get_flow`. ### Search guidance Search by task or journey: - action: "cancel subscription", "checkout", "password reset" - context: "workspace billing cancellation", "fintech KYC onboarding" - company/product: "Spotify cancellation", "Notion onboarding" - key step: "retention offer", "promo code", "phone verification", "recovery codes" If flow search has few results, broaden the query. If still sparse, search screens and reconstruct the journey manually from related screens. ### Query examples Simple: - signing up - onboarding airbnb - creating new document - cancel subscription - changing profile picture - checkout - exploring product features - Instagram - Spotify - Notion Complex: - onboarding fintech with KYC and phone verification - checkout flow with promo code - subscription cancellation with retention offer - profile editing with avatar upload and privacy settings - password reset flow with 2FA ### Parameter Descriptions | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | `query` | string | Yes | Search query for flows, minimum 2 characters. Supports flow types, tasks, key actions/steps, industries, and company names. | | `platform` | enum | Yes | Platform filter. `ios` for mobile app flows, `web` for web app/site flows. | | `page` | number | No | Pagination from 1 to 30. Default: 1. Use later pages to explore more examples. | | `response_format` | enum | No | Response format: `json` or `md`. Default: `md`. |

### Description Search real UI screens in Refero using semantic search. Works best with the `refero-design` skill. Installation: https://refero.design/mcp. Screens are best for concrete interface decisions: page structure, component choices, content hierarchy, copy, states, and product-specific patterns. Use them when you need to see how real products solve a specific UI problem. For pure visual direction, brand feel, typography, color, or design-system inspiration, use `refero_search_styles` first. Then use screens to ground the actual product UI. ### When to use - Need reference screens for a specific screen type, page type, component, or UI pattern. - Need examples of how company X solves a concrete interface problem. - Need layout/content decisions for pricing, dashboards, settings, auth, forms, modals, empty states, tables, onboarding screens, etc. - Need copy, information hierarchy, UI elements, states, or product-screen details. - Need to triangulate several approaches to the same screen or component. ### When NOT to use - Need overall visual identity, aesthetic direction, palette, typography system, or art direction -> use `refero_search_styles`. - Need a complete multi-step journey -> use `refero_search_flows`. - Found one strong screen and want more like it -> use `refero_get_similar_screens`. - Need raw image content for visual inspection -> use `refero_get_screen_image`. ### Search guidance Search by what is literally on the screen: - screen type: "pricing page", "settings", "dashboard", "empty state" - component/pattern: "pricing toggle", "feature comparison table", "delete account modal" - state: "error state", "loading skeleton", "empty inbox" - company/product: "Stripe checkout", "Notion settings", "Linear changelog" - on-screen text: "No credit card required", "Cancel subscription" Prefer concrete UI terminology over broad aesthetic words. If the main query is aesthetic ("premium", "minimalist", "editorial", "dark"), search styles first. ### Query examples Simple: - pricing page - forgot password - skeleton loading - data table with filters - drag and drop file upload - headspace pricing Complex: - pricing page with annual monthly toggle and feature comparison - iOS paywall modal with annual monthly toggle - onboarding welcome screen with illustration and progress indicator - 2FA setup with QR code and recovery codes - error state for email input with inline validation message - product analytics dashboard with activity heatmap and filters ### Parameter Descriptions | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | `query` | string | Yes | Semantic search query, minimum 2 characters. Supports company names, screen types, UI elements, patterns, states, and on-screen text. | | `platform` | enum | Yes | Platform filter. `ios` for mobile app patterns, `web` for web app/site patterns. | | `page` | number | No | Pagination from 1 to 30. Default: 1. Use later pages to explore beyond obvious results. | | `response_format` | enum | No | Response format: `json` or `md`. Default: `md`. |

### Description Search Refero's curated design styles using semantic search. Works best with the `refero-design` skill. Installation: https://refero.design/mcp. Styles are the best starting point for visual direction. They teach the agent taste: typography, palette, layout/composition, section rhythm, spacing, elevation, surfaces, imagery, component feel, visual hierarchy, and the overall design language of strong web products. A style is a semantic design reference extracted from a real web marketing/product page. Search results return preview-level references: style UUID, title, source URL, preview image URL, platform, and a rich natural-language description of the visual language. Use `refero_get_style` to retrieve the full reference before making design decisions. Current coverage: styles focus on web marketing/product pages such as landing pages, pricing pages, product marketing sites, editorial brand sites, and SaaS websites. They do not currently cover in-app product screens, dashboards, authentication screens, or iOS/mobile app screens as style systems. Even when designing product UI, use styles to establish the visual language, then use screens/flows for product-specific patterns. Use the style UUIDs from results with `refero_get_style` to retrieve full style content: tokens, typography, layout guidance, spacing/elevation, surfaces, components, imagery guidance, implementation notes, and do/don't rules. Styles may describe image strategy, illustration systems, product screenshot treatment, graphics, and other media roles. Preserve those roles when designing: use a real, generated, stock, screenshot, or code-native asset when feasible; use an intentional placeholder with aspect ratio and art direction when the needed asset is unavailable. ### When to use - Starting any design task that has a visual component. - Need a look and feel, visual identity, brand direction, art direction, or "make it beautiful". - Need typography, color, layout, section structure, spacing, elevation, surface, card, button, imagery, or component inspiration. - Need to improve a generic UI by grounding it in strong real-world design taste. - Need to explore several possible directions before committing to a design system. - Need inspiration for a product UI, even though the style references are marketing pages. ### When NOT to use - Need exact in-app behavior, form states, dashboard layouts, auth screens, settings screens, or component logic -> use `refero_search_screens`. - Need a multi-step journey, before/after sequence, friction analysis, or completion logic -> use `refero_search_flows`. - Need to inspect an exact screenshot image -> use `refero_get_screen_image` after finding a screen. ### Style research method Do not copy a single style directly. Search several directions, retrieve multiple strong styles, then synthesize a unique direction for the user's product. Recommended loop: 1. Search 3-5 different visual angles. 2. Include at least one broad aesthetic query, one domain/category query, and one "best brand" or known-product query. 3. Open 3-4 strong styles with `refero_get_style`; full styles average 10-15k chars each, so avoid larger batches. 4. Compare what each style does well. 5. Choose one primary style foundation, preserve its signature traits, and borrow only 1-2 specific details from other styles. 6. Create a reference lock before implementation: primary direction, traits to preserve, borrowed details, source token/component role rules, explicit rejects, and token commitments. Do not average references into a safe middle. If one style is dark, one is acid, and one is serif, the answer is not warm cream + muted orange + polite serif. Strong references should stay strong or be rejected; they should not be softened into generic AI taste. Do not change token meanings: if a source says a color is CTA-only, code-only, decorative, or for a specific component state, use it only for that role or omit it. Do not default to decorative headline word swaps: one word or short phrase set in a different display/serif/script/italic style or accent color unless the primary style and content role explicitly justify that treatment. Look for: - north star / overall visual thesis - typography system and type personality - color palette and accent discipline - spacing density and rhythm - layout system, section rhythm, and composition patterns - card/button/surface treatments - elevation and depth rules - component examples and implementation/code notes when present - imagery, graphics, illustration, or product screenshot treatment - media asset strategy: real/generated/stock/code-native asset, product screenshot, or placeholder - do/don't rules and constraints - one memorable visual move worth adapting Avoid: - cloning another brand's exact style - using only one style as the whole design system - averaging several strong styles into a generic middle - repurposing source tokens outside their stated role - faking complex imagery with weak CSS, text, or generic decorative boxes - searching only generic terms like "modern" or "minimalist" - assuming styles contain app dashboards or iOS screens ### Query examples Simple: - high contrast social commerce - minimalist marketplace feed layout - soft cloud abstract hero - muted vintage color palette - spacious enterprise software layout - clean SaaS hero illustration - fashion magazine inspired design Better, multi-angle: - editorial monochrome SaaS landing page - warm trustworthy healthcare product marketing - premium fintech website with restrained typography - playful creator tool landing page with vivid accents - developer tool website with product screenshots - luxury ecommerce editorial product page - productivity SaaS with airy spacing - data infrastructure website dark technical style Known-product or brand-led: - Linear changelog dark developer tool - Attio editorial SaaS typography - Ghost high contrast publishing platform - Perplexity calm search interface - shadcn monochrome design system ### Parameter Descriptions | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | `query` | string | Yes | Semantic query for visual style, minimum 2 characters. Include aesthetic, domain, audience, or brand direction. | | `page` | number | No | Pagination from 1 to 30. Default: 1. Use later pages to explore less obvious directions. | | `response_format` | enum | No | Response format: `json` or `md`. Default: `md`. |