小马的 AI 工具集

图标生成

用位图参考法一次生成多个可比较的图标候选，做小尺寸可读性测试后导出 Web favicon 与 iOS AppIcon 真实资产的技能

图标生成
类型 技能 36 星标 更新 2026-06-21 许可 MIT 原仓库 主页

设计网站 favicon、iOS App 图标或工具品牌入口时，最难的常常不是“生成一张图”，而是一次拿到可比较的方向、让用户选中、再导出到 Web 和 iOS 真实可用的尺寸。 生成可比较的 App 图标候选方向，让用户选择，然后导出为真正的 Web 和 iOS 图标资产。

乔木音乐图标案例概览

Stars Forks Issues Last commit License

中文 | English

npx skills add joeseesun/qiaomu-icon-generator

已验证: npx skills add joeseesun/qiaomu-icon-generator --list 可发现，真实临时目录安装可落盘 SKILL.md。

真实示例输出

主示例换成了真实产品「乔木音乐网」：用 Codex bitmap reference method 生成 10 个候选，做 contact sheet 和 64 / 32px 可读性检查，最后选中 option-05，并实际导出到网站 favicon 和 iOS AppIcon.appiconset。

最终图标候选测试小尺寸测试
乔木音乐选中图标选项 05乔木音乐 Codex 位图候选乔木音乐 favicon 可读性测试图

选择理由：option-05 是「Abstract Q Disc」，保留乔木音乐原有黑金气质，同时把唱片、播放入口和抽象 Q 结合起来；32px favicon 下仍能辨认。完整记录见 choices.md。

为什么值得用

很多图标工作会卡在三个地方：

  • 只生成一张图，没有比较，用户很难选。
  • 大图好看，但 32px favicon 看不清。
  • 用户选中了方向，却没有导出 favicon、apple-touch-icon、AppIcon.appiconset 的完整尺寸。

qiaomu-icon-generator 把这件事变成一个可复用流程：先读项目上下文，再生成 6–12 个候选，做 contact sheet 和小尺寸预览，最后把选中的图标导出成 Web / iOS 可用资产。

两种生成方法

方法适合场景示例输出
Codex bitmap reference method需要更像 iOS App Store 的精致 raster 图标，或要参考本地 icon gallery乔木音乐 Codex 位图 contact sheet
QM Icon Studio CLI需要稳定、干净、矢量友好的 SVG 候选，或者想先快速拿一批可编辑方向乔木音乐 SVG CLI 预览

默认先根据用户要求选择方法。用户明确说“Codex 内置生图”“参考这些 icon 风格”时，走 Codex bitmap reference method。

SVG / CLI 快速样例

node "$HOME/Documents/qm-icon-studio/cli/qm-icon-options.mjs" \
  --name "Qiaomu Music" \
  --query music \
  --count 8 \
  --out design/qiaomu-music-svg-cli-options \
  --offline

这条路径会输出可编辑 SVG：option-01.svg 到 option-08.svg、contact-sheet.svg、choices.md 和 qm-icon-options.json。option-*.svg 是严格 1024x1024 方形源图；contact-sheet.svg 只在预览层使用统一圆角裁剪，避免出现既不像正方形、也不像合理圆角的半截角线。如果本机装了 Playwright，可加 --png 让 CLI 直接渲染 PNG；否则保留 SVG 也能继续评审和导出。示例见 docs/assets/examples/qiaomu-music/svg-cli/。

安装

npx skills add joeseesun/qiaomu-icon-generator

安装后可以确认：

test -f ~/.agents/skills/qiaomu-icon-generator/SKILL.md

前置要求

  • 已安装 Node.js 和 npx，用于安装 skill。
  • 若使用 Codex 内置生图，需要在支持 image_gen 的 Codex 环境中运行。
  • 若要导出 Web/iOS PNG 尺寸，需要 Python 3 和 Pillow：python3 -m pip install pillow。
  • 若使用 QM Icon Studio CLI，需要本机有对应 CLI。镜像机默认路径是 $HOME/Documents/qm-icon-studio/cli/qm-icon-options.mjs。
  • 若要参考 Icon Museum，需要本地参考库或用户提供的图标目录；参考图只用于风格启发，不能复制商标和独特构图。

你可以这样说

  • “给这个新网站设计 10 个 favicon / iOS app icon 候选。”
  • “参考我下载的 Icon Museum 图标风格，生成一组让我选。”
  • “选 05，把它导出成 Web favicon 和 iOS AppIcon。”
  • “这个项目已有图标，别覆盖生产文件，先放到 design/icon-options/ 让我选。”
  • “用 Codex 内置生图，不要用 SVG CLI。”

典型工作流

  1. 读取项目名、用途、主色、现有 favicon、目标平台。
  2. 选择生成方法：CLI 或 Codex bitmap reference method。
  3. 生成 6–12 个候选，默认放在 design/<product-slug>-icon-options/。
  4. 生成 contact-sheet.png，再生成 favicon-readability-sheet.png 检查 64px / 32px。
  5. 用户选中一个编号。
  6. 运行导出脚本输出 Web / iOS 尺寸。
  7. 只在用户确认后替换生产图标。

