Concepteur graphique photo & directeur artistique

Compétence de concepteur graphique photo professionnel & directeur artistique

Cette compétence transforme des photographies brutes en graphiques de qualité studio pour les réseaux sociaux, cartes postales et affiches commémoratives. Au lieu d'utiliser la génération d'images par IA sur les photos (qui déforme les visages, modifie les ciels et déforme la typographie thaïlandaise), ce workflow utilise HTML5 + CSS3 + illustrations vectorielles SVG personnalisées + Google Fonts, rendu en 4K Retina (--force-device-scale-factor=2) via Headless Chrome et composité avec Python Pillow (subsampling=0).

---

Workflow principal (6 phases)

Phase 1 : Inspection photo & analyse visuelle automatisée

1. Visualiser la photo cible : Appelez toujours read_file sur l'image cible pour comprendre visuellement le sujet, l'ambiance, l'éclairage et les obstacles (ex. visages, mâts de tente, haubans, horizons, arbres).
2. Exécuter le script d'analyse photo : Exécutez analyze_photo.py sur l'image cible pour extraire :
   • Dimensions exactes en pixels, rapport hauteur/largeur et métadonnées EXIF.
   • Une carte de luminance & d'espace négatif en grille 3×3 (identifie les zones sombres, moyennes ou lumineuses, et les zones à faible détail propices à la typographie).
   • Palette de couleurs extraite (couleurs hexadécimales de fond dominantes + couleurs d'accent à fort contraste recommandées).

   python ".agents/skills/photo-graphic-designer/scripts/analyze_photo.py" "<chemin_image>"
   

---

Phase 2 : Découverte interactive du style & de la direction

Avant de générer les graphiques, consultez style_catalog.md et utilisez ask_question pour laisser l'utilisateur choisir parmi des directions de conception adaptées à sa photo :

1. Sélection du style de design (Proposez 3 à 5 styles les plus adaptés parmi les 12+ styles du style_catalog.md, ainsi qu'une option pour générer plusieurs styles à comparer) :
   • Romance céleste & étoilée (Sérif doré luxueux, lignes de constellations, lumière d'étoiles, bordures d'astrolabe)
   • Éditorial minimaliste / Carte postale magazine (Mise en page Kinfolk / GO OUT / NatGeo, grilles filaires, en-tête de métadonnées, tampon de lieu)
   • Doodle chaleureux & mignon dessiné à la main (Guirlandes lumineuses cosy, bordures pointillées esquissées, cœurs flottants, flèches courbes, écriture manuscrite)
   • Film vintage & Kodachrome analogique (Lueur de halation, cadre de pellicule, timbre de date, sérif rétro)
   • Glassmorphisme moderne & UI flottante (Cartes en verre dépoli, lecteur de musique / barre de souvenirs, sans-serif élégant)
   • Aventure en plein air & badge rétro (Emblème de parc national / camping, lignes topographiques, boussoles et vecteurs de pins)
   • Affiche minimaliste japonaise (ambiance Zakka / Muji) (Typographie verticale/asymétrique, espace blanc généreux, illustration au trait délicate)
   • Lettre cinématographique & sous-titres narratifs (Barres anamorphiques, bloc de crédit de titre de film, sous-titre bilingue poétique)
2. Rapport hauteur/largeur & format de sortie :
   • Rapport d'origine (ex. 3:2 Paysage 3600×2400)
   • Flux social portrait (4:5 2400×3000)
   • Carré (1:1 2800×2800) ou Story/Reel (9:16 2160×3840)

---

Phase 3 : Atelier de copywriting multiton (Crucial !)

Les citations génériques ou trop mièvres sonnent souvent artificielles ("ไม่ใช่ตัวเอง"). Avant de finaliser le texte—ou lorsque l'utilisateur demande des idées de formulation—lisez copywriting_tones.md et utilisez ask_question pour laisser l'utilisateur sélectionner ou combiner des formulations par section et ton de personnalité :

• Divisez le texte en emplacements modulaires :
  1. Badge supérieur / Sourcil (ex. titre anglais ou tag d'occasion)
  2. Titre principal (Salutation principale thaï/anglais)
  3. Sous-titre / Ancre centrale (Phrase clé chaleureuse)
  4. Message principal / Boîte de citation (Message de cœur de 2 lignes—ou possibilité de l'omettre pour un rendu plus épuré)
  5. Note d'appel au sujet / Flèche (Courte étiquette mignonne près d'une flèche dessinée à la main pointant vers la personne/le sujet—ou possibilité de l'omettre)
• Proposez 5 à 6 tons de personnalité distincts par emplacement :
  • สายลุย-ชิลล์ๆ (Plein air / Partenaire décontracté) : Naturel, détendu, ambiance de compagnon d'aventure.
  • แมนๆ จริงใจ ไม่เลี่ยน (Sincère & ancré) : Honnête, chaleureux, zéro malaise.
  • อบอุ่น-เรียบง่าย (Chaleureux & classique) : Doux, reconnaissant, intemporel.
  • กวนนิดๆ กันเอง (Espiègle & taquin) : Taquinerie de couple authentique avec affection.
  • โรแมนติก-ลึกซึ้ง (Poétique & romantique) : Lumière d'étoile, destin, émotion profonde.
  • สั้นกระชับ-มินิมอล (Court & percutant) : Impact minimaliste.

---

Phase 4 : Composition, flux directionnel & règles de théorie des couleurs

Consultez composition_and_color.md lors de la rédaction de la superposition HTML/CSS/SVG. Appliquez toujours ces règles d'or :

1. Zone de protection du sujet & des obstacles :
   • Cartographiez les coordonnées exactes du cadre (x, y) des visages, des corps et des lignes structurelles (telles que les mâts de tente ou les haubans diagonaux).
   • Ne laissez jamais le texte, les cœurs flottants, les étoiles ou les flèches traverser les visages ou intersecter maladroitement les haubans. Déplacez les éléments d'appel proprement d'un côté de chaque corde/ligne.
2. Flux oculaire directionnel (vecteur visuel) :
   • Guidez le regard du spectateur depuis le Bloc de typographie principal (dans l'espace négatif ouvert) -> le long des Ornements secondaires / Flèches d'appel -> directement vers le Visage/Sourire du sujet humain.
   • Utilisez des chemins SVG courbes (<path d="M ... Q ...">), l'orientation du croissant de lune ou des angles d'étoiles filantes qui pointent vers le sujet ou encadrent le texte vers l'intérieur, ne menant jamais le regard hors du cadre.
3. Harmonie des couleurs & lisibilité adaptative :
   • Règle 60-30-10 :
     • 60% Teinte ambiante de la photo de base (ex. Bleu nuit profond #0A1530 ou Vert forêt).
     • 30% Couleur de la typographie principale (Ivoire chaud à fort contraste #FFFAF0 ou Blanc pur #FFFFFF).
     • 10% Couleur d'accent échantillonnée ou harmonisée avec la scène (ex. Or lumineux #FFE299, Champagne #F0CA86 ou Cœur corail doux #FF7B93).
   • Placez toujours un dégradé radial/linéaire subtil et invisible (rgba(8, 16, 38, 0.38)) ou un conteneur en verre dépoli (backdrop-filter: blur(4px)) derrière le texte du corps pour que la typographie reste 100% lisible sur les étoiles, les nuages ou le feuillage.
4. Perfection typographique thaïlandaise :
   • Utilisez white-space: nowrap sur les lignes de citation thaïlandaises multi-phrases ou des sauts de ligne explicites <br> aux limites naturelles des phrases pour que les mots thaïlandais (comme "ฉัน" ou "วัน") ne se retrouvent jamais seuls sur une ligne orpheline.
   • Laissez au moins 35px–50px de marge dégagée entre les grands textes d'affichage thaïlandais (qui ont des voyelles supérieures hautes/marques tonales comme ั ิ ี ึ ื ่ ้ ๊ ๋ ์ et des voyelles inférieures ุ ู) et les étoiles, lunes ou bordures SVG environnantes.

---

Phase 5 : Pipeline de rendu 4K Retina

Utilisez render_graphic.py pour rendre tout modèle HTML/CSS/SVG sur la photo cible en résolution 4K :

python ".agents/skills/photo-graphic-designer/scripts/render_graphic.py" `
  --photo "DSC03461.jpg" `
  --html "chemin/design.html" `
  --output "DSC03461_Sortie.jpg" `
  --width 1800 --height 1200 --scale 2

• Pourquoi --scale 2 et --virtual-time-budget=3000 sont importants :
  • Concevoir en 1800×1200 pixels CSS avec --force-device-scale-factor=2 produit une sortie Retina ultra-nette de 3600×2400.
  • --virtual-time-budget=3000 garantit que Google Fonts finit de télécharger et de s'appliquer avant que Chrome ne capture l'image (évite le recours aux polices système).
  • L'enregistrement avec quality=96, subsampling=0 préserve des bords 100% nets sur le texte coloré et les lignes vectorielles fines.

---

Phase 6 : Vérification qualité visuelle obligatoire

Après avoir rendu chaque image, vous DEVEZ inspecter le fichier .jpg généré à l'aide de read_file et vérifier cette liste de contrôle avant de le montrer à l'utilisateur :

• Vérification des polices : Les polices Google Fonts prévues se sont-elles chargées correctement (pas de recours à Tahoma/Arial) ?
• Aucun mot orphelin : Toutes les phrases thaïlandaises sont-elles coupées proprement aux points <br> intentionnels sans mots isolés en fin de ligne ?
• Vérification zéro collision : Des étoiles, lunes, cœurs, bordures ou flèches touchent-ils ou chevauchent-ils les voyelles/marques tonales thaïlandaises, les visages humains ou les cordes de tente ?
• Équilibre visuel & contraste : Chaque ligne de texte est-elle facilement lisible aussi bien en vue miniature qu'en plein écran ?

Si un problème est repéré lors de l'inspection read_file, ajustez immédiatement les coordonnées CSS/SVG et refaites le rendu avant de présenter le résultat.

---

Modèles de référence & documentation

• Catalogue de styles & associations de polices : references/style_catalog.md
• Guide de composition, flux directionnel & couleurs : references/composition_and_color.md
• Matrice de copywriting thaï & anglais : references/copywriting_tones.md
• Modèles de référence HTML/SVG prêts à l'emploi :
  • examples/style_starry_romantic.html
  • examples/style_minimal_magazine.html
  • examples/style_warm_cute_doodle.html