Thumbnail Creator Skill (via Gemini)
Generiert Vorschlagskizzen für Artikel- und Newsletter-Thumbnails, indem es als Bildgenerierungsagent innerhalb von Claude Code agiert. Anstatt zwischen verschiedenen Tools zu wechseln und die Gemini-Weboberfläche manuell zu bedienen, ermöglicht dieser Skill Claude den gesamten Workflow: Artikeltext lesen, Kompositionen vorschlagen, maßgeschneiderte Prompts erstellen, die Gemini API aufrufen, die Ergebnisse auswerten und schließlich eine Rangliste mit kurzen Begründungen zurückgeben.
Das Ergebnis sind produktionsreife Thumbnail-Kandidaten, die Sie direkt in Ihr CMS, Newsletter-Tool oder Ihren Social-Media-Planer einfügen können.
Voraussetzungen
Bevor der Skill Bilder generieren kann, müssen beide folgenden Punkte erfüllt sein:
1. Gemini API-Schlüssel
Holen Sie sich einen kostenlosen Schlüssel von Google AI Studio.
Setzen Sie ihn als Umgebungsvariable:
export GEMINI_API_KEY=<ihr-schlüssel>
Um ihn über Sitzungen hinweg zu speichern, fügen Sie ihn zu Ihrem Shell-Profil hinzu (~/.zshrc oder ~/.bashrc):
echo 'export GEMINI_API_KEY=<ihr-schlüssel>' >> ~/.zshrc
source ~/.zshrc
Überprüfen Sie, ob er gesetzt ist:
echo $GEMINI_API_KEY
2. generate_image.py-Skript
Dieses Skript muss als ./generate_image.py im Projektstammverzeichnis vorhanden sein. Die vollständige Vorlage finden Sie im Abschnitt "Skriptvorlage" weiter unten. Claude wird danach suchen und anbieten, es zu erstellen, falls es fehlt.
Python-Abhängigkeiten:
pip install google-generativeai Pillow requests
Oder mit uv:
uv pip install google-generativeai Pillow requests
Erforderliche Eingaben
Claude wird nach diesen fragen, falls sie nicht bereitgestellt werden:
| Eingabe | Erforderlich | Hinweise |
|---|---|---|
| Artikeltext oder URL | Ja | Fügen Sie den vollständigen Artikeltext ein oder geben Sie eine URL zum Abrufen an. Wird verwendet, um Themen, Aufhänger und Kernaussagen für die Komposition zu extrahieren. |
| Markenfarben | Empfohlen | Hex-Codes oder beschreibende Namen. Z. B. #1A1A2E (marineblau), #E94560 (koralle). Wenn nicht angegeben, verwendet Claude saubere neutrale Standardwerte. |
| Schriftarten / Schriftstil | Empfohlen | Z. B. "fette serifenlose Schrift", "redaktionelle Serife", "Neue Haas Grotesk". Wird im Prompt verwendet, um die Textbehandlung zu steuern. |
| Stilreferenzbeschreibung | Empfohlen | Z. B. "flache Illustration, minimalistisch, wie Stripe's Marketing-Seite" oder "fotorealistisch, dunkler Hintergrund, hoher Kontrast". Es kann auch eine URL zu einem Stilbild angegeben werden. |
| Ausgabemaße | Nein | Standard: 1792x1024 (Querformat, Standard-Artikel-Thumbnail). Optionen: 1024x1024 (quadratisch), 1024x1792 (Hochformat/Mobil). |
| Anzahl der Kandidaten | Nein | Standard: 4. Min. 1, max. 8 (API-Limits und Kosten). |
| Artikeltitel (falls abweichend von H1) | Nein | Wird als primäres Textelement in den Bild-Prompts verwendet. |
| Kandidatenauswahl | Nein | Nachdem Kompositionen vorgeschlagen wurden, fragt Claude, welche generiert werden sollen. Der Benutzer kann "alle" sagen oder eine Nummer auswählen. |
Ausgabestruktur
Phase 1 - Kompositionsvorschläge (Text, vor allen API-Aufrufen)
Claude präsentiert 3-4 Kompositionskonzepte zur Genehmigung durch den Benutzer. Format:
Kompositionskonzepte für: "[Artikeltitel]"
1. KÜHNE BEHAUPTUNG
Layout: Hintergrund in Volltonfarbe, große weiße Überschrift zentriert,
einzelner hervorgehobener Datenpunkt (z. B. "3x schneller") in Markenfarbe darunter
Stimmung: Hohe Autorität, Newsletter-Stil
Am besten für: LinkedIn, Substack-Header
Begründung: Die zentrale Behauptung des Artikels ("X übertrifft Y um das 3-fache") ist spezifisch
genug, um das Visuelle zu verankern - Leser bleiben an Daten hängen.
2. KONZEPTUELLES OBJEKT
Layout: Zentrale Objektillustration (z. B. eine kaputte Uhr für einen Artikel über Zeitverschwendung),
Titel im oberen Drittel, minimal strukturierter Hintergrund
Stimmung: Redaktionell, Medium-Stil
Am besten für: Blog-Header, Medium-Cover, E-Mail-Preheader
Begründung: Bietet Art Direktoren flexible visuelle Metaphern; funktioniert in verschiedenen Größen.
3. KONTRAST-TEILUNG
Layout: Linke Hälfte Markenfarbe, rechte Hälfte weiß oder Bild,
Titel auf der Farbseite, unterstützender Untertext auf der weißen Seite
Stimmung: Sauber, professionell, Startup-Marken-Gefühl
Am besten für: Newsletter, erste Folie der LinkedIn-Karussell
Begründung: Das geteilte Layout schneidet in Newsletter-A/B-Tests konstant gut ab;
Text ist auch in kleinen Größen lesbar.
4. NUR TYPOGRAFIE
Layout: Keine Illustration, übergroße Titelbehandlung,
Autorenname in Kapitälchen am unteren Rand, dünne Trennlinie
Stimmung: Premium, selbstbewusst, redaktionell
Am besten für: Substack, Ghost, E-Mail-Listen mit hoher Dichte
Begründung: Funktioniert, wenn die Marke eine starke typografische Identität hat. Am schnellsten zu produzieren.
Welche Kompositionen sollen generiert werden? (Antworten Sie mit Zahlen, z. B. "1, 3" oder "alle")
Phase 2 - Generierte Bilddateien
Nach der Generierung speichert Claude die Dateien in ./thumbnails/[artikel-slug]/:
thumbnails/
└── article-slug-from-title/
├── candidate_01_bold_claim.png
├── candidate_02_conceptual_object.png
├── candidate_03_contrast_split.png
├── candidate_04_typographic.png
└── evaluation_report.md
Phase 3 - Bewertungsübersichtstabelle
Claude bewertet jedes zurückgegebene Bild mittels Computer Vision und erstellt:
Thumbnail-Bewertung - "[Artikeltitel]"
Generiert: 2026-05-27 | Modell: Gemini Imagen | Maße: 1792x1024
| # | Kandidat | Komposition | Markenfit /10 | Textlesbarkeit /10 | Empfehlung |
|---|---|---|---|---|---|
| 1 | candidate_01_bold_claim.png | Kühne Behauptung | 9 | 8 | ★ Top-Auswahl - starker Datenanker, Markenfarben korrekt, Titel lesbar bei 200px Breite |
| 2 | candidate_02_conceptual_object.png | Konzeptionelles Objekt | 7 | 9 | Gute Alternative - lesbar, sauber, aber Illustrationsstil leicht von der Marke abgewichen |
| 3 | candidate_03_contrast_split.png | Kontrast-Teilung | 8 | 7 | Funktioniert gut in voller Größe; vor Veröffentlichung in Thumbnail-Größe testen - rechte Seite wird enger |
| 4 | candidate_04_typographic.png | Nur Typografie | 9 | 10 | Am stärksten für E-Mails - kein Risiko von Markenabweichungen, vollständig textbasiert |
Empfohlen für das Web: candidate_01_bold_claim.png
Empfohlen für E-Mail/Mobil: candidate_04_typographic.png
Empfohlen für soziale Medien: candidate_03_contrast_split.png
Dateien gespeichert unter: ./thumbnails/artikel-slug-aus-titel/
Wie Claude diesen Skill ausführen sollte
Schritt 1 - Artikel erfassen und analysieren
Nehmen Sie den Artikeltext als eingefügten Text oder eine URL entgegen.
Wenn eine URL angegeben wird, rufen Sie die Seite ab und extrahieren Sie:
- Den H1-Titel
- Die ersten 3-5 Absätze (der Aufhänger, die zentrale Behauptung und die Kernpunkte)
- Alle bemerkenswerten Statistiken oder genannten Frameworks
- Den Autorennamen (für typografische Kompositionen)
Wenn Text eingefügt wird, lesen Sie ihn direkt. Konzentrieren Sie sich auf:
- Den Aufhänger: Was ist die einleitende Behauptung oder der Konflikt?
- Die zentrale These: Was ist die eine Sache, die der Artikel argumentiert oder lehrt?
- Wichtige Details: Alle Zahlen, benannten Frameworks oder konkreten Beispiele, die ein Bild verankern könnten
- Den Ton: Ist dieser formell/autoritativ, konversationell/zugänglich, provokativ/herausfordernd?
Fassen Sie diese Erkenntnisse intern zusammen, bevor Sie Kompositionen vorschlagen - die Vorschläge sollten auf diesen spezifischen Artikel zugeschnitten sein, nicht generisch.
Schritt 2 - Markenspezifikationen sammeln
Fragen Sie den Benutzer nach Markenspezifikationen, falls nicht vorhanden:
Um markengerechte Thumbnails zu generieren, benötige ich ein paar Details:
1. Markenfarben (Hex-Codes oder Beschreibungen) - z. B. #1A1A2E, #E94560
2. Schriftarten-Präferenz - z. B. "fette serifenlose Schrift", "redaktionelle Serife", "geometrisch"
3. Visueller Stil - z. B. "flach minimalistisch", "fotorealistisch", "illustriert", "nur Typografie"
4. Stilreferenzen - beschreiben Sie eine Marke oder Publikation, deren Ästhetik Sie treffen möchten,
oder teilen Sie eine Bild-URL
Wenn Sie noch keine Markenspezifikationen haben, sagen Sie "saubere Standardwerte verwenden" und ich
verwende einen professionellen dunkel-auf-weiß redaktionellen Stil.
Wenn der Benutzer "saubere Standardwerte verwenden" sagt, wenden Sie an:
- Hintergrund:
#FFFFFFoder#0F0F0F(Dunkelmodus-Standard) - Akzent:
#2563EB(blau) - Schriftstil: fette geometrische serifenlose Schrift
- Stil: minimal flach, keine Texturen, hoher Kontrast
Schritt 3 - Kompositionskonzepte vorschlagen
Schreiben Sie 3-4 Kompositionskonzepte, die auf den Ton und Inhalt des Artikels zugeschnitten sind. Jedes Konzept muss:
- Einen Namen haben (kurz, einprägsam)
- Das Layout präzise beschreiben (wo der Titel platziert ist, welches visuelle Element es verankert, Hintergrundbehandlung)
- Die Stimmung und den Anwendungsfall angeben, für den es am besten geeignet ist
- Einen Begründungssatz enthalten, der erklärt, warum diese Komposition zu diesem spezifischen Artikel passt
Nach der Präsentation der Konzepte fragen, welche generiert werden sollen. Warten Sie auf die Bestätigung des Benutzers, bevor Sie API-Aufrufe tätigen.
Schritt 4 - Gemini Bildgenerierungs-Prompts schreiben
Für jede ausgewählte Komposition einen detaillierten Bildgenerierungs-Prompt schreiben. Bildgenerierungs-Prompts folgen einer anderen Grammatik als Text-Prompts - sie sind beschreibend, nicht anleitend.
Prompt-Struktur:
[Subjekt/Komposition] + [Stil] + [Farbpalette] + [Stimmung/Beleuchtung] +
[Textbehandlung, falls vorhanden] + [Was zu vermeiden ist]
Beispiel-Prompt für die Komposition "Kühne Behauptung":
Artikel-Thumbnail-Bild. Großer fetter weißer serifenloser Titeltext mit der Aufschrift "3x Faster Than
Traditional Methods" zentriert auf einem tief marineblauen Hintergrund (#1A1A2E). Kleiner korallenfarbener
Akzenttext (#E94560) darunter mit dem Untertitel. Minimalistisches flaches Design, keine Verläufe, keine
Stockfoto-Elemente, keine Personen. Sauberer professioneller redaktioneller Stil, hoher Kontrast,
Newsletter-Header-Format, 16:9 Querformat. Die Komposition ist typografisch - Text ist der Held,
keine Illustration erforderlich. Vermeiden: Clip-Art, Schlagschatten, geringer Kontrast, überladenes Layout.
Prompt-Regeln:
- Exakte Hex-Farben angeben, wenn Markenfarben bereitgestellt werden
- Den genauen Schlagzeilentext angeben, der im Bild erscheinen soll
- Den Stil explizit benennen ("Flachdesign", "redaktionell", "fotorealistisch") - Gemini reagiert gut auf Stilkategorienamen
- Einen Negativ-Prompt ("Vermeiden: ...") am Ende hinzufügen, um Abweichungen vom Markenstil zu reduzieren
- Prompts unter 300 Wörtern halten - längere Prompts führen nicht zuverlässig zu besseren Ergebnissen
Schritt 5 - Voraussetzungen prüfen und das Generierungsskript ausführen
Vor dem API-Aufruf überprüfen:
# Prüfen, ob der API-Schlüssel gesetzt ist
echo $GEMINI_API_KEY
# Prüfen, ob das Skript existiert
ls -la ./generate_image.py
# Abhängigkeiten prüfen
python3 -c "import google.generativeai, PIL, requests; print('Abhängigkeiten OK')"
Wenn das Skript fehlt, anbieten, es mit der Vorlage aus dem Abschnitt "Skriptvorlage" unten zu erstellen.
Das Generierungsskript für jeden Prompt ausführen:
python3 generate_image.py \
--prompt "ihr vollständiger Prompt hier" \
--output "./thumbnails/artikel-slug/candidate_01_bold_claim.png" \
--width 1792 \
--height 1024
Oder alle Prompts in einer Batch-Konfigurationsdatei übergeben:
python3 generate_image.py --config ./thumbnails/artikel-slug/prompts.json
Schritt 6 - Generierte Bilder auswerten
Nachdem jedes Bild gespeichert wurde, es mittels Computer Vision untersuchen. Auf zwei Dimensionen bewerten:
Markenfit (Punktzahl /10):
- Sind die Markenfarben korrekt? (1-2 Punkte pro Farbe)
- Entspricht der Stil der gewünschten Ästhetik? (2 Punkte)
- Ist das Layout konsistent mit der Kompositionsvorgabe? (2 Punkte)
- Gibt es KI-Artefakte, verzerrten Text oder unbeabsichtigte Elemente? (-1 pro Problem)
Textlesbarkeit (Punktzahl /10):
- Ist der Schlagzeilentext in voller Auflösung lesbar? (3 Punkte)
- Ist der Schlagzeilentext lesbar, wenn das Bild auf 300px Breite (Thumbnail-Größe) skaliert wird? (3 Punkte)
- Gibt es ausreichenden Kontrast zwischen Text und Hintergrund? (2 Punkte)
- Befindet sich der Text in sicheren Zonen (nicht an den Rändern abgeschnitten)? (2 Punkte)
Hinweis: Gemini Imagen rendert Text manchmal mit Rechtschreibfehlern oder verzerrten Buchstabenformen. Wenn dies passiert, in der Bewertung vermerken und dem Benutzer vorschlagen, die Textüberlagerung manuell in Canva oder Figma hinzuzufügen.
Schritt 7 - Den Bewertungsbericht erstellen
Die Bewertungsübersichtstabelle schreiben (Format im Abschnitt "Ausgabestruktur" gezeigt) und als evaluation_report.md im Ausgabeordner speichern.
Enthalten:
- Einzeilige Begründung für jede Punktzahl
- Eine Top-Auswahl-Empfehlung pro Anwendungsfall (Web, E-Mail/Mobil, soziale Medien)
- Eventuelle Produktionshinweise (z. B. "Textdarstellung bei Kandidat_02 nicht perfekt - Text manuell überlagern")
- Die verwendeten vollständigen Prompts, damit der Benutzer bei Bedarf direkt in AI Studio iterieren kann
Schritt 8 - Iteration anbieten
Nach der Bereitstellung der Kandidaten eine Iterationsrunde anbieten:
Möchten Sie, dass ich an einem dieser Kandidaten nachbessere?
Optionen:
- Farben oder Stil eines bestimmten Kandidaten anpassen
- Ein anderes Kompositionskonzept ausprobieren
- Den Schlagzeilentext ändern
- Mit anderen Gemini-Parametern erneut ausführen (andere Temperatur/Seed)
- Zusätzliche Varianten der Top-Auswahl generieren
Sagen Sie mir einfach, was geändert werden soll.
Skriptvorlage
Claude sollte anbieten, diese Datei zu schreiben, wenn generate_image.py nicht vorhanden ist. Dies ist die kanonische Vorlage.
#!/usr/bin/env python3
"""
generate_image.py — Gemini Imagen Wrapper für den Thumbnail Creator Skill.
Nutzung:
python3 generate_image.py --prompt "..." --output "./out.png" [--width 1792] [--height 1024]
python3 generate_image.py --config ./prompts.json
Konfigurations-JSON-Format:
[
{
"prompt": "...",
"output": "./thumbnails/slug/candidate_01.png",
"width": 1792,
"height": 1024
}
]
Abhängigkeiten:
pip install google-generativeai Pillow
"""
import os
import sys
import json
import argparse
import base64
from pathlib import Path
try:
import google.generativeai as genai
from google.generativeai import types as genai_types
except ImportError:
print("FEHLER: google-generativeai nicht installiert. Führen Sie aus: pip install google-generativeai")
sys.exit(1)
try:
from PIL import Image
import io
except ImportError:
print("FEHLER: Pillow nicht installiert. Führen Sie aus: pip install Pillow")
sys.exit(1)
def get_api_key() -> str:
key = os.environ.get("GEMINI_API_KEY", "")
if not key:
print("FEHLER: Die Umgebungsvariable GEMINI_API_KEY ist nicht gesetzt.")
print("Holen Sie sich einen Schlüssel unter: https://aistudio.google.com/app/apikey")
print("Führen Sie dann aus: export GEMINI_API_KEY=<ihr-schlüssel>")
sys.exit(1)
return key
def generate_image(
prompt: str,
output_path: str,
width: int = 1792,
height: int = 1024,
) -> bool:
"""
Ruft Gemini Imagen auf, um ein einzelnes Bild zu generieren und unter output_path zu speichern.
Gibt bei Erfolg True zurück, sonst False.
"""
api_key = get_api_key()
genai.configure(api_key=api_key)
# Für Gemini Imagen verwenden wir das Modell "imagen-3.0-generate-001"
model = genai.GenerativeModel("imagen-3.0-generate-001")
generation_config = genai_types.GenerationConfig(
temperature=1.0,
candidate_count=1,
)
try:
response = model.generate_content(
prompt,
generation_config=generation_config,
)
# Die Antwort enthält möglicherweise Bilddaten im Base64-Format
if response.candidates:
for candidate in response.candidates:
if hasattr(candidate, "content") and candidate.content:
for part in candidate.content.parts:
if hasattr(part, "inline_data") and part.inline_data:
image_data = base64.b64decode(part.inline_data.data)
# Bild speichern
output_path_obj = Path(output_path)
output_path_obj.parent.mkdir(parents=True, exist_ok=True)
with open(output_path_obj, "wb") as f:
f.write(image_data)
print(f"Bild gespeichert: {output_path}")
return True
elif hasattr(part, "text") and part.text:
# Manchmal enthält die Antwort Text statt Bildern
print(f"Text-Antwort statt Bild: {part.text}")
print("FEHLER: Keine Bilddaten in der Antwort gefunden.")
return False
except Exception as e:
print(f"FEHLER bei der Bildgenerierung: {e}")
return False
def load_and_process_config(config_path: str) -> bool:
"""
Lädt eine JSON-Konfigurationsdatei und verarbeitet alle darin enthaltenen Prompts.
"""
with open(config_path, "r", encoding="utf-8") as f:
config = json.load(f)
all_success = True
for i, item in enumerate(config):
prompt = item.get("prompt", "")
output = item.get("output", f"./output_{i}.png")
width = item.get("width", 1792)
height = item.get("height", 1024)
print(f"\nVerarbeite Prompt {i+1}/{len(config)}: {output}")
success = generate_image(prompt, output, width, height)
if not success:
all_success = False
print(f"FEHLER bei Prompt {i+1}")
return all_success
def main():
parser = argparse.ArgumentParser(description="Thumbnail Generator mit Gemini Imagen")
group = parser.add_mutually_exclusive_group(required=True)
group.add_argument("--prompt", type=str, help="Der Bildgenerierungs-Prompt")
group.add_argument("--config", type=str, help="Pfad zur JSON-Konfigurationsdatei")
parser.add_argument("--output", type=str, default="./output.png", help="Ausgabedateipfad (erforderlich, wenn --prompt verwendet wird)")
parser.add_argument("--width", type=int, default=1792, help="Bildbreite (Standard: 1792)")
parser.add_argument("--height", type=int, default=1024, help="Bildhöhe (Standard: 1024)")
args = parser.parse_args()
if args.config:
success = load_and_process_config(args.config)
else:
success = generate_image(args.prompt, args.output, args.width, args.height)
sys.exit(0 if success else 1)
if __name__ == "__main__":
main()