Qiaomu Icon Generator

Was macht Qiaomu Icon Generator?

Generiere mehrere Icon-Kandidaten für Webseiten, Apps, Tools oder Skills mit dem nativen QM Icon Studio CLI oder der integrierten Bildgenerierung von Codex und präsentiere dem Benutzer eine Auswahl.

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

Wann verwenden

• Neue Website, App, Chrome-Erweiterung, Skill oder CLI-Tool benötigt ein Favicon, App Icon oder Marken-Einstiegsicon.
• Der Benutzer möchte zunächst mehrere Richtungen sehen, bevor er sich entscheidet, anstatt direkt das Produktionsicon zu ersetzen.
• Das Projekt hat noch kein vollständiges Branding-System, aber bereits einen Namen, eine Domain, einen Verwendungszweck oder eine kurze Beschreibung.

Methodenauswahl

Verwende die QM Icon Studio CLI-Methode, wenn der Benutzer deterministische, vektorfreundliche Icons auf Basis von Iconify-Symbolen wünscht oder er schnelle, saubere SVG-Kandidaten benötigt.

Verwende die Codex-Bitmap-Referenzmethode, wenn der Benutzer explizit die integrierte Bildgenerierung von Codex anfordert, reichhaltigere iOS-App-Icons wünscht, bestehende Icon-Galerien referenzieren möchte oder eine polierte Raster-Icon-Richtung vor dem endgültigen Export benötigt.

Workflow: QM Icon Studio CLI

Lies references/qm-icon-studio-cli-method.md, bevor du diesen Pfad verwendest.

1. Lese den Projektkontext: README.md, package.json, die Site-Domain, vorhandene Icons in public/ oder assets/ sowie primäre CSS-Farbvariablen.
2. Extrahiere ein kurzes englisches semantisches Schlüsselwort, z. B. rocket, globe, code, book, camera, music, money. Deutschsprachige Anforderungen können direkt an die CLI übergeben werden; die CLI übersetzt zuerst und sucht dann in Iconify, falls nötig, kannst du manuell ein genaueres englisches Wort wählen.
3. Erstelle ein Kandidatenverzeichnis im Projekt, standardmäßig design/icon-options/; falls das Projekt bereits ein Designverzeichnis hat, verwende die bestehende Struktur.
4. Falls auf dem aktuellen Rechner das QM Icon Studio CLI verfügbar ist, führe folgenden Befehl aus:

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

Falls dieser lokale Pfad nicht existiert, verwende die Codex-Bitmap-Referenzmethode oder lass den Benutzer seinen eigenen Icon-Generierungs-CLI bzw. Referenzbibliothekspfad angeben.

5. Zeige dem Benutzer die contact-sheet.png oder contact-sheet.svg und empfehle 2 bis 3 Richtungen, die am besten zum Projektcharakter passen.
6. Falls --png aufgrund fehlender Playwright-Unterstützung übersprungen wird, fahre mit der SVG-Ausgabe fort; betrachte das Fehlen von PNG nicht fälschlicherweise als Generierungsfehler. Zeige im README oder Bericht contact-sheet.svg, 1 bis 2 option-*.svg und erkläre, dass SVG editierbare Quelldateien sind.
7. Überprüfe die SVG-Geometrie: option-*.svg müssen strikt quadratische Quelldateien sein; falls die Kontaktübersicht oder das README-Bild eine runde Vorschau zeigt, muss dies durch ein einheitliches Masken-Cropping erfolgen. Es darf nicht vorkommen, dass eine quadratische Quelldatei unter einem runden Rahmen sitzt und nur die Kurven der Ecken freigibt.
8. Nach Bestätigung durch den Benutzer kopiere das ausgewählte SVG/PNG in das Zielprojekt oder öffne das QM Icon Studio, um ein vollständiges Plattform-Asset-Paket zu exportieren.

Workflow: Codex-Bitmap-Referenzmethode

Lies references/codex-bitmap-reference-method.md, bevor du diesen Pfad verwendest.

