关于 ux-iconography
ux-iconography 是用于规划界面图标的 UX 基础技能，面向设计单屏界面或图标系统的工作。它强调易识别的图形、统一样式、适当标签和可访问性，并指导按平台与设计系统选择图标方案。
主要功能
- 01按平台与场景确定图标用途
- 02采用易识别的通用图形
- 03保持图标样式与动作映射一致
- 04为含义不明的图标添加标签
- 05检查尺寸、触控区域与可访问性
适用场景
- 01为界面操作选择清晰易懂的图标
- 02建立统一且可检索的图标系统
- 03检查仅图标控件的标签与触控区域
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/ux-iconography确认已加载。
详细介绍
图标规范技能
此技能的工作方式（请先阅读）
这是一项生成式基础技能。图标是 AI 助手最容易引入歧义的地方：Claude 会添加没有文字标签的纯图标按钮，选择新奇或装饰性的图形，而不是用户熟悉的隐喻；混用不同风格（有些描边，有些填充，描边粗细也不一致）；还会在同一屏幕中为同一操作使用不同图标。如果图标让用户不得不停下来辨认，就说明它没能发挥作用——它的全部职责就是帮助用户更快识别。
因此，此技能按以下步骤进行：
- 确定上下文——平台／图标库、图标在此处是否有用，以及设计系统的成熟度（这些因素决定风格、标签策略和图标来源）。
- 应用始终适用的核心原则——通用隐喻、统一风格、含义不明显时添加标签、确保图标在目标尺寸下清晰易读，并提供无障碍标签。
- 提出依赖上下文的决策（图标风格、系统图标库还是自定义图标、标签、状态变体、渲染模式、容器），说明利弊，并让用户选择。
接下来，将工作交给 ux-accessibility-audit（标签、对比度、触控目标）、ux-aesthetics-audit（风格一致性、过度设计）和 ux-microcopy-audit（图标标签本身）；如果触控目标很重要，还要交给 ux-mobile-responsiveness-audit。
范围与协作（根据 docs/orchestration-policy.md §9）：此技能负责图标选择、风格和用法。负责某个子部分的同级技能（延后处理——如进入相应环节，由各自技能负责）： ux-buttons 负责按钮标签措辞和按钮结构。在设计系统下继承（仅在从头构建时负责）： ux-typography 负责字体级别，ux-layout-spacing-grids 负责图标所依托的间距／网格——如果存在设计系统，应从其令牌中获取这两者。完整评估审查交由上述审查技能处理。
步骤 0 — 选择图标前先确定上下文
如果信息未知，请提问；如果不等待回答就继续，请说明采用的假设：
- 平台与图标库——iOS／macOS 常用 SF Symbols；Android 常用 Material symbols；Web 可能使用开放图标集或自定义图标库。平台决定默认隐喻、渲染方式和描边粗细。
- 图标在此处是否有用？ 图标有助于呈现高频操作或快速访问的操作，也便于浏览。如果图标不能简化用户流程，就不要使用——杂乱会削弱重要图标的作用。一个图标对应一个操作。
- 设计系统的成熟度——一次性页面需要合适的图形和标签；系统则需要命名、标记、组件结构和令牌，以确保图标集一致且易于查找。
始终适用的核心原则（几乎适用于所有图标）
确保易于理解
- 使用通用、易识别的隐喻——清晰胜过新奇。 用放大镜表示搜索，用箭头表示导航，用齿轮表示设置。巧妙的替代图形（例如用双筒望远镜表示搜索）只会让用户停下来思考。
- ❌ 为“搜索”设计专属图形。✅ 使用大家熟悉、能看作搜索的放大镜。
- 含义不明显时添加标签。 独特或含义模糊的图标需要简短的文字标签（1–3 个词，使用“搜索”“分享”等表示操作的词语）。通用图标有时可以单独使用，但在信息密集或初次使用的场景中，为图标搭配标签是更稳妥的默认做法。
- 纯图标控件必须始终提供无障碍标签。 如果没有可见文字，控件就需要一个无障碍名称，以便屏幕阅读器播报其用途。（如果有可见标签，该标签就可作为无障碍文本——不要重复添加。）
- 一个操作对应一个图标，且避免含义冲突。 同一操作在所有位置都使用相同图标；不要用两个图标表示同一概念。注意，不同产品中的隐喻可能含义各异（爱心、星形或点赞；爱心表示“喜欢”“喜爱”还是“收藏”），并确保用法明确无歧义。
让图标清晰且风格统一
- 保持图标简洁。 提炼出核心形状；精细的细节在小尺寸下会模糊或消失。只有在显示尺寸确实足以呈现时，才添加细节。
- 整套图标采用统一风格。 统一线条粗细、圆角半径、几何形状和色彩处理方式。随意混用描边与填充（或尖角与圆角）会破坏视觉语言。选择一种主要风格。
- 注重视觉平衡，而不只是数学上的均等。 画框尺寸相同 ≠ 视觉分量相同；在相同尺寸下，密集的图形看起来会比稀疏的更重。在画框内调整（并使用统一的容器／留白），让图标看起来同等均衡。
- 针对不同尺寸分别设计；不要机械缩放。 线条粗细应随画框尺寸变化（例如，16px→约 1px，24px→约 1.5px）；小尺寸需要更简洁的几何形状。使用 SVG，让图标在不同像素密度下都保持清晰。
让图标易于使用
- 确保触控目标足够大。 可点击区域应大于图形本身——至少为 44×44pt（iOS）／48×48dp（Android）——并留出内边距，避免误触相邻图标。
- 让色彩统一且有明确用途。 限制调色板：用一种醒目的颜色标示活动或重要图标，其余图标使用柔和／中性色；在色彩具有含义时使用语义色彩（红色 = 破坏性操作等）。不要让彩色图标分散用户对内容的注意力。
取决于具体场景的决策（展示选项，不要自动套用）
逐项说明取舍，并根据步骤 0 给出建议；由用户选择。随意混用风格，或不加判断地给所有图标加标签／不加标签，都是错误做法。
| 决策 | 适用场景 | 应避免／调整的情况 | 默认建议 |
|---|---|---|---|
| 图标风格 | 简洁、以文本为主的 UI 适合用描边；紧凑空间需要更强对比时适合用填充；活泼的品牌适合用彩色／双色调 | 随意混用风格；彩色图标分散注意力，或在小尺寸／无障碍场景下无法辨认 | 选择一种主要风格（描边或填充），并应用于整套图标 |
| 系统图标库还是自定义图标 | 使用 SF Symbols／Material 可保持平台原生风格的一致性，并自动适配字重／缩放／对齐；仅为独特概念使用自定义图标 | 重新设计通用图形；自定义图标与系统的线条／网格不匹配 | 优先使用平台图标库；添加符合其特征的自定义图标 |
| 添加标签还是仅用图标 | 为独特／含义模糊的图标及首次使用场景添加标签；真正通用的图形可仅用图标，但须提供无障碍名称 | 独特操作仅用图标（用户只能猜）；空间紧张时为通用工具栏图标添加过多标签 | 不确定时，将图标与标签搭配使用；始终保留无障碍名称 |
| 状态使用填充还是描边 | 用不同样式表示状态——描边 = 默认，填充 = 已选／活动（收藏、书签、可见性） | 为装饰而非表达含义切换样式 | 仅用填充／描边切换表示状态；确保不同样式的结构完全一致 |
| 渲染模式（Apple） | 单色模式灵活度高；分层模式具有纵深感；调色板／多色模式可表达语义含义 | 在多色会使界面控件显得杂乱时使用多色模式 | 界面元素使用单色模式；仅在语义／功能图标中使用更丰富的模式 |
| 容器与网格 | 使用容器／基准线，确保整套图标对齐一致、触控目标尺寸合适、视觉平衡 | 让每个图标都铺满画框（导致视觉分量不均） | 使用统一画框并裁切／留白；按图标网格对齐 |
| 图标库结构（系统） | 使用命名规则（category/object/modifier）、标签、扁平的单层组件、颜色令牌 | 名称随意、图层结构不一致（导致替换／覆盖出问题，并产生重复项） | 按用途分组，统一命名与标签，并保持组件结构一致 |
验证结果（编排）
交接时使用各审查视角对应的可安装技能
name。仅在该技能已安装时才调用；如果未安装，此技能本身已包含这些规则，请继续执行，不要因此受阻。
选择或设计图标后，应将结果交给各审查视角审核，而不是直接宣布完成。这些都是候选审查视角——审核方式由 docs/orchestration-policy.md 规定，也可以将整个任务交给 ux-design-review。这里，microcopy 属于 Tier A（自动运行）；accessibility、aesthetics 和 mobile-responsiveness 属于 Tier B（可选）——在现有设计系统下，aesthetics 会被跳过，accessibility 会缩小到使用层面；mobile-responsiveness 仅适用于移动设备。如果用户调用此技能是为了处理某个特定事项，请遵守该范围。
ux-accessibility-audit（Tier B — 可选；在设计系统下缩小范围）——仅图标控件是否具有无障碍名称？图标与背景之间的对比度是否达标？触控目标是否足够大？含义是否有时仅靠颜色或图标传达？ux-aesthetics-audit（Tier B — 可选；在设计系统下跳过）——整套图标的风格（描边、几何形状、颜色）是否一致、视觉上是否均衡，且没有过度装饰？ux-microcopy-audit（Tier A）——图标标签是否简短、清晰、以行动为导向，并与产品语气保持一致？ux-mobile-responsiveness-audit（Tier B — 可选；仅适用于移动设备）（面向触控操作时）——在小屏幕上，触控目标和间距是否仍然合适？
此技能将按钮标签文案和按钮结构交由 ux-buttons 处理，将图标所在的间距／网格交由 ux-layout-spacing-grids 处理。如果审核发现冲突，应以用途为准：图标旨在让用户更快识别操作——如果含义模糊、风格不一致或难以辨认，就添加标签、统一风格或移除图标。
常见做法与禁忌
| ❌ 不要 | ✅ 应该 |
|---|---|
| 为不明显的操作使用纯图标按钮 | 搭配标签；始终提供无障碍名称 |
| 自创巧妙或新奇的比喻 | 使用用户熟悉的通用图形 |
| 混用描边、填充和不同粗细的线条 | 整套图标采用统一风格 |
| 同一操作使用不同图标 | 一个操作对应一个图标，处处一致 |
| 塞入过多细节 | 保持简洁，确保小尺寸下也清晰易读 |
| 认为画布尺寸相同就代表视觉权重相同 | 通过容器或内边距进行视觉平衡 |
| 机械地将一个图标缩放到所有尺寸 | 针对不同尺寸分别设计；调整描边粗细；使用 SVG |
| 将点击区域缩小到图形本身 | 触控目标至少为 44pt / 48dp，并留有内边距 |
| 为了装饰而切换填充／描边样式 | 用不同样式表达状态（默认与激活） |
| 重新设计平台标准图标 | 从 SF Symbols / Material 入手；自定义图标应与之匹配 |
| 未经审核就发布图标 | 交由 accessibility + aesthetics + microcopy（+ mobile）审核 |