✳ IconLoom

在 Claude / Codex 侧边栏,把项目里散落的图标「织」成统一一套 SVG A Claude Code / Codex skill that weaves your project's scattered icons into one consistent SVG set — extract · restyle · write back.

---

✨ 它是什么 / What it is

IconLoom 是一个 Claude Code / Codex 的 Skill(发行为 svg-selfcheck 技能,icon-workbench 是其招牌能力)。装上后在侧边栏一键把当前项目里所有图标抽取成一块可编辑的 SVG 工作台,然后:

• 自己上手改,或直接让 Claude / Codex 按封存好的图标绘制规范统一风格;
• 改完一键写回项目源文件(应用到项目)——回到项目立刻看到改好的图标,不用再开 Figma 导来导去;
• 不止图标——任何画好的 SVG 排版 / 插画也能在侧边栏打开续编,或交给模型改。

🧩 功能 / Features

• 全项目图标抽取 — 扫描项目,把散落各处的图标聚成一块「项目画板」。
• 双通道编辑 — 手动编辑(节点 / 描边 / 填充 / 颜色),或自然语言让 AI 改。
• 规范统一 — 内置蒸馏的图标绘制规范:几何更规整、锚点符合贝塞尔规则、风格一致。
• 一键写回 — 改动即时写回源文件,项目端立即生效。
• 跨库取用 — 从其它项目图标库拖 / 选图标加入本画板,让 AI 直接替换或覆盖。
• 系统图标识别 — SF Symbols 等系统图标能被识别,可让模型照着画一套替换。
• 动效规则 — 附带基础动效绘制规则,配合 GSAP 更轻松地给 SVG 加交互动画。

📦 平台覆盖 / Platform coverage

iOS · Android · Web · 小程序 / Mini-program · React Native · SF Symbols

🚀 安装 / Install

同一套代码,一条命令双端适配——install.sh 装完 Claude 侧后,检测到 ~/.codex 会自动把 Codex 侧也装上(镜像 skill + 注册 hooks/agents/AGENTS.md)。

git clone https://github.com/TortoisewithBlackFrameGlasses/iconloom
cp -r iconloom/svg-selfcheck ~/.claude/skills/svg-selfcheck
bash ~/.claude/skills/svg-selfcheck/install.sh          # Claude(+ 自动 Codex,若装了 Codex)

• 只装 Claude(即使有 Codex):bash .../install.sh --no-codex
• 只有 Codex(无 ~/.claude):

  git clone https://github.com/TortoisewithBlackFrameGlasses/iconloom
  bash iconloom/svg-selfcheck/install.sh --sync-codex     # 镜像进 ~/.codex + 注册 Codex 运行时

🎬 用法 / Usage

在 Claude / Codex 里:

1. /icon-workbench → 抽取当前项目图标成画板并在侧边栏打开(Codex 用 in-app Browser / 系统浏览器打开工作台 URL)。
2. 选中图标 → 手动编辑,或对模型说「统一成 XX 风格 / 改成 currentColor」。
3. 点 应用到项目 → 改动写回源文件。回到项目,图标已更新 ✅

🛠️ Slash 命令 / Commands

装好后,在 Claude / Codex 里直接敲这些命令。

图标(项目级)—— 从轻到重:

命令	干嘛	用法
/icon-pull	轻量抽取(默认入口):一键把项目图标拉进图库,零决策门,打一份诚实台账(八通道计数 + 哪些能回写源)并交出 hub 链接	/icon-pull [项目目录] [--include <子目录> …]
/icon-adopt	领养登记(轻拉的收尾闸):掏库内联一枚母版、或新画一枚入库后,立刻盖 data-svgid 锚 + 登进回写台账 + 按 ICON_SPEC 顺手 lint——不用等下次全量抽取	/icon-adopt [项目目录] (--master <名> | --new <画好.svg>) [--into <文件>]
/icon-workbench	全量工作台:抽取 → 去重成共享母版 → 统一绘制规范 → 接回写。带用户门(scope / 合并),项目级重活	/icon-workbench <项目目录> [scope/风格提示]
/icon-restyle	整套换风格(三入口):全量统一(样板板选风格 → 批量重画,可把 emoji 实体化成矢量)/ 增量清债(沿用已冻结风格,只补债务台账点名的新增与过期)/ 选集替换(点名几枚按冻结风格重画)——都走 art-director 把关 → 写回源文件(含小程序 WXSS data URI,过确认门)	/icon-restyle <项目目录> [品牌色/描边/目录提示]

单张 SVG:

命令	干嘛	用法
/svg-draw	画 / 改一张 SVG:intent→spec → 算路(能布尔/能公式/能描图,手绘趋零)→ 渲染放大自检 → 可选总监环	/svg-draw <画什么> [+风格/视角/尺寸/配色/格式/动效]
/svg-review	总监评审一张 SVG:造证据包(渲染+手柄叠加+抠缝)→ 逐件看 → 派 art-director → 循环到 APPROVE	/svg-review <文件.svg> [目标/意图]

选哪个:先 /icon-pull 把图标拉进来看(掏库/新画了一枚就 /icon-adopt 登记)→ 要项目级去重/统一/批量写回就 /icon-workbench → 要整套换成一个风格就 /icon-restyle;手上只有一张图要画或评,用 /svg-draw / /svg-review。

Codex 下这些命令同样可用(安装时已注册进 ~/.codex);工作台页用 Codex 的 in-app Browser / 系统浏览器打开 http://localhost:<port>/__hub__。

🎨 绘制规范 / The icon spec

• 覆盖普通 UI 图标效果最佳:规整、锚点克制、贝塞尔合规。
• 越接近插画(如猫猫狗狗)约束越弱,不保证。

🌀 名字 / Why "Loom"?

Loom = 织布机。IconLoom 把项目里散落各处的图标「织」成统一的一整套。

📄 License

MIT

---

_{打开 → 编辑 → 应用到项目,改动即时写回源文件。 · Edit your project's icons without leaving your editor.}