What problem does it solve?
When a web interface needs to look designed—not just work—this Skill helps you create a clear visual direction, consistent design system, and production-quality layout and motion.
Core Features & Use Cases
- Design-first front-end planning: Define purpose, audience, emotional tone, visual direction, and a single memorable core point before coding.
- Visual system construction: Establish typography scale, color tokens, spacing rhythm, layout logic, motion rules, and surface/border/shadow treatments to keep the UI consistent during iteration.
- Layout and motion with intent: Choose asymmetric hierarchy, depth through overlap, intentional whitespace, and meaningful animations that show information structure and user reactions (avoiding random micro-interactions).
- When to use: Product pages, dashboards, app shells, components, and visual systems where typography, composition, and interaction quality matter as much as implementation correctness.
Quick Start
Ask the AI to design a production-grade landing page UI in a chosen style (for example, industrial or soft organic) by first defining the framework and visual direction, then producing a consistent typography/color/spacing token plan, and finally specifying an asymmetric layout with purposeful animations.
