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 strict design system that produces polished, high-end web interfaces resembling professional agency work. ## Core Features & Use Cases - Anti-Pattern Blocking: Bans common defaults like Inter/Roboto fonts, 1px gray borders, harsh drop 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 Rules: Defines Double-Bezel nested card architecture, button-in-button CTA patterns, staggered nav reveals, and cubic-bezier spring physics, with GPU-safe animation and mobile collapse guardrails. - Use Case: Ask for a landing page for a SaaS product and receive React/Tailwind code with glassmorphic cards, staggered scroll-reveal animations, and responsive fallbacks instead of a generic Bootstrap-style grid. ## Quick Start Ask the AI to design a landing page or UI component and it will apply the premium design system automatically.
