让Claude帮你画SVG图标！Ink：一套从生成到优化的完整矢量设计Skill

做设计的人都知道，最烦的不是没有灵感，而是——灵感有了，图标的像素对不上、插画风格不统一、SVG 代码乱七八糟根本没法用。每次想给产品加一套图标，都要反复调、反复改，头发都掉了几根。

最近我发现了一个专门解决这个问题的 Claude Skill——Ink。它不是那种”给你生成一张图”的 AI 工具，而是真正在代码层面帮你生成 SVG 图标、插画和图标系统的设计 Skill。

它能做什么？

Ink 的核心能力分几块：

• 图标生成：根据需求生成 SVG 图标，统一 stroke width、圆角和视觉权重。
• 图标系统设计：设计一套完整的图标库，兼容 Lucide / Heroicons / Phosphor 等主流规范。
• SVG 插画：生成 hero images、spot illustrations、装饰性元素。
• Sprite Symbol 系统：构建 SVG sprite sheet，便于批量管理和调用。
• 动画 SVG：CSS 主驱动动画（View Transitions API、Scroll-Driven Animations），也支持 SMIL。
• 无障碍支持：自动带 aria-label、role、title，WCAG 2.2 非文本对比度 ≥3:1。
• SVG 优化：SVGO 压缩、路径简化、viewBox 规范化，单个图标目标 ≤4KB。
• Variable Font 图标：支持 weight/optical-size 轴的动态图标，响应式缩放。
• Color Theming：用 currentColor + color-mix() 实现自动 hover/disabled 状态。

为什么值得用？

市面上 AI 生图工具一大堆，但生成的全是 raster（位图），没法精细控制。用 Figma 手动画又太慢。Ink 不一样——它直接输出干净的 SVG 代码，你拿到的是可以直接塞进 React/Vue 组件的矢量文件。

而且它有很强的设计系统意识。生成图标之前，它会先确定网格系统（16×16、20×20 或 24×24），保证整套图标风格一致。不会像某些 AI 每次生成的线条粗细都不一样。

对于做品牌设计或者产品设计的人来说，最大的痛点是——图标风格一致性。Ink 内置了”一致性审核”功能，可以检查已有图标集的 stroke width、圆角、网格对齐是否统一，哪里不对它会告诉你怎么改。

怎么用？

在 Claude Code 里安装：

npx skills add https://github.com/simota/agent-skills --skill ink

然后直接说你要什么，比如：”帮我设计一套 12 个金融 App 的图标，要求 24×24 网格、2px stroke、统一圆角风格。” Ink 会生成完整的 SVG 代码和设计规范。

适合谁？

• UI/UX 设计师：快速生成图标概念稿，不用每次都打开 Figma。
• 前端工程师：需要高质量 SVG 资产做组件，支持 Storybook 集成。
• 品牌设计师：做 logo、VI 系统的矢量素材。
• AI 产品经理：想快速出设计原型但不想折腾设计工具。

小结

Ink 解决的不是”有没有图”的问题，而是“图的质量能不能用到生产级”的问题。它输出的 SVG 代码干净、语义化、带无障碍属性，可以直接进代码库。

如果你经常和图标、矢量插画打交道，这个 Skill 值得试试。

GitHub 仓库：https://github.com/simota/agent-skills

GitHub: https://github.com/simota/agent-skills