qiaomu-icon-generator

Qiaomu アイコンジェネレーター

ローカルの QM Icon Studio CLI または Codex 内蔵の画像生成機能を使って、ウェブサイト、アプリ、ツール、Skill 用のアイコン候補を複数作成し、ユーザーに選択用シートを提示します。

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

使用するタイミング

• 新しいウェブサイト、アプリ、Chrome 拡張機能、Skill、CLI ツールに favicon、アプリアイコン、ブランドの入口となるアイコンが必要な場合。
• ユーザーが本番アイコンをすぐに置き換えるのではなく、まず複数の方向性を見てから選びたい場合。
• プロジェクトに完全なブランドシステムはまだないものの、名称、ドメイン、用途、または一文の説明がある場合。

方法の選択

Iconify 風のシンボルをもとに、再現性の高いベクター対応アイコンを作りたい場合や、すばやくクリーンな SVG 候補を作る必要がある場合は、QM Icon Studio CLI method を使用します。

ユーザーが Codex 内蔵の画像生成機能を明示的に希望する場合、より豊かな iOS 風アプリアイコンを求める場合、既存のアイコンギャラリーを参考にしたい場合、または最終書き出し前に洗練されたラスターアイコンの方向性を決める必要がある場合は、Codex bitmap reference method を使用します。

ワークフロー：QM Icon Studio CLI

この方法を使う前に、references/qm-icon-studio-cli-method.md を読んでください。

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 またはアイコン参考ライブラリのパスを尋ねます。

5. contact-sheet.png または contact-sheet.svg をユーザーに提示し、プロジェクトの雰囲気に最も合う方向性を 2～3 個推薦します。
6. Playwright を利用できないために --png がスキップされた場合は、SVG の出力を引き続き使用します。「PNG がない」ことを生成の失敗と判断しないでください。README または報告では contact-sheet.svg と 1～2 個の option-*.svg を表示し、SVG が編集可能なソースファイルであることを説明します。
7. SVG の形状を確認します：option-*.svg は厳密な正方形のソース画像でなければなりません。コンタクトシートや README の画像プレビューで角丸を表示する場合は、統一されたマスクで切り抜いてください。正方形のソース画像が角丸フレームに重なり、四隅の弧線だけが見える状態にしてはいけません。
8. ユーザーの確認後、選択した SVG/PNG を対象プロジェクトにコピーするか、QM Icon Studio を開いて完全なプラットフォーム用リソースパッケージを書き出します。

ワークフロー：Codex Bitmap Reference Method

この方法を使う前に、references/codex-bitmap-reference-method.md を読んでください。

1. プロジェクトのコンテキストを確認します：製品名、用途、ドメイン、既存の favicon/アプリアイコン、メインカラー、ブランドの雰囲気、対象プラットフォーム。
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 を使用し、候補ごとに個別に生成します。プロンプトには次を必ず含めます：正方形のアプリアイコン、不透明な背景、テキスト・文字・数字・透かしなし、中央に配置した太いシンボル、32px で判読可能、iOS とウェブの favicon 用。
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

8. ウェブサイトのエントリを実際の PNG favicon/apple-touch icon を参照するように変更します。iOS プロジェクトでは、.appiconset 内の既存のサイズを更新します。ユーザーが確認する前に本番アイコンを上書きしてはいけません。

ルール

• ユーザーが選択する前に、既存の本番アイコンを上書きしないでください。
• 単なる装飾模様をブランドアイコンとして扱わないでください。図形は 32px の favicon でも判別できる必要があります。
• 候補は 6～12 個を優先して生成します。4 個未満では比較が難しく、12 個を超えると選択が大変になります。
• 候補はデフォルトで正方形のソース画像を保持します。iOS、macOS、Windows などのプラットフォーム向けの角丸処理とフォーマット変換は、最終書き出しの段階で行います。
• PNG のレンダリングに失敗した場合は、SVG の候補を引き続き使用し、Playwright を利用できないことを説明します。
• 外部ネットワークを利用できない場合は、--offline を追加して内蔵アイコンライブラリを使い、候補の生成を続けます。
• SVG CLI の候補ソースファイルは正方形でなければなりません。角丸はコンタクトシート / README のプレビュー用マスクとしてのみ使用し、ソース画像に焼き込んだり、途中で途切れた角丸の枠線にしたりしないでください。
• Codex bitmap reference method では、テキスト、文字、数字、擬似文字、透かし、実在する商標、および参考画像に酷似した複製を避けてください。
• Web/iOS の最終アセットは、正方形かつアルファチャンネルなしで、中央の主題にセーフマージンを設ける必要があります。iOS App Store 用マスターには 1024x1024 PNG を使用します。
• 既存のウェブサイトまたはアプリのアイコンを置き換える場合は、候補番号をユーザーが選択したことを確認してから、書き出しと置き換えを行います。

出力

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

新しい公開サンプルを追加する際は、視覚的な証拠と制作過程の記録を両方含めてください。候補一覧、選定した素材、小さいサイズでの視認性テスト、および作成に使用したコマンドまたはプロンプトが必要です。