菜单
This skill should be used to fix visual hierarchy when everything looks equally important, CTAs don't stand out, or users miss key information. Applies Von Restorff Effect, Serial Position Effect, and Law of Prägnanz.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/rohunvora/my-claude-skills --skill fix-hierarchy命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Generate minimal HTML pages to review Claude Code output in a browser. Use when terminal output is hard to read, when reviewing lists/tables/drafts, or when user says "show me", "make this reviewable", "quick view", or "open as webpage". Produces unstyled semantic HTML only.
Master LLM-as-a-Judge evaluation techniques including direct scoring, pairwise comparison, rubric generation, and bias mitigation. Use when building evaluation systems, comparing model outputs, or establishing quality standards for AI-generated content.
Build a design system from scratch using the Design Graph methodology. Use when starting a component library, creating design tokens, establishing typography scales, or structuring a theme. Based on Brent Jackson's (jxnblk) constraint-based systems.
基于 SOC 职业分类
正在显示 SKILL.md
| name | fix-hierarchy |
| description | This skill should be used to fix visual hierarchy when everything looks equally important, CTAs don't stand out, or users miss key information. Applies Von Restorff Effect, Serial Position Effect, and Law of Prägnanz. |
Applies these laws from lawsofux.com:
When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
Application:
Make ONE thing visually distinct:
- Different color (only CTA is blue)
- Different size (hero text 2x larger)
- Different weight (only headline is bold)
- Different treatment (only CTA has shadow)
Violation: Multiple elements using the "special" treatment.
Users best remember the first and last items in a series.
Application:
FIRST position: Most important action/info
LAST position: Secondary important action
MIDDLE: Supporting content (will be skimmed)
For navigation: Home (first), CTA (last) For forms: Key field (first), Submit (last) For lists: Critical items at ends
People perceive and interpret ambiguous or complex images as the simplest form possible.
Application:
Reduce to minimum elements needed:
- Remove decorative complexity
- Use simple shapes over complex ones
- Clear figure/ground relationship
- Obvious visual hierarchy
Test: Can a user describe the page in one sentence?
1. VON RESTORFF: Is exactly ONE element isolated/distinct?
2. SERIAL POSITION: Are key items at start/end?
3. PRÄGNANZ: Is hierarchy immediately obvious?
HIERARCHY DIAGNOSIS
Von Restorff Effect:
Primary element: [what should stand out]
Currently isolated: [what actually stands out]
Competing elements: [list of things fighting for attention]
FIX: [make X distinct, reduce prominence of Y]
Serial Position Effect:
First position: [what's there] → [what should be]
Last position: [what's there] → [what should be]
FIX: [reorder]
Law of Prägnanz:
Complexity score: [high/medium/low]
Can describe in one sentence: [Yes/No]
FIX: [simplify by...]
| Problem | Law | Fix |
|---|---|---|
| CTA invisible | Von Restorff | Make it the ONLY colored/bold element |
| Users skip content | Serial Position | Move to first or last position |
| Page overwhelming | Prägnanz | Remove 30% of elements |
| Everything bold | Von Restorff | Unbold everything except ONE |
| Nav items equal | Serial Position | Emphasize first and last |