What problem does it solve? AI-generated interfaces often look generic and cheap, relying on default fonts, flat cards, harsh shadows, and basic transitions. This Skill enforces a strict design system that produces high-end, agency-quality web interfaces in React, Tailwind, or HTML. ## Core Features & Use Cases - Anti-Pattern Blocking: Bans generic fonts (Inter, Roboto), harsh shadows, 1px gray borders, and linear transitions that make designs look templated. - Variance Engine: Selects from curated vibe archetypes (Ethereal Glass, Editorial Luxury, Soft Structuralism) and layout archetypes (Asymmetrical Bento, Z-Axis Cascade, Editorial Split) so no two outputs look alike. - Component & Motion Mastery: Defines Double-Bezel nested card architecture, button-in-button CTAs, staggered nav reveals, and spring-physics cubic-bezier transitions with GPU-safe animation rules. - Use Case: Ask the AI to build a SaaS landing page, and it returns a dark glassmorphic bento grid with floating pill navigation, staggered scroll reveals, and mobile-safe responsive collapse instead of a generic Bootstrap-style layout. ## Quick Start Use the high-end-visual-design skill to build a premium landing page for my AI startup with a dark glass aesthetic.