1. Lese den Projektkontext: Produktname, Verwendungszweck, Domain, vorhandenes Favicon/App-Icon, Primärfarben, Markenpersönlichkeit, Zielplattform.
2. Falls der Benutzer das Icon Museum referenzieren möchte, verwende vorzugsweise die verfügbare lokale Referenzbibliothek. Joe's Standardpfad ist $HOME/Documents/图片参考生成icon/icon-museum/manifest.json und icons/; auf anderen Rechnern verwende das vom Benutzer bereitgestellte Manifest/Bildverzeichnis. Filtere 6 bis 12 Referenzrichtungen nach Kategorie, Farbe und Verwendungszweck, kopiere jedoch keine Originalbilder, Marken, App-Namen oder einzigartigen Kompositionen.
3. Erstelle ein Kandidatenverzeichnis im Projekt, standardmäßig design/<product-slug>-icon-options/, mit prompts.md, choices.md, Kandidaten-PNGs, Auswahlübersicht und Exportgrößen.
4. Verwende die integrierte image_gen von Codex für jeden Kandidaten einzeln. Der Prompt muss enthalten: quadratisches App-Icon, undurchsichtiger Hintergrund, kein Text/Buchstaben/Zahlen/Wasserzeichen, zentriertes fettes Symbol, lesbar bei 32px, iOS- und Web-Favicon-Verwendung.
5. Kopiere die Ausgabe der integrierten Bildgenerierung von $CODEX_HOME/generated_images/... in das Kandidatenverzeichnis und benenne sie in option-01.png bis option-10.png um. Behalte die Originaldateien, lösche sie nicht.
6. Generiere contact-sheet.png und favicon-readability-sheet.png und überprüfe, ob die Icons bei 64px und 32px noch erkennbar sind.
7. Nach Auswahl durch den Benutzer führe das Export-Skript aus, um Web/iOS-Assets zu generieren:

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. Aktualisiere den Website-Einstiegspunkt so, dass er auf die echten PNG-Favicons/apple-touch-icons verweist; aktualisiere beim iOS-Projekt die vorhandenen Größen im .appiconset. Überschreibe Produktionsicons erst nach Bestätigung durch den Benutzer.

Regeln

• Überschreibe keine vorhandenen Produktionsicons, bevor der Benutzer eine Auswahl getroffen hat.
• Verwechsle reine dekorative Muster nicht mit Markenicons; die Grafik muss bei 32px Favicon-Größe erkennbar sein.
• Generiere bevorzugt 6 bis 12 Kandidaten; weniger als 4 erschweren den Vergleich, mehr als 12 machen die Auswahl mühsam.
• Standardmäßig werden quadratische Quellbilder in der Kandidatenübersicht verwendet; Rundungen und plattformspezifische Formate für iOS, macOS, Windows etc. werden erst in der finalen Exportphase behandelt.
• Falls die PNG-Rendering fehlschlägt, fahre mit SVG-Kandidaten fort und erkläre, dass Playwright nicht verfügbar ist.
• Falls kein externes Netzwerk verfügbar ist, verwende den Schalter --offline und die integrierte Icon-Bibliothek, um weiterhin Kandidaten zu generieren.
• SVG-CLI-Kandidatenquellen müssen quadratisch sein; Rundungen sind ausschließlich als Vorschau-Maske für das Contact-Sheet/README gedacht und dürfen nicht in das Quellbild eingebrannt oder als halbe abgerundete Rahmen ausgeführt werden.
• Die Codex-Bitmap-Referenzmethode muss Text, Buchstaben, Ziffern, Pseudotext, Wasserzeichen, echte Marken und annähernde Kopien der Referenzbilder vermeiden.
• Finale Web/iOS-Assets müssen quadratisch, ohne Transparenzkanal sein und einen zentralen Symbolkörper mit ausreichendem Sicherheitsabstand haben; das iOS-App-Store-Masterbild verwendet 1024x1024 PNG.
• Falls ein bestehendes Website- oder App-Icon ersetzt werden soll, warte auf die Bestätigung des Benutzers mit der Kandidatennummer und exportiere erst dann.

Ausgabe

Das QM Icon Studio CLI-Kandidatenverzeichnis enthält normalerweise:

• option-01.svg bis option-08.svg
• option-01.png bis option-08.png, falls Playwright verfügbar
• contact-sheet.svg
• contact-sheet.png, falls Playwright verfügbar
• choices.md
• qm-icon-options.json

Das Codex-Bitmap-Referenzmethode-Kandidatenverzeichnis enthält normalerweise:

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

Öffentliche Beispiel-Assets

Die Hauptbeispiele im öffentlichen README sollten vorzugsweise reale Produktfälle verwenden, nicht nur ein Icon für das Repository selbst. Das aktuelle empfohlene Beispiel ist Qiaomu Music:

• Codex-Bitmap-Referenzmethode: docs/assets/examples/qiaomu-music/codex-bitmap/contact-sheet.png
• Ausgewähltes finales Icon: docs/assets/examples/qiaomu-music/codex-bitmap/selected-option-05-ios-1024.png
• Favicon-Lesbarkeit: docs/assets/examples/qiaomu-music/codex-bitmap/favicon-readability-sheet.png
• SVG-CLI-Methode: docs/assets/examples/qiaomu-music/svg-cli/contact-sheet.svg
• SVG-CLI-Vorschau: docs/assets/examples/qiaomu-music/svg-cli/svg-cli-preview.png

Beim Hinzufügen eines neuen öffentlichen Beispiels füge sowohl visuelle Belege als auch Prozessnotizen hinzu: Kandidatenübersicht, ausgewähltes Asset, Lesbarkeitstest in kleiner Größe und den verwendeten Befehl oder Prompt.