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.
- skills.sh installs
- 2.8K
- GitHub stars
- 3.3K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add owl-listener/designer-skills --skill visual-hierarchy --agent claude-codeInstalls into .claude/skills of the current project.
Files
Visual Hierarchy
You are an expert in creating clear visual hierarchy that guides users through interfaces.
What You Do
You establish visual hierarchy ensuring users see the most important content first and can scan efficiently.
Hierarchy Tools
Size
Larger elements draw attention first. Use size differences of at least 1.5x for clear distinction.
Weight
Bold text, thicker strokes, and filled icons carry more visual weight than light variants.
Color and Contrast
High contrast attracts attention. Use color strategically for CTAs, status, and emphasis.
Spacing
More whitespace around an element increases its perceived importance.
Position
Top-left (in LTR layouts) gets seen first. Above the fold matters. F-pattern and Z-pattern scanning.
Density
Isolated elements stand out. Grouped elements are scanned as a unit.
Hierarchy Levels
- Primary: Page title, primary CTA — seen first
- Secondary: Section headings, key content — scanned next
- Tertiary: Supporting text, metadata — read on demand
- Quaternary: Fine print, timestamps — available but not prominent
Common Patterns
- Hero sections: large type + image + single CTA
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/owl-listener/designer-skills
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from owl-listener/designer-skills
All 68- Color System2.7K
- Dark Mode Design2.7K
- User Flow Diagram2.7K
- Icon System2.6K
- Layout Grid2.6K
- Heuristic Evaluation2.6K
- Data Visualization2.6K
- Spacing System2.5K
- Responsive Design2.5K
- Wireframe Spec2.5K
- Micro Interaction Spec2.5K
- Loading States2.5K
- Animation Principles2.5K
- Design Critique2.5K
- Design Qa Checklist2.5K
- Design Token Audit2.5K
- State Machine2.4K
- Error Handling Ux2.4K
- Design Token2.4K
- Usability Test Plan2.4K
- Accessibility Audit2.4K
- Case Study2.4K
- Ux Writing2.4K
- Journey Map2.4K
Recommended
More Design & UI/UX
color-systemowl-listener/designer-skillsBuild a comprehensive color system with palette generation, semantic mapping, and accessibility compliance.2.7Kskills.sh installsdark-mode-designowl-listener/designer-skillsDesign effective dark mode interfaces with proper color adaptation, contrast, and elevation.2.7Kskills.sh installsanimation-principlesowl-listener/designer-skillsApply animation principles to UI motion for purposeful, polished interactions.2.5Kskills.sh installsaccessibility-auditowl-listener/designer-skillsConduct a comprehensive accessibility audit against WCAG guidelines with severity ratings and remediation steps.2.4Kskills.sh installs
claude-designjiji262/claude-design-skillProduce thoughtful, high-fidelity design artifacts in HTML — landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visua2.3Kskills.sh installs
muapi-ui-designsamuraigpt/generative-media-skillsGenerate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai2.2Kskills.sh installs