Which integrations are available for this server?

Provides CSS snippets, styling templates, and implementation checklists for various design styles like Glassmorphism and Minimalism. Provides framework-specific design guidelines, state management recommendations, and UI implementation best practices for Flutter development. Offers curated font pairing recommendations along with ready-to-use Google Fonts import configurations. Includes a searchable database of Lucide icons with associated import codes and specific industry use cases. Supplies specialized design intelligence and implementation patterns for Next.js, including App Router best practices. Provides UI patterns and framework-specific guidelines for building applications with Nuxt.js and Nuxt UI. Delivers React-specific design guidelines, hooks best practices, and patterns for both standard React and React Native. Offers framework-specific design intelligence and implementation recommendations tailored for Svelte development. Provides design system guidelines and implementation patterns specifically for SwiftUI development within the Swift ecosystem.

ui-ux-pro-mcp

by redf0x1

Overview Schema Source Related Servers Discussions Admin

TypeScript

🎨 UI/UX Pro MCP Server

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

✨ Features

Feature	Details
📚 1,920+ Documents	Curated design knowledge across 11 domains + 2 platforms
🔧 6 Tools	Consolidated search tools optimized for LLM performance
⚡ BM25 Ranking	Fast, relevant search results using industry-standard text ranking
🔗 Universal	Works with VS Code, Claude Desktop, Cursor, and any MCP-compatible client
🎯 12 Frameworks	Stack-specific guidelines for React, Vue, Next.js, Flutter, SwiftUI, Jetpack Compose, and more
📱 Platform Guidelines	iOS Human Interface Guidelines (110) + Android Material 3 (112) with cross-platform equivalents

Platform-Specific Design

iOS Human Interface Guidelines (110 patterns) — Colors, typography, navigation, gestures, accessibility with SwiftUI, Flutter, React Native code
Android Material 3 Design (112 patterns) — Dynamic color, typography, components, elevation, motion with Compose, Flutter, React Native code
Cross-platform code equivalents — Every pattern includes Flutter_Equiv and RN_Equiv for building native-feeling apps without native code
Auto-detection from keywords — Queries containing iOS/Android keywords automatically boost platform-specific results

Related MCP server: seedflip-mcp

🚀 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:

Platform	Path
macOS	`~/Library/Application Support/Code/User/mcp.json`
Windows	`%APPDATA%\Code\User\mcp.json`
Linux	`~/.config/Code/User/mcp.json`

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

Tool	Documents	Description
`search_ui_styles`	85	UI design styles (Glassmorphism, Minimalism, Brutalism, etc.) with colors, effects, and use cases
`search_colors`	121	Color palettes for industries (SaaS, Healthcare, Fintech) with hex codes
`search_typography`	74	Font pairings with Google Fonts imports and Tailwind configs
`search_charts`	37	Chart types with implementation recommendations for dashboards
`search_ux_guidelines`	115	UX best practices, do's and don'ts, accessibility (WCAG)
`search_icons`	176	Curated Lucide icons with import codes and use cases
`search_landing`	49	Landing patterns, Bento Grids (Config & Maps), Responsive Strategy
`search_products`	114	Product type design recommendations per industry
`search_prompts`	39	AI prompt templates with CSS snippets and implementation checklists
`search_stack`	696	Framework-specific guidelines (React, Vue, Next.js, Flutter, etc.)
`search_all`	All	Unified search across all design domains
`get_design_system`	—	Generate complete design system with colors, typography, UI style, and layout in one call

AI-Optimized Query Processing

The get_design_system tool uses intelligent query processing optimized for AI model consumers:

Position-Weighted Intent Classification

Queries are processed left-to-right with multi-word phrase priority:

Multi-word phrases first: "landing page", "admin panel", "hero section" have higher priority
Then single words: "dashboard", "landing", "analytics"
Position matters: Earlier keywords get higher confidence (5% penalty per word position)

