# Design Icon Batch > 图标/图形符号批量生产 + AI生图透明背景抠图专项方法论。当任务要产出"一套视觉素材"（整套图标、一组插画、贴纸集、图形符号）且需"像一个人画的、批量一致、去背景透明PNG"时触发。覆盖：套系一致性、共享几何/线宽/圆角/权重、多尺寸可读、具象名词prompt、AI透明背景陷阱与抠图、网格批量+逐格兜底、风格锚点验证门控、对称翻转复用。附可运行工具 chroma_key.py / slice_grid.py。触发词：「一套图标」「图标套系」「批量生成图标」「抠图」「透明背景」「去背景」「网格切图」「icon set」。 - Skill: `yang20040317-svg/design-icon-batch` (Agent Skill) - Install (CLI): `npx skillmds@latest add yang20040317-svg/design-icon-batch` - Raw SKILL.md: https://api.skillmd.com/api/skills/yang20040317-svg/design-icon-batch/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: AI & ML - Author: yang20040317-svg (https://skillmd.com/u/yang20040317-svg) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/yang20040317-svg/design-icon-batch --- # design-icon-batch ｜ 图标/图形批量生产 + 抠图专项 > 本技能是 design-workflow 主技能抽离出的**专项方法论**，专治"一次产出整套图标/图形素材，既要像一个人画的、又要批量一致、还要背景干净可复用"。 > 来源署名见 `../references/来源署名/huashu-icon-set.md`（开源图标生图技能）。可运行工具见 `../references/chroma_key.py`、`../references/slice_grid.py`。 ## 一、一套图标 = 一个系统（一致性优先） - **共享几何基准**：同一套图标统一基于一个网格（示例：24×24 基准，非普适），关键节点对齐到网格交点，避免出现"有的贴边、有的居中"的错位。 - **共享线宽 / 圆角 / 端点**：描边粗细、圆角半径、线端（圆头/平头）全套一致——这是"像一个人画的"最关键的三条。 - **共享视觉权重**：每枚图标填充面积、线条密度接近，不出现"这枚很满、那枚很空"。 - **做减法**：能删的细节都删，只保留可辨识的最小特征；过多细节在缩小后会糊成一团。 ## 二、多尺寸可用性（缩到最小仍可读） - 图标要在目标最小尺寸（示例：16px，非普适）仍一眼认出——所以主体要够大、细节要够少。 - **验收法**：把成品缩到最小尺寸看是否还认得出；认不出就回源头减细节 / 放大主体。 ## 三、语义清晰 > 装饰 - 图标首要是"被认出是什么"，不是"好看"。一枚看不出含义的图标是失败品。 - **命名即设计**：先想清"这枚图标代表什么动作/对象"，再画，避免为好看而堆装饰。 ## 四、套系一致性（关系层在图标上的落地） - **重复（Repetition）= 同一套语法**：线宽、圆角、端点、网格基准、视觉权重，全套复用同一组参数——任何一枚违规都会"跳戏"。 - **对齐（Alignment）= 共享网格**：所有图标关键节点对齐到同一基准网格，视觉重心落在相近位置，不漂移。 - **统一与变化（Unity/Variety）= 同调性微差异**：统一一种描边语言与气质，仅在"必要语义差异"处做最小变化（如激活态换填充），不让每枚各搞一套。 - **视觉权重（Visual Weight）= 套内均衡**：每枚图标的填充面积/线条密度接近，避免"有的重、有的飘"，整套摆在一起才稳。 - **自检**：把整套图标并排成一行/网格，眯眼远看——若某枚"跳出来"或"沉下去"，即权重或线宽不一致，回炉。 ## 五、描述即生成（具象名词与风格锚点） ### 具象名词 > 抽象几何描述 - 模型对**具象名词**理解远好于抽象几何指令。要"画个剪刀"而非"画一个矩形四角各有 L 形短线"——后者模型常理解错、画出怪形。 - 写法：先想清"它是什么东西"，用日常名词命名；再补风格/视角/材质，不要反过来用几何拼装。 ### 风格锚点（真实风格参考名） - 与其写模糊的"好看的风格"，不如锚定一个真实存在的视觉风格名作为方向（示例词库，非穷举、非普适）：iOS 扁平 / Material / 线性描边 / 玻璃拟态 / 手绘涂鸦 / 像素风 / 极简线框 / 轻拟物。 - 选定风格后**先验证再批量**：用该风格跑一张、过一遍抠图/对齐自检，确认背景能干净移除、风格稳定，再批量生产——避免一批都踩同一坑。 ## 六、AI 生图的透明背景与抠图 > **关键认知**：用文生图工具做图标/图形时，**模型不会输出真正的透明背景**——即便 prompt 写"透明背景"，产出的仍是带纯色背景的 RGB 图（无 alpha）。正确做法：让模型生成**纯色背景**，再用代码扣掉背景得到透明 PNG。 ### 背景色选择（关键：高对比 + 不与主体撞色） - 首选**纯绿色背景**（示例值 #00FF00，非普适）——对带轻微投影的轻拟物图标最鲁棒，颜色键控能干净分离、不会误删白色底座。 - 主体含绿色时（如绿色品牌图标）→ 换**纯蓝色背景**（示例 #0000FF）做蓝色键控。 - **禁用**：白色/浅色/透明背景（与浅主体分不清）、与主体同色的背景（会被一起扣掉）、品红/黄色 + 泛洪填充（方向性投影形成色带，容差难调）。 ### 抠图四步（通用） 1. **背景检测**：取四角/边缘采样，判定背景主色与是否绿/蓝幕。 2. **键控分离**：绿/蓝幕用颜色键控（对轻投影鲁棒）；其余用从四边泛洪填充移除连通背景。 3. **去溢色 + 抗锯齿**：边缘 despill 去除背景色溢出，轻微高斯模糊柔化锯齿。 4. **trim + 居中**：裁掉透明边缘，居中到正方形画布（统一尺寸）。 ### 自检状态机（逐张判定达标） - `OK` 正常 / `BG` 边角残留背景（需加大容差或重生成）/ `SMALL` 主体占比过小（可能裁切不全）/ `EMPTY` 空图。不达标那一格单独重生，不要整批重来。 ## 七、批量生产策略 ### 网格批量 + 逐格兜底 - **一张多格**：把多个图标排进一张网格大图（如 4×4 = 16 格）一次性生成，比逐张生成更省、风格更齐。 - **切格自检**：按行列切成独立单元，逐格跑自检（背景残留 / 主体过小 / 空图）。 - **单格兜底重生**：不达标只重生那**一格**，不整批重来——批量对齐风险靠"自检 + 兜底"解决，而非放弃批量。 ### 风格锚点先验证后批量（门控） - 选定风格/背景方案后，**先跑一张**验证：背景能干净移除（抠图自检通过）、风格稳定、对齐到位，再批量。这步门控能拦掉绝大多数整批翻车。 ### 对称复用 - 对称图形（上/下、左/右箭头、镜像图标）用几何变换（翻转/旋转）精确复用，100% 一致且零重生成本，不占用生成额度。 ## 八、可运行工具 - 去背景抠图：`../references/chroma_key.py`（纯色背景键控 + despill + 居中 + 自检）。 - 网格切分：`../references/slice_grid.py`（等分裁格 + 逐张自检，只切不抠）。 ## 自检清单（交付前） - [ ] 全套是否共享同一几何基准 / 线宽 / 圆角 / 端点？ - [ ] 每枚图标视觉权重是否接近（套内均衡）？ - [ ] 缩到最小目标尺寸是否仍一眼可读？ - [ ] 是否用具象名词命名、语义清晰（非"看不出含义"）？ - [ ] 抠图自检是否全 `OK`（无 `BG` 残留 / `SMALL` 过小 / `EMPTY` 空图）？ - [ ] 风格锚点是否先验证后批量（门控通过）？ - [ ] 商用模式：图标版权 / AI 生图平台条款是否清白？ ## 九、现成图标源（Icons8 ｜ 网页实时嵌入，零下载） > **适用边界（用户决策）**：做**普通网页 / 前端**需要图标时，默认走 Icons8 实时嵌入（C 路径，零操作）；做 **IP / 软件 / 品牌专属图形**时，**不走 Icons8**，改走上方第六、七节的 AI 生图 + 抠图批量流水线（保证专属、可控、无第三方署名负担）。 ### 何时用 Icons8 嵌入 - 载体是网页 / 数字产品，且图标是"通用功能图标"（首页、设置、搜索、用户……），不需要专属定制。 - 目标：零下载、零资源管理，图标随网页加载实时从 Icons8 拉取。 ### URL 模板（img.icons8.com） ``` https://img.icons8.com/{风格}/{尺寸}/{颜色}/{图标名}.png ``` - 风格：`ios` / `material` / `fluency` / `windows11` / `dotty` 等。 - 尺寸：像素值，如 `50`、`100`。 - 颜色：十六进制（不含 `#`），如 `5b9dff`，可对齐项目配色。 - 图标名：在 `https://igoutu.cn/icons`（Icons8 中文站）搜到后取用，例：`home`、`settings`、`search`、`user`、`cloud`、`like`。 - 用法示例：`首页`。 ### 强制署名（免费版红线，不可省略） - Icons8 免费授权为**"链接互换"**：免费用，必须在用了图标的页面放一个**清晰可见、可点击**的链接指向 `https://icons8.com`。 - 网页场景：用了图标的每个页面都加；若多数页面都用，**页脚放一个链接即可**。 - 标准写法：`图标来自 Icons8`（放 `