| name | visual-direction |
| description | Use when UI needs stronger visual quality, anti-generic design, brand fit, layout, typography, color, spacing, density, motion, or state-design direction. |
Visual Direction
Use this skill when the user asks for better-looking UI, a distinctive visual
direction, brand fit, or a design pass before implementation.
Workflow
- Classify the product surface: operational tool, dashboard, editor, commerce,
docs, marketing, developer tool, AI app, or another domain.
- Inspect existing UI and design-system signals before proposing a new visual
language.
- Define concrete choices for layout, hierarchy, typography, color, spacing,
density, imagery, icon use, and motion.
- Design state behavior: loading, empty, error, hover, active, focus,
selected, disabled, responsive, and reduced-motion states.
- Avoid one-style-fits-all design. Match the surface's workflow frequency,
trust requirements, and information density.
Output
Return a short direction that can drive implementation:
- design intent
- layout and hierarchy
- typography and spacing
- color and contrast posture
- component/state treatment
- motion constraints
- risks or source-of-truth conflicts
Do not copy third-party design language or skill text wholesale. Use external
design examples only as referenced inspiration.
