What problem does it solve?
This Skill turns generic, forgettable interfaces into coherent, memorable frontends by providing a clear visual direction and production-ready implementation guidance so design quality matches engineering quality.
Core Features & Use Cases
- Design Direction: Help choose a single visual direction (e.g., editorial, industrial, playful) and commit to it to avoid diluted, generic UI.
- Visual System Definition: Define type hierarchy, color variables, spacing rhythm, layout logic, motion rules, and surface treatments that scale with the product.
- Composition & Motion: Recommend composition strategies (asymmetry, overlap, whitespace) and meaningful motion patterns that reveal hierarchy and support user tasks.
- Quality Gate: Ensure accessibility, responsiveness, and production-grade implementation rather than just a pretty mock.
- Use Cases: Creating a product landing page, designing a dashboard or app shell, upgrading a bland interface, and translating a concept into a concrete visual system.
Quick Start
Design a landing page and component system that feels editorial and trustworthy, specifying primary typography, a cohesive color palette, a spacing scale, layout logic, and one meaningful load animation.