Examples:

Query	Detected Intent	Reason
"SaaS landing page dashboard"	landing	"landing page" phrase found
"dashboard for SaaS landing"	dashboard	"dashboard" is first
"admin panel with hero section"	dashboard	"admin panel" phrase beats "hero"
"website for fintech startup"	landing	"website" maps to landing

AI-Optimized Output Structure

The _meta field provides transparency for AI models:

{
  "_meta": {
    "query_interpretation": "SaaS landing page with glassmorphism (dark mode)",
    "detected_intent": "landing",
    "intent_confidence": 0.85,
    "matched_keyword": "landing page",
    "keyword_position": 1,
    "warnings": []
  }
}

Dark Mode Color Parsing

When mode: "dark", the tool:

Searches for dark-mode compatible palettes
Parses Dark_Mode_Colors JSON from the database
Replaces palette colors with dark mode equivalents
Includes both light and dark mode palettes in response

Code-Ready Snippets

Colors include ready-to-paste code:

{
  "colors": {
    "css_variables": "--primary: #0066FF; --background: #0A0E14; --text: #E5E5E5;",
    "tailwind_config": "colors: { primary: '#0066FF', ... }"
  }
}

Layout Source Indicator

The layout.source field tells AI models where the layout recommendation came from:

"landing" - From landing page patterns database
"dashboard" - From product's dashboard style recommendation

💬 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"

📱 Platform Guidelines (NEW)
"iOS navigation patterns"
"Android Material 3 color system"
"SwiftUI style without Swift" → Flutter/RN equivalents
"iOS typography guidelines with Flutter equivalent"
"Android dynamic color implementation"

Platform Keyword Triggers

The search engine automatically detects platform intent from these keywords:

Platform	Trigger Keywords
iOS	`ios`, `swiftui`, `cupertino`, `iphone`, `ipad`, `apple design`, `hig`, `sf symbols`
Android	`android`, `material 3`, `material design`, `jetpack compose`, `kotlin ui`, `dynamic color`, `m3`

Cross-Platform Query Examples

🍎 iOS Design Without Swift
Query: "SwiftUI style flutter e-commerce"
Returns: iOS HIG patterns with Flutter_Equiv code (CupertinoWidgets)

🤖 Android Material 3
Query: "material design android dashboard"
Returns: Material 3 patterns with Compose, Flutter, RN equivalents

🔄 Cross-Platform Patterns
Query: "iOS navigation patterns react native"
Returns: iOS navigation guidelines with RN_Equiv implementations

📂 Data Sources

This server aggregates curated design intelligence from multiple domains:

Domain	File	Count	Content
Styles	`styles.csv`	85	UI design trends, effects, animations
Colors	`colors.csv`	121	Industry-specific color palettes
Typography	`typography.csv`	74	Font pairings and configurations
Charts	`charts.csv`	37	Data visualization recommendations
UX Guidelines	`ux-guidelines.csv`	115	Usability and accessibility best practices
Icons	`icons.csv`	176	Lucide icon recommendations
Landing	`landing.csv`	49	Patterns, Bento Layout Maps, Responsive Strategy
Products	`products.csv`	114	Industry design recommendations
Prompts	`prompts.csv`	39	AI prompt templates
Stacks	`stacks/*.csv`	766	Framework-specific guidelines (12 stacks)
iOS	`platforms/ios.csv`	110	iOS Human Interface Guidelines with cross-platform equivalents
Android	`platforms/android.csv`	112	Android Material 3 Design with cross-platform equivalents

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

Platform-Specific Guidelines: ios (110 entries) · android (112 entries)

Platform data includes:

Flutter_Equiv: CupertinoWidgets/Material widget equivalents
RN_Equiv: React Native implementation patterns
Categories: Colors, Typography, Spacing, Components, Navigation, Gestures/Shapes, Animation/Motion, Icons, Layout, Accessibility

