What is UI/UX Pro MCP?
UI/UX Pro MCP is a stdio server that exposes curated design data through search tools. An agent can look up UI styles, industry color palettes, typography pairings, UX guidelines, icons, landing patterns and stack guidance, then call get_design_system to assemble colors, type, style and layout in one response.
UI/UX Pro MCP packages curated design knowledge as CSV data behind search tools. Ask in plain language, such as which style suits a fintech dashboard, and the server returns ranked results with fields like hex codes, Google Fonts imports and Tailwind configs.
The data is adapted from the ui-ux-pro-max skill, which the README credits. If you prefer instructions loaded into the agent instead of tool calls, compare the original skill.
What the tools cover
- Styles with colors, effects and use cases, and industry color palettes with hex codes.
- Typography pairings, chart recommendations, UX and accessibility guidelines, and Lucide icon picks.
- Landing patterns including bento grids, product type recommendations and AI prompt templates.
- Stack guidance for 12 frameworks, from React and Vue to Flutter, SwiftUI and Jetpack Compose.
Platform data for iOS and Android
The data includes iOS Human Interface Guidelines patterns and Android Material 3 patterns, each with Flutter and React Native equivalents. Keywords like swiftui or material 3 in a query automatically boost the matching platform results.
Who it is for
Best for
- Agents that need a style, palette and font direction before writing UI, Related: an improve UI skill.
- Cross platform builders who want iOS and Android guidance beside code equivalents. See also the mobile design skill.
- Developers who want one
get_design_systemcall to return colors, typography, style and layout together.
Not for
- Reading live designs. It searches bundled data and does not connect to Figma.
- Anyone who needs a license other than MIT. The repository is MIT licensed.
Use it with UiChemy
Pick a style and palette here, then build the page. For WordPress, UiChemy's AI to WordPress imports an AI build, and Composer edits it inside Elementor or Gutenberg, so the chosen direction stays editable. Click Get Started on uichemy.com.
Connect UI/UX Pro MCP: Searchable Design Knowledge for AI Agents to your AI client
npx ui-ux-pro-mcpRun once to test
Run
npx ui-ux-pro-mcp, or install globally and runui-ux-pro-mcp.Add the config
Paste the JSON into your MCP settings. VS Code uses
mcp.json, and Claude Desktop usesclaude_desktop_config.json.Restart the client
The README suggests restarting VS Code or Claude Desktop if the server is not found.
Try a query
Ask for a color palette for a healthcare app or iOS navigation patterns and watch the matching search tool run.
Client configuration
{
"mcpServers": {
"ui-ux-pro": {
"command": "npx",
"args": ["ui-ux-pro-mcp", "--stdio"]
}
}
}Endpoints and ports
MCP_LOG_LEVELinfo by defaultnpm run start:httpSSE at /sse and messages at /messagePORT3000 by default for HTTPWhat you can do with it
- BM25 rankingSearches use BM25 text ranking and return an id, score, type and the full document.
- Design system in one call
get_design_systemclassifies intent from the query, favoring multi word phrases and earlier keywords. - Dark mode palettesPassing
mode: darkreturns both light and dark palettes with ready CSS variables and a Tailwind config. - Transparent outputA
_metafield reports the detected intent, confidence, matched keyword and any warnings. - 12 framework stacksStacks include react, nextjs, vue, nuxtjs, svelte, flutter, react-native, swiftui, jetpack-compose and shadcn.
- Platform guidelinesiOS has 110 patterns and Android Material 3 has 112, each with Flutter and React Native equivalents.
- Plain data filesStyles, colors, typography and other domains live as CSV files you can inspect.
Tools it exposes
search_ui_styles
UI design styles such as Glassmorphism and Brutalism with colors, effects and use cases.
search_colors
Industry color palettes with hex codes.
search_typography
Font pairings with Google Fonts imports and Tailwind configs.
search_charts
Chart types with implementation advice for dashboards.
search_ux_guidelines
UX best practices, do and don't lists and WCAG accessibility.
search_icons
Curated Lucide icons with import code and use cases.
search_landing
Landing patterns, bento grids and responsive strategy.
search_products
Design recommendations per product type and industry.
search_prompts
AI prompt templates with CSS snippets and checklists.
search_stack
Framework specific guidelines, selected with stack_name.
search_all
Unified search across all design domains.
get_design_system
Builds colors, typography, UI style and layout in one call, with light and dark palettes.
Frequently asked questions
What is UI/UX Pro MCP?
UI/UX Pro MCP is a Model Context Protocol server that gives an AI agent searchable, curated design knowledge: styles, color palettes, font pairings, UX guidelines, icons, landing patterns and stack guidance. A get_design_system tool combines them into one design system response.
How do I install ui-ux-pro-mcp?
Run npx ui-ux-pro-mcp, or npm install -g ui-ux-pro-mcp and then ui-ux-pro-mcp. For a client, add a server entry whose command is npx with the arguments ui-ux-pro-mcp and --stdio. A from source build is also described.
Which frameworks does search_stack support?
The README lists flutter, html-tailwind, jetpack-compose, nextjs, nuxt-ui, nuxtjs, react-native, react, shadcn, svelte, swiftui and vue. Pass the framework name as stack_name, together with a natural language query and an optional max_results value.
Does it cover iOS and Android design?
Yes. The data holds 110 iOS Human Interface Guidelines patterns and 112 Android Material 3 patterns, each with Flutter and React Native equivalents. Queries containing words like ios, swiftui, android or material 3 boost those platform results automatically.
Which agents can use it?
The README gives config for VS Code, Cursor and Claude Desktop, and says it works with any MCP compatible client. The server runs over stdio, with an HTTP mode intended for testing without a client.
How is it related to the ui-ux-pro-max skill?
The README says the data is based on the nextlevelbuilder ui-ux-pro-max skill repository. The skill loads guidance into an agent, while this server answers search queries. See the skill page and a UI UX design skill.
What does a design system response contain?
The get_design_system response includes colors with ready CSS variables and a Tailwind config, typography, the UI style and a layout recommendation. A layout source field reports whether the layout came from landing patterns or a product dashboard style.