关于 icon-system
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