CatchUI

com.catchui由 catchui.com 發布官方發布者v1.1.0更新於 Oct 24, 2026

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

已驗證Streamable HTTP可網頁執行知識與記憶開發者工具

概覽

AI 產生的概覽

CatchUI 是遠端 MCP 伺服器,讓助理用自然語言查出 UI 元素與設計模式的名稱、比較相似模式,並取得各平台元件名稱與實作提示。

可以做什麼
用中英文的白話描述或術語,在精選 UI 模式目錄中搜尋並回傳模式名稱,也可依 id 讀取完整條目,包含定義、別名、各平台元件名稱與實作提示。依家族列出目錄中的模式,可篩選單一家族。並排比較 2 到 4 個容易混淆的模式。查詢某個模式在各平台程式碼中的名稱,或從框架元件反查對應模式。取得 1 到 6 個模式的現成實作說明,支援中英文。
適用情境
適合在使用者含糊描述某個介面元素、需要其通用名稱時使用;在 toast 與 snackbar 等相似模式之間做選擇時;以及把設計對應到框架元件名稱、為程式助理草擬實作說明時。
執行需求
位於 catchui.com 的遠端 streamable HTTP 端點;未宣告任何套件、帳號、API 金鑰或環境變數。需要能連線至該端點的網路。
安裝前請注意
目錄被描述為精選且規模較小(61 個模式),涵蓋範圍有限。實作提示是供貼到程式工具的通用指引,並非經過驗證的程式碼,使用前應自行審閱。未宣告身分驗證,請勿在查詢中傳送金鑰或私密內容。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 CatchUI,將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Web executable,透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。

交給代理程式安裝

把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式,或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南,先向你展示發布者、端點和登入方式,經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。

閱讀 https://sourceweft.com/mcp/com.catchui%2Fui-patterns/install.md,並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前,先告訴我它的發布者、端點和登入方式,等我確認。不要把 API 金鑰寫進命令或我會提交的檔案;問我金鑰應從哪裡取得。

檢視代理程式所依據的安裝指南

其他 MCP 客戶端

把它新增到你客戶端的 mcpServers 設定中。

{
  "mcpServers": {
    "catchui": {
      "type": "http",
      "url": "https://catchui.com/api/mcp"
    }
  }
}

工具

6

search_ui_patterns

Search UI patterns by description

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.

輸入參數limitquery必填

get_ui_pattern

Get one UI pattern entry

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.

輸入參數id必填

list_ui_patterns

List the UI pattern catalog

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

輸入參數family

compare_ui_patterns

Compare UI 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.

輸入參數patterns必填

get_ui_component_names

Get component names across platforms

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.

輸入參數query必填platform

get_implementation_prompt

Get implementation prompts

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.

輸入參數languagepatterns必填

版本歷史

1
  1. v1.1.0最新Oct 10, 2026

評分

已滿足適用檢查項的 83%

該評分衡量此收錄條目的完整程度,依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價,也不表示伺服器安全或目前可用:可連通性是帶日期的檢查結果,評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通必需25 分
  • 已宣告認證方式必需10 分
  • 已列出工具必需15 分
  • 描述必需15 分
  • 圖示10 分
  • 文件15 分

    請宣告包含 README 的 GitHub 儲存庫,或在 OAuth 受保護資源後設資料中提供 resource_documentation。

  • 授權條款不適用

    託管服務按其提供方的條款使用,因此這裡不要求授權條款。此檢查項不計入百分比。