visual-direction

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

1. Classify the product surface: operational tool, dashboard, editor, commerce, docs, marketing, developer tool, AI app, or another domain.
2. Inspect existing UI and design-system signals before proposing a new visual language.
3. Define concrete choices for layout, hierarchy, typography, color, spacing, density, imagery, icon use, and motion.
4. Design state behavior: loading, empty, error, hover, active, focus, selected, disabled, responsive, and reduced-motion states.
5. 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.