📖 API Reference

Common Input Parameters

All search tools accept:

Parameter	Type	Default	Description
`query`	string	required	Natural language search query
`max_results`	number	3	Maximum results to return (1-50)

`search_stack` Additional Parameter

Parameter	Type	Description
`stack_name`	string	Framework name: `react`, `vue`, `nextjs`, `flutter`, `swiftui`, etc.

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 (12 stacks)
│   └── platforms/        # Platform guidelines (iOS HIG, Android M3)
└── dist/                 # Compiled JavaScript output

🌐 Environment Variables

Variable	Default	Description
`MCP_LOG_LEVEL`	`info`	Log level (debug, info, warn, error)
`PORT`	`3000`	HTTP server port (when using HTTP transport)
`MCP_HTTP_HOST`	`localhost`	HTTP server host

🔌 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

Need	Best Tool
Color palettes	`search_styles` with `domain: "color"`
UI components	`search_styles` with `domain: "style"`
Best practices	`search_patterns` with `type: "ux"`
Icons	`search_components` with `type: "icon"`
Framework tips	`search_stack`
Everything	`search_all`

� 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

⭐ Star this repo if you find it useful!

Made with ❤️ by redf0x1

Available Tools

7 tools

get_design_systemA

Generate a complete design system by combining styles, colors, typography, and layout patterns.

WHEN TO USE: Starting a new project, need cohesive design foundation, want all design elements in one call.

PLATFORM DETECTION: Platform is auto-detected from query keywords (iOS, Android, Flutter, etc.) or can be explicitly specified via the platform parameter.

If platform is specified, it overrides auto-detection
Platform affects navigation patterns, safe areas, touch targets
When iOS keywords (ios, swiftui, cupertino) or Android keywords (android, material 3, jetpack compose) are detected, returns platform_guidelines with HIG/Material patterns and cross-platform code equivalents (Flutter_Equiv, RN_Equiv)

INTENT DETECTION: Layout is auto-detected based on query structure:

Multi-word phrases take priority: "landing page" → landing layout
Single keywords scanned left-to-right: "analytics saas" → dashboard (analytics detected first)
Position matters: first intent keyword wins

INTENT KEYWORDS:

For landing layouts: "landing page", "homepage", "website", "hero", "cta"
For dashboard layouts: "dashboard", "analytics", "admin panel", "metrics", "kpi"

QUERY TIPS: Place intent keywords at START of query for highest confidence.

RETURNS: Integrated design system with _meta showing detected/resolved platform, intent, colors (with dark_mode if mode="dark"), typography, UI style, layout with source indicator, and platform_guidelines when iOS/Android detected.

EXAMPLES: "landing page fintech dark glassmorphism", "dashboard analytics saas", "e-commerce website luxury", "admin panel healthcare", "flutter fintech mobile", "ios finance app", "android material dashboard"

Inputs: query (required), style, mode, max_results, +3 more.

search_allA

Unified search across ALL design domains with intelligent auto-detection. Searches: styles, colors, typography, charts, icons, ux-guidelines, landing, products, prompts, platforms (iOS HIG, Android Material 3).

WHEN TO USE: DEFAULT tool for broad queries. Use when unsure which specific tool, or need multi-domain results.

PLATFORM DETECTION: Platform keywords (ios, swiftui, cupertino, android, material, jetpack compose) trigger platform-specific results with cross-platform code equivalents (Flutter_Equiv, RN_Equiv).

QUERY TIPS: Use natural language describing your design goal. System auto-detects relevant domains.

RETURNS: Results grouped by domain with relevance scores. Each domain returns its specific fields.

EXAMPLES: "modern fintech dashboard dark", "ios button design", "android navigation patterns", "e-commerce checkout ux", "startup landing complete"

Inputs: query (required), max_results.

search_componentsA

Search UI components: Lucide icons (176+) and chart types (37+) for data visualization.

