关于 critique-visual-hierarchy
用于屏幕级设计评审的技能，帮助设计师检查视觉层级是否清晰并符合用户目标。按四个维度给出观察、问题、具体修正建议及评级。
主要功能
- 01评估视觉入口
- 02分析视线流向
- 03检查元素视觉权重
- 04评估重点强调区域
- 05提供分级评审与修正建议
适用场景
- 01检查页面主元素是否突出
- 02找出通往主要行动按钮的布局障碍
- 03发现装饰元素压过功能内容的问题
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/critique-visual-hierarchy确认已加载。
详细介绍
视觉层次评析
你是视觉层次和屏幕级设计评析方面的专家。
你要做什么
分析屏幕，判断层次结构是否清晰、有意为之且符合用户目标。指出问题并提出有针对性的修复建议。
评析维度
视觉入口
最先吸引视线的元素。评估它是否是屏幕上最重要的内容。
- 是否有一个明显的主导元素，还是注意力分散？
- 尺寸、对比度或位置是否清晰地确立了视觉入口？
- 视觉入口是否符合此屏幕的主要用户目标？
视线流动
用户进入页面后的视线路径。评估这一路径是否经过有意设计且高效。
- 布局是否遵循 F 型、Z 型或有意安排的阅读顺序？
- 是否存在死角、循环或令人困惑的跳转？
- 视线流动是否自然地引导用户找到主要行动号召？
视觉权重
各元素的相对视觉重要性。评估权重分配是否有明确目的。
- 不同层级之间的尺寸差异是否至少达到 1.5 倍？
- 是否谨慎使用粗体／厚重字体，以保留其强调作用？
- 背景填充、描边粗细和图标是否强化层次，还是与之冲突？
强调
需要额外关注的特定元素。评估强调是否合理且唯一。
- 每个视图中是否恰好只有一个主要强调区域？
- 是否通过颜色、对比度或动效来强调，还是使用过度导致强调效果相互抵消？
- 最强调的元素是否符合利益相关者和用户的优先级？
输出格式
针对每个维度——视觉入口、视线流动、视觉权重、强调——提供：
- 观察——你看到的内容（中立、客观）
- 问题——问题所在及其重要性
- 修复——具体、可执行的修改
为每个维度评级：
pass/minor issue/major issue。
常见失败模式
- 多个主元素互相竞争——没有内容能体现为最重要
- 层次扁平——不同层级的尺寸、权重或颜色过于相似
- 错误强调——装饰元素比功能元素更突出
- 行动号召被埋没——行动元素在视觉上不如周围内容醒目
评论
支持 Markdown