banner-designpar nextlevelbuilder

Banner Design Skill.

Un skill Claude Code et Codex pour le travail d'image : bannières pour les réseaux sociaux, publicités, en-têtes de site web et supports imprimés.

Images et art génératif
Image

Télécharger OpenDesign Voir le guide d'utilisation

nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/banner-design/SKILL.mdSKILL.md

--- name: banner-design description: Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, … --- ## When to Activate ## Workflow ## Art Direction Styles (Top 10) ## Design Rules ## Security

Entête et titres de section lus depuis le fichier source le 14/09/2026 · 7 010 caractères au total

01 Ce qu'il fait

Ce que fait le skill banner-design dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Conçoit des bannières pour les couvertures de réseaux sociaux, les campagnes publicitaires, les héros de site web et l'impression en générant plusieurs options de direction artistique en HTML/CSS. Recueille les exigences via des questions structurées (plateforme, contenu, marque, style, quantité), s'appuie sur un guide intégré de tailles et de zones de sécurité, et exporte des PNG au pixel près aux dimensions exactes de la plateforme.

Prend en charge 22 styles de direction artistique, dont minimaliste, dégradé, typographie audacieuse, à base de photo, géométrique, glassmorphisme et néon. Gère Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, et des formats personnalisés. Propose par défaut 3 options par demande. Utilise des ressources fournies par l'utilisateur, des visuels construits en CSS, ou des arrière-plans générés en option — n'invente jamais de règles de marque. Ne gère pas le montage vidéo, la conception complète de site web, ni la production d'impression.

Ce qu'il produit

Fichiers image PNG aux dimensions exactes de la plateforme, exportés vers assets/banners/{campaign}/ avec un nommage en kebab-case
Code source HTML/CSS pour chaque variante de bannière lorsque la capture d'image n'est pas disponible

Voir l'exemple de prompt ↗

Fonctionnement

01
Recueillir les exigences via des questions structurées
Recueille l'objectif (couverture sociale, publicité, héros, impression), la plateforme ou des dimensions personnalisées, le contenu (titre, sous-texte, CTA, logo), les directives de marque, la préférence de style, et la quantité (3 options par défaut).
02
Rechercher la direction artistique et les zones de sécurité
Lit la référence intégrée banner-sizes-and-styles.md pour le format cible, les zones de sécurité et les styles adaptés.
03
Concevoir chaque option en HTML/CSS
Crée des bannières aux dimensions exactes de la plateforme en respectant les règles de zone de sécurité (contenu critique dans les 70–80% centraux), en utilisant au maximum 2 polices, un seul CTA, et un contraste de texte de 4.5:1.
04
Choisir la source visuelle par option
Privilégie les ressources fournies par l'utilisateur, utilise des visuels construits en CSS (dégradés, formes géométriques) pour des résultats sans dépendance, ou génère éventuellement des arrière-plans au ratio d'aspect cible si l'environnement d'exécution le permet.
05
Exporter les bannières en images PNG
Prévisualise chaque bannière dans le navigateur à la fenêtre d'affichage exacte, la capture en PNG avec une fonctionnalité de capture d'écran standard, et vérifie les dimensions en pixels, le recadrage de la zone de sécurité, le chargement des polices et la qualité de l'image.
06
Présenter les options avec justification
Affiche toutes les images exportées côte à côte avec le nom du style de direction artistique, un aperçu, la justification clé du design, le chemin du fichier et les dimensions.

02 Trouvez celui qui vous convient

Quand utiliser le skill banner-design

Utilisez le skill banner-design dans Claude Code ou Codex lorsque le travail concerne ce type d'image. L'adéquation et les limites ci-dessous sont tirées du fichier propre du skill.

Bon choix

Création de couvertures ou d'en-têtes pour les réseaux sociaux comme Facebook, Twitter/X, LinkedIn, YouTube et Instagram
Conception de bannières publicitaires ou d'annonces display pour Google Ads et d'autres plateformes publicitaires
Design visuel de section hero de site web aux dimensions standard ou personnalisées
Design de bannière événementielle ou imprimée avec sortie CMJN et spécifications de fond perdu
Génération d'assets créatifs pour des campagnes nécessitant plusieurs variations de direction artistique

Connaître les limites

Montage vidéo ou motion design pour bannières

Quoi fournir

Dimensions de plateforme ou personnaliséesPrécise la plateforme sociale cible (Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Ads) ou fournit des dimensions exactes en pixels pour des formats personnalisés.
Éléments de contenuFournit le titre, le texte de soutien, le texte de l'appel à l'action et les exigences de placement du logo pour la composition de la bannière.
Guidelines de marque et assetsFournit les couleurs de marque existantes, les spécifications typographiques, les fichiers de logo et toute autre indication de marque vérifiée à appliquer.
Préférence de direction artistiqueIndique le style préféré parmi 22 options (minimaliste, dégradé, typographie audacieuse, géométrique, glassmorphism, néon, etc.) ou demande des recommandations de style.

03 Dans le skill

Règles que le skill banner-design donne à Claude Code et Codex

6 instructions concrètes, valeurs par défaut et limites que SKILL.md définit pour l'agent — la partie du fichier qui change le résultat.

