Visual Hierarchy
- 1.1k installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
visual-hierarchy is a UI design skill that applies size, weight, color, spacing, and layout rules so interfaces guide the eye to primary CTAs for developers building landing pages, dashboards, and marketing surfaces.
About
visual-hierarchy is an owl-listener/designer-skills guide for establishing clear visual hierarchy through size, weight, color, spacing, and positioning. The skill specifies at least 1.5x size differences for clear element distinction, uses bold text and filled icons for visual weight, and applies high-contrast color strategically for CTAs and status indicators. Developers reach for visual-hierarchy when landing pages bury primary actions, dashboards overwhelm with equal-weight elements, or marketing surfaces fail to scan. The skill provides concrete hierarchy tools rather than abstract design theory.
- Six hierarchy tools: size (≥1.5× distinction), weight, color/contrast, spacing, position (F/Z patterns), and density/gro
- Four explicit levels: primary, secondary, tertiary, and quaternary content prominence
- Documented patterns for hero sections, card layouts, forms, and navigation state
- Squint-test and whitespace guidance to validate what users see first
- LTR-aware placement (top-left first, above-the-fold) for scan order
Visual Hierarchy by the numbers
- 1,076 all-time installs (skills.sh)
- +57 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #370 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill visual-hierarchyAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.1k |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you improve visual hierarchy on landing pages?
Apply size, weight, color, spacing, and layout rules so landing pages, dashboards, and marketing surfaces guide the eye to primary CTAs and scannable content.
Who is it for?
Developers building landing pages, dashboards, or marketing UIs who need concrete hierarchy rules for CTAs, typography, and scannable layouts.
Skip if: Developers working exclusively on backend APIs or database schemas with no UI surface to design.
When should I use this skill?
The user asks to improve visual hierarchy, guide eye flow to CTAs, or make a landing page or dashboard more scannable.
What you get
Hierarchy-adjusted layouts with sized CTAs, weighted typography, and contrast-driven focal points
- Hierarchy-adjusted UI layout
- CTA focal-point specification
By the numbers
- Recommends at least 1.5x size difference for clear visual hierarchy distinction
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
1. Primary: Page title, primary CTA — seen first 2. Secondary: Section headings, key content — scanned next 3. Tertiary: Supporting text, metadata — read on demand 4. Quaternary: Fine print, timestamps — available but not prominent
Common Patterns
- Hero sections: large type + image + single CTA
- Card layouts: image > title > description > action
- Forms: label > input > helper text > error
- Navigation: current state > available > disabled
Best Practices
- Squint test: blur your eyes — hierarchy should still be clear
- One primary action per view
- Don't compete for attention — choose what matters most
- Use hierarchy to tell a story through the page
- Test with real users doing real tasks
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Pick visual-hierarchy over generic frontend skills when the problem is eye-flow and CTA prominence rather than component architecture or state management.
FAQ
What size difference does visual-hierarchy recommend?
The visual-hierarchy skill recommends at least 1.5x size differences between hierarchy levels so primary elements like CTAs clearly stand apart from secondary content on landing pages and dashboards.
Which tools does visual-hierarchy use to guide attention?
The visual-hierarchy skill applies five hierarchy tools: size, weight, color and contrast, spacing, and positioning to ensure users see the most important content and CTAs first.
Is Visual Hierarchy safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.