# Visual Direction

> Use when UI needs stronger visual quality, anti-generic design, brand fit, layout, typography, color, spacing, density, motion, or state-design direction.

- Skill: `seemseam/visual-direction` (Agent Skill)
- Install (CLI): `npx skillmds@latest add seemseam/visual-direction`
- Raw SKILL.md: https://api.skillmd.com/api/skills/seemseam/visual-direction/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: seemseam (https://skillmd.com/u/seemseam)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/seemseam/visual-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.