Par défaut, 3 options de direction artistique
Génère 3 options de design par requête, sauf si l'utilisateur précise une quantité différente lors du recueil des besoins.
Maximum 2 polices et 1 CTA par bannière
Utilise au maximum 2 polices et inclut un seul appel à l'action, positionné en bas à droite avec une hauteur minimale de 44px et un verbe d'action.
Ne jamais inventer de guidelines de marque
Applique uniquement les règles, couleurs, logos et typographies de marque fournis ou vérifiés par l'utilisateur. Ne fabrique pas de spécifications de marque.
Maintenir un ratio de texte inférieur à 20 % pour les publicités
Limite la couverture de texte à moins de 20 % de la zone de la bannière pour les formats publicitaires, car Meta pénalise les publicités display avec trop de texte.
Spécifications d'impression : 300 DPI, CMJN, fond perdu de 3-5 mm
Produit des bannières imprimées à une résolution de 300 DPI en espace couleur CMJN avec des marges de fond perdu de 3–5 mm pour un rendu professionnel.
Utiliser la convention de nommage de fichiers kebab-case
Nomme les fichiers exportés selon {style}-{width}x{height}.{ext} en kebab-case, en préfixant éventuellement les campagnes sensibles au temps par {YYMMDD}-.

04 Mettez-le en pratique

Installer banner-design dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter banner-design à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill banner-design

Forme générique de la CLI skills pour .claude/skills/banner-design/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au Skill une première tâche de travail d'image

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Design 3 LinkedIn cover banners for our Q2 product launch. The headline is "Ship faster with AI-powered workflows," subtext "Join 10,000+ teams building better software," and CTA "Start free trial." Use our logo from assets/logo.svg, brand colors #0066FF (primary) and #00CC88 (accent), and Inter font family. Show minimalist, gradient, and bold typography options at 1584×396.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Vérifiez que les dimensions du PNG exporté correspondent exactement aux spécifications de taille de la plateforme de référence
Confirmez que la taille du fichier ne dépasse pas les limites de la plateforme, en optimisant ou en réduisant la qualité si nécessaire

Dans OpenDesign, importez banner-design depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: nextlevelbuilder
Repository: github.com/nextlevelbuilder/ui-ux-pro-max-skill Branche main
Fichier du skill: .claude/skills/banner-design/SKILL.md Somme de contrôle du contenu enregistrée à la vérification ; commit 7f69fed
License: MIT D'après LICENSE ; SKILL.md indique « MIT ».
Étoiles du dépôt: 127 450 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt nextlevelbuilder/ui-ux-pro-max-skill, qui contient 7 skills dans ce catalogue. Il ne s'agit pas d'une note ni d'un compteur d'usage pour banner-design.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Quand l'activerListe les déclencheurs : demandes de bannière/couverture/en-tête, réseaux sociaux, publicités, sections hero, événements, campagnes créatives
Ressources disponiblesWorkflow autonome utilisant une référence de tailles intégrée ; la recherche navigateur et la génération d'images sont optionnelles
WorkflowProcessus en cinq étapes, de la collecte des exigences à la recherche, la conception, l'export et l'itération
Étape 1 : collecte des exigences (AskUserQuestion)Recueille l'objectif, la plateforme, le contenu, la marque, la préférence de style et la quantité via des questions structurées
Étape 2 : recherche et direction artistiqueLit la référence de tailles, recherche éventuellement des exemples, sélectionne 2 à 3 directions artistiques complémentaires
Étape 3 : conception et génération d'optionsCrée des bannières HTML/CSS aux dimensions exactes avec zones de sécurité, choisit la source visuelle, compose la version finale
Étape 4 : export des bannières en imagesPrévisualise dans le navigateur, capture en PNG, vérifie les dimensions et la qualité, optimise si nécessaire
Étape 5 : présentation des options et itérationAffiche toutes les variantes avec justification et chemins de fichiers, itère selon les retours
Référence rapide des tailles de bannièresTableau des tailles courantes par plateforme : Facebook, Twitter, LinkedIn, YouTube, Instagram, Google, hero de site web
Styles de direction artistique (Top 10)Tableau de 10 styles avec cas d'usage optimaux et éléments clés ; 22 au total dans la référence
Règles de conceptionZones de sécurité, placement du CTA, limites typographiques, ratio de texte, spécifications d'impression, règles d'application de marque
SécuritéGarde-fous standard : pas d'exposition des mécanismes internes du skill, refus explicites hors périmètre, pas d'exposition de données, limites de rôle

Description du skill lui-même

Concevez des bannières pour les réseaux sociaux, les publicités, les en-têtes de sites web, les assets créatifs et l'impression. Plusieurs options de direction artistique avec visuels générés ou fournis en option. Actions : design, create, generate banner. Plateformes : Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, en-tête de site web, impression. Styles : minimaliste, dégradé, typographie audacieuse, photo, illustration, géométrique, rétro, glassmorphism, 3D, néon, bichromie, éditorial, collage.

Description en en-tête de SKILL.md. Le fichier complet fait environ 7 010 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill banner-design

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Ce skill nécessite-t-il des outils de génération d'images ou de navigateur externes ?

Non. Le workflow est autonome et utilise des visuels construits en CSS (dégradés, formes géométriques, typographie) pour des résultats sans dépendance. La recherche navigateur, la génération d'images et les outils de capture d'écran sont des capacités optionnelles qui améliorent le résultat lorsqu'elles sont disponibles, mais ne sont pas requises.

Banner Design

Exécutez banner-design sur une vraie tâche de création d'image.

Téléchargez OpenDesign, importez banner-design depuis son lien SKILL.md, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills