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 a strict design system that produces agency-tier web interfaces with deliberate typography, spatial rhythm, and physics-based motion. ## Core Features & Use Cases - Anti-Pattern Blocking: Bans generic fonts (Inter, Roboto, Arial), heavy icons, 1px gray borders, harsh drop shadows, and linear transitions that make 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 each output is visually distinct. - Component & Motion Patterns: Provides concrete recipes for Double-Bezel nested cards, button-in-button CTAs, staggered navigation reveals, magnetic hover physics, and scroll-triggered entry animations using custom cubic-bezier curves. - Use Case: Ask for a landing page for a SaaS product and receive React/Tailwind code with a floating glass navbar, bento grid layout, spring-like hover interactions, and mobile-responsive collapse behavior. ## Quick Start Use the high-end-visual-design skill to build a premium landing page for my AI startup with a dark glass aesthetic and smooth scroll animations.
