MCP server

CatchUI Official

com.catchui/ui-patterns

Checked 26 Oct 2026, 08:29 UTC · Connected to it and listed its tools

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

Website

At a glance

Type

MCP server

Publisher

catchui.com (verified by the MCP Registry)

Status

Working at last check

Tools

6

Token cost

About 1,262 tokens per request

Sets up in

Claude Code, Claude Desktop, Codex, Gemini CLI, Cursor, VS Code, Antigravity, ChatGPT, OpenAI API, Grok

Last checked

26 Oct 2026, 08:29 UTC

Connect it to your agent

Add to CursorAdd to VS CodeVS Code Insiders

Opens the app, which shows the server and asks you to confirm. For other apps, copy the setup below.

Claude Code

claude mcp add --transport http ui-patterns https://catchui.com/api/mcp

Claude Desktop

Settings → Connectors → Add custom connector, and paste the URL.

Codex (config.toml)

[mcp_servers.ui-patterns]
url = "https://catchui.com/api/mcp"

Gemini CLI

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

Cursor

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

VS Code

{"servers":{"ui-patterns":{"type":"http","url":"https://catchui.com/api/mcp"}}}

Antigravity

agy mcp add ui-patterns https://catchui.com/api/mcp

ChatGPT

Settings → Apps & Connectors → Advanced settings: turn on Developer mode, then Create a connector and paste the URL. Which plans can do this varies.

OpenAI API (Responses tools)

{"type":"mcp","server_label":"ui-patterns","server_url":"https://catchui.com/api/mcp","require_approval":"always"}

Grok (xAI API tools)

{"type":"mcp","server_label":"ui-patterns","server_url":"https://catchui.com/api/mcp"}

Tools

• compare_ui_patterns ~196 tokens
  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.
• get_implementation_prompt ~235 tokens
  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.
• get_ui_component_names ~267 tokens
  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 patt
• get_ui_pattern ~175 tokens
  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.
• list_ui_patterns ~146 tokens
  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).
• search_ui_patterns ~243 tokens
  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

Browse

• Claude tools
• Mobile apps

Related MCP servers

• hackshop
  Plan and build a physical body for your AI agent: boards, parts list, assembly and pairing.
• Standout
  Anti-slop design taste for AI coding agents: art directions, section code, 0-100 page critic.
• JMeter Docs
  Apache JMeter community documentation, conversion tools, linters, and calculators for AI agents.
• Screenrove
  Real product UI captures for design reference, competitor analysis, and coding agents.
• Tollmint
  Per-call data for agents: graded behavioural science, dark-pattern detection, web fetch, geocode.
• Agentic Engineering Periodic System
  Practices for building software with coding agents, each with a test you check on your repo.
• AthenaHQ
  Track how AI assistants mention, cite, and rank your brand and competitors in AI search.
• Clipkit
  MCP server for Clipkit — gives AI agents a video toolbox via the Clipkit schema.

Badge for your README

[![AptLynx](https://aptlynx.net/badge/com.catchui/ui-patterns.svg)](https://aptlynx.net/servers/com.catchui/ui-patterns)

Listing text is written by the maker; AptLynx lists tools and does not vouch for them. Find another tool · Browse by topic · For agents