Il y a quelque temps, j'ai publié en open source guizang-ppt-skill, et plus tard, j'ai découvert quelque chose en l'utilisant moi-même pour créer du contenu.
Les pages web qu'il génère, une fois capturées en image et postées sur des plateformes de texte-image, recevaient des retours et des données bien meilleurs que mes mises en page manuelles.
Je crois que vous avez déjà trouvé des prompts ou Skills qui génèrent ces images au format 3:4.
Elles ont presque toutes la même saveur : Tailwind + grands blocs de couleur + empilement d'emojis + hiérarchie typographique médiocre.
Après les avoir vues, je comprends à peu près pourquoi les cartes texte-image générées par IA sont si faciles à repérer d'un coup d'œil : elles créent des pages web, pas des magazines.
Les cartes texte-image sont un tout autre animal par rapport aux PPT : écrans verticaux, une décision d'une seconde dans le flux d'informations pour s'arrêter ou non, et dépendance aux images plutôt qu'aux mots.
Des mises en page différentes, des rythmes différents, des lecteurs différents.
J'ai donc extrait ce Skill du PPT Skill pour en faire un Skill autonome : guizang-social-card-skill (https://github.com/op7418/guizang-social-card-skill).
Ci-dessous, je vais expliquer pourquoi il est bon et pourquoi je suis prêt à y consacrer autant de temps.
2. Pourquoi est-il vraiment bon ?
Les images verticales 3:4 sont le champ de bataille principal des cartes texte-image. La majeure partie de l'énergie de conception de ce Skill a été consacrée au 3:4 — hiérarchie typographique, proportions de mise en page et règles de césure.
Tout a été calibré en fonction du scénario réel de défilement dans un flux d'informations mobile. Les formats 21:9 et 1:1 pour les images d'en-tête des comptes WeChat sont également pris en charge.
Commençons par ce qui intéresse le plus les créateurs de contenu texte-image.
2.1 Il distingue ce que vous écrivez et l'associe au style approprié
Le contenu sur les plateformes de texte-image est catégorisé. Une critique de film et un avis sur un produit nécessitent des langages visuels complètement différents ;
Un carnet de voyage et des conseils professionnels devraient utiliser des mises en page différentes.
Mais la plupart des outils d'IA ne s'en soucient pas ; ils utilisent le même modèle quel que soit ce que vous écrivez.
Le résultat est que toutes les cartes de chacun ressemblent à des produits sortis d'une chaîne de montage d'images d'en-tête de comptes WeChat.
Ce Skill intègre des règles d'adaptation pour 11 catégories courantes de contenu texte-image :
- Voyage / Lifestyle : style magazine, palette de couleurs chaudes, images plein écran, grands titres avec empattements ;
- Travail / Conseils / Insights métier : style grille, fonds sombres, mises en page de type poster avec données ;
- Film / Culture : style magazine aux tons froids, mises en page de type affiche de film, gros plans sur les personnages en priorité ;
- Critiques de produits / Numérique : style grille, matrices de comparaison, captures d'écran encadrées dans des appareils ;
- Lecture / Notes : style magazine, polices avec empattements, citations centrées, espace blanc maximal ;
- Restaurants / Visites : style magazine saturé, prises de vue en plongée priorisées, texte déplacé dans les coins ;
J'ai même créé un composant de carte spécifiquement pour les blogueurs voyage. Vous pouvez y marquer des emplacements de commerces et des itinéraires de voyage, et l'IA générera automatiquement des annotations pour vous.
Donnez-lui le même texte : dites-lui qu'il s'agit d'une critique de film, et il vous donne une carte style affiche de film ; dites-lui que c'est un avis sur un produit, et il vous donne un tableau comparatif avec des cadres d'appareils.
Plus important encore, il a des « zones interdites » claires :
- Contenu orienté fans : le langage visuel requis est complètement différent ;
- Publicités promotionnelles pures : cela contredit sa philosophie de conception qui met l'accent sur le contenu ;
- Longs tutoriels de plus de 12 écrans : le format texte-image n'est pas le support optimal pour les longs tutoriels.
Dans ces scénarios, le Skill vous dira dès le début : « Vous devriez peut-être utiliser un autre outil. »
J'ai laissé cela intentionnellement. Les limites définissent un produit plus que ses capacités ; un Skill qui essaie de tout faire finit généralement par ne rien faire de bien.
2.2 Comment superposer du texte sur des images
Superposer du texte sur des images est la partie la plus difficile des cartes texte-image, et l'endroit où le « look IA » se révèle le plus facilement.
Si ce n'est pas bien fait, trois types d'échecs se produisent :
- Le texte couvre les visages ou le centre du produit.
- Texte blanc sur fond clair ou texte noir sur fond sombre, illisible.
- Le texte s'étend sur toute l'image, ruinant une composition pourtant belle.
Le Skill gère cela en trois étapes :
- Identifier les sujets dans l'image : visages, produits, zones denses en texte, et les éviter automatiquement dans la mise en page ;
- Calculer la couleur et la luminosité de la zone de dépôt : décider de la couleur du texte, d'ajouter ou non un masque, et de la profondeur de l'ombre ;
- Taille de police et césure adaptatives : ajuster dynamiquement la taille de police et les positions de césure en fonction de la taille de la zone de dépôt, plutôt que d'utiliser une taille de police codée en dur qui déborde.
Avec ces règles, la « sensation premium » de la carte est établie. Les lecteurs ne font pas la différence entre « texte apposé » et « texte qui était déjà là ».
2.3 D'où viennent les images : C'est la plus grande différence avec les autres outils de cartes IA
La plupart des outils d'IA pour générer des cartes texte-image vous demandent soit de télécharger vos propres images, d'utiliser des emojis, soit de générer des illustrations qui sentent l'IA à plein nez.
Le résultat est que la recherche manuelle d'images est épuisante, ou que l'empilement d'emojis donne un aspect artificiel.
Ce Skill est connecté par défaut à trois bibliothèques d'images gratuites pour usage commercial :
- Pexels : prend en charge la recherche en chinois, adapté aux scénarios généraux ;
- Unsplash : la plus forte texture photographique, le premier choix pour le contenu people, lifestyle et spatial ;
- Wallhaven : jeux, photographie et fonds d'écran, bien que les droits d'auteur soient flous.
Il répartit automatiquement les termes de recherche en fonction de la sémantique des paragraphes de texte, récupère les images, les recadre pour s'adapter à la mise en page et évite de couper les visages ou les sujets.
Vous obtenez une carte avec de la vraie photographie, pas une carte avec des blocs de couleur.
Et il n'est pas rigide sur la recherche d'images absolument libres de droits. Il vous indique quelles images il a trouvées, et vous décidez d'utiliser ou non des images dont les droits d'auteur sont incertains.
De plus, les plateformes sont actuellement très strictes sur les filigranes IA. La plupart des images générées par IA que vous utilisez maintenant ont des filigranes, ce qui est détecté par les plateformes et peut entraîner un shadowban. C'est un problème majeur.
2.4 Les captures d'écran sont aussi des images : L'embellissement en quatre éléments
Une grande partie de notre contenu ne peut pas utiliser de photographie ; il nécessite des captures d'écran logicielles, des enregistrements de chat ou des interfaces produit.
Le Skill intègre un embellisseur de captures d'écran :
Ajoute des cadres d'appareils de style macOS/iOS (chrome de navigateur ou bordures de téléphone), utilise différentes textures de fond pour maintenir la capture d'écran — papier quadrillé, matrice de points, blanc chaud ou sombre — afin que la capture d'écran ne flotte plus avec un fond blanc sur un fond blanc ;
En même temps, il assortit automatiquement les couches d'ombre et les paramètres de rayon de coin en fonction du style visuel. Chaque style a une recette de capture d'écran, assurant une cohérence sans réglage manuel.
En termes simples, une capture d'écran que vous prenez au hasard ressemblera à une image promotionnelle officielle de produit après son passage.
2.5 Génération d'images par IA : Utiliser avec modération
Le Skill ne fait appel à la génération d'images par IA que lorsque toutes les sources d'images précédentes ne parviennent pas à trouver de matériel adapté.
Lors de la génération d'images, il force des mots de contrainte de style pour éviter les visuels médiocres des « illustrations IA évidentes ».
Je préfère qu'il utilise moins l'IA plutôt que de l'utiliser d'une manière qui rende toutes les cartes texte-image sœurs. Cela évite également que l'exposition du contenu soit affectée par l'utilisation d'images IA.
2.6 Système visuel : Deux styles + 28 squelettes de mise en page
Ceux qui connaissent mon précédent PPT Skill trouveront cela familier. Ces deux systèmes visuels et squelettes de mise en page ont été adaptés et recalibrés à partir du PPT Skill.
Je ne vais pas répéter les détails, mais voici à quoi ils ressemblent dans le contexte des cartes texte-image.
Deux systèmes visuels :
- Style Magazine : Le type de typographie que l'on voit sur les couvertures du New Yorker ou des Éditions de la Traduction de Shanghai. Grands espaces blancs, grands titres avec empattements, mises en page asymétriques, et texte qui respire.
- Style Grille : Dans la veine du design graphique suisse de Massimo Vignelli et Helmut Schmid. Grilles fortes, polices sans empattement, aspect géométrique, utilisation sobre mais précise de la couleur.
28 squelettes de mise en page, que j'ai sélectionnés parmi les magazines, affiches, pochettes d'album et affiches de film que j'ai vus au cours des dix dernières années — ceux qui résistent à l'examen.
L'IA est encore médiocre dans la « conception de mise en page libre ». En lui donnant un squelette éprouvé, sa tâche est réduite de « concevoir » à « remplir », et la stabilité du produit fini s'améliore immédiatement.
10 jeux de palettes de couleurs thématiques, des combinaisons de polices fixes, et des bibliothèques d'icônes limitées — je ne vais pas énumérer ces détails un par un.
La logique est la même : les contraintes ne sont pas des obstacles ; elles sont la base.
Donnez à un créateur de contenu un choix infini de couleurs, et il est plus susceptible de faire quelque chose de laid ; donnez-lui 10 jeux de palettes éprouvées, et la probabilité qu'il fasse quelque chose de correct approche 100 %.
3. Pourquoi faire cela ?
3.1 Perspective design : La sensation magazine est très efficace
Pourquoi opter pour des styles magazine et grille plutôt que pour des designs de carte plus « modernes » ?
L'essence d'une carte texte-image est la même qu'une affiche imprimée, un magazine illustré ou une pochette d'album. Utiliser une image statique pour convaincre un inconnu de s'arrêter en 1 seconde. Les magazines et les affiches ont étudié cela en profondeur au cours des cent dernières années.
Le langage du design web est fait pour des scénarios scrollables et interactifs. Le transposer sur une image statique donne un aspect forcé et une information plate.
Ainsi, tous les « pourquoi » des décisions visuelles de ce Skill :
- Pourquoi beaucoup d'espace blanc ? L'espace blanc est la façon dont le magazine vous dit « l'essentiel est ici ».
- Pourquoi privilégier les polices avec empattements ? Les polices avec empattements ont le poids de l'imprimé à grande taille.
- Pourquoi des mises en page asymétriques ? L'asymétrie crée un rythme visuel, permettant à l'œil de savoir où regarder en premier.
- Pourquoi des couleurs sobres ? Dans les flux de réseaux sociaux, une palette sobre est en fait plus accrocheuse qu'une saturation élevée ; elle se démarque de toutes les cartes « qui crient fort » autour d'elle.
Ces décisions semblent « abstraites », mais ce sont toutes des constantes spécifiques dans le code. Ratios de taille de police, ratios d'espace blanc, nombre de colonnes de grille, seuils de contraste, règles de césure. Ces constantes sont le véritable avantage concurrentiel de ce Skill.
3.2 Perspective produit : C'est un produit, pas seulement un Prompt
Après avoir fait autant de Skills, j'ai formé un jugement sur « ce qu'est réellement un Skill » :
Un Skill est essentiellement un petit produit.
Appliqué à ce projet :
J'ai écrit un PRODUCT.md pour lui, expliquant clairement quel problème il résout, à qui il s'adresse, et ce qu'il ne fait pas. C'est pour me forcer à penser clairement à « ce que je fais réellement ». Si je ne peux pas l'expliquer, le Skill ne devrait pas être publié.
Je lui donne des numéros de version (v0.5 / v0.9 / v0.10 / v0.12), et chaque version a un CHANGELOG. Je peux vous dire pourquoi la v0.10 a été une tentative ratée et comment la v0.12 l'a corrigée.
J'ai écrit un HANDOVER.md pour lui, expliquant à quoi ressemblent les livrables, où se situent les limites, et quand utiliser d'autres outils. J'espère que quiconque le reprendra pourra en avoir une compréhension complète en 30 minutes.
Je liste à l'avance ce dans quoi il n'est pas bon afin d'éviter aux utilisateurs des essais et erreurs.
Pourquoi tant d'efforts ?
Parce que le plus gros problème de l'écosystème des Skills est que la plupart des Skills se contentent de « Je peux en faire un », et peu de gens cherchent à « le faire à l'extrême ».
Un Skill devrait être un petit produit autonome. Un Prompt peut être copié par un concurrent en dix minutes ; un produit ne le peut pas.
L'autre face est que si je ne peux même pas expliquer les limites de mon propre Skill, je n'ai pas le droit de demander aux autres de confier leur workflow à celui-ci.
Mot de la fin
Ce Skill m'a aidé à comprendre ce que mon PPT Skill avait réellement de bon.
Ce qu'il avait de bon, c'est qu'il a été traité comme un produit dès le début. De nombreux modèles, des règles détaillées et de belles couleurs sont tous des sous-produits de cela.
Si quelqu'un me demande à l'avenir ce qu'est un Skill, je répondrai avec deux phrases :
Un Skill est un produit. Pour juger si un Skill est bon, voyez s'il a été choyé par son auteur.
Si vous créez également du contenu texte-image, j'espère qu'il vous aidera à sauver ces bons sujets gâchés par une mauvaise mise en page.
Si vous fabriquez également des Skills, j'espère qu'il vous fera repenser si la chose que vous avez créée mérite un PRODUCT.md.
GitHub : https://github.com/op7418/guizang-social-card-skill
Dites à votre Codex, Xiaolongxia, ClaudeCode ou Workbuddy : Aidez-moi à installer ce Skill : https://github.com/op7418/guizang-social-card-skill
