技能介绍

要解决什么问题

产品里缺图标时，常见路径是：从图库挑一套、在 Figma 里手画，或让前端直接贴第三方 SVG。结果是描边宽度、网格、圆角各画各的，深色主题下 currentColor 没统一，装饰性图标和「有含义」的图标在 ARIA 上混用，SVGO 一跑还把动画或 viewBox 弄坏。Ink 面向的是：用可复现的规格产出干净 SVG，而不是再堆一层「AI 出图」。

技能如何工作

Ink 把请求按配方路由：icon（单图标）、system（图标系统）、sprite（符号精灵）、illustration、animate、theme、a11y、optimize 等。默认走 SPEC → GRID → DRAW → OPTIMIZE → INTEGRATE：先定用途与平台，再锁定 16/20/24 等网格与描边规则，绘制路径，做生产级优化，最后按目标交付内联 SVG、<symbol> 精灵或组件交接。

核心约定包括：

默认 currentColor 填充/描边，便于主题化
每个图标带可访问性标注（装饰性 aria-hidden="true"；独立语义用 role="img" 与 title/aria-labelledby）
优化目标：标准化 viewBox、去编辑器元数据；简单图标 SVGO 后尽量 ≤4KB；大集（10+）优先精灵减包体

与上下游的边界在资料里写得很清楚：Muse 给设计令牌，Frame 给 Figma 规格；产出给 Artisan 做 React/Vue 组件、Vitrine 做 Storybook 目录；像素风应交给 Dot，位图/照片类交给 Sketch。

适用边界与注意点

先问再画：单次请求超过 20 个图标、网格尺寸不明、或必须对齐既有图标库时，应先对齐规格。
绝不：在 SVG 里嵌光栅、省略 viewBox、集内混用描边宽度；对带动画/脚本的 SVG 用默认 SVGO 全量压缩。
多平台渲染时，必要时把描边转轮廓路径，避免不同引擎下描边缩放不一致。

截图预览

使用场景

为控制台补齐加载、成功、告警等状态图标，先在 24×24 网格定描边与圆角，再交付可 `currentColor` 主题化的 SVG。
已有十几个内联图标要合并成 `<symbol>` 精灵表，并在 SVGO 优化后控制单图标体积与打包策略。
营销落地页需要 hero/spot 点缀插画，要求纯矢量、不嵌位图，并默认用 `currentColor` 便于换肤。
对现有图标集做一致性审计：描边宽度、网格对齐混乱，需要报告并修正装饰性与语义图标的 ARIA 标注。

适合人员

维护 React/Vue 组件库的前端工程师，需要把 Ink 产出的 SVG 交给 Artisan 集成，并统一 `aria-hidden` 与纯图标按钮的控件标注。
设计系统维护者，从 Frame/Figma 接收图标规格后，要产出网格、命名与描边规则文档并交付整套 SVG。
负责控制台与数据产品的 UI 工程师，在深色主题下要求图标满足 WCAG 2.2 非文本对比度（≥3:1）且可批量优化。
做寻路或安全提示的产品/设计同学，需要按象形图规范（如 ISO 7001 场景）验证 16px/48px 尺度的可读性。