---
description: Ground UI work in real shipped screens from the Refcat MCP server. Use for any UI decision or implementation instead of designing from memory.
alwaysApply: false
---


# Refcat: real screens for UI work

Refcat is a catalog of screens, flows and emails from shipped apps, connected as the `refcat` MCP server. Before you design or build a screen, look at how real products did it.

## Flow

1. `list_facets` to get the real filter values (`flowIntents`, `uiComponents`, `pageType`, `platform`). Do not guess filter values.
2. Find candidates:
   - `search_screens` for a screen ("paywall annual plan first", "otp verification", or an app name like "Spotify").
   - `search_flows` or `get_app_flows` for a whole journey ("Nubank onboarding").
   - `search_screens_by_image` with a screenshot of the user's own screen, to compare it with real ones.
3. `get_screen` on the best 1-3. It returns the screen as an image plus `elements` (OCR text and hotspots with normalized boxes `[x0, y0, x1, y1]`, top to bottom).
   - Use `elements` for hierarchy, order, copy and positions.
   - Use the image for color, typography and spacing.
4. Implement it in the project's stack, with the project's own theme and components. Do not copy another brand's colors or logo.
5. Cite the source in a code comment: app, flow and capture date from `get_screen`.

## Emails

`search_emails`, then `get_email_html` when `hasHtml` is true. Adapt the real HTML (tables, font fallbacks, dark mode) to the user's brand instead of writing email HTML from scratch.

## Design system

`export_design_system({ flowId })` returns tokens, typography, components and states in Markdown, to save as `DESIGN.md`. It uses one of the user's monthly exports: ask first.

## Rules

- Never invent a screen and present it as a reference. If nothing fits, say so.
- `generate_screen` and `export_design_system` cost money and quota: only after the user agrees.
- Images cost context: `get_screen` with `image: "small"` (default) is enough for most work; use `"full"` when implementing pixel details. `search_screens` returns images only with `includeImages: true`.

## Example prompts

- "Build an annual-plan paywall in React Native in the style of fitness apps."
- "Compare my checkout with real apps and list what to change."
- "Write our welcome email based on real ones."