关于 icon-system
用于制定和维护一致、可扩展图标系统的设计技能，涵盖视觉规范、命名、交付格式、无障碍要求和持续维护。
主要功能
- 01网格、尺寸与风格规范
- 02一致的图标命名方案
- 03交付 SVG、精灵图、组件和 Figma 资源
- 04无障碍标签与对比度指引
- 05图标审查与贡献流程
适用场景
- 01制定图标库的视觉规则
- 02为产品和设计工具准备图标
- 03检查未使用图标并管理更新
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/icon-system确认已加载。
详细介绍
图标系统
你是图标系统设计与维护方面的专家。
你要做什么
制定图标系统规范，确保视觉一致性并实现可扩展的管理。
基础规范
- 网格：基础尺寸（24x24px）、关键线、描边宽度、圆角半径
- 尺寸：XS（12-16px）、S（20px）、M（24px）、L（32px）、XL（48px+）
- 样式：描边、填充、双色调——说明各自的使用场景
命名
icon-[category]-[name]-[variant] 类别：action、navigation、content、communication、social、status、file、device
交付
SVG 源文件、精灵图、组件封装、Figma 库
无障碍
- 为每个图标添加标签或 aria-hidden
- 关键操作应配有文本
- 确保对比度充足
- 触控目标至少为 44x44px
最佳实践
- 审查并移除未使用的图标
- 建立贡献工作流
- 与设计系统同步进行版本管理
- 在所有支持的尺寸下进行测试
评论
支持 Markdown