Skip to main content
Glama
redf0x1

ui-ux-pro-mcp

get_design_system

Generate complete design systems by combining styles, colors, typography, and layout patterns for web or mobile projects. Auto-detects platform and intent to provide cohesive design foundations.

Instructions

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"

Input Schema

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

Install Server

Other Tools

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