WHEN TO USE: Finding icons for UI, selecting chart types for data.

TYPE FILTER (optional): icon | chart

RETURNS: Icon import codes with JSX, chart recommendations with library suggestions.

EXAMPLES: "user profile settings icon", "time series data chart", "analytics dashboard"

Inputs: query (required), type, max_results.

search_patternsA

Search design patterns: landing page layouts (60+), UX guidelines (130+), product type recommendations (117+).

WHEN TO USE: Page layouts, UX best practices, accessibility, navigation patterns.

TYPE FILTER (optional): layout | ux | product

RETURNS: Section structures, do/don't practices, conversion tips, code examples.

EXAMPLES: "hero section with CTA", "form validation best practices", "e-commerce product page"

Inputs: query (required), type, max_results.

search_platformsA

Search iOS Human Interface Guidelines or Android Material 3 design patterns specifically.

WHEN TO USE: iOS design patterns, SwiftUI style in Flutter, Material 3 patterns in React Native, platform-specific UI/UX.

RETURNS: Platform-specific patterns with cross-platform implementation code (Flutter_Equiv, RN_Equiv).

PARAMETERS:

query: Search query (e.g., 'button colors navigation')
platform_name: 'ios' or 'android' (optional, searches all if omitted)
max_results: Number of results (default 5)

EXAMPLES: "ios navigation patterns", "android material button", "swiftui style flutter", "ios safe area", "material 3 color system"

Inputs: query (required), platform_name, max_results.

search_stackA

Search framework-specific guidelines for: flutter, jetpack-compose, html-tailwind, nextjs, nuxt-ui, nuxtjs, react-native, react, shadcn, svelte, swiftui, vue.

WHEN TO USE: Framework-specific patterns, component best practices, state management.

QUERY TIPS: Include framework name AND topic.

RETURNS: Category, Guideline, Description, Do/Don't, Code Examples, Severity, Docs URL.

EXAMPLES: "react state management", "flutter animation", "swiftui navigation"

Inputs: stack_name (required), query (required), max_results.

search_stylesA

Search visual design elements: UI styles (70+), color palettes (100+), typography pairings (70+), and AI prompts (40+).

WHEN TO USE: Visual aesthetics, color schemes, font choices, CSS effects, design tokens.

DOMAIN FILTER (optional): style | color | typography | prompt

RETURNS: Style CSS code, color hex values with Tailwind config, font pairings with Google Fonts imports.

EXAMPLES: "glassmorphism dark mode", "fintech blue palette", "modern sans-serif pairing"

Inputs: query (required), domain, max_results.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

Deploy Server

Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

TDQS

A4.3/5.0

Scored 2026-04-18 06:31 across 7 tools

Disambiguation3/5

The tools have some overlap in functionality, particularly between search_all and the more specific search tools (search_components, search_patterns, search_platforms, search_stack, search_styles). While each tool has a distinct primary focus, an agent might be confused about when to use search_all versus the targeted tools, as search_all claims to cover 'ALL design domains' and is the 'DEFAULT tool for broad queries.' This overlap creates ambiguity, though the descriptions help clarify each tool's specific scope.

Naming Consistency5/5

All tool names follow a consistent verb_noun pattern with snake_case. The tools are named get_design_system, search_all, search_components, search_patterns, search_platforms, search_stack, and search_styles. This uniformity makes the tool set predictable and easy to understand, with no deviations in naming conventions.

Tool Count5/5

With 7 tools, the count is well-scoped for a UI/UX design assistant server. Each tool serves a distinct purpose within the domain, such as generating design systems, searching across various design elements, or targeting specific platforms and frameworks. This number allows for comprehensive coverage without being overwhelming or too sparse.

Completeness4/5

