Kubai Icons

# Kubai Icons

根据功能清单或代码库，以统一风格绘制界面图标，可带悬停动效，也可导出静态 SVG。这是一个 Claude 技能，适合构建产品界面的开发者和设计师。

由 kubai087 在 GitHub 上制作。这些说明是 Mindket 根据其 README 写的，项目自己的文件和许可证在它的仓库里。

## 简介

它是什么：Kubai Icons 是一个 Claude 技能，用统一的风格绘制界面图标。把功能清单或产品的代码交给它，它就会生成与仓库里 66 个示例风格一致的图标，图标可以在悬停时动起来，也可以是静态 SVG 文件。仓库里有规则、绘图引擎和自检脚本，所以模型只需要决定每个图标画什么。

适合谁：它适合需要为一组功能制作图标，并希望它们看上去出自同一位设计师之手的前端开发者、设计师和产品团队。

```table
行业 | 谁在用 | 怎么用 | 例子
软件产品 | 前端开发者 | 直接根据应用的代码，为它的主要功能绘制图标 | 开发者让 Claude 去读一个仓库，并为它的各项功能要悬停图标
设计与品牌 | 设计师 | 用风格一致的新图标扩充现有的图标集 | 设计师再要两个与图标集相配的图标
产品团队 | 产品经理和市场人员 | 导出静态 SVG 文件，用于幻灯片、文档和页面 | 团队要一批可以直接拖进 Figma 的图标
```

如果你需要别的美术风格的图标，可以跳过它，因为这里的风格是固定的。

用在哪里：
- Claude Code，把技能放进它的技能文件夹
- 运行 JavaScript 的网页和界面，用于悬停时会动的图标
- Figma 这类设计工具，用于静态 SVG 文件
- 原生应用、文档和 img 标签，用于静态 SVG 文件

```table
用例 | 谁用 | 能得到什么
功能清单的图标 | 产品团队 | 每个功能一个图标，画成与图标集一致的风格
代码库里的图标 | 开发者 | 仓库中找到的主要功能对应的图标
给现有图标集加新图标 | 设计师 | 在尺寸、轮廓、图层和颜色上与其他图标一致的新增图标
给其他工具用的文件 | 设计师 | 每个图标一个独立的 SVG 文件，不带脚本或样式表
```

如何设置：你需要 Claude Code、一个用来放技能的技能文件夹，以及一个强大的 Claude 模型。

- Claude Code，技能文件夹在 ~/.claude/skills/ 下
- 一个 Claude 模型，首选 Claude Opus 5.5
- Node，用来运行导出脚本

1. 从最新版本下载 kubai-icons 的 zip 文件。
2. 把它解压到你的技能文件夹里。
3. 重启 Claude Code，让它载入这个技能。

```bash
unzip kubai-icons-v1.0.0.zip -d ~/.claude/skills/
```

你也可以把仓库克隆到那个文件夹，或者让 Claude Code 替你安装。如果技能市场要求填写版本和显示名称，就用同一个版本里的平台 zip。想用推荐的模型，用下面这条命令启动 Claude Code。

```bash
claude --model claude-opus-5-5
```

如何使用：用日常的话描述你需要的图标。技能会在你提出图标需求时自动触发，所以不必点它的名字。如果要给设计工具用，就说你要静态 SVG 文件。

```table
工具 | 作用
PROMPT.md | 绘图规则，从画布和图层到光影、颜色和动效
src/engine.js | 颜色、外轮廓、渐变、阴影和配色方案的共用代码
src/icons.js | 66 个已完成的图标，每个都是新图标的起点
scripts/check.mjs | 无头检查：静止时、悬停时、中间过程、24px 和 28px 下，以及每种配色下
scripts/export.mjs | 把图标导出成静态 SVG，可设置配色、强调色、状态、尺寸和边距
```

你可以自己用导出脚本从仓库里导出图标。

```bash
node scripts/export.mjs --only 文件夹,日历 --palette 薄荷 --out icons/
```

同一个脚本还有 --accent，让每个图标用同一种颜色，--state hover 导出悬停结束时的样子，--size 设置像素大小，--pad 设置画布周围的留白。

示例：你说：“我需要一个和其他图标相配的 Export 图标。”Claude 读取规则，挑一个日常物件和一个悬停动作，再照着最接近的现有图标把它画出来。它把自检脚本和几个现有图标放在一起运行，反复修改直到检查清单全部通过。新图标会加进图库，数量也会更新。

新手与专家：Kubai Icons 让你向 Claude 要图标，得到一套看上去出自同一位设计师之手的图标。每个图标都按它所画物件的方式动起来，比如文件夹打开、锁弹开，你也可以只要普通的 SVG 文件。第一件可以试的小事，是为你已有的一个功能要一个图标。

风格来自规则和代码，而不是模型的个人品味。PROMPT.md 定下硬性要求，引擎推导出颜色、轮廓、渐变和阴影，66 个已完成的图标则给每个新图标一个起点。动态图标的每个部分有两个关键帧，静止和悬停。代价是动态图标需要 JavaScript，而且结果取决于一个强大的模型。

```flow
你列出需要图标的功能
Claude 挑一个物件和悬停动作
它照最接近的示例画出每个图标
无头自检脚本对比结果
通过的图标加入图库
```

注意事项：
- 动态图标是 SVG 加 JavaScript，所以适合运行 JavaScript 的页面。静态图标是普通的 SVG 文件。
- 一个只拿到 SKILL.md 和 PROMPT.md 的全新 Claude 会话画出了六个测试图标，包括闹钟、笔记本和指南针。
- 这个技能是用 Claude Opus 5.5 开发并做盲测的。
- 为你的产品新建一套图标时，技能会把它的引擎、图库和自检文件带进你的项目文件夹。

## GitHub 上的数据（2026年11月7日）

- 星标：244
- 复刻：15
- 关注：1
- 未关闭的议题和拉取请求：0
- 语言：HTML
- 许可证：见仓库
- 话题：agent-skills, animation, claude, claude-skill, design-system, hover-effects, icon-set, icons, svg, svg-icons

## 链接

- 代码：https://github.com/kubai087/kubai-icons
- 网站：https://www.kubai.design/kubai-icons/
- 发布版本：https://github.com/kubai087/kubai-icons/releases
- 议题：https://github.com/kubai087/kubai-icons/issues
- 星标历史：https://www.star-history.com/#kubai087/kubai-icons&Date

## 获取代码

```
git clone https://github.com/kubai087/kubai-icons.git
```

然后按它的 README 完成设置。这个工具包里没有会自己运行的东西。

README.md  6 KB