banner-designdi nextlevelbuilder

Banner Design Skill.

Uno skill per Claude Code e Codex dedicato alle immagini: banner per social media, annunci, hero di siti web e stampa.

Immagini e arte generativa
Image

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

Front matter e intestazioni di sezione lette dal file upstream il 14-09-2026 · 7.010 caratteri in totale

01 Cosa fa

Cosa fa lo Skill banner-design in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Progetta banner per copertine social, campagne pubblicitarie, hero delle pagine web e stampa, generando più opzioni di art direction in HTML/CSS. Raccoglie i requisiti tramite domande strutturate (piattaforma, contenuto, brand, stile, quantità), fa riferimento alle linee guida incluse su dimensioni e safe-zone, ed esporta PNG perfetti al pixel nelle dimensioni esatte della piattaforma.

Supporta 22 stili di art direction tra cui minimalista, gradiente, tipografia bold, basato su foto, geometrico, glassmorphism e neon. Gestisce Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display e formati personalizzati. Predefinito su 3 opzioni per richiesta. Utilizza asset forniti dall'utente, elementi visivi realizzati in CSS o sfondi generati opzionali—non inventa mai le regole del brand. Non gestisce editing video, design completo di siti web o produzione di stampa.

Che cosa produce

File immagine PNG nelle dimensioni esatte della piattaforma, esportati in assets/banners/{campaign}/ con naming kebab-case
Codice sorgente HTML/CSS per ogni variante di banner quando l'acquisizione dell'immagine non è disponibile

Vedi l'esempio di prompt ↗

Come funziona

01
Raccogliere i Requisiti Tramite Domande Strutturate
Raccoglie lo scopo (copertina social, ad, hero, stampa), la piattaforma o le dimensioni personalizzate, il contenuto (titolo, sottotesto, CTA, logo), le linee guida del brand, la preferenza di stile e la quantità (predefinita 3 opzioni).
02
Ricercare Art Direction e Safe Zone
Legge il riferimento incluso banner-sizes-and-styles.md per il formato target, le safe zone e gli stili adatti.
03
Progettare Ogni Opzione in HTML/CSS
Crea banner nelle dimensioni esatte della piattaforma con regole di safe-zone (contenuto critico nel 70–80% centrale), usando al massimo 2 font, una singola CTA e un contrasto testo di 4.5:1.
04
Scegliere la Fonte Visiva per Ogni Opzione
Preferisce gli asset forniti dall'utente, utilizza elementi visivi realizzati in CSS (gradienti, forme geometriche) per risultati senza dipendenze, oppure genera opzionalmente sfondi al rapporto d'aspetto target se il runtime lo supporta.
05
Esportare i Banner come Immagini PNG
Visualizza in anteprima ogni banner nel browser alle dimensioni esatte del viewport, lo acquisisce come PNG con la funzionalità di screenshot standard e verifica le dimensioni in pixel, il ritaglio della safe-zone, il caricamento dei font e la qualità dell'immagine.
06
Presentare le Opzioni con la Motivazione
Mostra tutte le immagini esportate fianco a fianco con il nome dello stile di art direction, l'anteprima, la motivazione chiave del design, il percorso del file e le dimensioni.

02 Trova la tua applicazione

Quando usare lo skill banner-design

Usa lo skill banner-design in Claude Code o Codex quando il lavoro riguarda questo tipo di immagini. Ambito e limiti qui sotto sono tratti dal file dello skill.

Buona applicazione

Creazione di copertine o header per social media per piattaforme come Facebook, Twitter/X, LinkedIn, YouTube e Instagram
Progettazione di banner pubblicitari o ad display per Google Ads e altre piattaforme pubblicitarie
Design visivo della sezione hero del sito web in dimensioni standard o personalizzate
Design di banner per eventi o stampa con output CMYK e specifiche di abbondanza
Generazione di asset creativi per campagne che richiedono più varianti di direzione artistica

Conosci i limiti

Editing video o motion graphics per banner

Cosa fornire

Piattaforma o dimensioni personalizzateSpecifica la piattaforma social di destinazione (Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Ads) o fornisce dimensioni in pixel esatte per formati personalizzati.
Elementi del contenutoFornisce titolo, testo di supporto, copy della call-to-action e requisiti di posizionamento del logo per la composizione del banner.
Linee guida e asset del brandFornisce colori del brand esistenti, specifiche tipografiche, file del logo e qualsiasi altra indicazione di brand verificata da applicare.
Preferenza di direzione artisticaIndica lo stile preferito tra 22 opzioni (minimalista, gradiente, tipografia audace, geometrico, glassmorphism, neon, ecc.) o richiede consigli di stile.

03 Dentro la skill

Regole che la Skill banner-design fornisce a Claude Code e Codex

6 istruzioni concrete, valori predefiniti e limiti che SKILL.md imposta per l'agente — la parte del file che cambia il risultato.

