mcpField
Q
qiaomu-icon-generator

qiaomu-icon-generator

github.com/joeseesun设计与 UI5595 次安装19 周前更新
代码仓库

关于 qiaomu-icon-generator

qiaomu-icon-generator 是一项为网站、App、工具和 Skill 生成多款图标方案的技能。它可通过本机 QM Icon Studio CLI 制作矢量候选，或用 Codex 生图制作位图方案，并在用户确认前保留现有生产图标。

主要功能

  1. 01生成多款图标候选
  2. 02用 QM Icon Studio CLI 制作 SVG
  3. 03用 Codex 生图制作位图方案
  4. 04生成选择稿和预览图
  5. 05导出选定的 Web 与 iOS 资源

适用场景

  1. 01为新网站探索 favicon 方向
  2. 02选择前比较 App 图标方案
  3. 03检查图标在 32px 下的辨识度

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/joeseesun/qiaomu-icon-generator --skill qiaomu-icon-generator

安装后在 Claude Code 中输入/qiaomu-icon-generator确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

.gitignore
CODE_OF_CONDUCT.md
SECURITY.md
CONTRIBUTING.md
LICENSE
README.md
requirements.txt
.github/
PULL_REQUEST_TEMPLATE.md
.github/ISSUE_TEMPLATE/
feature_request.md
bug_report.md
docs/assets/examples/qiaomu-music/
README.md
docs/assets/examples/qiaomu-music/codex-bitmap/
prompts.md
choices.md
docs/assets/examples/qiaomu-music/svg-cli/
qm-icon-options.json
choices.md
references/
qm-icon-studio-cli-method.md
codex-bitmap-reference-method.md
scripts/
export_selected_icon.py

详细介绍

Qiaomu Icon Generator

用本机 QM Icon Studio CLI 或 Codex 内置生图能力，为网站、App、工具或 Skill 生成多套图标候选，并给用户一张选择稿。

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

When To Use

  • 新网站、App、Chrome 插件、Skill、CLI 工具需要 favicon、app icon 或品牌入口图标。
  • 用户想先看多个方向再选，而不是直接替换生产图标。
  • 项目还没有完整品牌系统，但已有名称、域名、用途或一句话描述。

Method Choice

Use the QM Icon Studio CLI method when the user wants deterministic, vector-friendly icons based on Iconify-style symbols, or when they need fast clean SVG candidates.

Use the Codex bitmap reference method when the user explicitly asks for Codex built-in image generation, wants richer iOS-style app icons, asks to reference existing icon galleries, or needs a polished raster icon direction before final export.

Workflow: QM Icon Studio CLI

Read references/qm-icon-studio-cli-method.md before using this path.

  1. 读取项目上下文：README.md、package.json、站点域名、已有 public/ 或 assets/ 图标、主色 CSS 变量。
  2. 提炼一个短英文语义关键词，例如 rocket、globe、code、book、camera、music、money。中文需求可以直接传给 CLI；CLI 会先翻译再搜索 Iconify，必要时你也可以手动改成更准确的英文词。
  3. 在项目内创建候选目录，默认使用 design/icon-options/；如果项目已有设计目录，沿用现有结构。
  4. 如果当前机器有 QM Icon Studio CLI，调用：
node "$HOME/Documents/qm-icon-studio/cli/qm-icon-options.mjs" \
  --name "Product Name" \
  --query "rocket" \
  --count 8 \
  --out design/icon-options \
  --png

如果这个本机路径不存在，用 Codex bitmap reference method，或让用户提供自己的图标生成 CLI / 图标参考库路径。

  1. 把 contact-sheet.png 或 contact-sheet.svg 展示给用户，并推荐 2 到 3 个最适合项目气质的方向。
  2. 如果 --png 因 Playwright 不可用而跳过，继续使用 SVG 输出；不要把“没有 PNG”误判为生成失败。README 或汇报中要展示 contact-sheet.svg、1 到 2 个 option-*.svg，并说明 SVG 是可编辑源文件。
  3. 检查 SVG 几何：option-*.svg 必须是严格正方形源图；如果 contact sheet 或 README 图片展示圆角预览，必须用统一 mask 裁剪，不能出现方形源图盖住圆角框后只露出四角弧线。
  4. 用户确认后，再把选中的 SVG/PNG 复制到目标项目，或打开 QM Icon Studio 继续导出完整平台资源包。

