Communitygithub.com

Arnie936/image-to-campaign

Verwandle ein einzelnes Produkt- oder Markenbild in einen vollständigen, markenidentitätskonsistenten deutschen Marketing-Funnel: eine scroll-gesteuerte Landingpage, 3 Instagram Reels (9:16) mit Captions und einen gestalteten Blogartikel – alles abgeleitet von einem einzigen genehmigten Brand Brief. Die Ausgabe ist ein Kampagnenordner.

Was ist image-to-campaign?

Dieses Skill orchestriert die Erstellung einer vollständigen deutschen Marketing-Kampagne aus nur einem einzigen Bild. Es ist ideal für Vermarkter, Gründer und Agenturen, die aus einem Produktfoto oder Markenbild sofort einen konsistenten Markenauftritt für Instagram, eine Landingpage und einen Blog generieren möchten. Der Kern ist der „Brand Brief“: Ein einmaliges Dokument, das alle visuellen und textlichen Identitätsmerkmale (Palette, Typografie, Ton, Szenen, CTAs und alle Asset-Prompts) festlegt. Erst nach Benutzerfreigabe dieses Briefes werden die Assets generiert, was Kostentreiber vermeidet und sicherstellt, dass alle Ausgaben wie aus einem Guss wirken. Das Skill nutzt die Higgsfield-CLI zur Asset-Generierung und erstellt einen lokalen Kampagnenordner mit Landingpage (lokalem Preview-Server), drei 9:16-Reels, einem Blogartikel und einer README. Es ist für den deutschen Markt optimiert, mit allen sichtbaren Texten auf Deutsch.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add Arnie936/image-to-campaign

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Bild → Kampagne

Baue einen vollständigen deutschen Marketing-Funnel aus einem einzigen Bild. Der ganze Punkt: Ein Bild hinein, ein zusammenhängender Funnel heraus – Instagram Reels, die Aufmerksamkeit erregen, ein Blog, der Vertrauen aufbaut und rankt, und eine Landingpage, die konvertiert. Jedes Asset teilt eine visuelle und verbale Identität, da alle aus einem einzigen Brand Brief abgeleitet sind, den du schreibst und der Benutzer freigibt, bevor Credits ausgegeben werden.

Kernprinzip: Brief zuerst, einzige Quelle der Wahrheit

Generiere NICHT zuerst Assets und versuche sie später abzugleichen. Das driftet immer ab. Stattdessen:

  1. Schreibe einen Brand Brief aus dem Bild + einem kurzen Interview. Der Brief legt die Produktidentität, die These, die Palette (OKLCH-Token), Typografie, Ton, Szene, CTA und die gewählten Reel-Winkel/Stile fest. Er enthält auch jeden Asset-Prompt, ausgeschrieben.
  2. Der Benutzer genehmigt den Brief an einem Checkpoint.
  3. Jede Ausgabe – Landingpage, Reels, Blog – liest ihre These, Palette, Schriftarten, Ton und Prompts aus dem Brief. Nichts leitet Identität eigenständig neu ab.

Deshalb sehen die Landingpage, Reels und Blog am Ende wie eine Kampagne aus und nicht wie drei zusammenhanglose KI-Artefakte.

