Affiches de campagne

Conception d'affiches de campagne

Pour l'utilisateur : envoyez un seul message, par exemple :

Utilisez le skill poster-design depuis https://github.com/greatopomu/claude-assets pour concevoir 5 affiches Instagram pour [marque]. Voici leur site web / ancien dépliant : [lien ou fichier].

C'est tout. Claude demande tout ce dont il a besoin.

Pour Claude : ce fichier vous explique comment réaliser l'ensemble du travail. Suivez-le du début à la fin. Minimisez l'effort de l'utilisateur : demandez une fois, puis travaillez.

---

Partie 0 : Configuration (à faire en premier, discrètement)

Les outils auxiliaires se trouvent dans le même dépôt, dans tools/. Les chemins ci-dessous, comme tools/export_png.py, sont relatifs à la racine du dépôt.

1. Obtenez les outils. Si vous pouvez exécuter des commandes et que le dépôt n'est pas déjà sur cet ordinateur : git clone --depth 1 https://github.com/greatopomu/claude-assets.git Si git n'est pas disponible, téléchargez https://github.com/greatopomu/claude-assets/archive/refs/heads/main.zip et décompressez-le.
2. Installez et vérifiez : python -m pip install -r tools/requirements.txt puis python tools/check_setup.py. Il rapporte ce qui fonctionne sur cet ordinateur. Pour prouver que tous les outils fonctionnent, exécutez python tools/selftest.py.
3. Partez du modèle : copiez skills/poster-design/template/index.html dans le dossier du projet. Il contient déjà les jetons de marque, la page de prévisualisation (Ajuster / Téléphone / 100 %) et le mode d'exportation ?solo=pN.

Solutions de repli. Dites clairement à l'utilisateur laquelle de ces situations s'applique.

Si cela manque	Faites ceci à la place
Aucun moyen d'exécuter du code (chat simple)	Construisez les affiches sous forme d'un seul fichier HTML (ou d'un artefact) en utilisant le modèle. Pour exporter, l'utilisateur ouvre le fichier dans Chrome, ajoute ?solo=p1 à l'adresse, ouvre les outils de développement (F12 / Cmd+Opt+I) → Menu de commandes (Ctrl/Cmd+Maj+P) → "Capture pleine page". Répétez pour chaque affiche.
Python fonctionne mais aucun navigateur trouvé	Installez Google Chrome ou Edge, définissez CHROME_PATH sur un navigateur basé sur Chromium, ou exécutez pip install playwright puis python -m playwright install chromium. Sinon, utilisez l'exportation manuelle ci-dessus.
Pas de CLI Higgsfield ou de crédits	Utilisez des photos libres de droits (Route A) ou ChatGPT (Route B).
Pas de navigateur intégré (Claude desktop) pour ChatGPT	Demandez à l'utilisateur de générer l'image dans ChatGPT et de la télécharger, puis de partager le fichier.
Impossible de télécharger depuis Internet	Demandez à l'utilisateur de télécharger les photos libres de droits choisies et de les partager.

Les outils d'image sont des aides facultatives. Si l'un d'eux ne peut pas s'exécuter, effectuez la même étape d'une autre manière (par exemple, choisissez les photos à l'œil) et continuez.

---

Ce que vous fabriquez

Des affiches de campagne conçues qui ressemblent à l'œuvre d'un designer graphique senior. Ce ne sont pas des images IA avec du texte par-dessus.

• Construisez chaque affiche en HTML, CSS et SVG, puis exportez-la en PNG avec un navigateur sans tête (tools/export_png.py).
• Les images (personnes, produits, lieux) sont uniquement des ingrédients. Vous les obtenez par l'une des trois routes (Partie 4). Un outil d'image ne fabrique jamais l'affiche finie.
• Chaque marque obtient son propre look. La méthode reste la même ; la direction artistique est choisie à neuf à chaque fois. Ne réutilisez jamais les mises en page d'une autre marque.

---

Partie 1 : Demander d'abord (un seul message, seulement ce qui manque)

Lisez le message de l'utilisateur, les fichiers ou les liens. Envoyez ensuite un court message avec uniquement les questions auxquelles il vous manque une réponse. Proposez une valeur par défaut sensée pour chaque question, afin que l'utilisateur puisse répondre "les valeurs par défaut conviennent".

Posez ces questions, dans cet ordre, en sautant tout ce qui a déjà été répondu :

