What problem does it solve? Designing consistent, accessible, and visually coherent interfaces requires deep knowledge of typography, color theory, spacing, and UX patterns that most developers lack. This Skill provides a structured 6-phase design workflow plus a searchable database of 67 styles, 96 color palettes, 57 font pairings, and 99 UX guidelines to ground every design decision in data. ## Core Features & Use Cases - Data-Driven Design Systems: Generate complete design systems (pattern, style, colors, typography, effects, anti-patterns) via a BM25 search engine, with optional persistence for cross-session consistency. - Domain-Specific Search: Query dedicated datasets for styles, colors, typography, charts, landing page patterns, product types, UX guidelines, icons, and React performance, plus stack-specific rules for 13 frameworks including Tailwind, Next.js, shadcn, and Flutter. - Design Quality Guardrails: Built-in references cover WCAG 2.2 accessibility, responsive patterns, state design, design critique frameworks, and the 10 most common AI design failure modes. - Use Case: Ask for a dashboard design for a fintech SaaS product and receive a complete design system with palette, font pairing, and layout pattern, followed by accessible Tailwind component code matching your existing codebase conventions. ## Quick Start Ask the assistant to design a landing page for your product and specify the industry, style mood, and tech stack so it can generate a matching design system and component code.