导出脚本

选中候选后，把它导出为网站和 iOS 尺寸：

python3 scripts/export_selected_icon.py \
  --source design/qiaomu-music-icon-options/ios-1024/option-05.png \
  --web-out public/icons \
  --web-prefix qiaomu-music-icon \
  --appiconset ios/QiaomuMusic/QiaomuMusic/Assets.xcassets/AppIcon.appiconset

Web 常用输出：

  • qiaomu-music-icon-32.png
  • qiaomu-music-icon-64.png
  • qiaomu-music-icon-180.png
  • qiaomu-music-icon-192.png
  • qiaomu-music-icon-512.png
  • qiaomu-music-icon-1024.png

iOS 输出会按 .appiconset/Contents.json 中已有条目生成对应像素尺寸。

质量门槛

  • 不要在用户选择前覆盖现有生产图标。
  • 候选图标必须能在 32px 下辨认。
  • 最终 Web/iOS PNG 必须是方形、无透明通道。
  • iOS master 使用 1024x1024 PNG。
  • SVG CLI 源文件必须保持正方形；如果展示圆角预览，必须用统一 mask 裁剪，不能只露出四角描边。
  • Codex 生图必须避免文字、字母、数字、伪文字、水印、真实商标。
  • 参考图只用于风格，不复制原图、应用名、商标或独特构图。

示例：乔木音乐

一次真实使用中，这个 skill 为乔木音乐网生成了 10 个 Codex bitmap 候选，并用同一主题跑了 8 个 SVG CLI 候选作为对照。

  • Codex bitmap 候选：docs/assets/examples/qiaomu-music/codex-bitmap/contact-sheet.png
  • SVG CLI 候选：docs/assets/examples/qiaomu-music/svg-cli/contact-sheet.svg
  • 用户选择：option-05
  • 视觉方向：黑底、琥珀唱片、抽象 Q / 唱臂切口
  • Web 输出：docs/assets/examples/qiaomu-music/final-web/qiaomu-music-icon-*.png
  • iOS 输出：AppIcon.appiconset/AppIcon-*.png
  • 验证：Web build 通过，iOS simulator build 通过，32px favicon 可辨认

Troubleshooting

问题原因解决方法
npx skills add 找不到 skillGitHub 还没同步或 SKILL.md frontmatter 无效先运行 npx skills add joeseesun/qiaomu-icon-generator --list
导出脚本报 No module named PIL没装 Pillow运行 python3 -m pip install pillow
生成图里出现字母或伪文字Prompt 没有强约束加上 no text, no letters, no numbers, no pseudo-text 并重新生成
32px 看不清图标细节太多优先选择大块面、强轮廓、少元素候选
.appiconset 没有更新路径不是现有 AppIcon 目录或缺少 Contents.json指向真实 AppIcon.appiconset，不要指向 Assets.xcassets 根目录

关于向阳乔木

向阳乔木（乔向阳 / Joe）是一位实践型 AI 产品与内容创作者，长期把前沿 AI 变化转译成可复用的工作流、产品判断、AI 编程实践、AI 搜索实践和 GEO/AI 营销方法。

支持与关注

打赏支持微信公众号
向阳乔木打赏二维码向阳乔木推荐看公众号二维码
感谢支持乔木持续分享 AI 实践扫码关注「向阳乔木推荐看」

License

MIT

Copyright (c) 向阳乔木
X: https://x.com/vista8
GitHub: https://github.com/joeseesun/

English

qiaomu-icon-generator 帮助智能体生成多个应用图标、favicon 或网站图标候选方案，呈现接触表，并将选定的方向导出为真实的 Web 和 iOS 图标资源。

安装：

npx skills add joeseesun/qiaomu-icon-generator

它支持两种路径：

  • QM Icon Studio CLI，用于生成干净、适合矢量风格的 SVG/PNG 候选图标。
  • Codex 位图参考方法，使用本地参考图库和内建图像生成，输出更丰富的 iOS 风格栅格图标。

来自 Qiaomu Music 的真实输出示例：

选定的图标位图候选SVG CLI 候选
Qiaomu Music 选定图标选项 05Qiaomu Music 位图候选Qiaomu Music SVG CLI 候选

典型流程：

  1. 检查产品背景、颜色、现有图标以及目标平台。
  2. 生成 6–12 个候选图标。
  3. 构建接触表与 favicon 可读性预览。
  4. 等待用户选择。
  5. 导出 Web 图标和 iOS 的 AppIcon.appiconset。

导出工具依赖 Pillow：

python3 -m pip install pillow

然后：

python3 scripts/export_selected_icon.py \
  --source design/my-product-icon-options/ios-1024/option-05.png \
  --web-out public/icons \
  --web-prefix my-product-icon \
  --appiconset path/to/AppIcon.appiconset

边界说明：

  • 在用户做出选择前，不要覆盖生产环境的图标。
  • 不要复制参考图标中的商标、应用名称或独特构图。
  • 最终的 Web/iOS 图标应为正方形、不透明 PNG，并在 32px 下可读。

在 GitHub 查看完整项目