# CatchUI: full product and catalog context Last updated: 2026-08-29 Canonical URL: https://catchui.com/ ## What CatchUI is CatchUI is a bilingual UI vocabulary learning web app. A user provides an app, website, or dashboard screenshot. Model-assisted recognition locates reusable interface patterns, assigns the most precise conventional UI/UX names supported by visible evidence, and returns explanations. Users can save useful patterns and their screenshot examples as cards in a personal Library, then review the names with spaced repetition. ## What CatchUI is not - It is not a screenshot-to-code generator. - It does not clone or recreate an uploaded interface. - It is not a generic design-inspiration gallery. - Recognition is probabilistic, not an authoritative design audit. ## Who it is for - Design students and career-switchers building UI vocabulary - Product managers who need precise interface terminology - Developers communicating with designers - Designers documenting or reviewing interface patterns ## How the product works 1. Upload an interface screenshot or open the built-in sample. 2. CatchUI identifies one or more recognizable UI patterns and shows the visible evidence behind each label. 3. Open the linked catalog cards to learn names, definitions, related patterns, and usage tradeoffs. 4. Save useful cards and screenshot examples to a personal Library. 5. Review saved cards with spaced repetition. ## Access, pricing, and limitations - The public catalog and built-in sample can be used without signing up. - Pricing: the catalog and built-in sample are free without sign-up; anonymous visitors can run up to 3 screenshot scans per day; a free account includes a 30-scan pool; CatchUI Pro is $6/month or $60/year and includes 300 scans per day. - The interface is available in English and Simplified Chinese. - Model-assisted recognition can make mistakes; catalog definitions are curated and users can correct detected names. - Uploaded screenshots may contain private information, so users should review the Privacy Policy before scanning sensitive material. ## MCP server for AI assistants CatchUI exposes its curated catalog over the Model Context Protocol at https://catchui.com/api/mcp (Streamable HTTP transport, no authentication). Tools: search_ui_patterns (find a pattern name from a plain-language description or question, English or Chinese), get_ui_pattern (full bilingual teaching entry by id), list_ui_patterns (browse the catalog), compare_ui_patterns (how two to four look-alike patterns differ), get_ui_component_names (component names in SwiftUI, UIKit, Jetpack Compose, Android Views, Flutter and HTML, or from a component back to the pattern), get_implementation_prompt (ready-to-use build instructions for an AI coding tool, English or Chinese). Setup guide for Claude, ChatGPT, Cursor, and other clients: https://catchui.com/mcp (中文: https://catchui.com/zh/mcp). Screenshot recognition is not exposed over MCP; it runs in the web app at https://catchui.com/. ## Canonical links - Product facts and FAQ: https://catchui.com/about - Simplified Chinese product facts and FAQ: https://catchui.com/zh/about - Screenshot UI pattern identification guide: https://catchui.com/guides/identify-ui-patterns-from-screenshot - Phone and computer screen parts: https://catchui.com/guides/phone-and-computer-screen-parts - UI words for vibe coding: https://catchui.com/guides/ui-words-for-vibe-coding - Scan: https://catchui.com/ - Catalog: https://catchui.com/catalog - Privacy: https://catchui.com/legal/privacy.html - Terms: https://catchui.com/legal/terms.html ## Curated UI pattern catalog (50 entries) ### Segmented control (#048) - Canonical URL: https://catchui.com/catalog/segmented - Family: NAV - Also called: segmented button, segment control - English definition: A row of equal buttons where exactly one wins at a time. Best for 2–5 flat views of the same thing — never for actions. - Chinese name: 分段控制器 - Chinese definition: 一排等宽按钮，同一时刻只有一个胜出。最适合 2–5 个平级视图之间的切换——千万别拿它放操作。 - Related patterns: Tab bar, Tabs, Toggle switch, Radio group - People describe it as: "the toggle between two or three options"; "the buttons that switch between list and grid view"; "pill buttons where only one is selected"; "a row of connected buttons"; "tab-like toggle buttons" - 常见说法: 分段选择器；切换列表和网格的按钮；连在一起只能选一个的按钮；胶囊切换按钮；分段按钮 - In code: SwiftUI: Picker, .pickerStyle(.segmented) | UIKit: UISegmentedControl | Jetpack Compose: SingleChoiceSegmentedButtonRow, SegmentedButton | Android (Views): MaterialButtonToggleGroup | Flutter: SegmentedButton, CupertinoSlidingSegmentedControl | Web (HTML / ARIA): role="radiogroup" - Prompt for an AI coding tool: Add a segmented control above the content with two to five options shown as one connected row of equal-width segments. Exactly one segment is selected and visibly filled; choosing another changes how the same content is shown or filtered, without leaving the page. Make it a single-choice group for keyboard and screen-reader users (radio-group semantics). Q: Segmented control vs tabs: what is the difference? A: Tabs change which content you see — each tab owns its own panel or section. A segmented control changes how the same content is shown or filtered, like List / Grid / Map over one set of results. If switching would replace the whole page with unrelated content, you want tabs (or a tab bar), not a segmented control. Q: What is a segmented control called in Material Design? A: Segmented buttons. Material 3 uses that name for the same pattern: two to five joined options, single- or multi-select. Apple’s Human Interface Guidelines call it a segmented control. Q: 分段控制器和标签页（Tabs）有什么区别？ A: 标签页切换的是"看哪块内容"，每个标签各管一块面板；分段控制器切换的是"同一份内容怎么展示或筛选"，比如同一批结果的列表 / 网格 / 地图。如果切换后整页换成不相干的内容，就该用标签页或标签栏，而不是分段控制器。 Q: 分段控制器在 Material Design 里叫什么？ A: Segmented buttons（分段按钮）。Material 3 用这个名字指同一个模式：两到五个连在一起的选项，可单选或多选；Apple 的设计规范里叫 segmented control。 ### Tab bar (#047) - Canonical URL: https://catchui.com/catalog/tabbar - Family: NAV - Also called: bottom navigation bar, bottom app bar, bottom bar - 中文别名: 底部导航栏、底部导航、底部栏 - English definition: The app's whole map in one strip — three to five destinations, always visible, never scrolling away. - Chinese name: 标签栏 - Chinese definition: 把整个应用的地图收进一条横栏——三到五个目的地，始终可见，永不滚走。 - Related patterns: Segmented control, Tabs, Hamburger menu, Home indicator, Android navigation bar - People describe it as: "the icons at the bottom of an app"; "the bottom menu of an app"; "the menu bar at the bottom of the screen"; "the bottom navigation buttons"; "the row of tabs along the bottom" - 常见说法: App 最下面那一排图标；底部菜单栏；底部 Tab；底部标签；手机 App 底部的导航按钮 - In code: SwiftUI: TabView | UIKit: UITabBarController, UITabBar | Jetpack Compose: NavigationBar, NavigationBarItem | Android (Views): BottomNavigationView | Flutter: NavigationBar, BottomNavigationBar | Web (HTML / ARIA):