What problem does it solve? Choosing the right style, color palette, typography, and layout for a UI project requires searching scattered design knowledge, and inconsistent decisions lead to unprofessional interfaces. This Skill provides a searchable design database and an automated design system generator that returns concrete recommendations with reasoning. ## Core Features & Use Cases - Design System Generation: Run a single command to get a complete design system (pattern, style, colors, typography, effects, anti-patterns) for a product type, with optional persistence to a MASTER.md plus per-page override files. - Domain Search: Query 10 domains (style, color, typography, chart, landing, product, ux, icons, react, web) using a BM25 ranking engine over CSV datasets covering 67 styles, 96 palettes, and 57 font pairings. - Stack Guidelines: Retrieve implementation best practices for 13 stacks including React, Next.js, Vue, Svelte, Tailwind, shadcn/ui, SwiftUI, Flutter, and React Native. - Use Case: When asked to build a landing page for a beauty spa, generate a design system with recommended colors and fonts, then pull Tailwind-specific layout and accessibility guidelines before writing the code. ## Quick Start Ask the AI to generate a design system for your project, for example: create a landing page for a fintech dashboard and recommend the style, colors, and typography.
