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
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Product 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. | |
| style | No | Specific style preference (e.g., "glassmorphism", "minimalism", "brutalism") | |
| mode | No | Color mode preference. When "dark", the tool parses Dark_Mode_Colors and returns dark-optimized palette with dark background/text colors. | |
| max_results | No | Maximum items per domain | |
| platform | No | Target platform for design system. If not specified, will be auto-detected from query. Use to override auto-detection. | |
| output_format | No | β οΈ 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_effects | No | Include hover_effects CSS in output. Default: false for ai-optimized, true for other formats. |