name: kubai-icons description: 生成一套风格统一的功能图标，可以交付悬停时会形变的动态版（SVG + JS），也可以导出静态 SVG 文件，沿用 Lumno 书签文件夹图标的构造：后片、内容、前片分层，外描边，所有颜色从一个主色推导，两组关键帧的悬停动效，可切换色板。用户要做图标、功能图标、动态图标、静态 SVG 图标、icon set、带 hover 动效的图标，或要往这套图标里加新图标时使用。 license: Kubai Icons License (source-available). Complete terms in LICENSE. metadata: version: "1.0.1" display_name: "Kubai 动态图标" display_name_en: "Kubai Icons" description_zh: "按同一种风格稳定地画出功能图标：文件夹式的前后分层、外描边、一个主色推导全部颜色，悬停时做物体本身会做的动作；也可以导出静态 SVG。" description_en: "Draws functional icons in one consistent style: folder-like layers, outside outlines, every colour derived from one accent, and hover motion the object itself would make. Can also export static SVG."

Kubai Icons

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

包里有什么

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

流程

1. 读 PROMPT.md。

2. 确定交付形式。用户没说清楚时先问一句：

   • 动态（默认）：SVG + JS，悬停时形变，靠 src/engine.js 在页面里运行。适合网页和能跑 JS 的界面。
   • 静态：独立的 .svg 文件，没有动效，任何地方都能用：设计工具、原生 App、文档、<img>。用户提到"切图""SVG 文件""放进 Figma""App 里用"等，就是要静态。
   • 两者都要：按动态做，最后再导出一份静态。

3. 确定在哪里做：

   • 新做一套：把本 skill 的 index.html、src/、scripts/ 复制到目标位置（一个新目录或新仓库），在那份副本里工作。保留每个文件开头的版权声明；PROMPT.md 和 SKILL.md 只留在 skill 里，不要复制进去（见 LICENSE 第 3 条）。
   • 往已有的一套里加：直接在那份 src/icons.js 里追加。
   • 只要静态：同样复制一份到工作目录里画，最后只把导出的 SVG 交给用户。

4. 读产品代码，列出功能。动态版每个功能写一句"物体 + 悬停动作"；静态版只需要确定物体（PROMPT.md 第 1 节）。

5. 每写一个图标之前，先在 src/icons.js 里找一两个结构最接近的范例读一遍（例如翻开的东西看信封和日历，切出前片的看下载和上传，会旋转的看齿轮和星标），照它们的写法来。

6. 把名字加进 src/app.js 的 ORDER。用不到的范例，不放进 ORDER 就不会显示。

7. 运行自检，把新图标和几个现有图标放在一起看：

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

   截图在 check-out/。逐条对照 PROMPT.md 第 10 节的清单检查；脚本报出错误时先修错误。往复类动作看 frames.png；查细缝时加 --scale 3；查浅主色上的标记时加 --accent #F59E0B，把所有图标换成同一个主色。不加 --only 就检查整套。静态版看 rest.png、size-24.png、size-28.png 和 palettes.png 就够了。

8. 改到全部通过后，更新 README 里提到的图标数量，以及展示页每个断点的列数（列数要能整除图标总数，断点可以增删）。

9. 要静态时，导出到用户指定的目录，并告诉用户用的是哪个色板：

   node scripts/export.mjs --only 新图标A,新图标B --palette 彩色 --out 目标目录
   

   --palette 按名字选色板（彩色、蓝灰、青瓷、薄荷、薰衣草、杏色、黑色），--accent #hex 把所有图标换成一个主色，--state hover 导出悬停结束时的样子，--size 设定像素尺寸，--pad 给投影留出边距。每个图标一个 名字.svg。

环境

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

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

What it is

Kubai Icons is a skill for Claude. Give it a feature list or a product's code, and it draws icons that sit next to the 66 in this repository as if the same designer had made them, either with hover motion or as static SVG files. The repository ships everything that makes that repeatable, so the model only has to decide what the icon is and draw its shapes:

Drawn by the skill

These six icons were drawn by a fresh Claude session that had nothing but SKILL.md and PROMPT.md: an alarm clock, a notebook, a QR scanner, an exit door, a calculator and a compass. Each round of these blind tests closes the gaps it finds in the rules, so the next set comes out closer to the rest.

Install

Let Claude install it

Copy this into Claude Code and send it:

