CatchUI

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

사용해야 할까요

품질 및 안전성

A
설명 품질
100%
스키마 완전성
98%
이름 품질
97%
오염 위험
100%
권한 일치
100%
프로토콜 준수
100%

도구 정의와 프로토콜 준수에 대한 자동 분석을 기반으로 합니다.

컨텍스트 비용

~1,233토큰 (도구 정의)
~963 B일반적인 응답 크기
중간 정도의 주의 영향 (128k 컨텍스트의 0.96%)

이는 서버의 도구가 모델의 컨텍스트에 로드될 때마다 소비되는 대략적인 토큰 수입니다. 수치가 높을수록 다른 작업에 사용할 수 있는 주의가 줄어듭니다.

설치

원클릭 설치

`claude_desktop_config.json` 파일에 다음을 추가하세요:

{
  "mcpServers": {
    "ui-patterns": {
      "url": "https://catchui.com/api/mcp"
    }
  }
}

원격 엔드포인트

https://catchui.com/api/mcpstreamable-http

할 수 있는 일

도구 목록

도구 (6)

🟢 읽기 전용🟡 쓰기🔴 삭제⚪ 알 수 없음
🟢search_ui_patterns(query, limit)

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 50 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.

입력 스키마

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

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.

입력 스키마

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

Lists the 50 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).

입력 스키마

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

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.

입력 스키마

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

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.

입력 스키마

{
  "type": "object",
  "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\"."
    }
  },
  "required": [
    "query"
  ],
  "additionalProperties": false
}
🟢get_implementation_prompt(patterns, language)

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.

입력 스키마

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

커뮤니티

이 서버 평가하기

증거

최근 관측

검증됨버전이 기록되지 않음도구 6개