What problem does it solve? AI-generated interfaces often look generic and interchangeable, lacking a clear visual point of view. This Skill guides the creation of frontend interfaces where typography, color, layout, and motion are deliberately designed rather than defaulted. ## Core Features & Use Cases - Visual Direction Framing: Establishes purpose, audience, tone, and a committed aesthetic direction (minimal, editorial, brutalist, retro-futurist, etc.) before any code is written. - Design System Construction: Defines type hierarchy, color variables, spacing rhythm, layout logic, and motion rules using CSS variables or project tokens. - Anti-Pattern Guardrails: Explicitly avoids generic SaaS hero sections, random accent colors, placeholder typography, and unmotivated animation. - Use Case: When asked to build a landing page or dashboard, the Skill produces a cohesive interface with a distinctive display font, a committed palette, atmospheric backgrounds, and one or two memorable motion moments instead of a default card grid. ## Quick Start Build a landing page for my product with a bold editorial design direction, distinctive typography, and intentional motion.
