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 rather than a template. ## 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 cheap. - 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 CTAs, staggered nav reveals, cubic-bezier transitions, and GPU-safe animation constraints. - Use Case: Ask the AI to build a landing page for a SaaS product, and it produces a floating glass navbar, bento grid with nested cards, magnetic hover buttons, and scroll-triggered fade-up reveals with mobile fallbacks. ## 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 animated bento grid.
