What problem does it solve? Choosing consistent styles, color palettes, fonts, and UX patterns for a new web or mobile interface requires extensive design research, and this Skill replaces that guesswork with a searchable design database and automated design system generator. ## Core Features & Use Cases - Design System Generation: Run a single command with product type and keywords to receive a complete recommendation covering layout pattern, style, hex color palette, font pairing, effects, and anti-patterns to avoid. - Domain-Specific Search: Query 11 CSV-backed domains (style, color, typography, chart, landing, product, UX, icons, React, web, prompts) using a BM25 ranking engine for relevant guidelines. - Stack Guidelines: Retrieve implementation best practices for 11 stacks including React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, and shadcn/ui. - Use Case: When asked to build a landing page for a beauty spa, generate a full design system with elegant typography, soft color palette, and section order, then verify the output against the pre-delivery accessibility and contrast checklist. ## Quick Start Ask the AI to design a landing page for your product type and industry, and it will run the search script with the --design-system flag to produce a complete style, color, and typography recommendation.
