Design-It: Sophisticated UI Style Router

Design-It is the main entry point for the design-it skill system, giving access to 48 distinct, deeply opinionated design styles instead of falling back to generic "AI slop" aesthetics. When a user asks to build a frontend interface, it fuzzy-matches keywords in the request to a specific style using semantic understanding rather than requiring an exact name - "Apple style" or "VisionOS" maps to spatial-design, bento-ui, or glassmorphism; "Windows 8" or "Metro" maps to tile-design; "Terminal" or "Hacker" maps to sci-fi-interface or brutalist-typography; "Bauhaus" or "Clean" maps to swiss-design; "Cyber" or "Matrix" maps to cyberpunk-ui. If no style is specified, it picks the one that best fits the project context.

Use it when a user requests building any frontend interface - website, app screen, or UI component - and a specific, opinionated aesthetic should replace generic defaults. Do not blend styles unless explicitly requested.

The 48 styles are organized into seven categories: Modern UI (minimalism, flat-design, flat-design-2, material-design, glassmorphism, neumorphism, skeuomorphism, claymorphism, aurora-ui, bento-ui), Depth & 3D (3d-ui, isometric-design, layered-design, floating-ui, spatial-design), Typography (swiss-design, editorial-design, typography-first, brutalist-typography), Retro & Historical (brutalism, neo-brutalism, retro-design, y2k-design, cyber-y2k, vaporwave, synthwave, frutiger-aero, retro-futurism), Modern Trends (dark-mode, monochromatic-ui, gradient-design, duotone-design, color-blocking, soft-pastel, high-contrast, vibrant-maximalism, maximalism), Futuristic (cyberpunk-ui, sci-fi-interface, holographic-ui, ai-native-ui, spatial-computing-ui), and Data & Product (dashboard-design, card-based-design, widget-based-design, tile-design, data-dense-design, command-center-ui). Once a style is chosen, its specific SKILL.md file must be read at its relative path before executing.

If the user didn't specify colors, one of 10 award-winning universal palettes must be used with exact hex codes as CSS variables (Yacht Club nautical elegance, Desert Mirage warm/organic, Industrial Chic strong/minimalist, Monochromatic Brown comfort/nostalgic, Earth-Grounded Elegance calm/sustainable, Minimalist Slate professional/tech, Midnight Luxury premium dark mode, Sophisticated Neutral upscale, Warm Tech corporate/modern, Modern Editorial magazine/high-contrast), applied via the 60-30-10 rule: 60% backgrounds/secondary base, 30% primary text/accents, 10% CTA/highlights. Web implementations (React/Vue/HTML) use native CSS variables, grid/flexbox layout, and CSS transitions for hover states; app implementations (React Native/Flutter/SwiftUI) map palettes to the framework's theme engine and use platform-specific shadows/elevation and animations instead of CSS transitions, while keeping the core visual principles.

Developers and designers building a frontend interface who want a deliberate, named aesthetic direction with a sophisticated color system, instead of defaulting to generic gradients and neutral styling. It functions as the dispatcher for the entire design-it family - each of the 48 individual style skills (3d-ui, brutalism, cyberpunk-ui, and the rest) is meant to be loaded through this router's fuzzy-matching and style index rather than invoked standalone.