What problem does it solve? Choosing coherent styles, color palettes, font pairings, and layout patterns for a new UI project is slow and inconsistent. This Skill provides a searchable design knowledge base and an automated design system generator so every UI decision is grounded in documented guidelines. ## Core Features & Use Cases - Design System Generation: Run a single command with product type and keywords to receive a complete recommendation covering page pattern, style, hex color palette, typography pairing, effects, and anti-patterns to avoid. - Multi-Domain Search: Query 10 domains (style, color, typography, chart, landing, product, ux, icons, react, web) using a BM25 ranking engine over CSV datasets. - Stack-Specific Guidelines: Retrieve implementation best practices for 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, generate a design system with recommended pattern, colors, and fonts, then pull UX accessibility rules and Tailwind stack guidelines before writing code. ## Quick Start Ask the AI to design a landing page for your product and have it run the search script with the --design-system flag to produce a full style, color, and typography recommendation.
