UI/UX Pro

v1.0.0โ€ขDeveloper Toolsโ€ขstable

๐ŸŽจ AI-powered UI/UX design intelligence - 1519+ curated design resources through MCP | React, Vue, Next.js, Flutter & more

accessibilityai-toolsclaudecolor-palettedesign-resources
Share:
19
Stars
0
Downloads
0
Weekly
0/5

What is UI/UX Pro?

UI/UX Pro is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to ๐ŸŽจ ai-powered ui/ux design intelligence - 1519+ curated design resources through mcp | react, vue, next.js, flutter & more

๐ŸŽจ AI-powered UI/UX design intelligence - 1519+ curated design resources through MCP | React, Vue, Next.js, Flutter & more

This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.

Features

  • ๐ŸŽจ AI-powered UI/UX design intelligence - 1519+ curated desig

Use Cases

Access 1500+ curated design resources for React, Vue, Next.js, and Flutter. Find design patterns, color palettes, and UI icons. Reference accessibility guidelines and design best practices.
redf0x1

Maintainer

LicenseMIT License
Languagetypescript
Versionv1.0.0
UpdatedMay 21, 2026
Statushealthy
Maintenanceactive

Works with

ClaudeOpenAIwindowsmacoslinux

Installation

Manual Installation

npx ui-ux-pro

Configuration

Configuration Details

Config File

claude_desktop_config.json

Performance

Response Metrics

Response Time< 200ms
ThroughputMedium

Resource Usage

Memory UsageLow
CPU UsageLow

How to Set Up and Use UI/UX Pro

The UI/UX Pro MCP server gives Claude instant access to over 1,920 curated design resources through 12 specialized search tools, covering UI styles, color palettes, typography pairings, data visualization charts, UX guidelines, icon libraries, landing page patterns, and framework-specific guidelines for React, Vue, Next.js, Flutter, and more. It enables developers and designers to ask Claude for design recommendations and get back concrete, production-ready guidance with hex codes, Google Fonts imports, Lucide icon names, and WCAG accessibility standards โ€” without leaving their coding environment.

Prerequisites

  • Node.js (any recent LTS version)
  • npx available (bundled with Node.js) or npm for global installation
  • An MCP-compatible client such as Claude Desktop, VS Code with MCP support, or Cursor
1

Install or run via npx

Run the server directly using npx without a global install, or install globally for repeated use.

# Run without installing:
npx ui-ux-pro-mcp --stdio

# Or install globally:
npm install -g ui-ux-pro-mcp
2

Add to Claude Desktop

Edit your claude_desktop_config.json to add the ui-ux-pro MCP server entry.

{
  "mcpServers": {
    "ui-ux-pro": {
      "command": "npx",
      "args": ["ui-ux-pro-mcp", "--stdio"]
    }
  }
}
3

Add to VS Code or Cursor

For VS Code or Cursor, add the configuration to your mcp.json file.

{
  "mcpServers": {
    "ui-ux-pro": {
      "command": "npx",
      "args": ["ui-ux-pro-mcp", "--stdio"]
    }
  }
}
4

Restart your MCP client

Restart Claude Desktop, VS Code, or Cursor to load the new server. The 12 UI/UX Pro tools will be available in Claude's tool list.

5

Verify available tools

Ask Claude to list available design tools or try a sample design query to confirm all 12 tools are accessible.

UI/UX Pro Examples

Client configuration

Add UI/UX Pro to Claude Desktop. The server requires no API keys or environment variables โ€” all 1,920+ resources are bundled locally.

{
  "mcpServers": {
    "ui-ux-pro": {
      "command": "npx",
      "args": ["ui-ux-pro-mcp", "--stdio"],
      "env": {
        "MCP_LOG_LEVEL": "info"
      }
    }
  }
}

Prompts to try

Example prompts that use the 12 UI/UX Pro search tools to get actionable design recommendations.

- "What UI style works best for a fintech dashboard?"
- "Suggest a color palette with hex codes for a healthcare SaaS product."
- "What font pairing should I use for a modern tech landing page? Include Google Fonts imports."
- "What chart type should I use for time-series data with multiple series?"
- "Show me mobile touch target best practices and WCAG accessibility guidelines."
- "What Lucide icons should I use for a navigation bar in a productivity app?"
- "Generate a complete design system for a B2B SaaS dashboard built with React and Tailwind."
- "What are the best landing page patterns for SaaS conversion?"

Troubleshooting UI/UX Pro

npx ui-ux-pro-mcp fails with command not found or download error

Ensure you have a stable internet connection for npx to download the package. Try clearing the npx cache with `npx clear-npx-cache` and running again. Alternatively, install globally with `npm install -g ui-ux-pro-mcp` and use the global command.

Only some of the 12 tools appear in Claude's tool list

Ensure you are passing the --stdio flag in the args array. Without it, the server may start in HTTP mode and not register tools correctly with Claude Desktop. Restart Claude Desktop after correcting the configuration.

search_stack or get_design_system returns no results for a specific framework

Use the exact framework name as used in the resource library (e.g., 'React', 'Vue', 'Next.js', 'Flutter'). Try search_all as a fallback to search across all 1,920+ resources simultaneously.

Frequently Asked Questions about UI/UX Pro

What is UI/UX Pro?

UI/UX Pro is a Model Context Protocol (MCP) server that ๐ŸŽจ ai-powered ui/ux design intelligence - 1519+ curated design resources through mcp | react, vue, next.js, flutter & more It connects AI assistants to external tools and data sources through a standardized interface.

How do I install UI/UX Pro?

Follow the installation instructions on the UI/UX Pro GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.

Which AI clients work with UI/UX Pro?

UI/UX Pro works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.

Is UI/UX Pro free to use?

Yes, UI/UX Pro is open source and available under the MIT License license. You can use it freely in both personal and commercial projects.

Browse More Developer Tools MCP Servers

Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.

Quick Config Preview

{ "mcpServers": { "ui-ux-pro": { "command": "npx", "args": ["-y", "ui-ux-pro"] } } }

Add this to your claude_desktop_config.json or .cursor/mcp.json

Read the full setup guide โ†’

Ready to use UI/UX Pro?

Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.

33,000+ ServersFree & Open SourceStep-by-Step Guides