ClaudeMap

Kubai Icons

让 Claude 画出「同一位设计师出品」图标的 skill:66 个现成示例定基调,悬停动效或导出静态 SVG——规则、引擎与无头自检全部随仓库提供(源码可得许可,非开源)

技能与命令iconssvgdesignclaude code skillui

kubai-icons 是一个 Claude Code skill,把「一批风格一致的图标」从逐个手调变成流水线:仓库自带 PROMPT.md 硬规则(画布与关键线、分层、圆角与外描边、光照、配色、动效)、src/engine.js 颜色与渐变引擎、66 个结构化示例图标,以及 scripts/check.mjs 无头自检——新图标从结构最接近的示例起步、复用引擎,自检不过就对着截图改到通过为止。产物两种形态:默认动态(SVG + JS,悬停时物体做它自己的动作——文件夹打开、信封拆封、日历翻页),或导出自包含静态 SVG(给 Figma、设计工具与图片标签场景)。作者用 Claude Opus 5.5 开发并盲测,README 建议用 claude --model claude-opus-5-5 启动以获得最稳的结果;自检需 Node 18+ 与 Chrome(无头运行)。安装即把仓库 clone 进 ~/.claude/skills/ 后重启 Claude Code,或从 releases 解压 kubai-icons-v1.0.1.zip。66 个现成图标可直接取用,在线画廊在 kubai.design。撰稿时 257 星(2026-11-08)。

它做什么

  • 一个规则文件(PROMPT.md)加颜色与渐变引擎加 66 个现成示例,锁定同一套风格
  • 默认动态:SVG + JS 悬停即动,每个部件只有静止与悬停两个关键帧,动的是物体本身的动作
  • 用 node scripts/export.mjs 导出静态 SVG,可选调色板、强调色、尺寸、留边与悬停态参数
  • 无头自检(scripts/check.mjs,需 Node 18+ 与 Chrome)把新图标与既有图标并排对比,逐项过检为止
  • 以 Claude Opus 5.5 开发并盲测,README 建议 claude --model claude-opus-5-5 启动

什么时候用

适合给产品或网站补一整套风格统一的界面图标:为功能列表画新图标、给已有图标集补成员,或直接取用现成 66 个——要悬停动效还是纯静态 SVG 都行。

如何上手

# clone 进 skills 目录后重启 Claude Code
git clone https://github.com/kubai087/kubai-icons.git ~/.claude/skills/kubai-icons

# 或从 releases 取(最新 v1.0.1):unzip kubai-icons-v1.0.1.zip -d ~/.claude/skills/
# 上架 skill 市场用 kubai-icons-v*-platform.zip,其 SKILL.md frontmatter 带版本号与显示名

# README 推荐的模型:
claude --model claude-opus-5-5

# 把既有图标导出为静态 SVG:
node scripts/export.mjs --only 文件夹,日历 --palette 薄荷 --out icons/

注意事项

源码可得而非开源:自定义的 Kubai Icons License 允许你保留用 skill 画出的所有图标(可商用、无需署名),也可以把引擎连同版权声明带进自己的图标项目,但不得出售本 skill、分发修改或翻译版的 PROMPT.md/SKILL.md,也不得把 66 个示例重新打包成独立图标集。skill 按 Claude Opus 5.5 调校——更弱的模型可能要多轮修正。自检需要本机有 Chrome(无头运行),README 的动效演示工具链另需 ffmpeg 与 img2webp。Kubai 与 Lumno 名称及标志不在授权范围。撰稿时 257 星(2026-11-08)。

代码仓库

kubai087/kubai-icons

收录日期

地图上的相关资源

  • SureForge

    技能

    纯指令式 skill:让 agent 先调研再提问、先规划再动手、先验证再说「做完了」。

    • workflow
    • verification
    • quality
    • skill
  • 归藏的 Agent Skill:把代码库的最近更新做成一支成片宣传片——接真实组件、代码渲染动画、代码写配乐,全程不碰视频剪辑软件。

    • agent-skill
    • video
    • promo
    • marketing
  • 一个给「图里没有任何文字线索」的照片做地理定位的 Agent Skill——用 OSM 几何、高程天际线与卫星瓦片,把「这是哪」变成带误差半径的测量答案。

    • agent-skill
    • geolocation
    • osint
    • openstreetmap