Reel Covers – Instagram-Cover-Generator

Reel-Cover

Jedes Reel bekommt sein eigenes Cover. Es wird aus deinen echten Fotos und Schriften erstellt und behält den Text innerhalb des Bereichs, den Instagram im Profil-Grid anzeigt.

Konfiguration: Lege hier deine Marke fest

Bearbeite diese Einstellungen einmal vor dem ersten Start.

Einstellung	Wo	Standard
Akzentfarbe	--brand in scripts/cover.html	#3b82f6
Headline-Schrift	--display-font in scripts/cover.html	Anton (kostenlos, Google Fonts)
Subline-Schrift	.sub in scripts/cover.html	Montserrat Bold (kostenlos)
Standard-Subline	deine Cover	z.B. „from a Home Cook“ oder nichts
Foto-Ordner	photos_dir in library.json	<PFAD_ZU_DEINEN_COVER_FOTOS>
Canva-Foto-Ordner (optional)	canva_folder in library.json	<DEINE_CANVA_ORDNER_ID>
Canva-Cover-Masterdokument (optional)	Referenz für deinen aktuellen Stil	<DEINE_CANVA_COVER_MASTER_DOK_ID>
Canva-Entwurfsdesign (optional)	Wird verwendet, um Fotos aus Canva zu exportieren	<DEINE_CANVA_ENTWURFS_DESIGN_ID>
Cover-Log	COVER_LOG env var für pick.py	drafts/social/cover-log.json im Projektverzeichnis
Zielordner für fertige Cover	Schritt 8	<DEIN_VIDEO_ORDNER>/<Video> YYYY-MM-DD/Covers/
Verbotene Wörter	Regeln in hooks.md	deine Liste (z.B. ein alter Angebotsname)

Speziell für Instagram entwickelt. Das Cover kann auf einem normalen IG- + TikTok- + Shorts-Beitrag als Video-Thumbnail dienen (z.B. Metricools videoThumbnailUrl). Für das Design zählt nur das Instagram-Grid. Ersetze niemals ein Cover, das ein Beitrag bereits hat.

Bild niemals KI-generieren. Hintergründe sind deine Fotos, Layouts werden von deinen Covern übernommen. Der Code arrangiert sie nur.

Standard-Hausstil (nach Geschmack anpassbar)

Referenziere nur deine neuesten Cover in deinem Masterdokument. Ältere Stile, die du abgelegt hast, zählen nicht.

• ein helles, neutrales Foto von dir mit einem passenden Requisit (Laptop, Kamera, Telefon, Produkt), mit einer leeren Wand für den Text
• die Headline in weißer Display-Schrift, JEDES MAL IN GROSSBUCHSTABEN, zentriert, 2 oder 3 Zeilen, relativ klein
• eine optionale Subline in Montserrat Bold, normaler Groß- und Kleinschreibung
• Standard: kein Schatten, keine Kontur, kein Balken oder Abdunkeln hinter dem Text, kein Text in Akzentfarbe
• keine Labels, keine schrägen Schriftarten, keine Schreibschrift oder kursive Schriftarten, keine Layouts mit großen Zahlen oder Serien
• die einzige Ausnahme: ein schlichter, handgezeichneter Pfeil in Akzentfarbe, ab und zu
• nichts unter dem Reel-Symbol: Das Instagram-Grid platziert es oben rechts in jeder Kachel. render.mjs warnt, wenn etwas über x 760 und unter y 540 liegt.

Headline-Regeln, Hook-Typen und Labels findest du in hooks.md. Lies es, bevor du eine Headline schreibst.

Dateien

scripts/cover.html	das eine Layout: Headline + optionale Subline, plus arrow / inset / avatar Extras. Markenkonfiguration oben.
scripts/render.mjs	rendert 1080x1920 JPGs + beide Proofs und warnt vor Text außerhalb der Sicherheitszone oder Dateien über 8MB
scripts/pick.py	erstellt eine Shortlist von Fotos nach Thema, blockiert die letzten 9 verwendeten und gibt aktuelle Layouts und Hook-Typen aus
library.json	jedes Foto, getaggt (Pose, Requisiten, Position des leeren Raums, Fokuspunkt). Wird mit einem Beispiel ausgeliefert; erstelle deine eigene.
Cover-Log (COVER_LOG)	jedes versendete Cover. Dadurch bleiben sie einzigartig
photos_dir	deine Fotos in voller Auflösung (nur lokal, halte sie aus git heraus)

