What problem does it solve? Generic AI-generated interfaces often look like template clones with default fonts, harsh shadows, and static layouts. This Skill enforces a disciplined design system that produces premium, agency-tier interfaces with deliberate typography, nested component architecture, and physics-based motion. ## Core Features & Use Cases - Anti-Pattern Enforcement: Bans generic fonts, stock icons, harsh shadows, and linear transitions so output avoids the default AI-generated look. - Variance Engine: Selects from texture archetypes (Ethereal Glass, Editorial Luxury, Soft Structuralism) and layout archetypes (Asymmetrical Bento, Z-Axis Cascade, Editorial Split) so repeated generations stay visually distinct. - Component & Motion Recipes: Provides concrete patterns for double-bezel nested cards, button-in-button CTAs, staggered navigation reveals, and cubic-bezier spring transitions, with mobile collapse and GPU-safe animation rules. - Use Case: Ask for a landing page for an AI SaaS product and receive React/Tailwind code with a floating glass navbar, bento grid, magnetic hover buttons, and scroll-triggered fade-up reveals that collapse cleanly below 768px. ## Quick Start Design a premium landing page for my AI note-taking app using the high-end visual design style with a bento layout and fluid motion.
