mcpField
H
hierarchy-principles

hierarchy-principles

github.com/dragoon0xDesign & UI684 installsUpdated 35w ago
Repository

About hierarchy-principles

hierarchy-principles is a design skill for applying visual hierarchy rules to design work in a conversation. It emphasizes a clear primary element and uses multiple visual cues to align prominence with content priority.

Key features

  1. 01Establishes a primary element on each screen
  2. 02Uses at least two hierarchy cues
  3. 03Aligns visual weight with content priority
  4. 04Checks hierarchy by covering part of the screen

Use cases

  1. 01Clarifying the focal point of a screen
  2. 02Reviewing layouts with competing elements

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dragoon0x/taste-skills --skill hierarchy-principles

After installing, type/hierarchy-principlesin Claude Code to confirm it loaded.

Details

From the project README

Hierarchy Principles

The single most important thing in any visual design.

How to use

  • /hierarchy-principles Apply hierarchy constraints to any design work in this conversation.

Constraints

Hierarchy Rules
  • MUST establish a clear primary element on every screen. If everything is important, nothing is.
  • MUST create hierarchy through at least two of: scale, weight, contrast, color, space, position
  • MUST ensure visual weight matches content priority (the most important thing is the most prominent)
  • NEVER allow two elements to compete at the same hierarchy level unless intentional tension is the goal
  • SHOULD test by covering half the screen. Can you still tell what's most important?
Hierarchy Tools
  • Scale: Bigger things get seen first. The ratio between largest and smallest defines your range.
  • Weight: Bolder things demand attention. Use sparingly or nothing stands out.
  • Contrast: High-contrast elements pull focus. Low-contrast recedes.
  • Color: Saturated colors advance. Desaturated retreat. One accent in a neutral system creates instant hierarchy.
  • Space: More breathing room signals more importance. Crowded elements feel like metadata.
  • Position: Top-left gets seen first (LTR). Center gets attention. Bottom-right gets ignored unless hierarchy pulls the eye there.
Anti-Patterns
  • Using size as the only hierarchy tool (creates monotonous layouts)
  • Making everything bold (negates the purpose of bold)
  • Competing calls-to-action on the same screen
  • Navigation that's visually louder than the content it serves

Comments

Markdown supported