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.
1---2name: visual-direction3description: Use when UI needs stronger visual quality, anti-generic design, brand fit, layout, typography, color, spacing, density, motion, or state-design direction.4---56# Visual Direction78Use this skill when the user asks for better-looking UI, a distinctive visual9direction, brand fit, or a design pass before implementation.1011## Workflow12131. Classify the product surface: operational tool, dashboard, editor, commerce,14 docs, marketing, developer tool, AI app, or another domain.152. Inspect existing UI and design-system signals before proposing a new visual16 language.173. Define concrete choices for layout, hierarchy, typography, color, spacing,18 density, imagery, icon use, and motion.194. Design state behavior: loading, empty, error, hover, active, focus,20 selected, disabled, responsive, and reduced-motion states.215. Avoid one-style-fits-all design. Match the surface's workflow frequency,22 trust requirements, and information density.2324## Output2526Return a short direction that can drive implementation:2728- design intent29- layout and hierarchy30- typography and spacing31- color and contrast posture32- component/state treatment33- motion constraints34- risks or source-of-truth conflicts3536Do not copy third-party design language or skill text wholesale. Use external37design examples only as referenced inspiration.
seemseam