视觉层级与节奏审查
层级决定用户先看什么、再看什么;节奏通过一致重复和有意变化建立秩序。两者都必须结合当前媒介和业务目标判断。
1. 确认对象与模式
读取用户指定或本轮修改的实现及样式,确认媒介、主要任务、关键行动和既有设计系统。用户只要求审查时报告发现;获准修复后再修改。
2. 审查视觉层级
对每个主要区域检查:
- 第一、第二、第三注意点是否清楚,并符合业务优先级。
- 字号、颜色、字重、位置和留白是否共同支持同一个层级。
- 主要行动是否比次要行动明显,还是所有元素同样响亮。
- 重要内容是否被挤压,而装饰或辅助内容反而占据最佳位置。
- 新用户能否在约 5 秒内理解页面主题和下一步行动。
3. 审查节奏
- 间距是否遵循项目尺度,离群值是否有光学或布局理由。
- 字号阶梯是否稳定,重复组件是否真正一致。
- 长页面或演示是否存在少量有目的的节奏变化;完全重复会单调,每段都不同会混乱。
- 调色板是否克制且可追溯到 token,是否存在多个近似颜色。
- 区块分隔与网格对齐是否一致,偏移是有意设计还是误差。
4. 反证与输出
不要把所有奇数值都当错误,也不要用“更大、更粗、更亮”机械解决层级。先确认内容优先级、品牌风格和响应式约束。
按影响排序,每条发现给出位置、当前信号、预期层级、修复方向和验证方法。获准修复时优先统一 token 和重复组件,再调整局部强调,并重新检查响应式和可访问性。
示例
输入:“这个定价页看不出推荐套餐,帮我做层级与节奏审查。”
**输出:**指出三张卡片标题、按钮和背景完全同权,且内边距分别为 16、18、24px;建议先统一卡片节奏,再通过一个品牌色 CTA、标题层级和轻微表面差异突出推荐套餐。
来源与许可
本 Skill 基于 Trystan Sarrade 的 claude-design-system-prompt 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布,详见 LICENSE.txt。