# Visual Direction Planner

> Define a visual direction for a website or page. Use when Codex needs to shape the look and feel of a site, including mood, typography, spacing, density, hierarchy, style references, and visual consistency.

- Skill: `yuriyarhat-cyber/visual-direction-planner` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add yuriyarhat-cyber/visual-direction-planner`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yuriyarhat-cyber/visual-direction-planner/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: yuriyarhat-cyber (https://skillmd.com/u/yuriyarhat-cyber)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/yuriyarhat-cyber/visual-direction-planner

---


# Visual Direction Planner

Choose a visual language with intent.

## Workflow

1. Define the brand or page goal.
2. Define the desired emotional tone.
3. Choose a visual direction that supports that tone.
4. Define typography, spacing, density, and hierarchy.
5. Keep the direction consistent across sections.
6. End with the biggest visual risk to avoid.

## Rules

- Match visual style to audience and offer.
- Avoid conflicting visual signals.
- Prefer one coherent direction over mixed styles.
- Keep guidance usable by a designer or developer.

## Output expectation

Produce:
- visual direction
- typography direction
- spacing and hierarchy guidance
- style risks to avoid