还在为App一个个画图标?这个Skill,能让整套图标保持统一

做一个 App 或网站，图标是很容易被忽略、却又非常影响整体质感的细节。

首页有一套图标，设置页面又是一套；功能入口用圆角线性图标，详情页却突然出现另一种风格。单独看每个图标或许都不错，但放在一起，总感觉不像出自同一个设计师之手。

如果让 AI 帮你生成图标，问题可能更明显：第一个图标很精致，第二个换了种画法，第三个又出现了不同的描边和配色。

有没有办法让 AI 按照一套固定的设计规则，持续生成风格统一的图标？最近在 GitHub 上发现一个项目，正是为了解决这个问题：让一整套图标保持同一种设计风格。

它叫 Kubai Icons。

先说清楚 Kubai Icons 的定位。它并不是一个只提供 SVG 下载的传统图标网站，而是一个为 Claude 准备的 Agent Skill。

你可以给它一份产品功能列表，也可以让它读取现有项目代码，然后根据统一的设计规范，为每个功能绘制对应图标。

比如你正在开发一个记账 App，需要：

你不需要逐个手工调整图标风格，只需告诉 AI 需要哪些功能，它就会参考项目已有图标、复用共同的绘制引擎，继续生成新图标。

Kubai Icons 自带 66 个已经完成的示例图标。它们不只是放在仓库里供人下载，还承担着设计参考的作用——把图标设计规则、绘制引擎和示例素材组合起来，让 AI 不必每次都从零开始。

它的设计语言有几个特点：

01 前后分层结构

图标采用类似文件夹的分层方式：后层 承载主体结构，内容层 展示图标内部信息，前层 形成前景和遮挡关系。通过不同层次的组合，让图标拥有一定立体感，而不是简单把几何图形拼在一起。

02 外描边设计

项目强调外描边，也就是让轮廓线位于图形填充区域之外。这样做的好处是，描边不会轻易挤压图标本身的形状，在不同尺寸下也更容易保持一致。

03 一个主色推导整套颜色

这是比较值得关注的设计。项目不是给每个图标随意指定一组颜色，而是以 一个主色为基础，统一推导描边、渐变、阴影和其他颜色。这样即使图标主体完全不同，整体视觉语言也不会轻易跑偏。

普通图标通常只有一个静态状态，而 Kubai Icons 还支持 动态 SVG。它的动效不是简单地放大、旋转或抖动，而是让图标按照自身物体的特性产生动作。

这种动效的重点不是炫技，而是让交互行为与图标所表达的含义保持一致。项目将图标每个组成部分设置为两组关键帧：Rest（默认状态）和 Hover（悬停状态），再由绘制引擎负责状态之间的插值。最终你得到的不仅是一张静态图片，而是一组能够响应鼠标悬停的图标。

Kubai Icons 提供两种输出方式，可以根据产品形态选择。

如果你正在开发网页产品，可以选择动态版本，让图标在用户交互时产生自然动作；如果正在开发 iOS 或 Android App，也可以直接导出静态 SVG，再按项目需要转换为其他资源格式。这意味着它不仅适用于网页设计，也能成为原生 App 的图标素材生成工具。

图标的统一性不仅来自轮廓，也来自颜色。Kubai Icons 内置了 7 种配色方案：

除此之外，还可以指定自己的品牌色。例如你的 App 主色是 #2563EB，就可以让整套图标都围绕这个颜色重新生成。导出时还可以调整尺寸、留白、颜色状态等参数，项目提供了导出脚本：

如果需要指定具体颜色：

这样就能得到符合自己产品视觉规范的图标资源。

AI 生成图标最大的麻烦，是很难保证每次生成的结果都符合规范。Kubai Icons 为此提供了一个 自检脚本：

它会使用无头浏览器渲染图标，并检查：

还可以把新图标和已有图标放在一起对比：

AI 可以查看渲染结果，发现轮廓、图层、颜色或动效上的问题，再进行调整。这相当于给 AI 图标生成过程增加了一套视觉验收流程——不是简单生成完就交付，而是尽量让新图标通过统一的检查标准。

Kubai Icons 主要面向 Claude，项目 README 提供了 Claude Code 的安装方式。打开终端，执行：

如果已经安装过，可以进入目录更新：

然后重启 Claude Code，让它重新加载 Skill。你也可以直接把下面的内容发给 Claude Code：

PROMPT请安装 Kubai Icons Skill：https://github.com/kubai087/kubai-icons ，将仓库安装到 ~/.claude/skills/kubai-icons。如果已存在，请先检查并更新。完成后检查 SKILL.md 是否存在，并告诉我安装结果。

安装完成后，你不需要记住复杂命令，直接描述想要的图标即可。

PROMPT读取当前项目的功能列表。使用 Kubai Icons 的设计规范，为所有主要功能生成一套风格统一的动态图标。要求：1. 使用现有设计引擎；2. 优先参考结构相近的示例图标；3. 保持统一的描边、层次和颜色；4. 为每个图标设计符合物体特征的 Hover 动效；5. 完成后运行自检脚本；6. 修复不符合规范的图标。

PROMPT为我的 iOS App 生成一套静态 SVG 图标。使用 Kubai Icons 的设计体系，统一使用蓝灰色配色。不要生成 Hover 动画，输出独立 SVG 文件。确保所有图标的尺寸、留白、描边和视觉重量保持一致。

这里有一个非常重要的细节。虽然项目托管在 GitHub 上、也公开了源代码，但它使用的是自定义的 Kubai Icons License，属于 source-available（源码可见），并非标准意义上的开源许可证。根据项目公布的授权条款：

我觉得 Kubai Icons 有意思的地方，并不是它能够让 AI 画出多少图标，而是它尝试解决了 AI 设计过程中一个很实际的问题：如何让 AI 持续生成符合统一设计规范的素材，而不是每次都重新发挥。

它把设计规则、绘制引擎、示例图标、配色系统和自动检查整合在一起，让图标设计从一次性的生成任务，变成了一套可以重复使用的工作流程。如果你正在使用 AI 开发 App，或者需要为网站、后台系统设计一套完整的功能图标，这个项目值得收藏。