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.

yuriyarhat-cyber 9daea5d 2 files · 1.1 KB Updated

File contents

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

yuriyarhat-cyber/multi-agent-core/tree/main/skills/visual-direction-planner commit 9daea5d315

Frequently asked questions

npx skillmds@latest add yuriyarhat-cyber/visual-direction-planner