ワンクリックでManusで任意のスキルを実行

hierarchy-principles

スター2

フォーク2

更新日2026年2月26日 17:02

Visual weight, attention order, and the decisions that guide the eye. Use when building layouts, evaluating information architecture, or diagnosing why a design feels confusing.

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

Manusで実行

ソース

Dragoon0x

Dragoon0x/taste-skills

GitHub リポジトリを開く Creator のリポジトリを見る

ダウンロード

Manusで実行

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

このリポジトリの他の Skills

同じリポジトリ

learning-by-making

Dragoon0x/taste-skills

Build taste through volume of output, deliberate failure, and speed. Taste cannot be developed by watching. It's sharpened by making, failing, and making again. Use when designing practice routines, breaking through creative blocks, or helping someone move from analysis to execution.

2026-02-272

taste-as-strategy

Dragoon0x/taste-skills

Use taste as a competitive moat and business advantage. In the AI and vibe-coding era, execution is commoditized. Taste is the defensible edge. Use when advising founders on product differentiation, building product culture, evaluating why some products win despite fewer features, or understanding taste as a strategic asset.

2026-02-272

taste-gap

Dragoon0x/taste-skills

Navigate the gap between what you can see and what you can make. The Ira Glass gap. Use when a designer is frustrated by the distance between their taste and their output, when mentoring someone through a creative plateau, or when someone is considering quitting because their work doesn't match their vision.

2026-02-272

consumption-discipline

Dragoon0x/taste-skills

Structured exposure habits for building taste through relentless, intentional consumption. Not passive scrolling. Active intake across design, architecture, film, music, food, and culture. Use when building a taste practice, advising on professional development, or diagnosing why someone's design range feels narrow.

2026-02-272

absence-audit

Dragoon0x/taste-skills

Notice what's deliberately missing from a design. Restraint is a taste signal. Use when studying minimalist products, evaluating design maturity, or understanding the power of removal.

2026-02-262

decision-tracing

Dragoon0x/taste-skills

Reverse-engineer why a design decision was made. Move from observation to inference. Use when studying products you admire, learning from competitors, or building analytical design thinking.

2026-02-262

name	hierarchy-principles
description	Visual weight, attention order, and the decisions that guide the eye. Use when building layouts, evaluating information architecture, or diagnosing why a design feels confusing.

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