What problem does it solve? AI-generated interfaces often look generic because they default to common fonts, flat cards, harsh shadows, and basic transitions. This Skill enforces a high-end agency design language so generated React, Tailwind, or HTML output follows consistent premium visual and motion rules. ## Core Features & Use Cases - Anti-Pattern Blocking: Bans default fonts (Inter, Roboto, Arial), generic borders, harsh shadows, and linear transitions that make designs look cheap. - Variance Engine: Selects from three vibe archetypes (Ethereal Glass, Editorial Luxury, Soft Structuralism) and three layout archetypes (Bento, Z-Axis Cascade, Editorial Split) so outputs vary while staying premium. - Component & Motion Rules: Defines Double-Bezel nested card architecture, button-in-button CTAs, custom cubic-bezier transitions, staggered nav reveals, and GPU-safe animation guardrails. - Use Case: Ask for a SaaS landing page and receive a dark glassmorphic layout with a floating pill navbar, bento grid cards, spring-like hover physics, and scroll-triggered fade-up reveals that collapse cleanly on mobile. ## Quick Start Use the soft-skill design rules to build a landing page for my AI startup with a hero section, feature cards, and a pricing block.
