Visual Hierarchy

Makes Claude thoughtful about visual weight instead of making everything the same size and yelling for attention. It'll push you to use the full toolkit: size ratios of at least 1.5x, whitespace as a signal, color for CTAs, and positioning based on scanning patterns. Includes the squint test, which is genuinely useful for catching when your hierarchy is mud. The four-level system (primary through quaternary) gives you a vocabulary for talking about importance without bikeshedding. Best for when you're building interfaces and need Claude to care about what users see first, not just what looks clean in Figma.

Install to Claude Code

npx -y skills add owl-listener/designer-skills --skill visual-hierarchy --agent claude-code