scripts/ benötigt puppeteer-core (npm i puppeteer-core in scripts/, oder verlinke scripts/node_modules mit einer anderen Skill-Installation) sowie Google Chrome und ffmpeg. render.mjs zeigt auf den Standard-macOS-Chrome-Pfad; ändere executablePath, falls dein Pfad abweicht.

Ausführung

1. Kenne das Reel. Du benötigst das Transkript, die Bildunterschrift und die erste Textkarte jedes Reels. Nenne das eine Versprechen, das das Reel macht.

2. Headline. Wähle einen Hook-Typ, der nicht der des letzten Covers ist (pick.py zeigt ihn an). Schreibe 3 oder 4 Optionen, 3 bis 8 Wörter jede, und wähle die stärkste. Sie darf die erste Textkarte nicht wortwörtlich wiederholen.

3. Foto.

python3 .claude/skills/reel-covers/scripts/pick.py "<Themenwörter>" --space top

Dann sieh dir die ersten 3 oder 4 an, bevor du auswählst (erzeuge mit ffmpeg eine Kontaktseite). Stimme das Requisit auf das Thema ab: Laptop für E-Mail, Systeme oder Website; Kamera oder Produkt für Ausrüstung; du beim Reden für Verkäufe und Mindset. Für Kundengeschichten verwende ein Inset oder einen Avatar des Kunden (mit Erlaubnis).

4. Layout. Nicht dasselbe wie beim letzten Cover (siehe pick.py). Setze den Text in den leeren Raum des Fotos (space), platziere focus so, dass das Gesicht frei bleibt, und setze y so, dass der Textblock zwischen 300 und 1250 sitzt.

5. Rendern.

OUT="<Arbeitsverzeichnis>/covers" node .claude/skills/reel-covers/scripts/render.mjs covers.json

{"covers":[{"id":"3-der-genaue-Abschluss","img":"<PFAD_ZU_DEINEN_COVER_FOTOS>/<datei>.jpg",
  "data":{"head":"der genaue Abschluss, den ich in Verkaufsgesprächen verwende","sub":"from a Home Cook","y":560,"headroom":280}}],
 "history":["<die letzten wenigen versendeten Cover-Dateien aus dem Cover-Log, neueste zuerst>"]}

Ersetze ~ durch einen echten Pfad; render.mjs tut das nicht. Ein Exit-Code ungleich 0 bedeutet eine Warnung. Behebe sie, bevor du teilst.

6. Überprüfe es zuerst selbst. Öffne _proof.png und _grid-phone.png:

• Ist die Headline im Grid-Proof (130px breit) lesbar? Wenn nicht, kürze Wörter.
• Ist das Gesicht sowohl im gesamten Cover als auch im Grid-Ausschnitt frei vom Text?
• Sieht es neben den anderen Covern im Grid anders aus (Foto, Layout, Textposition), aber erkennbar aus derselben Serie?

7. Freigabe einholen. Zeige dem Benutzer _grid-phone.png und _proof.png mit jeder Headline und einer alternativen Headline. Frage: „Halten diese Cover den Scroll an?“ Tausche auf Wunsch Fotos oder Wörter aus und rendere neu. Das dauert Sekunden.

8. Nach der Freigabe:

• Kopiere jedes JPG nach <DEIN_VIDEO_ORDNER>/<Video> JJJJ-MM-TT/Covers/, benannt wie das Reel (3. der genaue Abschluss.jpg).
• Füge pro Cover einen Eintrag an das Cover-Log an: {"date":"JJJJ-MM-TT","video":"<video-slug>","reel":"3. der genaue Abschluss","photo":"<datei>","layout":"stack","hook_type":"how","head":"der genaue Abschluss, den ich in Verkaufsgesprächen verwende","file":"<absoluter Pfad zum Cover-JPG>"}
• Übergib die Dateien an deinen Planungsschritt, der jede hochlädt und an den Instagram-Beitrag anhängt.

Eindeutigkeitsregeln

