乔木图标生成器

Générateur d'icônes Qiaomu

Utilisez le CLI QM Icon Studio local ou la capacité de génération d'images intégrée de Codex pour créer plusieurs séries de propositions d'icônes pour sites Web, applications, outils ou compétences, et présentez à l'utilisateur une feuille de sélection.

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

Quand l'utiliser

• Un nouveau site Web, application, extension Chrome, compétence ou outil CLI a besoin d'un favicon, d'une icône d'application ou d'une icône de marque.
• L'utilisateur souhaite d'abord voir plusieurs directions avant de choisir, plutôt que de remplacer directement une icône de production.
• Le projet ne dispose pas encore d'un système de marque complet, mais possède déjà un nom, un domaine, un objectif ou une description en une phrase.

Choix de la méthode

Utilisez la méthode QM Icon Studio CLI lorsque l'utilisateur souhaite des icônes déterministes et vectorielles basées sur des symboles de type Iconify, ou lorsqu'il a besoin de propositions SVG rapides et propres.

Utilisez la méthode Codex bitmap reference lorsque l'utilisateur demande explicitement la génération d'images intégrée de Codex, souhaite des icônes d'application iOS plus riches, demande à référencer des galeries d'icônes existantes, ou a besoin d'une direction d'icône matricielle soignée avant l'exportation finale.

Flux de travail : QM Icon Studio CLI

Lisez references/qm-icon-studio-cli-method.md avant d'utiliser ce chemin.

1. Lisez le contexte du projet : README.md, package.json, le nom de domaine du site, les icônes existantes dans public/ ou assets/, les variables CSS de la couleur principale.
2. Distillez un mot-clé sémantique court en anglais, par exemple rocket, globe, code, book, camera, music, money. Les demandes en chinois peuvent être transmises directement au CLI ; le CLI traduira d'abord puis cherchera dans Iconify, si nécessaire vous pouvez aussi le remplacer manuellement par un mot anglais plus précis.
3. Créez un répertoire de propositions dans le projet, utilisez par défaut design/icon-options/ ; si le projet a déjà un répertoire de design, suivez la structure existante.
4. Si la machine actuelle dispose de QM Icon Studio CLI, appelez :

node "$HOME/Documents/qm-icon-studio/cli/qm-icon-options.mjs" \
  --name "Nom du produit" \
  --query "rocket" \
  --count 8 \
  --out design/icon-options \
  --png

Si ce chemin local n'existe pas, utilisez la méthode Codex bitmap reference, ou demandez à l'utilisateur de fournir son propre CLI de génération d'icônes / chemin de bibliothèque de référence.

5. Montrez contact-sheet.png ou contact-sheet.svg à l'utilisateur, et recommandez 2 à 3 directions les plus adaptées à l'esprit du projet.
6. Si --png est ignoré car Playwright n'est pas disponible, continuez avec la sortie SVG ; ne considérez pas l'absence de PNG comme un échec de génération. Dans le README ou le rapport, montrez contact-sheet.svg, 1 à 2 option-*.svg, et expliquez que les SVG sont des fichiers sources modifiables.
7. Vérifiez la géométrie SVG : les option-*.svg doivent être des sources strictement carrées ; si le contact sheet ou l'image README montre un aperçu arrondi, ils doivent être rognés avec un masque uniforme, sans que la source carrée ne dépasse du cadre arrondi en ne laissant que des arcs aux coins.
8. Après confirmation de l'utilisateur, copiez le SVG/PNG sélectionné dans le projet cible, ou ouvrez QM Icon Studio pour continuer à exporter le pack de ressources complet de la plateforme.

Flux de travail : Méthode Codex Bitmap Reference

Lisez references/codex-bitmap-reference-method.md avant d'utiliser ce chemin.

