What problem does it solve? AI-generated interfaces often look generic and cheap, relying on default fonts, flat cards, harsh shadows, and instant state changes. This Skill enforces an agency-grade design system so generated React, Tailwind, or HTML output reads as a polished, high-end product. ## 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 three vibe archetypes (Ethereal Glass, Editorial Luxury, Soft Structuralism) and three 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 scroll-entry animations using custom cubic-bezier curves. - Use Case: Ask the AI to build a SaaS landing page; it produces a dark glassmorphic layout with a floating pill navbar, bento feature grid, and spring-physics hover states instead of a generic Bootstrap-style page. ## Quick Start Ask the AI to design a landing page or dashboard UI and it will apply the premium archetypes, nested card structures, and fluid motion rules automatically.
