---
name: kubai-icons
description: 生成一套风格统一、悬停时会形变的功能图标（SVG + JS），沿用 Lumno 书签文件夹图标的构造：后片、内容、前片分层，外描边，所有颜色从一个主色推导，两组关键帧的悬停动效，可切换色板。用户要做图标、功能图标、动态图标、icon set、带 hover 动效的图标，或要往这套图标里加新图标时使用。
license: Kubai Icons License (source-available). Complete terms in LICENSE.
---

# 动态功能图标

这个 skill 自带完整的实现：引擎、一整套范例图标、展示页和自检脚本。你的工作是按规则写新图标，不是重写引擎。

## 包里有什么

- `PROMPT.md`：全部设计规则，每一条都是硬性要求。动手前完整读一遍。
- `src/engine.js`：引擎。颜色推导、外描边遮罩、厚度带渐变、投影和内发光滤镜、插值动画、色板都在这里。直接复用，不要改。
- `src/icons.js`：范例图标。新图标按同样的格式追加。
- `src/app.js`、`index.html`：展示页。`ORDER` 决定展示哪些图标、按什么顺序排。
- `scripts/check.mjs`：自检脚本。在无头 Chrome 里截出静止、悬停、悬停过程的中间帧、24px、28px 和所有色板，并读出每一页的脚本报错。临时文件都放在输出目录里，跑完自动清理。

## 流程

1. 读 `PROMPT.md`。
2. 确定在哪里做：
   - 新做一套：把本 skill 的 `index.html`、`src/`、`scripts/` 复制到目标位置（一个新目录或新仓库），在那份副本里工作。保留每个文件开头的版权声明；`PROMPT.md` 和 `SKILL.md` 只留在 skill 里，不要复制进去（见 `LICENSE` 第 3 条）。
   - 往已有的一套里加：直接在那份 `src/icons.js` 里追加。
3. 读产品代码，列出功能。每个功能写一句"物体 + 悬停动作"（`PROMPT.md` 第 1 节）。
4. 每写一个图标之前，先在 `src/icons.js` 里找一两个结构最接近的范例读一遍（例如翻开的东西看信封和日历，切出前片的看下载和上传，会旋转的看齿轮和星标），照它们的写法来。
5. 把名字加进 `src/app.js` 的 `ORDER`。用不到的范例，不放进 `ORDER` 就不会显示。
6. 运行自检，把新图标和几个现有图标放在一起看：

   ```bash
   node scripts/check.mjs --only 新图标A,新图标B --with 文件夹,邮件,下载
   ```

   截图在 `check-out/`。逐条对照 `PROMPT.md` 第 10 节的清单检查；脚本报出错误时先修错误。往复类动作看 `frames.png`；查细缝时加 `--scale 3`；查浅主色上的标记时加 `--accent #F59E0B`，把所有图标换成同一个主色。不加 `--only` 就检查整套。
7. 改到全部通过后，更新 README 里提到的图标数量，以及展示页每个断点的列数（列数要能整除图标总数，断点可以增删）。

## 环境

- Node 18 以上，以及 Chrome。浏览器路径可以用环境变量 `CHROME` 覆盖。
- 所有检查都在无头模式下进行，不会打开任何可见窗口，也不会动用户正在用的浏览器。

---

Copyright (c) 2026 Kubai087. Licensed under the Kubai Icons License; see LICENSE.