Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
| PORT | No | HTTP server port (when using HTTP transport) | 3000 |
| MCP_HTTP_HOST | No | HTTP server host | localhost |
| MCP_LOG_LEVEL | No | Log level (debug, info, warn, error) | info |
Capabilities
Features and capabilities supported by this server
| Capability | Details |
|---|---|
| tools | {
"listChanged": true
} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| get_design_system | 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.
INTENT DETECTION: Layout is auto-detected based on query structure:
INTENT KEYWORDS:
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" |
| search_all | 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" |
| search_styles | 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" |
| search_components | 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" |
| search_patterns | 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" |
| search_stack | 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" |
| search_platforms | 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:
EXAMPLES: "ios navigation patterns", "android material button", "swiftui style flutter", "ios safe area", "material 3 color system" |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
No prompts | |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
No resources | |