Blog-Titelbild-Generator Skill
Dieser Skill ermöglicht KI-Agenten die Erstellung beeindruckender, minimalistischer, technischer Blog-Titelbilder mit dem blog-cover-image-cli. Die CLI verwendet Gemini 3.1 Flash Image Preview, holt automatisch Markenlogos von Domains, nutzt lokale ästhetische Referenzbilder und verwendet Google-Suche-Grounding, um Echtzeit-Kontext einzubringen.
Einrichtung & Konfiguration
Voraussetzungen für den Agenten:
Bevor Sie dieses Tool verwenden, überprüfen Sie, ob es installiert ist. Falls blog-cover-cli --help fehlschlägt, installieren Sie es global:
npm install -g blog-cover-image-cli
Wenn der Benutzer möchte, dass Sie ein Bild generieren, und Sie noch keinen API-Schlüssel eingerichtet haben, müssen Sie zuerst die CLI mit einem Gemini API Key konfigurieren. Die CLI speichert diesen sicher über das conf-Paket.
# 1. Setzen Sie Ihren Gemini API Key (Erforderlich für die Bildgenerierung)
npx -p blog-cover-image-cli blog-cover-cli config set-key <IHR_GEMINI_API_SCHLÜSSEL>
# 2. Setzen Sie Ihre Brandfetch Client ID (Erforderlich zum Abrufen hochauflösender Logos)
npx -p blog-cover-image-cli blog-cover-cli config set-brandfetch-id <IHRE_BRANDFETCH_CLIENT_ID>
# Überprüfen Sie Ihre Schlüssel (maskiert)
npx -p blog-cover-image-cli blog-cover-cli config get-key
npx -p blog-cover-image-cli blog-cover-cli config get-brandfetch-id
Verwendung: Ein Bild generieren
Wenn ein Benutzer ein Titelbild anfordert (z. B. „Erstelle ein Titelbild für meinen Blog über Vercel v0“), sollten Sie den Befehl generate verwenden.
npx -p blog-cover-image-cli blog-cover-cli generate -t "Der Titel des Blog-Beitrags" -l "example.com"
Argumente
-t, --title <text>: (Erforderlich) Der Titeltext, der auf dem Titelbild angezeigt werden soll. Verwenden Sie keine übermäßig langen Titel (halten Sie ihn visuell unter 3 Textzeilen).-l, --logo <domain>: (Optional, aber empfohlen) Die Domain, von der das Markenlogo abgerufen werden soll (z. B.vercel.com,google.com,cursor.com). Die CLI konvertiert automatisch WebP/SVG/AVIF in PNG für Kompatibilität.-o, --output <path>: (Optional) Der Dateipfad, unter dem das generierte Bild gespeichert werden soll. Wenn ausgelassen, speichert die CLI es automatisch in einemoutput/-Verzeichnis im aktuellen Arbeitsordner (z. B../output/vercel-cover.png).
Beispiele
Beispiel 1: Cursor
npx -p blog-cover-image-cli blog-cover-cli generate -t "Warum Cursor der ultimative KI-Code-Editor ist" -l "cursor.com"
Beispiel 2: Lovable
npx -p blog-cover-image-cli blog-cover-cli generate -t "Apps in Minuten mit Lovable erstellen" -l "lovable.dev"
Beispiel 3: Benutzerdefinierter Ausgabepfad
npx -p blog-cover-image-cli blog-cover-cli generate -t "React im Jahr 2026 meistern" -l "reactjs.org" -o "./assets/react-cover.png"
Funktionsweise im Hintergrund
Als Agent sollten Sie wissen, was die CLI tut, um den Benutzer informieren zu können:
- Logo-Abruf: Es ruft Logos von Brandfetch ab und verarbeitet sie mit
sharp. - Referenzen: Es lädt kuratierte Referenzbilder aus seinem
examples/-Verzeichnis, um sicherzustellen, dass die Ausgabe immer einen sauberen, minimalistischen weißen Hintergrund mit kräftiger Typografie hat. - Grounding: Es hat
googleSearch-Tools aktiviert; wenn der Titel sich auf ein aktuelles Ereignis bezieht, kann Gemini dies vor der Bildgenerierung nachschlagen. - Text-Erzwingung: Es zwingt Gemini, die exakte Titelzeichenfolge unter Verwendung typografischer Platzierungsregeln auszugeben.
Edge Cases / Fehlerbehebung
- Fehler wegen fehlendem API-Schlüssel: Wenn Sie einen API-Schlüsselfehler sehen, führen Sie den Befehl
config set-keyaus. - Warnung beim Logo-Abruf: Wenn die CLI
Warning: Could not fetch logoausgibt, wird sie das Bild trotzdem ohne Logo generieren. Sie müssen nicht abstürzen oder anhalten. - Strenge Modalitätsbeschränkungen: Da es die experimentellen Bildmodelle von Gemini verwendet, kann die Generierung aufgrund strenger Sicherheitsfilter gelegentlich fehlschlagen. Wenn dies passiert, benachrichtigen Sie den Benutzer.