CatchUI

Working · 1.6 s

com.catchui/ui-patternsv1.1.0 Domain verified

What is this UI element called? 50 curated UI patterns, names per platform, build prompts. EN/中文.

Developer Tools

Website Registry entry

Maintain this server? Claim it

Try it

Call this server's tools from your browser. Nothing to install.

https://catchui.com/api/mcp

Requests go through mcptry because browsers can't call most MCP servers directly. Header values are sent to the server for that request only and are never stored or logged.

Tool list from our last check. Connect live to refresh it.

compare_ui_patterns Read-only

Explains how 2 to 4 easily confused UI patterns differ — e.g. toast vs snackbar, modal vs popover vs bottom sheet, tabs vs segmented control, Dynamic Island vs notch. Returns each definition side by side plus the catalog's written comparison when one exists. Accepts ids, names or short descriptions.

patternsarray, required

2 to 4 CatchUI pattern ids, names or short descriptions, e.g. ["modal", "popover"] or ["tabs", "segmented control"].

Tools (6)

compare_ui_patterns

read-only

Argument	Type	Description
patterns*	array	2 to 4 CatchUI pattern ids, names or short descriptions, e.g. ["modal", "popover"] or ["tabs", "segmented control"].

Input schema (JSON)

{
  "type": "object",
  "required": [
    "patterns"
  ],
  "properties": {
    "patterns": {
      "type": "array",
      "items": {
        "type": "string",
        "minLength": 1
      },
      "maxItems": 4,
      "minItems": 2,
      "description": "2 to 4 CatchUI pattern ids, names or short descriptions, e.g. [\"modal\", \"popover\"] or [\"tabs\", \"segmented control\"]."
    }
  },
  "additionalProperties": false
}

get_implementation_prompt

Returns CatchUI's ready-to-use implementation instructions for 1 to 6 UI patterns — what to build, where it sits, its states and the accessibility it needs — in English or Chinese, for pasting into an AI coding tool such as Claude Code or Cursor. Accepts ids, names or short descriptions.

read-only

Argument	Type	Description
language	string	Language of the prompts: "en" (English) or "zh" (简体中文).
patterns*	array	1 to 6 CatchUI pattern ids, names or short descriptions, e.g. ["tabs"] or ["search field", "filter chips", "pagination"].

Input schema (JSON)

{
  "type": "object",
  "required": [
    "patterns"
  ],
  "properties": {
    "language": {
      "enum": [
        "en",
        "zh"
      ],
      "type": "string",
      "default": "en",
      "description": "Language of the prompts: \"en\" (English) or \"zh\" (简体中文)."
    },
    "patterns": {
      "type": "array",
      "items": {
        "type": "string",
        "minLength": 1
      },
      "maxItems": 6,
      "minItems": 1,
      "description": "1 to 6 CatchUI pattern ids, names or short descriptions, e.g. [\"tabs\"] or [\"search field\", \"filter chips\", \"pagination\"]."
    }
  },
  "additionalProperties": false
}

get_ui_component_names

Returns what a UI pattern is called in code on each platform — SwiftUI, UIKit, Jetpack Compose, Android Views, Flutter, HTML/ARIA and, for system UI, AppKit, Win32 and Electron — or works backwards from a framework component (e.g. "UISegmentedControl", "ModalBottomSheet", "role=tablist") to the pattern and its equivalents elsewhere. Optionally filtered to one platform. Platforms without a native component say so instead of naming one.

read-only

Argument	Type	Description
query*	string	A pattern id, name or description ("segmented control"), or a framework component name ("UISegmentedControl").
platform	string	Optional platform filter, matched against the platform label: e.g. "SwiftUI", "UIKit", "Compose", "Android", "Flutter", "Web".

Input schema (JSON)

{
  "type": "object",
  "required": [
    "query"
  ],
  "properties": {
    "query": {
      "type": "string",
      "description": "A pattern id, name or description (\"segmented control\"), or a framework component name (\"UISegmentedControl\")."
    },
    "platform": {
      "type": "string",
      "description": "Optional platform filter, matched against the platform label: e.g. \"SwiftUI\", \"UIKit\", \"Compose\", \"Android\", \"Flutter\", \"Web\"."
    }
  },
  "additionalProperties": false
}

get_ui_pattern

Returns the full CatchUI entry for one UI pattern by id (e.g. "tabbar", "bottomsheet"): definition in English and Chinese, pronunciation, aliases, how people describe it, component names per platform, an implementation prompt, real search questions with answers, related patterns and the catalog URL. Takes an id; search_ui_patterns finds ids from descriptions.

read-only

Argument	Type	Description
id*	string	CatchUI pattern id, e.g. "tabbar". list_ui_patterns lists every id.

Input schema (JSON)

{
  "type": "object",
  "required": [
    "id"
  ],
  "properties": {
    "id": {
      "type": "string",
      "description": "CatchUI pattern id, e.g. \"tabbar\". list_ui_patterns lists every id."
    }
  },
  "additionalProperties": false
}

list_ui_patterns

Lists the 61 UI patterns in CatchUI's curated catalog — ids, English and Chinese names and one-line definitions — grouped by family, optionally filtered to one family (NAV, INPUT, ACTION, OVERLAY, FEEDBACK, CONTENT, DATA, SYSTEM).

read-only

Argument	Type	Description
family	string	Only list patterns in this family.

Input schema (JSON)

{
  "type": "object",
  "properties": {
    "family": {
      "enum": [
        "NAV",
        "INPUT",
        "ACTION",
        "OVERLAY",
        "FEEDBACK",
        "CONTENT",
        "DATA",
        "SYSTEM"
      ],
      "type": "string",
      "description": "Only list patterns in this family."
    }
  },
  "additionalProperties": false
}

search_ui_patterns

Finds the conventional name of a UI element or design pattern from a plain-language description, question or term — e.g. "the bar at the bottom of an app", "three horizontal lines icon", "the black bar at the top of iPhone", "汉堡菜单". Searches CatchUI's curated catalog of 61 patterns and returns names in English and Chinese, definitions, the best-matching Q&A and each entry's catalog URL. Use when someone asks what a UI element is called or what a UI/UX term means.

read-only

Argument	Type	Description
limit	integer	Maximum number of matches to return.
query*	string	Description, question, or name of a UI element, in English or Chinese.

Input schema (JSON)

{
  "type": "object",
  "required": [
    "query"
  ],
  "properties": {
    "limit": {
      "type": "integer",
      "default": 5,
      "maximum": 10,
      "minimum": 1,
      "description": "Maximum number of matches to return."
    },
    "query": {
      "type": "string",
      "description": "Description, question, or name of a UI element, in English or Chinese."
    }
  },
  "additionalProperties": false
}