The tool set covers a broad range of UI/UX design needs, including design system generation, component and pattern searches, platform-specific guidelines, and framework-specific advice. However, there are minor gaps, such as the lack of tools for creating or modifying design elements (e.g., no create_design or update_style tools), which might limit agent workflows that require iterative design changes. Overall, the surface is largely complete for search and retrieval operations in this domain.

Maintenance

ActivityInactive

ResponsivenessNo recent community issues

Resources

Related MCP Connectors

SVG LabC
app.svglab
SVG Lab MCP: the Design Engine for AI. App screens, icons, illustrations and charts as SVG.
Design Tools Image & Video Processing Data Visualization
901
https://svglab.app/mcp/agents
UizzeA
io.github.uizze
UI design that stands out. Full-screen UI references and design materials for coding agents.
Design Tools Developer Tools
2
https://uizze.com/mcp
AllGoodInsp
com.allgoodinsp
Curated design references for AI — real CSS values, typography specs, and color palettes.
Design Tools Developer Tools Content Management Systems
2
https://mcp.allgoodinsp.com
Orvain UI
dev.orvain
Orvain UI design system for React and Vue: real component props, variants and tokens for AI tools
Design Tools Developer Tools Documentation Access
1
https://mcp.orvain.dev

Related MCP Servers

AllGoodInsp
Design Tools Developer Tools Search
SawadaGoki
A
license
Not graded
quality
D
maintenance
Structured design references from 1,000+ curated websites for AI-powered web design. Retrieve real CSS values, typography specs, color palettes, and design rationale via MCP.
Updated 3 months ago (2026-08-18 00:28 UTC)
1
MIT
seedflip-mcp
Design Tools Developer Tools AI & Machine Learning
bockenstette1
A
license
Not graded
quality
D
maintenance
Give your AI coding agent design taste. 104 curated design seeds with colors, fonts, spacing, and shadows. Query by vibe, brand, or style.
Updated 7 months ago (2026-04-23 00:18 UTC)
79 npm
MIT
October Themes MCP Server
Design Tools Developer Tools
october-dev
A
license
A
quality
C
maintenance
Provides 1000+ handcrafted design system themes (colors, typography, components, animations) to inject into AI-generated UI, enabling tools like Claude, ChatGPT, and Cursor to produce polished, non-generic interfaces.
Updated 3 months ago (2026-08-26 18:04 UTC)
2
9 npm
1
MIT
uikit-registry
Developer Tools Design Tools
captainy7
F
license
A
quality
Not graded
maintenance
MCP server enabling AI agents to search, retrieve details, and compare UI components from 13 popular UI libraries.
Updated 5 months ago (2026-06-25 18:53 UTC)
3
-

🎨 UI/UX Pro MCP Server

✨ Features

Platform-Specific Design

🚀 Quick Start

Option 1: NPX (Recommended)

Option 2: Global Install

Option 3: From Source

⚙️ MCP Configuration

VS Code / Cursor

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

Option B: Using Global Install

Option C: From Source

Claude Desktop

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

Option B: Using Global Install

Option C: From Source

🔧 Available Tools

AI-Optimized Query Processing

Position-Weighted Intent Classification

AI-Optimized Output Structure

Dark Mode Color Parsing

Code-Ready Snippets

Layout Source Indicator

💬 Example Prompts

Platform Keyword Triggers

Cross-Platform Query Examples

📂 Data Sources

📖 API Reference

Common Input Parameters

search_stack Additional Parameter

Response Format

Error Response

🛠️ Development

Build Commands

Testing

HTTP Mode for Testing

Project Structure

🌐 Environment Variables

🔌 HTTP Transport Mode

❓ Troubleshooting

MCP Connection Issues

Common Queries

� Contact

�📄 License

🙏 Acknowledgments

Available Tools

Tool Schema Changelog

TDQS

Maintenance

Resources

Related MCP Connectors

Related MCP Servers

AllGoodInsp

seedflip-mcp

October Themes MCP Server

uikit-registry

Appeared in Searches

`search_stack` Additional Parameter