用途
该技能用于确定用户界面中哪个元素应最先、其次、再次吸引用户注意。视觉层级通过尺寸、字重、颜色和弱化策略，控制用户处理信息的顺序。
主要能力
技能提供了一套建立视觉层级的方法，涵盖以下策略：
- 尺寸 + 字重：适用于主标题、重要行动号召（CTA）。
- 颜色对比：适用于次要内容、辅助文本。
- 弱化：当主元素不够突出时使用。
- 字重/对比平衡：适用于图标旁的文本、边框。
使用方式
技能定义了四步执行工作流：
- 识别主元素：确定屏幕上唯一最重要的内容、用户应执行的操作、关键信息。
- 评估当前层级：检查每个元素的视觉重量，包括尺寸（越大越吸引注意）、字重（越粗越重要）、颜色（对比度越高越突出）、留白（周围空间越多越显眼）。
- 应用多因素层级：不要仅依赖尺寸，使用字重（600-700）强调，使用颜色（灰度）弱化，保持尺寸合理。
- 弱化竞争元素：如果主元素不够突出，降低周围元素的对比度，对次要内容使用更柔和的颜色，移除不必要的背景。
适用场景
技能适用于需要建立清晰视觉层级的界面设计场景，例如营销页面主视觉、仪表盘卡片等。技能提供了常见模式参考：
- 营销页主视觉：H1 使用 48px、字重 700、深色作为主元素；CTA 使用 16px、品牌实色作为次要元素；正文使用 16px、字重 400、灰色作为第三层级。
- 仪表盘卡片：指标使用 32px、字重 700 作为主元素；标签使用 14px、字重 400、灰色作为次要元素；操作使用文本链接、品牌色作为第三层级。
限制
技能包含决策标准（PASS/FAIL）和反模式列表，用于判断层级是否合理。PASS 标准包括：最重要元素具有最高视觉重量、层级使用字重/颜色而非仅尺寸、周围元素被弱化、视觉路径清晰（主→次→第三）。FAIL 标准包括：仅依赖字号、所有元素同等强调、关键元素被埋没、装饰元素产生竞争。反模式包括：标志大于标题（品牌压过价值）、60px 标题配 12px 正文（尺寸极端）、所有文本加粗（无突出）、大号章节标题（内容被埋没）。技能引用了 references/size-isnt-everything.md、references/emphasize-by-de-emphasizing.md、references/ignore-document-hierarchy.md，并提供了 examples/visual-hierarchy/ 中的前后对比案例。