• Kein Foto, das in den letzten 9 Covern verwendet wurde. pick.py erzwingt dies.
• Niemals dasselbe Layout oder denselben Hook-Typ zweimal hintereinander.
• Rotiere die Subline: keine, zentriert oder versetzt nach rechts und geneigt (subdx, subrot).
• Variiere die Textposition (oben, Mitte, links- oder rechtsbündig) basierend auf dem Foto. Platziere den Text nicht immer zentriert oben.
• Wenn die Bibliothek dünn wird (jedes gute Foto wurde kürzlich verwendet), sage dies und schlage eine neue Fotosession vor, anstatt die Regel zu brechen.

Layout-Lektionen

• Der 9:16-Zuschnitt platziert das Gesicht weit oben. Die meisten Fotos sind 2:3. Auf 1920 Höhe skaliert verlieren sie die Seiten, nicht die Oberseite. Ein Gesicht, das im Original tief wirkt, sitzt daher etwa bei y 600 bis 800. Der häufigste Fehler ist Text auf den Haaren des Motivs. Achte zuerst darauf bei jedem Proof.
• Behebe es mit headroom, nicht indem du den Text verkleinerst. "headroom": 150-350 drückt das Foto nach unten und dehnt die leere Wand über dem Motiv. Bei einfarbigen Studiowänden unsichtbar. Verwende es nicht bei belebten Außenhintergründen (Bäume und Himmel verschmieren).
• Headline-Größe: automatisch 104px bei 4 Wörtern oder weniger, 84px bei längeren, verkleinert, um in 3 Zeilen zu passen.
• Verzichte auf die Subline, wenn sie den Kopf berühren würde. Sie ist Textur, nicht die Botschaft.
• Platziere Text mit Blick auf das Reel-Symbol: Starte den Block entweder bei y 560 oder tiefer (drücke das Foto mit headroom nach unten, damit es den Kopf freigibt), oder halte die Höhe und verwende align: left, right: 320. Mische beides über eine Serie hinweg.
• Ein 3:4-Grid-Zuschnitt verdeckt nichts oberhalb von y 240. Lasse Text bei 280 oder tiefer beginnen (render.mjs warnt).

Fotos hinzufügen

Aus einem lokalen Ordner: md5-Prüfung gegen photos_dir auf Duplikate, kopiere es als <name>-<k>__local<MMTT>.jpg und tagge es dann.

Aus Canva (optional). Canva lädt Bilder nicht direkt aus einem Upload-Ordner herunter. Ein funktionierender Weg ist ein Entwurfsdesign, das nur für Exporte verwendet wird:

1. list-folder-items auf <DEINE_CANVA_ORDNER_ID> und vergleiche die Asset-IDs mit library.json (behalte die ID in jedem Dateinamen nach __).
2. read-design auf <DEINE_CANVA_ENTWURFS_DESIGN_ID> mit open_transaction, dann ein edit-design-Aufruf mit add_page (2400x3600, Titel = Asset-ID) für jedes neue Foto. Lese die neuen Seiten-IDs, dann ein Aufruf mit insert_fill pro Seite (ganze Seite, top 0, left 0). commit.
3. export-design als PDF, export_quality: pro, dann pdfimages -j -f <erste> -l <letzte> -p all.pdf ex/img. Das PDF bettet die Original-JPEGs unverändert ein. JPG-Export funktioniert auch, gibt aber eine URL pro Seite.
4. Speichere jede als <name>__<assetid>.jpg in photos_dir. Mehrere Fotos können denselben Canva-Namen teilen, daher hält die ID sie auseinander. Dann tagge sie.

Wenn dasselbe Foto zweimal hochgeladen wurde, behalte eine Kopie mit ok und markiere die andere als "ok": false, "note": "duplicate of N", sonst könnte die Nicht-Wiederholungsregel dasselbe Bild zweimal auswählen.

Tagge jede neue Datei in library.json, indem du sie betrachtest:

{"file":"foto_-13.jpg","pose":"Lächelt auf Laptop","props":["Laptop","Schreibtisch"],"topics":["E-Mail","Folgen","Systeme","Website"],
 "cap":false,"space":["oben"],"focus":"50% 55%","ok":true}

space gibt an, wo der Text platziert werden kann, ohne das Gesicht zu berühren. Markiere unscharfe, dunkle oder ungelenke Aufnahmen mit "ok":false, anstatt sie zu löschen.

Verwandte Skills

• video-reels: die erste Textkarte, die die Cover-Headline nicht wiederholen darf
• ein Planungs-Skill (optional): lädt die Cover hoch und plant die Reels