critique-visual-hierarchy

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

2.5k|358|Updated Mar 7, 2026
One-click install
npx skills add https://github.com/Owl-Listener/designer-skills --skill critique-visual-hierarchy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: critique-visual-hierarchy
Source: https://github.com/Owl-Listener/designer-skills/tree/main/visual-critique/skills/critique-visual-hierarchy
Command: npx skills add https://github.com/Owl-Listener/designer-skills --skill critique-visual-hierarchy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

When attention lands in the wrong place on a screen, users miss the primary action and stakeholders lose confidence in the design. This Skill diagnoses why a screen's hierarchy fails and prescribes targeted fixes instead of vague feedback.

Core Features & Use Cases

  • Four-Dimension Critique: Evaluates Entry Point, Eye Flow, Weight, and Emphasis with concrete checks such as 1.5× size differentials between hierarchy levels and one primary emphasis zone per view.
  • Structured Output: For each dimension it delivers an Observation, Problem, and Fix, plus a pass / minor issue / major issue rating.
  • Failure Pattern Detection: Flags common issues like competing primaries, hierarchy flattening, false emphasis, and buried CTAs.
  • Use Case: A landing page gets traffic but few signups. Run this critique to discover the hero image outweighs the call-to-action, then receive a specific fix to restore the intended eye flow.

Quick Start

Ask the AI to critique the visual hierarchy of the attached screen mockup and rate each dimension.

Frequently Asked Questions about critique-visual-hierarchy

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I critique the visual hierarchy of a screen?

Evaluate four dimensions: entry point, eye flow, weight, and emphasis. For each, record a neutral observation, identify the problem and why it matters, then propose a specific fix, and rate the dimension as pass, minor issue, or major issue.

What are the most common visual hierarchy problems in UI design?

The four recurring failure patterns are multiple competing primaries, hierarchy flattening from similar sizes and weights, false emphasis where decoration outweighs function, and buried CTAs that are visually quieter than surrounding content.

How much size difference is needed between hierarchy levels?

Size differentials should be at least 1.5× between hierarchy levels so the distinction reads clearly. Smaller gaps cause hierarchy flattening, where elements compete for attention instead of forming a clear order.

When should I use critique-visual-hierarchy versus the visual-hierarchy skill?

Use critique-visual-hierarchy to diagnose an existing rendered screen where attention lands in the wrong place. Use the visual-hierarchy skill from ui-design when establishing hierarchy in new work that does not exist yet.

How many primary emphasis zones should a screen have?

Exactly one primary emphasis zone per view. Multiple competing emphasis zones cancel each other out, scatter attention, and prevent the eye flow from leading naturally to the primary call-to-action.