1. Informations de base sur la marque : nom, ce qu'elle vend, ville ou pays, qui sont les clients.
2. Actifs de la marque : fichier logo, couleurs de la marque (ou un site web ou un dépliant dont vous pouvez les échantillonner), et toutes les polices de la marque.
3. Taille et utilisation : par défaut 1080 × 1350 pour Instagram. Autres options : 1080 × 1080, 1080 × 1920 stories, A4 ou A3 imprimé.
4. Combien d'affiches, et ce que chacune doit dire : par exemple services, offres, un événement, ou "votre choix".
5. Détails à inclure obligatoirement : prix, dates, numéro de téléphone, adresse, site web ou appel à l'action. Tout ce qui n'est pas donné est marqué comme un espace réservé.
6. Règles concernant les personnes : par défaut les règles de la Partie 6.
7. Images : par défaut utilisez ce qui est disponible, dans cet ordre : photos libres de droits (gratuites), ChatGPT dans le navigateur intégré (gratuit, limité), puis Higgsfield (crédits payants). Demandez si des crédits payants peuvent être utilisés.
8. Où enregistrer : par défaut un nouveau dossier nommé d'après la marque.

Ne posez pas de questions sur les choix de conception tels que le style, la mise en page ou les effets. Ce sont vos affaires. Vous montrerez la direction dans la Partie 2.

---

Partie 2 : Planifier, puis montrer un point de contrôle

Faites tout cela vous-même, puis montrez à l'utilisateur un court plan pour approbation.

1. Échantillonnez les couleurs de la marque à partir de leurs fichiers avec un script (tools/sample_colours.py) ; ne devinez pas. Prévoyez de redessiner le logo en SVG propre, jamais un recadrage flou.
2. Recherchez la catégorie : comment 3 ou 4 grandes marques font de la publicité (mise en page, typographie, imagerie, ton), y compris un concurrent local. Empruntez la réflexion, jamais les actifs. Enregistrez les notes et les sources dans RESEARCH.md.
3. Collectez la vérité locale : des lieux réels, des habitudes quotidiennes, des mots que les gens utilisent réellement, et des détails régionaux. Exemples de détails régionaux : la couleur de véhicule habituelle dans cet État, ou l'habillement local.
4. Choisissez la direction artistique : choisissez une option par ligne du tableau de la Partie 3, pour correspondre à cette marque et à ce public. Choisissez également les polices (Google Fonts) et comment les couleurs sont utilisées : laquelle est dominante, laquelle est l'accent, et quels sont les arrière-plans.
5. Rédigez les idées d'affiches : pour chaque affiche, une idée, un titre de moins de 8 mots, une ligne d'accroche qui commence par ce que le client obtient, un appel à l'action, l'image nécessaire, et son élément narratif. Aucune affiche ne partage une mise en page ou un élément narratif avec une autre.

Point de contrôle, le seul avant la construction. Montrez à l'utilisateur :

• les couleurs
• la direction artistique en 2 ou 3 lignes
• les polices
• la liste des affiches avec leurs titres

Demandez "Je continue, ou je change quelque chose ?" Soyez bref.

---

Partie 3 : Choix de direction artistique

Choisissez par marque. Les marques différentes doivent différer sur plusieurs lignes.

Choix	Options
Lumière	sombre et atmosphérique · lumineux et aéré · tons moyens terreux · noir et blanc plus une couleur
Utilisation des couleurs	une couleur domine avec un accent · photos en duotone · blocs de couleurs vives · neutre avec un accent de marque
Typographie	grotesque gras · condensé et haut · géométrique arrondi · sérif éditorial plus sans-sérif · accent manuscrit
Formes	blobs et vagues organiques · angles géométriques durs · lignes fines et grilles · papier découpé · cercles et arcs
Traitement des photos	découpage sur formes · pleine page avec superposition de couleur · photo à l'intérieur d'une forme · large bande photo · teintée · collage
Texture et lumière	lueurs et traînées lumineuses · plat et propre · grain · points de demi-teinte · ombres douces uniquement
Mise en page	titre en haut, image en dessous · écran partagé · image centrée, texte autour · texte en premier · diagonale · grille de panneaux
Élément narratif	carte d'application ou d'interface · autocollant ou badge · billet ou reçu · carte ou itinéraire · grand nombre ou graphique · citation · avant et après

Ne par défaut pas sur des arrière-plans sombres avec des accents lumineux. Utilisez-les uniquement lorsque la marque le nécessite.

