关于 screenshot-surgery
screenshot-surgery 是用于分析设计的技能，检查视觉层级、间距、色彩角色和视觉张力。它要求先观察再提出建议，包括按视觉权重编号元素并检查优先级冲突。
主要功能
- 01按视觉权重排列可见元素
- 02核对层级与内容优先级
- 03分析间距与分组
- 04按角色分类颜色
- 05识别有意与无意的张力
适用场景
- 01改版前审查截图
- 02评估视觉重点是否符合内容优先级
- 03发现间距或分组不一致
- 04提出改动建议前记录冲突元素
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/screenshot-surgery确认已加载。
详细介绍
截图解剖
像外科医生研究 X 光片一样，绘制设计的解剖结构图。
使用方法
/screenshot-surgery对本次对话中的任意设计应用临床分析约束。
约束
层级映射
- MUST 按视觉权重为可见元素编号 1-5（标明哪些元素最先、其次、再次吸引注意力）
- MUST 注明层级是否与内容优先级相符
- MUST 找出相互竞争的元素（两个视觉权重相同、争夺注意力的元素）
- SHOULD 注明是什么构成了层级：大小、字重、对比度、颜色、位置或留白
间距分析
- MUST 找出是否存在一致的间距单位
- MUST 注明元素分组与邻近程度之间的关系
- SHOULD 检查垂直节奏（基线和区块间距是否规律可循？）
颜色映射
- MUST 指明每种颜色的作用：结构、语义、强调或装饰
- MUST 注明是否有颜色承担了多个相互冲突的作用
张力点
- MUST 找出存在视觉张力的位置（元素之间的竞争、近似对齐、信号冲突）
- MUST 区分有意张力（营造活力）和无意张力（造成混乱）
反模式
- 在观察阶段加入观点
- 跳过标注，直接给出建议
- 只见树木不见森林（记录每个像素，却忽略主要的层级问题）
评论
支持 Markdown