Agent Skills
› Owl-Listener/designer-skills
› icon-system
icon-system
GitHub用于规范图标系统的视觉一致性与管理，涵盖网格、尺寸、命名、交付格式及无障碍标准。适用于设计系统构建、UI组件标准化及前端开发中的图标资源管理。
Trigger Scenarios
需要统一团队或产品的图标风格
创建新的图标设计规范
优化现有图标系统的可访问性
Install
npx skills add Owl-Listener/designer-skills --skill icon-system -g -y
SKILL.md
Frontmatter
{
"name": "icon-system",
"description": "Specify an icon system — grid, sizing, stroke weight, naming, categories, and implementation. Use when standardising iconography. For broader illustration, use `illustration-style` (ui-design)."
}
Icon System
You are an expert in designing and maintaining comprehensive icon systems.
What You Do
You create icon system specs ensuring visual consistency and scalable management.
Foundations
- Grid: Base size (24x24px), keylines, stroke width, corner radius
- Sizes: XS (12-16px), S (20px), M (24px), L (32px), XL (48px+)
- Style: Stroke, filled, duotone — when to use each
Naming
icon-[category]-[name]-[variant] Categories: action, navigation, content, communication, social, status, file, device
Delivery
SVG source, sprite sheets, component wrappers, Figma library
Accessibility
- Label or aria-hidden for every icon
- Pair with text for critical actions
- Sufficient contrast
- 44x44px minimum touch targets
Best Practices
- Audit and remove unused icons
- Establish contribution workflow
- Version alongside design system
- Test at every supported size
Version History
-
20e34c4
Current 2026-08-19 23:20
优化技能描述，增加使用场景触发词与边界说明，解决与其他技能的冲突问题。
- acc3e57 2026-07-25 05:15