---

Partie 4 : Obtenir des images (trois routes)

Utilisez la route qui convient à chaque affiche. Vérifiez chaque image par rapport aux règles concernant les personnes (Partie 6) avant de l'utiliser. Enregistrez les sources et les licences dans RESEARCH.md.

A. Photos libres de droits (Pexels, Unsplash, Pixabay). Gratuites, vraies personnes et vrais lieux.

• Recherchez avec plusieurs requêtes locales.
• Comparez 20 à 30 vignettes sur une seule planche-contact (tools/contact_sheet.py).
• Rejetez les photos avec :
  • le mauvais lieu ou les mauvaises personnes
  • une violation des règles
  • des plaques d'immatriculation ou des détails privés lisibles
  • des dommages ou un désordre qui nuisent au message
  • aucun espace pour le texte
• Téléchargez les photos en 1600 à 2000 px de large.
• Corrigez les détails locaux si nécessaire. tools/recolour.py change une couleur à l'intérieur d'une zone.
• Laissez la forme de la photo décider de la mise en page : les photos portrait fonctionnent en pleine page ; les photos paysage fonctionnent en bande ou à l'intérieur d'un cadre.

B. ChatGPT dans le navigateur intégré. Gratuit ; idéal pour les scènes complètes.

• L'utilisateur doit être connecté. Tapez une invite détaillée : sujet, vêtements conformes aux règles, décor, lumière, "portrait 4:5, pas de texte, pas de logos".
• Pour modifier un détail, restez dans le même chat ChatGPT : "Même image, change seulement …".
• Limite : le forfait gratuit permet environ 3 images par jour.
• Obtenir le fichier : le téléchargement de ChatGPT ne fonctionne pas depuis le volet du navigateur.
  • Meilleure solution : demandez à l'utilisateur de cliquer sur télécharger et de vous dire le nom du fichier.
  • Solution de repli : affichez l'image en plein écran à sa taille réelle, capturez-la en 2 × 2 tuiles de capture d'écran et assemblez-les avec tools/stitch_tiles.py.

C. Higgsfield. Crédits payants ; idéal pour les découpes.

• Vérifiez d'abord le solde et le prix (higgsfield account status, higgsfield generate cost …).
• GPT Image 2.6 avec --background transparent donne des découpes. Utilisez la qualité moyenne pour les personnes et faible pour les objets. Le forfait de base exécute environ 4 tâches à la fois.
• Nettoyez la légère lueur autour de chaque découpe avec tools/clean_cutout.py.
• Pour modifier un détail d'une image, repassez-la avec --image et décrivez uniquement le changement.

Chaque invite d'image indique : le sujet et l'action, les vêtements conformes aux règles, l'éclairage correspondant à l'ambiance de l'affiche, le cadrage, "photorealistic, no text, no logos, no watermark", et l'espace laissé pour le texte lorsqu'il s'agit d'une scène complète.

---

Partie 5 : Construire les affiches

Configurez d'abord (partez de skills/poster-design/template/index.html) :

