Générez des bannières multi-formats pour les réseaux sociaux, les publicités et le web avec plusieurs options de direction artistique alimentées par l'IA par demande.
npx clawhub@latest install banner-designPrérequis
La conception de bannières est une compétence créative structurée qui produit des bannières prêtes pour la production sur toutes les principales plateformes — Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, les héros de sites web et l'impression. Pour chaque demande, elle génère plusieurs options de direction artistique à l'aide de visuels générés par IA composés avec HTML/CSS, puis exporte des PNG au pixel près aux dimensions exactes de chaque plateforme. Elle applique de véritables règles de design (zones de sécurité, ratios de contraste, limites de texte, contraintes typographiques) afin que les résultats soient prêts pour les campagnes, et non de simples maquettes conceptuelles.
Chaque demande de design produit 2 à 3 variantes de direction artistique distinctes (par défaut : 3), couvrant des styles tels que le minimalisme, la typographie audacieuse, le dégradé, le glassmorphisme, le néon, le géométrique, le rétro, et bien d'autres. Cela vous permet de comparer les directions avant d'en choisir une.
Les motifs d'arrière-plan, les dégradés et les itérations rapides utilisent un modèle Standard (Flash) rapide en 2K. Les illustrations principales, les scènes photoréalistes et les prises de vue complexes de produits utilisent un modèle Pro en 4K. La compétence Ckmbanner Design achemine automatiquement chaque élément vers le bon modèle en fonction de sa complexité.
La référence de tailles intégrée couvre les couvertures Facebook, les en-têtes Twitter/X, LinkedIn, YouTube Channel Art, les Stories et publications Instagram, les bannières leaderboard et medium rectangle de Google Ads, ainsi que les héros de sites web. Les bannières HTML/CSS sont rendues et capturées en captures d'écran aux dimensions exactes en pixels.
Chaque bannière respecte les règles de zone de sécurité (contenu critique dans les 70 à 80 % centraux), un seul CTA, un maximum de deux polices de caractères, un ratio de contraste de 4,5:1, ainsi que la directive Meta limitant la zone de texte à moins de 20 %. Les fichiers destinés à l'impression sont générés en 300 DPI avec le mode colorimétrique CMJN et un fond perdu de 3 à 5 mm.
Après la composition HTML/CSS, chaque bannière est automatiquement capturée en PNG nommé à l'aide de Chrome DevTools. Les fichiers dépassant 5 Mo sont compressés via Sharp. Les noms des fichiers de sortie suivent une convention kebab-case {style}-{width}x{height}.png, regroupés par dossier de campagne.
Les directives de marque stockées dans docs/brand-guidelines.md sont automatiquement injectées dans chaque bannière via inject-brand-context.cjs, garantissant que les couleurs, les polices et le positionnement du logo restent cohérents sur toutes les variantes sans ressaisie manuelle.
Donnez vos instructions à la compétence Ckmbanner Design en précisant votre accroche de campagne, votre appel à l'action (CTA) et les plateformes cibles (par exemple, couverture Facebook + publication Instagram + en-tête Twitter/X). Elle recherche des références de design, génère trois options de direction artistique par format et livre des fichiers PNG nommés, prêts à être mis en ligne.
Fournissez votre texte publicitaire et vos éléments de marque. La compétence Ckmbanner Design produit une paire leaderboard (728×90) et rectangle moyen (300×250), en maintenant la zone de texte en dessous de 20 % pour respecter les politiques de Meta et Google, puis exporte des PNG compressés prêts à être téléversés directement sur votre plateforme publicitaire.
Décrivez le produit ou le message ainsi que l'ambiance visuelle souhaitée. La compétence Ckmbanner Design génère une image héros plein format en 1920×600–1080 avec une typographie superposée, optimisée pour le recadrage responsive, et exporte un PNG haute résolution prêt à intégrer dans votre interface.
Spécifiez les dimensions physiques et la compétence génère un fichier CMJN à 300 DPI avec un fond perdu de 3 à 5 mm — adapté pour être remis directement à un imprimeur. Les options de style vont des mises en page éditoriales percutantes aux traitements rétro/vintage selon le type d'événement.
ai-multimodal (Gemini 2.5 Flash Image pour les sorties 2K ; Gemini 3 Pro Image Preview pour les sorties 4K).ui-ux-pro-max — Fournit l'intelligence de conception pour les décisions de direction artistique.frontend-design — Génère les mises en page de bannières en HTML/CSS.ai-artist — Fournit plus de 6 000 exemples de références de prompts pour la génération d'images.chrome-devtools — Capture des bannières HTML en PNG aux dimensions exactes de la plateforme.ai-multimodal — Gère la génération d'images et l'affichage des aperçus exportés.npx clawhub@latest install banner-designnpx clawhub@latest install banner-designPrérequis
Se connecter pour écrire un avis
Aucun avis pour l'instant. Soyez le premier à partager votre expérience !