Communitygithub.com

Arnie936/image-to-campaign

Transformez une image de produit ou de marque en un funnel marketing allemand complet et cohérent : page web à défilement, 3 Reels Instagram (9:16) avec légendes, et article de blog stylisé — le tout dérivé d’un unique Brand Brief approuvé, pour une identité visuelle et verbale parfaitement homogène.

Qu'est-ce que image-to-campaign ?

Cette compétence pour agent IA transforme une seule image de produit ou de marque en une campagne marketing allemande complète, comprenant une page de destination à défilement, trois Reels Instagram (9:16) avec légendes, et un article de blog optimisé SEO. Le principe fondamental est « brief d’abord, source unique de vérité » : avant toute génération d’actifs, l’agent rédige un Brand Brief détaillé (identité, palette de couleurs OKLCH, typographie, ton, prompts pour chaque actif) que l’utilisateur approuve en un seul point de contrôle. Ce n’est qu’après validation que l’agent génère l’intégralité des actifs (via les compétences Higgsfield) et assemble la campagne, garantissant une cohérence parfaite entre la page web, les Reels et le blog. La compétence est conçue pour les marketeurs et créateurs de contenu germanophones qui souhaitent produire un funnel marketing complet et professionnel à partir d’une seule image, sans effort manuel ni incohérence visuelle. Elle orchestre les étapes suivantes : interview rapide (max 2 questions), rédaction du brief, approbation, construction de la page de destination, des Reels et du blog, QA (incluant un prédicteur de viralité), puis livraison d’un dossier de campagne structuré avec un README explicatif.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add Arnie936/image-to-campaign

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Image → Campagne

Construisez un funnel marketing allemand complet à partir d'une seule image. L'idée centrale : une image en entrée, un funnel cohérent en sortie — des Reels Instagram qui captent l'attention, un blog qui inspire confiance et se positionne dans les moteurs de recherche, et une page de destination qui convertit. Chaque actif partage une identité visuelle et verbale unique, car ils sont tous dérivés d'un seul Brand Brief que vous rédigez et que l'utilisateur approuve avant que des crédits ne soient dépensés.

Principe fondamental : brief d'abord, source unique de vérité

Ne générez PAS les actifs d'abord pour essayer de les harmoniser ensuite. Cela dérive toujours. Au lieu de cela :

  1. Rédigez un seul Brand Brief à partir de l'image et d'un court entretien. Le brief fixe l'identité du produit, la ligne de thèse, la palette (jetons OKLCH), la typographie, le ton, la scène, l'appel à l'action (CTA), et les angles/styles choisis pour les Reels. Il contient également chaque prompt d'actif, rédigé explicitement.
  2. L'utilisateur approuve le brief en un seul point de contrôle.
  3. Chaque résultat — page de destination, Reels, blog — lit sa ligne de thèse, sa palette, ses polices, son ton et ses prompts depuis le brief. Rien ne dérive son identité tout seul.

C'est pourquoi la page de destination, les Reels et le blog finissent par ressembler à une seule campagne, et non à trois artefacts IA sans lien.

Valeurs par défaut verrouillées pour cette compétence

  • Langue : allemand. Tout le texte visible (site, légendes, blog) est en allemand. Les indicateurs CLI techniques restent en anglais.
  • Objectif de conversion : Démo/Concept. Il n'y a pas encore de boutique réelle, donc chaque CTA est un espace réservé propre (par ex. "Jetzt entdecken"). N'inventez pas de faux prix, de liens de paiement ou d'avis.
  • Un seul point de contrôle d'approbation, juste après le brief. Après approbation, exécutez de manière autonome jusqu'à la fin.
  • La page de destination reste locale (un serveur de prévisualisation). Le déploiement (Vercel) est une étape ultérieure, uniquement si l'utilisateur le demande.

Étape 0 — Amorçage

La génération d'actifs s'effectue via la CLI Higgsfield (le même moteur que les compétences higgsfield-generate et higgsfield-product-photoshoot).

  1. Si higgsfield n'est pas dans le $PATH, installez-le : curl -fsSL https://raw.githubusercontent.com/higgsfield-ai/cli/main/install.sh | sh
  2. Exécutez higgsfield account status. Si cela échoue avec Session expired / Not authenticated, demandez à l'utilisateur d'exécuter higgsfield auth login et d'attendre. S'il n'a pas encore de compte Higgsfield, dirigez-le vers https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus pour s'inscrire (un compte avec des crédits est nécessaire pour générer un actif).

Confirmez que vous avez bien l'image d'entrée (un chemin local). Si l'utilisateur a seulement décrit un produit sans image, dites-le — cette compétence est conçue autour d'une image réelle. Vous pouvez toujours procéder en mode texte uniquement, mais la fidélité diminue ; informez-en l'utilisateur.

Étape 1 — Entretien (max 2 questions, en allemand)

Regardez d'abord l'image et déduisez tout ce que vous pouvez (quel est le produit, à qui il s'adresse, l'ambiance). Ne posez que ce que vous ne pouvez vraiment pas deviner. Limitez-vous aux deux questions du cahier des charges de la page de destination, en allemand :

  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?