1. Lisez le contexte du projet : nom du produit, objectif, domaine, favicon/icône d'application existant, couleur principale, tonalité de la marque, plateforme cible.
2. Si l'utilisateur souhaite référencer un musée d'icônes, utilisez de préférence la bibliothèque de référence locale disponible. Le chemin par défaut de Joe est $HOME/Documents/图片参考生成icon/icon-museum/manifest.json et icons/ ; les autres machines peuvent utiliser le manifeste / répertoire d'images fourni par l'utilisateur. Filtrez 6 à 12 directions de référence par catégorie, couleur et objectif, mais ne copiez pas l'image originale, la marque, le nom d'application ou la composition unique.
3. Créez un répertoire de propositions dans le projet, par défaut design/<slug-du-produit>-icon-options/, contenant prompts.md, choices.md, les PNG des propositions, la feuille de sélection et les tailles d'exportation.
4. Utilisez image_gen intégré de Codex, une génération par proposition. Le prompt doit contenir : icône d'application carrée, fond opaque, pas de texte/chiffres/lettres/filigrane, symbole audacieux centré, lisible à 32 px, utilisation pour favicon Web et iOS.
5. Copiez la sortie de la génération d'image intégrée de $CODEX_HOME/generated_images/... vers le répertoire des propositions, nommez-les option-01.png à option-10.png. Conservez les fichiers originaux générés, ne les supprimez pas.
6. Générez contact-sheet.png et favicon-readability-sheet.png, vérifiez qu'ils sont toujours reconnaissables à 64 px et 32 px.
7. Une fois la proposition sélectionnée, exécutez le script d'exportation pour générer les ressources 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. Mettez à jour le site pour référencer le vrai favicon PNG / apple-touch icon ; pour le projet iOS, mettez à jour les tailles existantes dans .appiconset. Ne remplacez pas l'icône de production avant confirmation de l'utilisateur.

Règles

• Ne remplacez pas une icône de production existante avant que l'utilisateur ait choisi.
• Ne considérez pas un motif purement décoratif comme une icône de marque ; le graphisme doit être reconnaissable dans un favicon de 32 px.
• Générez de préférence 6 à 12 propositions ; moins de 4 ne facilite pas la comparaison, plus de 12 fatigue le choix.
• Les propositions conservent par défaut la source carrée ; les arrondis et formats spécifiques à iOS, macOS, Windows sont traités lors de l'exportation finale.
• Si le rendu PNG échoue, continuez avec les propositions SVG et expliquez que Playwright n'est pas disponible.
• Si le réseau externe n'est pas disponible, ajoutez --offline pour continuer à générer des propositions à l'aide de la bibliothèque d'icônes intégrée.
• Les fichiers sources des propositions SVG CLI doivent être carrés ; les arrondis ne sont utilisés que comme masque d'aperçu dans le contact sheet / README, ne les intégrez pas dans la source et ne créez pas de bordure arrondie partielle.
• La méthode Codex bitmap reference doit éviter les textes, lettres, chiffres, pseudo-textes, filigranes, marques réelles et la copie approximative des images de référence.
• Les ressources finales Web/iOS doivent être carrées, sans canal alpha, avec un sujet centré et une marge de sécurité ; le master App Store iOS utilise un PNG de 1024x1024.
• Si vous devez remplacer une icône de site Web ou d'application existante, confirmez d'abord que l'utilisateur a sélectionné un numéro de proposition, puis exportez et remplacez.

Sortie

Le répertoire des propositions QM Icon Studio CLI contient généralement :

• option-01.svg à option-08.svg
• option-01.png à option-08.png, si Playwright est disponible
• contact-sheet.svg
• contact-sheet.png, si Playwright est disponible
• choices.md
• qm-icon-options.json

Le répertoire des propositions Codex bitmap reference contient généralement :

• 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

Exemples publics

Les exemples principaux du README public doivent de préférence utiliser de vrais cas de produits, pas seulement générer une icône pour le dépôt lui-même. L'exemple actuel recommandé est le site Qiaomu Music :

• Méthode Codex bitmap reference : docs/assets/examples/qiaomu-music/codex-bitmap/contact-sheet.png
• Icône finale sélectionnée : docs/assets/examples/qiaomu-music/codex-bitmap/selected-option-05-ios-1024.png
• Test de lisibilité du favicon : docs/assets/examples/qiaomu-music/codex-bitmap/favicon-readability-sheet.png
• Méthode SVG CLI : docs/assets/examples/qiaomu-music/svg-cli/contact-sheet.svg
• Aperçu SVG CLI : docs/assets/examples/qiaomu-music/svg-cli/svg-cli-preview.png

Lors de l'ajout d'un nouvel exemple public, incluez à la fois une preuve visuelle et des notes de processus : la feuille des propositions, la ressource sélectionnée, le test de lisibilité en petite taille, et la commande ou le prompt utilisé pour le produire.