What problem does it solve? Frontend interfaces generated by AI often converge on generic SaaS aesthetics—default fonts, predictable blue palettes, and cookie-cutter layouts. This Skill guides the creation of distinctive, production-grade web interfaces by enforcing a design-thinking workflow: ask about purpose and tone first, commit to a bold aesthetic direction, then implement with rigorous accessibility, responsive, and motion standards. ## Core Features & Use Cases - Design Thinking Protocol: Asks about purpose, tone, constraints, and differentiation before coding, then commits fully to one of eleven aesthetic directions (brutalist, editorial, luxury, playful, and more). - Anti-Generic Design Rules: Explicitly bans overused fonts (Inter, Roboto, Space Grotesk), generic SaaS blue, glass morphism, and Apple mimicry, while encouraging gradient meshes, textures, and characterful typography. - Progressive Reference Files: Ships ACCESSIBILITY.md (WCAG 2.1 AA), MOTION-SPEC.md (easing curves and durations), RESPONSIVE-DESIGN.md (mobile-first breakpoints), and DESIGN-SYSTEM-TEMPLATE.md (fixed vs. project-specific vs. adaptable elements). - Use Case: Ask for a landing page for a fintech product; the Skill proposes 2-3 distinctive color and typography directions, then implements the chosen one with Tailwind, shadcn components, and WCAG-compliant contrast. ## Quick Start Ask the assistant to design and build a landing page or component, describing the product's purpose and the aesthetic tone you want.