Sautez une question si la réponse est déjà évidente à partir de l'image ou du message de l'utilisateur. Ne demandez pas le prix ou la destination de vente — le CTA est un espace réservé de démo par défaut.

Étape 2 — Rédigez le Brand Brief

Suivez references/brand-brief.md. Produisez brief.md contenant les champs d'identité ET chaque prompt d'actif (5 actifs de site, 3 prompts de Reel, 1 image de blog). Rédiger les prompts maintenant — avant de dépenser quoi que ce soit — est ce qui rend le point de contrôle significatif.

🛑 POINT DE CONTRÔLE — obtenez l'approbation avant de générer

Montrez à l'utilisateur, de manière concise :

  • la ligne de thèse, la phrase de scène, les 4 jetons de palette, les polices, les mots de ton, le CTA
  • le concept de défilement choisi (une ligne expliquant pourquoi)
  • les 3 angles de Reel + le style de Reel choisi (cinématographique vs UGC) et pourquoi
  • la liste complète des prompts d'actif que vous allez exécuter

Puis demandez une seule chose : "Passt der Brief so, oder soll ich was anpassen, bevor ich generiere?" La génération coûte des crédits, donc ne sautez pas cette étape. Appliquez les modifications, puis continuez. Après ce point, exécutez de manière autonome.

Étape 3 — Construction (après approbation)

Construisez dans cet ordre — c'est délibéré. La page de destination est construite en premier car elle verrouille le système de conception et produit la vidéo hero, que les Reels réutiliseront.

  1. Page de destination → references/landing-page.md. Générez les 5 actifs du site, assemblez website/index.html, vérifiez dans le navigateur.
  2. Reels → references/reels.md. Trois Reels 9:16. Réutilisez/re-cadrez la vidéo hero ou intermédiaire du site pour l'angle de présentation cinématographique afin d'économiser des crédits ; générez les deux autres. Écrivez reels/captions.md.
  3. Blog → references/blog.md. Un article SEO allemand dans blog/blog.html qui réutilise les mêmes jetons de palette et polices, avec une image (réutilisez une image du site si possible) et un CTA renvoyant vers la page de destination.

Étape 4 — QA

  • Page de destination : exécutez la liste de contrôle complète du navigateur dans references/landing-page.md.
  • Reels (facultatif mais recommandé) : notez chacun avec le Prédicteur de Viralité (higgsfield generate create brain_activity --video <reel> --wait) et régénérez le plus faible si un angle clairement meilleur est évident. Rapportez les scores ; ne les taisez pas.
  • Confirmez que chaque actif est en allemand là où il porte du texte, et que la palette et les polices sont identiques sur le site, les vignettes des Reels et le blog.

Étape 5 — Livraison

Assemblez le dossier de campagne (structure ci-dessous) et écrivez README.md à partir de assets/campaign-readme-template.md : ce qu'il contient, comment prévisualiser le site localement, les 3 légendes prêtes à coller, et la prochaine étape évidente (déployer + remplacer le CTA factice par un vrai).

Message final à l'utilisateur (allemand, concis) : l'URL locale du site, la ligne de thèse, les 3 angles de Reel avec leurs fichiers, où se trouvent les légendes et le blog, et toute limitation rencontrée (par ex. un actif que vous avez dû régénérer).

Structure du dossier de campagne

kampagne-<slug>/
  brief.md                  # la source unique de vérité approuvée
  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             # par reel : texte d'accroche, légende, hashtags, CTA
  blog/
    blog.html
    assets/                 # image(s) du blog
  README.md

Lois de cohérence (à appliquer à chaque actif généré)

Sur l'ensemble de la campagne, maintenez ces éléments constants — c'est ce qui donne l'impression d'une seule marque et non d'un fourre-tout généré :

  • même identité et forme du produit
  • même langage de matériau
  • même direction d'éclairage
  • même univers de couleurs (la palette du brief)
  • même ton premium

Rejetez et régénérez tout actif dont l'identité du produit change, la forme dérive, le matériau semble erroné, du texte est cuit dans l'image/vidéo (le rendu de texte par l'IA n'est pas fiable — gardez les médias générés propres et ajoutez le vrai texte dans la légende/l'éditeur), ou qui semble simplement "fabriqué par IA". La cohérence prime sur le spectacle.

Index des références

  • references/brand-brief.md — comment dériver le brief + le modèle de brief et la liste complète des prompts d'actif (à lire en premier, à l'étape 2)
  • references/landing-page.md — le build de la page de destination autonome et consciente du brief, avec la liste de contrôle QA du navigateur
  • references/reels.md — les 3 angles de Reel, la sélection cinématographique vs UGC, les commandes de génération, la réutilisation par recadrage, et le format des légendes
  • references/blog.md — le cahier des charges de l'article SEO allemand et le templating HTML
  • assets/brief-template.md, assets/blog-template.html, assets/campaign-readme-template.md — modèles à remplir

Skills associés