🎨 UI/UX Pro MCP Server

AI-powered UI/UX design intelligence — Instantly access 1,700+ curated design resources through natural language search.

✨ Features

🚀 Quick Start

Option 1: NPX (Recommended)

npx ui-ux-pro-mcp

Option 2: Global Install

npm install -g ui-ux-pro-mcp
ui-ux-pro-mcp

Option 3: From Source

# Clone the repository
git clone https://github.com/redf0x1/ui-ux-pro-mcp.git
cd ui-ux-pro-mcp

# Install dependencies
npm install

# Build the project
npm run build

# Run the server
npm start

⚙️ MCP Configuration

VS Code / Cursor

Add to your MCP settings (settings.json or mcp.json):

Option A: Using NPX (Recommended - No Installation Required)

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

Option B: Using Global Install

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

Option C: From Source

{
  "mcpServers": {
    "ui-ux-pro": {
      "command": "node",
      "args": [
        "/path/to/ui-ux-pro-mcp/dist/index.js",
        "--stdio"
      ]
    }
  }
}

Configuration file locations:

Claude Desktop

Add to your Claude Desktop configuration:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%\Claude\claude_desktop_config.json

Option A: Using NPX (Recommended - No Installation Required)

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

Option B: Using Global Install

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

Option C: From Source

{
  "mcpServers": {
    "ui-ux-pro": {
      "command": "node",
      "args": [
        "/path/to/ui-ux-pro-mcp/dist/index.js",
        "--stdio"
      ]
    }
  }
}

🔧 Available Tools

💬 Example Prompts

Use these with Claude, Cursor, or any MCP-compatible AI:

🎨 Design Systems
"What UI style works best for a fintech dashboard?"
"Give me a color palette for a healthcare app"
"Find modern font pairings for a SaaS landing page"

📊 Data Visualization
"What chart type should I use for time-series data?"
"How do I make charts accessible?"

🖥️ Landing Pages
"Show me landing page patterns for SaaS conversion"
"What sections should a pricing page have?"

📱 UX Guidelines
"What are mobile touch target best practices?"
"Show me accessibility guidelines for forms"

⚛️ Framework-Specific
"React hooks best practices"
"Vue 3 composition API patterns"
"Next.js App Router guidelines"
"Flutter state management recommendations"

📂 Data Sources

This server aggregates curated design intelligence from multiple domains:

Available Framework Stacks: flutter · html-tailwind · jetpack-compose · nextjs · nuxt-ui · nuxtjs · react-native · react · shadcn · svelte · swiftui · vue

📖 API Reference

Common Input Parameters

All search tools accept:

search_stack Additional Parameter

Response Format

All tools return results in this structure:

{
  results: Array<{
    id: string;           // Document identifier
    score: number;        // BM25 relevance score
    type: string;         // Document type (style, color, etc.)
    data: object;         // Full document data
  }>;
  total: number;          // Total results returned
  query: string;          // Original search query
}

Error Response

{
  error: string;          // Error description
}

🛠️ Development

Build Commands

# Build TypeScript to JavaScript
npm run build

# Development mode with hot reload
npm run dev

# Start production server (stdio mode)
npm start

# Start HTTP server for testing
npm run start:http

Testing

# Run test suite
npm test

HTTP Mode for Testing

The server can run in HTTP mode for testing without MCP clients:

# Start HTTP server on port 3456
PORT=3456 npm run start:http

Then test with curl:

curl -X POST http://localhost:3456/mcp \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","method":"tools/call","params":{"name":"search_colors","arguments":{"query":"fintech"}},"id":1}'

Project Structure

ui-ux-pro-mcp/
├── src/
│   ├── index.ts          # MCP server entry point
│   ├── data/
│   │   └── loader.ts     # CSV data loading utilities
│   ├── search/
│   │   └── bm25.ts       # BM25 search implementation
│   └── tools/
│       ├── index.ts      # Tool exports
│       └── handlers.ts   # Search handlers
├── data/
│   ├── *.csv             # Design domain data files
│   └── stacks/           # Framework-specific guidelines
└── dist/                 # Compiled JavaScript output

🌐 Environment Variables

🔌 HTTP Transport Mode

For development and testing, you can run the server in HTTP mode:

# Start HTTP server
npm run start:http

# Server runs at http://localhost:3000
# SSE endpoint: GET /sse
# Message endpoint: POST /message

Test with curl:

curl -X POST http://localhost:3000/message \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"search_colors","arguments":{"query":"fintech"}}}'

❓ Troubleshooting

MCP Connection Issues

"Cannot find MCP server"

• Ensure npm run build completed successfully
• Check the path in your MCP config points to dist/index.js
• Verify Node.js is in your PATH

"No results returned"

• Try broader search terms
• Use search_all for cross-domain queries
• Check if the domain matches your query type

"Server not responding"

• Restart VS Code/Claude Desktop
• Check terminal for error messages
• Verify the server process is running

Common Queries

� Contact

• Telegram: @redf0x1
• GitHub: @redf0x1

�📄 License

MIT License — see LICENSE for details.

🙏 Acknowledgments

• Original Data: Based on nextlevelbuilder/ui-ux-pro-max-skill
• MCP SDK: Built with @modelcontextprotocol/sdk
• Search: BM25 ranking algorithm for relevance scoring