Feste Voreinstellungen für dieses Skill

  • Sprache: Deutsch. Alle sichtbaren Texte (Website, Captions, Blog) sind Deutsch. Technische CLI-Flags bleiben Englisch.
  • Konversionsziel: Demo/Konzept. Es gibt noch keinen echten Shop, daher ist jeder CTA ein sauberer Platzhalter (z.B. „Jetzt entdecken"). Erfinde keine gefälschten Preise, Checkout-Links oder Bewertungen.
  • Ein Genehmigungs-Checkpoint, direkt nach dem Brief. Nach der Genehmigung läuft es autonom bis zum Ende.
  • Landingpage bleibt lokal (ein Preview-Server). Deployment (Vercel) ist ein späterer Schritt, nur wenn der Benutzer fragt.

Schritt 0 – Bootstrap

Die Asset-Generierung läuft über die Higgsfield-CLI (gleiche Engine wie die Skills higgsfield-generate und higgsfield-product-photoshoot).

  1. Wenn higgsfield nicht im $PATH ist, installiere es: curl -fsSL https://raw.githubusercontent.com/higgsfield-ai/cli/main/install.sh | sh
  2. Führe higgsfield account status aus. Wenn es mit „Session expired" / „Not authenticated" fehlschlägt, fordere den Benutzer auf, higgsfield auth login auszuführen und zu warten. Wenn er noch kein Higgsfield-Konto hat, verweise ihn auf https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus, um sich zu registrieren (ein Konto mit Credits ist erforderlich, um Assets zu generieren).

Bestätige, dass du das Eingabebild tatsächlich hast (einen lokalen Pfad). Wenn der Benutzer nur ein Produkt ohne Bild beschrieben hat, sage das – dieses Skill basiert auf einem echten Bild. Du kannst trotzdem rein textbasiert fortfahren, aber die Qualität sinkt; informiere den Benutzer darüber.

Schritt 1 – Interview (max. 2 Fragen, Deutsch)

Sieh dir das Bild zuerst an und leite alles ab, was du kannst (was das Produkt ist, für wen es ist, die Stimmung). Frage nur das, was du wirklich nicht erkennen kannst. Halte dich an die zwei Fragen aus der Landingpage-Spezifikation, auf Deutsch:

  1. Was ist das Produkt/die Marke in einem Satz, für wen, und welches Gefühl soll es auslösen?
  2. Soll ich alle Bild- und Videoassets mit Higgsfield generieren, oder gibt es schon Assets/Logo/Farben, die ich verwenden soll?

Überspringe eine Frage, wenn die Antwort bereits aus dem Bild oder der Nachricht des Benutzers offensichtlich ist. Frage nicht nach Preis oder Verkaufsziel – der CTA ist standardmäßig ein Demo-Platzhalter.

Schritt 2 – Schreibe den Brand Brief

Folge references/brand-brief.md. Erstelle brief.md mit den Identitätsfeldern UND jedem Asset-Prompt (5 Website-Assets, 3 Reel-Prompts, 1 Blog-Bild). Die Prompts jetzt zu schreiben – bevor etwas ausgegeben wird – macht den Checkpoint sinnvoll.

🛑 CHECKPOINT – Hole die Genehmigung vor der Generierung ein

Zeige dem Benutzer kompakt:

  • die These, den Szene-Satz, die 4 Paletten-Token, Schriftarten, Tonwörter, CTA
  • das gewählte Scroll-Konzept (eine Zeile, warum)
  • die 3 Reel-Winkel + den gewählten Reel-Stil (cinematic vs. UGC) und warum
  • die vollständige Liste der Asset-Prompts, die du ausführen wirst

Frage dann eines: „Passt der Brief so, oder soll ich was anpassen, bevor ich generiere?" Die Generierung kostet Credits, überspringe dies also nicht. Wende Änderungen an und fahre dann fort. Nach diesem Punkt läuft es autonom.

Schritt 3 – Bauen (nach Genehmigung)

Baue in dieser Reihenfolge – das ist beabsichtigt. Die Landingpage wird zuerst gebaut, weil sie das Design-System festlegt und das Hero-Video produziert, das die Reels wiederverwenden.

  1. Landingpage → references/landing-page.md. Generiert die 5 Website-Assets, baut website/index.html zusammen und verifiziert im Browser.
  2. Reels → references/reels.md. Drei 9:16-Reels. Nutze das Hero- oder Mittel-Video der Website für den cinematic Showcase-Winkel wieder und rahme es um, um Credits zu sparen; generiere die anderen beiden. Schreibe reels/captions.md.
  3. Blog → references/blog.md. Ein deutscher SEO-Artikel in blog/blog.html, der dieselben Paletten-Token und Schriftarten verwendet, mit einem Bild (verwende wo möglich ein Website-Standbild) und einem CTA zurück zur Landingpage.

Schritt 4 – QA

  • Landingpage: Führe die vollständige Browser-Checkliste in references/landing-page.md aus.
  • Reels (optional, aber empfohlen): Bewerte jedes mit dem Virality Predictor (higgsfield generate create brain_activity --video <reel> --wait) und generiere das schwächste neu, wenn ein klar besserer Winkel offensichtlich ist. Berichte die Ergebnisse; behalte sie nicht still für dich.
  • Bestätige, dass jedes Asset dort Deutsch ist, wo es Text enthält, und dass Palette und Schriftarten über Website, Reel-Thumbnails und Blog identisch sind.

Schritt 5 – Liefern

Erstelle den Kampagnenordner (Struktur unten) und schreibe README.md aus assets/campaign-readme-template.md: was darin ist, wie man die Website lokal Vorschau anzeigt, die 3 fertigen Captions und der naheliegende nächste Schritt (Deployment + Ersetzen des Platzhalter-CTAs durch einen echten).

Abschließende Nachricht an den Benutzer (Deutsch, prägnant): die lokale Website-URL, die These, die 3 Reel-Winkel mit ihren Dateien, wo die Captions und der Blog sind, und alle Einschränkungen, die aufgetreten sind (z.B. ein Asset, das du neu generieren musstest).

Kampagnenordner-Struktur

kampagne-<slug>/
  brief.md                  # die genehmigte einzige Quelle der Wahrheit
  website/
    index.html
    assets/                 # hero.mp4, middle.mp4, g1.jpg, g2.jpg, g3.jpg
  reels/
    reel-1-hook.mp4
    reel-2-showcase.mp4
    reel-3-lifestyle.mp4
    captions.md             # pro Reel: Hook-Text, Caption, Hashtags, CTA
  blog/
    blog.html
    assets/                 # Blog-Bild(er)
  README.md

Konsistenzgesetze (gelten für jedes generierte Asset)

Über die gesamte Kampagne halte diese konstant – das macht, dass es sich wie eine Marke anfühlt und nicht wie eine generierte Tüte voller Buntes:

  • gleiche Produktidentität und -form
  • gleiche Materialsprache
  • gleiche Lichtrichtung
  • gleiche Farbwelt (Palette aus dem Brief)
  • gleicher Premium-Ton

Lehne jedes Asset ab und generiere es neu, bei dem die Produktidentität wechselt, die Form abweicht, das Material falsch aussieht, Text in das Bild/Video eingebacken ist (KI-Textdarstellung ist unzuverlässig – halte generierte Medien sauber und füge echten Text im Caption-Editor hinzu), oder es einfach „KI-gemacht" aussieht. Konsistenz schlägt Spektakel.

Referenzindex

  • references/brand-brief.md – wie man den Brief ableitet + die Brief-Vorlage und die vollständige Asset-Prompt-Liste (lies dies zuerst, in Schritt 2)
  • references/landing-page.md – der briefbewusste, in sich geschlossene Landingpage-Bau mit der Browser-QA-Checkliste
  • references/reels.md – die 3 Reel-Winkel, Auswahl cinematic vs. UGC, Generierungsbefehle, Wiederverwendung durch Umrahmung und das Captions-Format
  • references/blog.md – die Spezifikation für den deutschen SEO-Artikel und HTML-Templating
  • assets/brief-template.md, assets/blog-template.html, assets/campaign-readme-template.md – Vorlagen zum Ausfüllen

Verwandte Skills