Visual Hierarchyby Owl-Listener

Visual Hierarchy Skill.

Choose what should be noticed first, then make the composition support that choice.

UI Design
Composition

Source Review · Visual HierarchySKILL.md

Task UI Design Produces • A prioritized content hierarchy for one view. • A composition rationale using multiple attention cues. • A quick visual-review and task-testing checklist. Before You Start Needs real content and rendered review; no visual scoring tool is bundled.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Make the Intended Reading Order Visible

A visual-composition reference for assigning attention across content levels with multiple reinforcing cues.

Source-based workflowNot an execution benchmark

The Working Approach

Visual Hierarchy addresses the order in which an interface attracts attention. It combines size, weight, contrast, whitespace, position, and density rather than relying on one oversized heading or a bright button. The source separates primary, secondary, tertiary, and background information.

It is a composition guide for new work, not a substitute for testing an existing screen. Common scanning patterns and suggested size differences are heuristics. The actual hierarchy should be checked against the task and audience, including layouts whose reading direction differs from the source's left-to-right examples.

Expected Deliverables

A prioritized content hierarchy for one view.
A composition rationale using multiple attention cues.
A quick visual-review and task-testing checklist.

See the Example Brief

From Brief to Review

01
Rank the Content
Choose the primary action or message and identify what should be scanned next or read on demand.
02
Assign Visual Weight
Use coordinated changes in size, spacing, contrast, and grouping rather than making every element prominent.
03
Check the Reading Order
Use a squint test and real task observation to see whether attention follows the intended sequence.

02 When to Use It

When to Use It

Needs real content and rendered review; no visual scoring tool is bundled.

A Good Fit

New Screen CompositionUseful when several content blocks compete for prominence.
Action PriorityHelps make one primary action distinct from supporting controls.

Limits to Check

Not a Full Screen CritiqueThe source positions it as hierarchy establishment; auditing an existing screen is a related task.
Heuristics Need ContextPosition and scanning assumptions should be checked for the audience and writing direction.

Bring These Inputs

Content and ActionsSupply the actual text, controls, imagery, and metadata.
Task PriorityState what a visitor should notice or do first.
Layout ContextProvide viewport, reading direction, and existing brand constraints.

03 Decisions That Matter

Decisions That Matter

Whitespace Carries Emphasis
Isolation can strengthen an element without adding another color or heavier font.
Grouping Changes Scanning
Related items can read as a unit, while an isolated item draws attention as an exception.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Use the repository's documented installation route and retain any referenced companion files. This entry describes a focused design method rather than an executable application.

Upstream Source File

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/visual-hierarchy/SKILL.md

Needs real content and rendered review; no visual scoring tool is bundled.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use visual-hierarchy to compose a review screen containing a document title, unresolved feedback, version metadata, and an approve action. Define four priority levels and explain the size, spacing, and contrast cues. Keep one primary action and account for mobile reading order.

Inspect the Result

Check the actual output against these observable criteria.

The intended primary element remains clear in a squint test.
Supporting metadata does not compete with the main task.
Grouping reflects meaning rather than arbitrary proximity.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill File: ui-design/skills/visual-hierarchy/SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-07 · 9a6930cf84a8

Editorial Source Summary

A visual-composition reference for assigning attention across content levels with multiple reinforcing cues.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Is hierarchy just font size?

No. The source combines size with weight, contrast, spacing, position, and density.

Should every section have a primary CTA?

The guidance favors one primary action per view rather than several equally dominant controls.

Does a squint test replace user testing?

No. It is a quick composition check; task-based observation is still needed to assess whether users follow the intended order.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills