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 檔案，可以指定色板、主色和靜止或懸停狀態。
流程
-
讀
PROMPT.md。 -
確定交付形式。使用者沒說清楚時先問一句：
- 動態（預設）：SVG + JS，懸停時形變，靠
src/engine.js在頁面裡執行。適合網頁和能跑 JS 的介面。 - 靜態：獨立的
.svg檔案，沒有動效，任何地方都能用：設計工具、原生 App、文件、<img>。使用者提到「切圖」「SVG 檔案」「放進 Figma」「App 裡用」等，就是要靜態。 - 兩者都要：按動態做，最後再匯出一份靜態。
- 動態（預設）：SVG + JS，懸停時形變，靠
-
確定在哪裡做：
- 新做一套：把本 skill 的
index.html、src/、scripts/複製到目標位置（一個新目錄或新倉庫），在那份副本裡工作。保留每個檔案開頭的版權宣告；PROMPT.md和SKILL.md只留在 skill 裡，不要複製進去（見LICENSE第 3 條）。 - 往已有的一套裡加：直接在那份
src/icons.js裡追加。 - 往 kubai-icons 倉庫的開源圖示庫裡加：每個圖示在
icons/下單獨一個檔案，格式、命名和角標見docs/authoring.md，自檢用node tools/check.mjs --only 名字 --with folder,mail,download。規則仍以PROMPT.md為準。 - 只要靜態：同樣複製一份到工作目錄裡畫，最後只把匯出的 SVG 交給使用者。
- 新做一套：把本 skill 的
-
讀產品程式碼，列出功能。動態版每個功能寫一句「物體 + 懸停動作」；靜態版只需要確定物體（
PROMPT.md第 1 節）。 -
每寫一個圖示之前，先在
src/icons.js裡找一兩個結構最接近的範例讀一遍（例如翻開的東西看信封和日曆，切出前片的看下載和上傳，會旋轉的看齒輪和星標），照它們的寫法來。 -
把名字加進
src/app.js的ORDER。用不到的範例，不放進ORDER就不會顯示。 -
執行自檢，把新圖示和幾個現有圖示放在一起看：
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就夠了。 -
改到全部通過後，更新 README 裡提到的圖示數量，以及展示頁每個斷點的列數（列數要能整除圖示總數，斷點可以增刪）。
-
要靜態時，匯出到使用者指定的目錄，並告訴使用者用的是哪個色板：
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.