What problem does it solve? AI-generated interfaces often look generic and cheap, relying on default fonts, flat cards, harsh shadows, and instant transitions. This Skill enforces a high-end design system so generated React, Tailwind, or HTML output reads like a professional agency build. ## Core Features & Use Cases - Anti-Pattern Blocking: Bans default fonts (Inter, Roboto, Arial), generic borders, harsh shadows, and linear easing that make AI designs look templated. - Variance Engine: Selects from texture archetypes (Ethereal Glass, Editorial Luxury, Soft Structuralism) and layout archetypes (Asymmetrical Bento, Z-Axis Cascade, Editorial Split) so no two outputs look identical. - Component & Motion Recipes: Provides concrete patterns for double-bezel nested cards, button-in-button CTAs, staggered nav reveals, magnetic hover physics, and GPU-safe scroll animations. - Use Case: Ask for a landing page for a SaaS product and receive a dark glassmorphic bento-grid layout with spring-physics transitions, eyebrow tags, and mobile-safe responsive collapse. ## Quick Start Ask the AI to design a landing page or dashboard UI and it will apply the premium archetypes, nested card architecture, and fluid motion rules automatically.
