kubai-icons · diff

git:20261103.e2591f2 to git:20261103.4aeb260

1 added, 6 removed. Audit A to A.

---
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 条)。
+ - 新做一套:把本 skill 的 `index.html`、`src/`、`scripts/` 复制到目标位置(一个新目录或新仓库),在那份副本里工作。
- 往已有的一套里加:直接在那份 `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.