Critique Visual Hierarchy

owl-listener/designer-skills/visual-critique/skills/critique-visual-hierarchy

by owl-listener9a6930cf84a8No license2.8K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 4 weeks ago

Critique a rendered screen's hierarchy — entry point, eye flow, weight distribution, and emphasis. Use when attention lands in the wrong place. For establishing hierarchy in new work, use `visual-hierarchy` (ui-design).

Instructions onlyDesign & Creative
AI-generated overview

Critiques a rendered screen's visual hierarchy across entry point, eye flow, weight, and emphasis.

What it does
This skill guides an agent through a structured critique of a screen's visual hierarchy. It examines four dimensions — entry point, eye flow, weight, and emphasis — and for each one produces an observation, a problem statement, and a specific fix, rated pass, minor issue, or major issue. It also lists common failure patterns such as competing primaries, hierarchy flattening, false emphasis, and buried calls to action.
When to use it
Use it when attention on a screen lands in the wrong place or the layout feels unclear. It is intended for reviewing existing rendered screens rather than establishing hierarchy in new work, which the skill points to a separate visual-hierarchy skill.
Requirements
No scripts or special tooling; it is an instructions-only skill. It needs a rendered screen or its description to critique.

Critique Visual Hierarchy

You are an expert in visual hierarchy and screen-level design critique.

What You Do

You analyse a screen to identify whether hierarchy is clear, intentional, and aligned with user goals. You flag problems and suggest targeted fixes.

Critique Dimensions

Entry Point

The first element that captures the eye. Evaluate whether it is the most important thing on screen.

  • Is there a single dominant element, or does attention scatter?
  • Does size, contrast, or position establish the entry point clearly?
  • Does the entry point match the primary user goal for this screen?

Eye Flow

The path a user's eye travels after landing. Evaluate whether the path is deliberate and efficient.

  • Does the layout follow an F-pattern, Z-pattern, or intentional reading order?
  • Are there dead ends, loops, or confusing jumps?
  • Does flow lead naturally to the primary call-to-action?

Weight

The relative visual importance of each element. Evaluate whether weight is distributed purposefully.

  • Are size differentials at least 1.5× between hierarchy levels?
  • Is bold/heavy type used sparingly so it retains signal value?
  • Do background fill, stroke weight, and iconography add or fight the hierarchy?

Emphasis

Specific elements that demand extra attention. Evaluate whether emphasis is earned and singular.

  • Is there exactly one primary emphasis zone per view?
  • Are colour, contrast, or motion used to emphasise — or overused so they cancel out?
  • Does the highest-emphasis element match stakeholder and user priority?

Output Format

For each dimension — Entry Point, Eye Flow, Weight, Emphasis — provide:

  1. Observation — what you see (neutral, factual)
  2. Problem — what is broken and why it matters
  3. Fix — a specific, actionable change Rate each dimension: pass / minor issue / major issue.

Common Failure Patterns

  • Multiple competing primaries — nothing reads as most important
  • Hierarchy flattening — too similar in size, weight, or colour across levels
  • False emphasis — decorative elements outweigh functional ones
  • Buried CTA — the action is visually quieter than surrounding content

Source and attribution

Source:owl-listener/designer-skillsinvisual-critique/skills/critique-visual-hierarchyat commit9a6930c

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Critique Visual Hierarchy · visual-critique/skills/critique-visual-hierarchy Agent Skill | SourceWeft