Install the Kubai Icons skill for me:
clone https://github.com/kubai087/kubai-icons into ~/.claude/skills/kubai-icons
(if it's already there, pull the latest version instead),
make sure ~/.claude/skills/kubai-icons/SKILL.md exists, and tell me when it's ready.

Then restart Claude Code, and the skill is ready to use.

Or install it yourself

Download kubai-icons-v*.zip from the latest release and unzip it into your skills folder:

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

Or clone the repository there:

git clone https://github.com/kubai087/kubai-icons.git ~/.claude/skills/kubai-icons

Either way, Claude Code picks the skill up the next time it starts.

Publishing to a skill marketplace that asks for a version and display names in SKILL.md? Upload kubai-icons-v*-platform.zip from the same release; it carries those fields at the top of the frontmatter.

Use Claude Opus 5.5

The skill asks for careful geometry, layering across animation frames, and several rounds of looking at its own screenshots. It was developed and blind-tested with Claude Opus 5.5, which gives the most consistent results. Choose it in your client's model picker, or start Claude Code with:

claude --model claude-opus-5-5

Ask for icons

Describe what you need in plain words. The skill triggers on requests about icons, so you don't need to name it.

• "Read this repository and draw dynamic icons for its main features."
• "Add a scissors icon and a map icon to this set."
• "We need an icon for Export that matches the others."

What happens next

1. Claude reads PROMPT.md, then writes one line per feature: an everyday object and what it does on hover ("a folder opens", "a lock springs open").
2. It draws each icon after the closest existing one, reusing the engine.
3. It runs the self-check with a few existing icons beside the new ones, compares sizes, outlines, layers and colours, and repeats until every item on the checklist passes.
4. It adds the icons to the gallery and updates the counts.

To start a new set for your own product, the skill copies the engine, gallery and self-check into your project and works there.

Dynamic or static

Tell Claude which one you need, or it will ask.

Ask for "static SVG files" or "icons I can drop into Figma", and the skill draws the icons the same way, then exports them. You can also export any icon in this repository yourself:

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

How an icon is built

Every icon is a back piece, optional white content and a front piece, like a folder holding a sheet of paper. Outlines sit outside the fill, so shapes keep their full size. Every gradient, outline and shadow is derived from one accent colour, so a single value repaints the whole icon. Each part has exactly two keyframes, rest and hover, and the motion is something the object itself does: the folder opens, the envelope unseals, the calendar turns to the next day.

Seven palettes come with the set: one colour per icon, five clear tones built from a single base colour (blue-grey, celadon, mint, lavender, apricot), and black. Changing palette animates the colours too.

Live gallery

www.kubai.design/kubai-icons shows the whole set. Hover any icon, switch palettes, or turn on the demo to watch them all move. Locally, open index.html in a browser.

Self-check

Needs Node.js 18 or later and Chrome. Everything runs headless; no window opens.

node scripts/check.mjs --only 剪刀,地图 --with 文件夹,邮件,下载

CHROME overrides the browser path. The animations in this README come from node scripts/media.mjs, which also needs ffmpeg and img2webp.

Contributing

There are two ways in:

• Improve the skill. Report a rule that left you guessing, run a blind test with a fresh session, or fix a script. Rule changes start from an issue.
• Add your own icon. Design an icon with the skill and open a pull request. Once merged, it joins the gallery, credited to you when someone hovers it.

CONTRIBUTING.md has the rules for both. Please read the code of conduct too; security issues go through SECURITY.md.

License

This repository is under the Kubai Icons License. It is source-available, not open source. In short:

• Your icons are yours. Icons you make with the skill belong to you, for any use including commercial, with no credit required.
• Ship the engine with them. You may copy the engine, the gallery, the example icons and the self-check into your own icon set's project, change them, and ship that project, as long as the copyright notice at the top of each file stays.
• Use the example icons too. The 66 icons here may go into your products, animated or exported as SVG, without credit, but not into an icon set or pack of their own.
• Use and share the skill freely. You may run it for any work, change it for your own use, and share exact, unmodified copies for free.
• Don't republish it as something else. Don't distribute a modified or translated version of the rules (PROMPT.md, SKILL.md), sell the skill, remove its notices, or present it under another name or as your own work.

The Kubai and Lumno names and logos are not licensed for reuse. The construction comes from the bookmark folder icon in Lumno.