ui-ux-pro

UI/UX Pro MCP Server provides AI-powered UI/UX design search and guidance through a set of dedicated tools. It exposes a suite of 12+ tools that let you search design systems, typography, color palettes, icons, landing patterns, and framework-specific guidelines (React, Vue, Next.js, Flutter, SwiftUI, Jetpack Compose, etc.), along with a unified get_design_system endpoint for generating comprehensive design resources. You can run the server via NPX (recommended), a global install, or from source, and connect your MCP-compatible client (like VS Code, Cursor, Claude Desktop, or others) to request design assets or guidance using the mcp.json/mcp.json settings. When using the NPX option, commands like npx ui-ux-pro-mcp --stdio provide a streamlined, zero-install experience for tool-assisted queries.

To use the tools, configure an MCP server entry in your client settings (settings.json or mcp.json) to point at the desired command and arguments (e.g., NPX or global install). Once connected, you can query for specific patterns such as color palettes, typography pairings, UI styles (Glassmorphism, Minimalism, Brutalism), and platform guidelines (iOS, Android) or request a design system generation via get_design_system. The toolset is designed to accelerate design systems work by delivering structured, code-ready design assets and documentation in response to natural language prompts.

Prerequisites:

• Node.js (recommended) and npm installed on your machine
• Git (for cloning from source, if desired)

Option A: Quick NPX (no installation required)

1. Ensure you have npm and npx available (comes with Node.js).
2. Run the MCP server directly:

npx ui-ux-pro-mcp --stdio

3. Connect your MCP client using the provided configuration to the server via the NPX command.

Option B: Global Install (permanently install on your system)

1. Install the package globally:

npm install -g ui-ux-pro-mcp

2. Start the server:

ui-ux-pro-mcp --stdio

3. Point your MCP client to the global command and use --stdio as shown in the configuration example.

Option C: From Source

1. Clone the repository:

git clone https://github.com/redf0x1/ui-ux-pro-mcp.git
cd ui-ux-pro-mcp

2. Install dependencies:

npm install

3. Build the project (if needed):

npm run build

4. Start the server:

npm start

5. In your MCP client, configure the server entry to point to the built index (e.g., node /path/to/ui-ux-pro-mcp/dist/index.js --stdio).

Notes:

• If you’re behind a firewall or proxy, ensure node/npm can access the registry to fetch dependencies.
• The server supports both NPX and direct node execution depending on the chosen install method.

Tips and troubleshooting:

• If using NPX, ensure the npm scope ui-ux-pro-mcp is accessible and that network access to npm registry is allowed.
• For local development or custom paths, use the From Source option and point the MCP client to the built dist/index.js with the --stdio flag.
• The MCP configuration supports multiple platforms (VS Code, Cursor, Claude Desktop). Use the provided JSON snippets for each environment.
• Environment variables are optional; you can set CLI-level or environment-level settings if needed, such as MODE=development for verbose logs or DEBUG=true for debugging output.
• The npm package name is ui-ux-pro-mcp; updating the package may provide new tools or improvements without changing the MCP configuration.