SuperAPI AI 工具集

icon-design

设计与创作

查看项目

更新于 10-15 17:18

技能介绍

用途:为 UI 建立一致、可访问的 SVG 图标系统,规范网格、描边与样式,并给出图标与文字对齐、动效和无障碍做法。

主要能力:

  • 基础模板与属性:viewBox 0 0 24 24,fill="none",stroke="currentColor",stroke-width 2,linecap/linejoin 为 round。
  • 网格体系:24/20/16/32/48 各尺寸及对应描边宽度;24x24 下 keyline 为圆形 20、方形 18、竖矩形 16x20、横矩形 20x16,活动区 20x20。缩放会使描边变细,建议单独绘制或使用 vector-effect="non-scaling-stroke"。
  • 视觉修正:三角形/播放右移约 1px,圆形比方形大约 10%,尖顶可略超出边界;全组保持相同描边宽度。
  • 样式:Outline、Filled、Duotone(主色描边 + 低透明度填充),圆角与直角风格二选一并统一。
  • 语义图标选择、常用动作对应图标(关闭 X、返回箭头、菜单、搜索、设置、用户、通知、删除、编辑、新增、分享、下载、对勾、信息、警告、错误)。
  • 路径命令与由 primitives 组合图标;图标与文字对齐(inline-flex、gap、em 尺寸);动效(悬停旋转、spinner、pathLength="1" 的描边绘制)。
  • 无障碍:装饰性图标加 aria-hidden="true" focusable="false";独立图标按钮加 aria-label;触控目标 24x24 为 WCAG 2.2 AA 下限,建议 44x44px 或 48dp;表意图标对比度 3:1。
  • 校验:将全部图标渲染到 16/20/24/32px、明暗背景与文字旁并截图比对,可用 npx playwright screenshot --full-page "file://$PWD/icons.html" icons.png 生成截图检查。

使用方式:先读取 .agents/design-context.md 中的品牌图标风格与颜色 token;若项目已用 Lucide、Heroicons、Phosphor、Material Symbols,需匹配其网格与描边,优先复用库图标而非新绘。

限制:资料未提供具体安装步骤、版本、收费与性能数据,暂未提供。