Skip to main content
Glama
redf0x1

ui-ux-pro-mcp

by redf0x1

🎨 UI/UX Pro MCP Server

npm version npm downloads License: MIT TypeScript MCP Compatible GitHub stars

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

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

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

{
  "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:

  1. Multi-word phrases first: "landing page", "admin panel", "hero section" have higher priority

  2. Then single words: "dashboard", "landing", "analytics"

  3. 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:

  1. Searches for dark-mode compatible palettes

  2. Parses Dark_Mode_Colors JSON from the database

  3. Replaces palette colors with dark mode equivalents

  4. 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


οΏ½πŸ“„ License

MIT License β€” see LICENSE for details.


πŸ™ Acknowledgments


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

ParametersJSON Schema
NameRequiredDescriptionDefault
queryYesProduct type + intent + style description. Intent keyword placement matters: "landing page saas" β†’ landing layout, "analytics dashboard saas" β†’ dashboard layout. Multi-word phrases like "landing page", "admin panel" have priority over single words.
styleNoSpecific style preference (e.g., "glassmorphism", "minimalism", "brutalism")
modeNoColor mode preference. When "dark", the tool parses Dark_Mode_Colors and returns dark-optimized palette with dark background/text colors.
max_resultsNoMaximum items per domain
platformNoTarget platform for design system. If not specified, will be auto-detected from query. Use to override auto-detection.
output_formatNo⚠️ RECOMMENDED: Leave empty (defaults to 'ai-optimized' ~3.5K tokens). Only change if you have a specific reason. Options: 'ai-optimized' (default, best for AI coding), 'minimal' (~8K, includes HTML templates), 'full' (⚠️ NOT recommended - 15K+ tokens, programmatic use only), 'structured' (JSON only, no guide).
include_hover_effectsNoInclude hover_effects CSS in output. Default: false for ai-optimized, true for other formats.

TDQS

A4.7/5.0
Behavior5/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden and delivers comprehensive behavioral disclosure. It details platform auto-detection logic, intent detection algorithms, keyword priority rules, query structuring tips, and exactly what the tool returns (including _meta data, dark mode handling, and platform-specific guidelines). This goes far beyond basic functionality description.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness3/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is well-structured with clear sections (WHEN TO USE, PLATFORM DETECTION, etc.), but at ~250 words it's quite lengthy. While most content is valuable, some details like specific keyword lists and detection algorithms might be excessive for a tool description. The information is front-loaded with the core purpose, but could be more concise.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a complex 7-parameter tool with no annotations and no output schema, the description provides exceptional completeness. It covers behavioral logic, parameter interactions, usage scenarios, return format details, and practical examples. The agent has everything needed to understand when and how to use this tool effectively despite the absence of structured metadata.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

While schema description coverage is 100%, the description adds significant value by explaining the interaction between parameters (e.g., platform parameter overrides auto-detection, mode='dark' triggers dark-optimized palettes) and providing practical examples of how query parameter structure affects intent detection. It also offers query formatting recommendations not present in the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose with a specific verb ('generate') and resource ('complete design system') while distinguishing it from sibling tools that search for components, patterns, platforms, etc. rather than generating integrated systems. The opening sentence precisely defines what the tool creates.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description includes an explicit 'WHEN TO USE' section that lists three specific scenarios (starting new project, needing cohesive foundation, wanting all elements in one call). It also distinguishes this tool from sibling search tools by emphasizing it provides 'all design elements in one call' rather than searching for individual components.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

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"

ParametersJSON Schema
NameRequiredDescriptionDefault
queryYesSearch query across all design domains
max_resultsNoMaximum number of results per domain

TDQS

A4.3/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden and does so effectively. It discloses key behavioral traits: intelligent auto-detection of domains, platform keyword detection with cross-platform code equivalents, natural language query processing, and result grouping by domain with relevance scores. It doesn't mention rate limits or authentication needs, but provides substantial operational context.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is well-structured with clear sections (WHEN TO USE, PLATFORM DETECTION, QUERY TIPS, RETURNS, EXAMPLES) and front-loaded with the core purpose. While comprehensive, some sections could be more concise, and every sentence appears to earn its place by providing distinct value.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given no annotations and no output schema, the description provides substantial context: purpose, usage guidelines, behavioral traits, query examples, and return format details. It covers the complexity of a multi-domain search tool well, though doesn't explicitly mention error conditions or pagination behavior for the results.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the baseline is 3. The description doesn't add specific parameter details beyond what's in the schema (query and max_results), though it provides query tips ('Use natural language describing your design goal') that offer semantic guidance for the query parameter without contradicting the schema.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description explicitly states the tool performs 'unified search across ALL design domains' and lists 10 specific resource types (styles, colors, typography, etc.), providing a specific verb+resource combination. It clearly distinguishes from siblings by being the 'DEFAULT tool for broad queries' versus domain-specific tools like search_components or search_styles.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description includes a dedicated 'WHEN TO USE' section that explicitly states: 'DEFAULT tool for broad queries. Use when unsure which specific tool, or need multi-domain results.' This provides clear guidance on when to use this tool versus its domain-specific siblings, with explicit alternatives implied.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

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"

ParametersJSON Schema
NameRequiredDescriptionDefault
queryYesSearch query for UI components
typeNoFilter to icons or charts
max_resultsNoMaximum number of results to return

TDQS

A4.2/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It mentions what the tool returns (icon import codes with JSX, chart recommendations with library suggestions) and includes examples, but lacks details on permissions, rate limits, or error handling. It adds some behavioral context but not comprehensively.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is well-structured with clear sections (description, when to use, type filter, returns, examples), front-loaded with key information, and every sentence adds value without redundancy. It's appropriately sized for the tool's complexity.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given no annotations and no output schema, the description does a good job explaining the tool's purpose, usage, and returns. It covers the essential context for a search tool with examples, but could improve by detailing output format or error cases more explicitly. It's mostly complete for its complexity.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already documents all parameters well. The description adds minimal value by mentioning the 'TYPE FILTER' and 'RETURNS' sections, but doesn't provide additional syntax or format details beyond what the schema offers. Baseline 3 is appropriate as the schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool searches for UI components, specifically Lucide icons (176+) and chart types (37+), distinguishing it from siblings like search_patterns or search_styles by focusing on icons and charts for data visualization. It uses specific verbs ('search') and resources ('UI components') with explicit scope.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description includes an explicit 'WHEN TO USE' section that states 'Finding icons for UI, selecting chart types for data,' providing clear guidance on when to use this tool. It differentiates from siblings by focusing on icons and charts, though it doesn't name alternatives explicitly, the context is sufficient.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

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"

ParametersJSON Schema
NameRequiredDescriptionDefault
queryYesSearch query for design patterns
typeNoFilter to layout, ux, or product
max_resultsNoMaximum number of results to return

TDQS

A4.4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It effectively describes what the tool returns (section structures, do/don't practices, conversion tips, code examples) and provides examples of search queries. However, it doesn't mention potential limitations like rate limits, authentication requirements, or pagination behavior, which would be helpful for a search tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is well-structured with clear sections (purpose, when to use, type filter, returns, examples) and every sentence adds value. It's appropriately sized for the tool's complexity, with no redundant information, and is front-loaded with the core purpose.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a search tool with no output schema, the description does a good job explaining what the tool returns and providing examples. However, without annotations and with no output schema, it could benefit from more detail about the return format structure or error conditions. The combination of purpose, usage guidelines, and return description makes it mostly complete for this context.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already fully documents all three parameters. The description adds minimal value beyond the schema by mentioning the TYPE FILTER options and providing example queries, but doesn't explain parameter interactions or provide additional semantic context that isn't already in the schema descriptions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool searches design patterns with specific categories (landing page layouts, UX guidelines, product type recommendations) and includes quantitative counts (60+, 130+, 117+). It distinguishes from siblings like search_components or search_platforms by focusing specifically on design patterns rather than components, platforms, or other search types.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explicitly includes a 'WHEN TO USE' section listing specific contexts: page layouts, UX best practices, accessibility, and navigation patterns. This provides clear guidance on when this tool is appropriate versus alternatives, helping the agent choose between this and sibling tools like search_components or search_all.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

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"

ParametersJSON Schema
NameRequiredDescriptionDefault
queryYesSearch query for platform patterns
platform_nameNoPlatform to search (ios or android). If omitted, searches all platforms.
max_resultsNoMaximum number of results to return

TDQS

A4.3/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It effectively describes what the tool returns (platform-specific patterns with cross-platform implementation code) and provides examples of search queries. However, it doesn't mention potential limitations like rate limits, authentication requirements, or error conditions.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is well-structured with clear sections (description, when to use, returns, parameters, examples) and uses bullet points effectively. While comprehensive, it could be slightly more concise by integrating some sections more tightly.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a search tool with 3 parameters and no output schema, the description provides good context about what it searches, when to use it, what it returns, and includes helpful examples. The main gap is the lack of output format details, but the description compensates well with the 'RETURNS' section explaining the content structure.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already documents all parameters thoroughly. The description lists parameters but doesn't add meaningful semantic context beyond what's in the schema. The baseline of 3 is appropriate when the schema does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool searches iOS Human Interface Guidelines or Android Material 3 design patterns, specifying both the resources (platform guidelines) and the scope (design patterns). It distinguishes from siblings by focusing specifically on platform-specific patterns rather than general design systems, components, or styles.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description includes an explicit 'WHEN TO USE' section that lists specific scenarios: iOS design patterns, SwiftUI style in Flutter, Material 3 patterns in React Native, and platform-specific UI/UX. This provides clear guidance on when to use this tool versus its siblings like search_components or search_styles.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

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"

ParametersJSON Schema
NameRequiredDescriptionDefault
stack_nameYesFramework/stack name
queryYesSearch query for guidelines
max_resultsNoMaximum number of results to return

TDQS

A4.4/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden and does well by detailing what the tool returns (Category, Guideline, Description, Do/Don't, Code Examples, Severity, Docs URL) and providing query examples. It doesn't mention rate limits, authentication needs, or pagination behavior, but covers the core functionality comprehensively.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is perfectly structured with clear sections (purpose, when to use, query tips, returns, examples), each earning its place. It's front-loaded with the core purpose, uses bullet-like formatting for readability, and contains zero wasted words while being comprehensive.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a search tool with no output schema and no annotations, the description does an excellent job covering purpose, usage, parameters, and return format. The only minor gap is lack of explicit mention of error cases or what happens when no results are found, but otherwise it's highly complete given the context.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema already documents all three parameters well. The description adds value through 'QUERY TIPS' that clarifies how to structure the query parameter and 'EXAMPLES' that show parameter usage, but doesn't provide additional semantic context beyond what's in the schema. Baseline 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool searches for framework-specific guidelines, listing all 12 supported frameworks explicitly. It distinguishes from siblings by specifying 'framework-specific guidelines' rather than general patterns, components, or platforms covered by other tools like search_patterns or search_components.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description includes a dedicated 'WHEN TO USE' section that explicitly states 'Framework-specific patterns, component best practices, state management.' It also provides 'QUERY TIPS' instructing to include framework name AND topic, giving clear guidance on when and how to use this tool versus alternatives.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

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"

ParametersJSON Schema
NameRequiredDescriptionDefault
queryYesSearch query for visual design
domainNoFilter to specific domain
max_resultsNoMaximum number of results to return

TDQS

A4.6/5.0
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full burden and does well by specifying what the tool returns (Style CSS code, color hex values with Tailwind config, font pairings with Google Fonts imports) and providing examples. It doesn't mention rate limits, authentication needs, or destructive behavior, but covers core functionality adequately.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is well-structured with clear sections (purpose, usage, domain filter, returns, examples), front-loaded with key information, and every sentence adds value without redundancy. It efficiently communicates necessary details in a compact format.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given no annotations and no output schema, the description does a good job covering purpose, usage, parameters, and return values. It could improve by mentioning potential limitations or error cases, but it's largely complete for a search tool with moderate complexity.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the baseline is 3. The description adds value by explaining the optional 'domain' parameter with its filter options (style, color, typography, prompt) and clarifying what the tool searches for, enhancing understanding beyond the schema's technical definitions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description explicitly states the tool searches for specific visual design elements (UI styles, color palettes, typography pairings, AI prompts) with concrete counts, making the purpose clear and specific. It distinguishes from siblings by focusing on visual aesthetics rather than broader design systems, components, or platforms.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines5/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description includes a dedicated 'WHEN TO USE' section listing specific scenarios (visual aesthetics, color schemes, font choices, CSS effects, design tokens), providing explicit guidance on when to use this tool. It implicitly differentiates from siblings by not covering their domains like components or platforms.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. 7 tool updatesv1.5.0
    • First observedget_design_system
    • First observedsearch_all
    • First observedsearch_components
    • First observedsearch_patterns
    • First observedsearch_platforms
    • First observedsearch_stack
    • First observedsearch_styles

TDQS

A4.3/5.0
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 issues

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    C
    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.
    1
    MIT
  • 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.
    2
    18
    1
    MIT

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/redf0x1/ui-ux-pro-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server