Per impostazione predefinita 3 opzioni di direzione artistica
Genera 3 opzioni di design per richiesta, salvo che l'utente specifichi una quantità diversa durante la raccolta dei requisiti.
Massimo 2 caratteri tipografici e 1 CTA per banner
Utilizza al massimo 2 caratteri tipografici e include una singola call-to-action, posizionata in basso a destra con altezza minima di 44px e un verbo d'azione.
Non inventa mai linee guida di brand
Applica solo regole di brand, colori, loghi e tipografia forniti dall'utente o verificati. Non inventa specifiche di brand.
Mantiene il rapporto testuale sotto il 20% per le pubblicità
Limita la copertura testuale a meno del 20% dell'area del banner per i formati pubblicitari, poiché Meta penalizza il testo eccessivo nella pubblicità display.
Specifiche di stampa: 300 DPI, CMYK, abbondanza 3-5mm
Produce banner da stampa a risoluzione 300 DPI in spazio colore CMYK con margini di abbondanza di 3-5mm per un output professionale.
Utilizza la convenzione di denominazione dei file in kebab-case
Denomina i file esportati come {style}-{width}x{height}.{ext} in kebab-case, con l'opzione di aggiungere il prefisso {YYMMDD}- per campagne sensibili al tempo.

04 Mettila al lavoro

Installa banner-design in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi banner-design a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

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

Forma generica CLI skills per .claude/skills/banner-design/SKILL.md; il repository potrebbe documentare un proprio percorso.

Assegna alla Skill un primo compito di lavoro con immagini

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Verifica che le dimensioni del PNG esportato corrispondano esattamente alle specifiche della piattaforma nel riferimento delle dimensioni
Conferma che la dimensione del file non superi i limiti della piattaforma, ottimizzando o riducendo la qualità se necessario

In OpenDesign importa banner-design dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi selezionalo nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: nextlevelbuilder
Repository: github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
File della skill: .claude/skills/banner-design/SKILL.md Checksum del contenuto registrato alla verifica; commit 7f69fed
License: MIT Da LICENSE; SKILL.md indica "MIT".
Stelle del repository: 127.450 Snapshot GitHub del 2026-09-14 per l'intero repository nextlevelbuilder/ui-ux-pro-max-skill, che contiene 7 skill in questo catalogo. Non è una valutazione o un conteggio d'uso per banner-design.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Quando attivarloElenca i trigger: richieste di banner/copertina/header, social media, annunci, sezioni hero, eventi, campagne creative
Risorse disponibiliWorkflow autonomo che utilizza un riferimento dimensioni integrato; la ricerca sul browser e la generazione di immagini sono opzionali
WorkflowProcesso in cinque fasi, dalla raccolta dei requisiti alla ricerca, progettazione, esportazione e iterazione
Fase 1: Raccolta dei requisiti (AskUserQuestion)Raccoglie scopo, piattaforma, contenuto, brand, preferenza di stile e quantità tramite domande strutturate
Fase 2: Ricerca e direzione artisticaLegge il riferimento dimensioni, ricerca opzionalmente esempi, seleziona 2–3 direzioni artistiche complementari
Fase 3: Progettazione e generazione delle opzioniCrea banner HTML/CSS con dimensioni esatte e zone di sicurezza, scelta della fonte visiva, composizione finale
Fase 4: Esportazione dei banner in immaginiAnteprima nel browser, acquisizione PNG, verifica di dimensioni e qualità, ottimizzazione se necessario
Fase 5: Presentazione delle opzioni e iterazioneMostra tutte le varianti con motivazione e percorsi dei file, itera in base al feedback
Riferimento rapido dimensioni bannerTabella delle dimensioni comuni per piattaforma: Facebook, Twitter, LinkedIn, YouTube, Instagram, Google, hero del sito web
Stili di direzione artistica (Top 10)Tabella di 10 stili con casi d'uso migliori ed elementi chiave; i 22 completi sono nel riferimento
Regole di designZone di sicurezza, posizionamento CTA, limiti tipografici, rapporto testo, specifiche di stampa, regole di applicazione del brand
SicurezzaSalvaguardie standard: nessun dettaglio interno dello skill, rifiuti espliciti fuori ambito, nessuna esposizione di dati, limiti di ruolo

Descrizione della skill

Progetta banner per social media, annunci pubblicitari, hero per siti web, asset creativi e stampa. Diverse opzioni di direzione artistica con elementi visuali opzionali generati o forniti. Azioni: design, crea, genera banner. Piattaforme: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, hero per siti web, stampa. Stili: minimalista, gradiente, tipografia audace, basato su foto, illustrato, geometrico, retrò, glassmorphism, 3D, neon, duotono, editoriale, collage.

Descrizione del front-matter da SKILL.md. Il file completo è di circa 7.010 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sullo skill banner-design

Le risposte provengono dal SKILL.md letto il 2026-09-14, non da un'esecuzione registrata.

Questo skill richiede la generazione esterna di immagini o strumenti browser?

No. Il workflow è autonomo e utilizza elementi visivi costruiti in CSS (gradienti, forme geometriche, tipografia) per risultati senza dipendenze. La ricerca sul browser, la generazione di immagini e gli strumenti di screenshot sono capacità opzionali che migliorano il risultato quando disponibili, ma non sono obbligatorie.

Banner Design

Esegui banner-design su un task di lavoro reale con immagini.

Scarica OpenDesign, importa banner-design dal suo link SKILL.md, incolla il prompt sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

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