What problem does it solve? Choosing consistent styles, color palettes, typography, and UX patterns for a new interface is slow and error-prone. This Skill provides a searchable database of UI/UX design knowledge and generates complete design system recommendations with reasoning, so design decisions are grounded in documented guidelines rather than guesswork. ## Core Features & Use Cases - Design System Generation: The --design-system flag aggregates searches across product, style, color, landing, and typography domains, applies reasoning rules from ui-reasoning.csv, and outputs a complete recommendation (pattern, style, hex colors, font pairings, effects, anti-patterns) in ASCII or Markdown format. - BM25 Domain Search: Search 11 domains (style, color, typography, chart, landing, product, ux, icons, react, web, prompt) backed by CSV data files, with automatic domain detection from query keywords. - Stack-Specific Guidelines: Retrieve implementation best practices for 11 stacks including html-tailwind, React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, and shadcn/ui. - Use Case: When asked to build a landing page for a beauty spa, run the design system generator with keywords like "beauty spa wellness elegant" to get a full palette, font pairing, page pattern, and anti-patterns before writing any code. ## Quick Start Ask the AI to design a landing page or dashboard for your product, and it will run the search script with the --design-system flag to produce a complete style, color, and typography recommendation.