Workflow: Codex Bitmap Reference Method

Read references/codex-bitmap-reference-method.md before using this path.

  1. 读取项目上下文：产品名、用途、域名、现有 favicon/app icon、主色、品牌调性、目标平台。
  2. 如果用户要参考 Icon Museum，优先使用可用的本机参考库。Joe 的默认路径是 $HOME/Documents/图片参考生成icon/icon-museum/manifest.json 和 icons/；其他机器可使用用户提供的 manifest / 图片目录。按品类、颜色、用途筛出 6 到 12 个参考方向，但不要复制原图、商标、应用名或独特构图。
  3. 在项目内创建候选目录，默认 design/<product-slug>-icon-options/，包含 prompts.md、choices.md、候选 PNG、选择稿和导出尺寸。
  4. 使用 Codex 内置 image_gen，每个候选单独一次生成。Prompt 必须包含：square app icon, opaque background, no text/letters/numbers/watermark, centered bold symbol, readable at 32px, iOS and web favicon use.
  5. 将内置生图输出从 $CODEX_HOME/generated_images/... 复制到候选目录，命名为 option-01.png 至 option-10.png。保留原始生成文件，不删除。
  6. 生成 contact-sheet.png 和 favicon-readability-sheet.png，检查 64px 和 32px 仍可辨认。
  7. 用户选中后，运行导出脚本生成 Web/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
  1. 把网站入口改为引用真实 PNG favicon/apple-touch icon；iOS 工程则更新 .appiconset 里已有尺寸。不要在用户确认前覆盖生产图标。

Rules

  • 不要在用户选择前覆盖现有生产图标。
  • 不要把纯装饰图案当成品牌图标；图形必须能在 32px favicon 下辨认。
  • 优先生成 6 到 12 个候选，少于 4 个不利于比较，多于 12 个会让选择变累。
  • 候选稿默认保留方形源图；iOS、macOS、Windows 等平台圆角和格式留到最终导出阶段处理。
  • 如果 PNG 渲染失败，继续使用 SVG 候选稿，并说明 Playwright 不可用。
  • 如果外部网络不可用，加 --offline 使用内置图标库继续生成候选。
  • SVG CLI 候选源文件必须是正方形；圆角只作为 contact sheet / README 的预览 mask，不要烘进源图，也不要做成半截圆角边框。
  • Codex bitmap reference method 必须避免文字、字母、数字、伪文字、水印、真实商标和对参考图的近似复制。
  • Web/iOS 最终资产必须是方形、无透明通道、中心主体有安全边距；iOS App Store master 使用 1024x1024 PNG。
  • 若要替换现有网站或 App 图标，先确认用户已选择候选编号，再导出并替换。

Output

QM Icon Studio CLI 候选目录通常包含：

  • option-01.svg 至 option-08.svg
  • option-01.png 至 option-08.png，如果 Playwright 可用
  • contact-sheet.svg
  • contact-sheet.png，如果 Playwright 可用
  • choices.md
  • qm-icon-options.json

Codex bitmap reference method 候选目录通常包含：

  • option-01.png 至 option-10.png
  • ios-1024/
  • web-180/
  • web-64/
  • web-32/
  • contact-sheet.png
  • favicon-readability-sheet.png
  • prompts.md
  • choices.md

公开示例素材

公开 README 的主示例应优先采用真实产品案例，而不是只为仓库本身生成一个图标。目前推荐的示例是乔木音乐网：

  • Codex 位图参考方法：docs/assets/examples/qiaomu-music/codex-bitmap/contact-sheet.png
  • 选定的最终图标：docs/assets/examples/qiaomu-music/codex-bitmap/selected-option-05-ios-1024.png
  • 网站图标可读性：docs/assets/examples/qiaomu-music/codex-bitmap/favicon-readability-sheet.png
  • SVG CLI 方法：docs/assets/examples/qiaomu-music/svg-cli/contact-sheet.svg
  • SVG CLI 预览：docs/assets/examples/qiaomu-music/svg-cli/svg-cli-preview.png

添加新的公开示例时，请同时提供视觉证明和过程说明：候选图表、选定素材、小尺寸可读性测试，以及用于生成素材的命令或提示词。

评论

支持 Markdown