• un index.html avec les jetons de couleur, les polices et le logo comme symbole SVG
• un sign-off partagé (style logo plus appel à l'action) qui correspond à la direction artistique
• une page de prévisualisation montrant chaque affiche à son vrai ratio, mise à l'échelle pour s'adapter, avec des boutons Ajuster / Téléphone (390 px de large) / 100 %
• un mode ?solo=pN pour l'exportation
• servez le dossier à partir d'un serveur local (pas file://) et ouvrez-le dans le volet du navigateur

Chaque affiche :

• Une idée : titre, ligne d'accroche, appel à l'action.
• Au moins quatre couches, avec au moins un élément qui croise devant le sujet.
• Un élément narratif qui montre le produit en fonctionnement, comme une carte d'application réaliste, un billet, un tracker, une carte ou un badge.
• Des formes, dégradés et lumières personnalisés, pas de boîtes de modèle.
• Variez les effets signatures dans l'ensemble tout en gardant le système partagé.

Principes de conception (non négociables). Ce sont les erreurs qui font qu'une affiche a l'air fabriquée par une machine. Prévoyez-les lors de la construction, pas seulement à la fin.

• Espace de respiration. Le texte doit avoir au moins 24 px d'espace libre (40 px c'est mieux) par rapport à chaque bord de forme, anneau, ligne, badge et image. Un cercle ou un anneau ne doit jamais longe, traverser ou être proche du texte.
• Pas de quasi-collisions. Deux éléments soit se chevauchent clairement et intentionnellement (d'un quart du plus petit ou plus), soit sont bien écartés. Les bords qui se touchent presque, ou qui s'alignent par accident, ressemblent à une erreur. Exemples : le haut d'un produit aligné avec le haut du cercle derrière lui, ou un badge effleurant le coin d'une boîte.
• Les cercles rencontrent les panneaux clairement. Un cercle qui rencontre un pied de page ou une bande soit s'arrête bien avant (24 px ou plus), soit passe clairement en dessous (40 px ou plus). Il ne frôle jamais juste le bord.
• Emballage clair. Vérifiez chaque découpe sur la couleur d'arrière-plan réelle de l'affiche, pas seulement sur le blanc et le noir. Les restes de décor, les bords irréguliers et les zones "givrées" solides n'apparaissent que sur la couleur réelle.
• Moins de décorations. Chaque anneau, contour ou feuille supplémentaire est une chose de plus qui peut encombrer le texte. Si cela n'ajoute pas de sens, laissez-le de côté.
• Hiérarchie visuelle. Décidez l'ordre de lecture : (1) titre ou produit, (2) ligne d'accroche, (3) élément narratif, (4) sign-off. La taille, le poids et la couleur doivent suivre cet ordre. Une seule chose crie.
• Appariement et regroupement. Chaque icône se trouve juste à côté de la seule chose qu'elle étiquette, avec un espacement égal dans chaque paire. Chaque détail de contact a sa propre icône : WhatsApp à côté du numéro, Instagram à côté du pseudo. Regroupez les éléments connexes sous un petit titre ("Commandez maintenant", "Disponible chez"). Séparez les groupes non liés par un espace clair.
• Alignement.
  • Une marge gauche pour le logo, le titre, le corps et le pied de page.
  • Les blocs de pied de page s'alignent en haut, de sorte que leurs petits titres partagent une ligne.
  • Les rangées et colonnes de badges ont un espacement régulier et mesuré.
• Sauts de ligne.
  • Le texte courant ne se termine jamais sur un seul mot court. Utilisez text-wrap: balance sur les titres et le corps du texte, puis lisez chaque ligne.
  • Un saut doit tomber entre les phrases, pas à l'intérieur d'une phrase ("sur avoine, / millet" est faux ; "sur / avoine, millet et pulpe de soja" est correct).
  • Les titres se coupent par sens, avec un <br> là où vous choisissez.
• Un seul nom par chose. Utilisez les mêmes noms de produit ou de saveur, listes d'ingrédients et allégations sur chaque affiche de l'ensemble. Avant de publier, listez chaque allégation (comme "sans sucre ajouté" ou "100 % naturel") pour que le client la confirme.
• Le pied de page est conçu aussi. Il reçoit le même soin que le héros : hiérarchie, appariement, alignement et au moins 36 px de rembourrage.

Menu de techniques (choisissez par affiche ; ne les utilisez pas toutes) :

• Profondeur :
  • ordre des couches : arrière-plan → texture → lueur ou champs de couleur → formes → sujet → élément de premier plan → élément narratif → superposition pour la lisibilité → type → sign-off
  • une ligne, forme ou carte de premier plan croisant le sujet
  • un sujet sortant de sa carte ou de son cadre
  • une carte placée derrière le sujet de sorte qu'une main la chevauche
• Lumière et couleur :
  • une lueur radiale floue derrière le sujet
  • une lumière de bord demandée dans l'invite d'image pour correspondre à l'affiche
  • des traînées lumineuses (un chemin SVG dessiné deux fois : lueur floue plus noyau net)
  • un type contour ou néon utilisant filter: drop-shadow empilé (pas text-shadow)
  • une superposition de couleur de marque sur les photos : claire sur le sujet, solide derrière le texte
  • la re-gradation d'une image (jour en nuit, plus chaud) avec un script
• Forme et texture :
  • des blobs ou des vagues avec une ligne d'accentuation fine
  • des bords de photo courbés ou inclinés
  • des grilles, points ou motifs délavés
  • des anneaux et des rayons
  • des badges circulaires avec du texte sur un chemin (<textPath> avec textLength)
• Typographie :
  • un visage d'affichage lourd et un visage de texte propre
  • interlignes de titre 0.85 à 0.92, légèrement serré

…

[des sections supplémentaires ont été tronquées pour la traduction]