designdi nextlevelbuilder

Design Skill.

Una skill per Claude Code e Codex per il lavoro su brand e design system: identità di brand, design token, stile UI, generazione loghi e programmi di identità aziendale.

Brand e design system

Scarica OpenDesign Guida all'uso

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

--- name: design description: Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, … --- ## When to Use ## Sub-skill Routing ## Script Paths ## Logo Design (Built-in) ## CIP Design (Built-in) ## Slides (Built-in)

Intestazione e titoli di sezione letti dal file upstream il 14/09/2026 · 13.348 caratteri in totale

01 Cosa fa

Cosa fa il design Skill 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

Skill di design unificata che copre identità di marca, design token, styling UI con shadcn/ui e Tailwind, generazione di loghi (55 stili tramite Gemini, Atlas Cloud o MuAPI), programmi di corporate identity con 50 deliverable, presentazioni HTML con Chart.js, design di banner (22 stili di art direction per social, ads, web, print), design di icone (15 stili, output SVG tramite Gemini 3.1 Pro) e design di foto per i social media su Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok e Threads. Instrada verso sub-skill esterne per brand, design-system e ui-styling, fornendo al contempo workflow integrati per logo, CIP, slide, banner, icone e foto social con script Python, generazione AI ed export da HTML a screenshot.

Che cosa produce

Screenshot PNG di banner alle dimensioni esatte della piattaforma, esportati tramite chrome-devtools
File di icone SVG in 15 stili con export multi-size opzionali e varianti in batch
Immagini per i social media alle dimensioni specifiche della piattaforma, archiviate in directory di asset organizzate

Vedi l'esempio di prompt ↗

Come funziona

01
Instrada per Tipo di Attività
La skill instrada identità di marca e voce alla sub-skill brand, token e specifiche a design-system, codice shadcn/ui e Tailwind a ui-styling, e gestisce logo, CIP, slide, banner, icone e foto social con workflow integrati.
02
Genera Loghi con Provider AI
Esegui script Python per cercare tra 55 stili, 30 palette di colori e 25 guide di settore, quindi genera loghi tramite Gemini Nano Banana, Atlas Cloud o MuAPI con sfondi bianchi.
03
Crea Deliverable CIP con Mockup
Genera mockup per programmi di corporate identity per 50 deliverable utilizzando i modelli Gemini Flash o Pro, opzionalmente con overlay del logo, quindi rendi presentazioni HTML dell'output.
04
Creare presentazioni strategiche in HTML
Crea presentazioni con integrazione Chart.js, design token e formule di copywriting caricando il riferimento del workflow di creazione slide.
05
Progettare banner con HTML/CSS
Raccogli i requisiti, effettua ricerche su Pinterest tramite ui-ux-pro-max, progetta banner HTML/CSS con frontend-design e ai-artist/ai-multimodal per le immagini, quindi esporta tramite chrome-devtools alle dimensioni esatte.
06
Esportare e verificare screenshot
Utilizza chrome-devtools o Playwright per catturare screenshot dei design alle dimensioni esatte in pixel con un device scale factor 2x, quindi ispeziona visivamente e correggi i problemi di layout prima dell'esportazione finale.

02 Trova la tua applicazione

Quando usare lo skill design

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

Buona applicazione

Creazione di brand identity package con logo, materiali di corporate identity e presentazioni pitch deck
Progettazione di immagini social multi-piattaforma per Instagram, Facebook, LinkedIn, Twitter, Pinterest e TikTok
Generazione di banner per copertine social, campagne pubblicitarie, header di siti web e materiali stampati
Costruzione di design system con token semantici, configurazione Tailwind e componenti shadcn/ui

Conosci i limiti

Il generatore di icone produce solo output di testo SVG, non file immagine raster

Cosa fornire

Gemini API keyVariabile d'ambiente richiesta per la generazione di loghi, CIP e icone tramite Google AI Studio
MuAPI API key (opzionale)Variabile d'ambiente opzionale per usare MuAPI come provider alternativo di generazione immagini per i loghi
Percorso del file logo per il CIPPercorso di un file logo PNG esistente da sovrapporre ai materiali di corporate identity durante la generazione dei mockup CIP
Requisiti del banner tramite AskUserQuestionScopo, piattaforma, contenuto, linee guida del brand, stile di art direction e quantità raccolti in modo interattivo prima della progettazione del banner
Contesto di brand per le foto socialLinee guida del brand dalla sub-skill brand e design token da design-system per mantenere la coerenza tra le immagini social

03 Dentro la skill

Regole che la skill di design fornisce a Claude Code e Codex

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

Genera sempre i loghi con sfondo bianco
La generazione dei loghi deve produrre immagini di output con sfondo bianco in tutti i casi.
I percorsi degli script sono relativi alla directory della skill
I percorsi degli script in questa skill e nella sua cartella references sono relativi alla directory che contiene SKILL.md, non alla root del progetto.
Chiedi all'utente informazioni sull'anteprima HTML dopo la generazione del logo
Dopo aver generato i loghi, chiedi sempre all'utente tramite AskUserQuestion se desidera una galleria di anteprima HTML e, in caso affermativo, invoca la skill ui-ux-pro-max per crearla.
Correggi direttamente gli script non riusciti
Quando gli script Python falliscono durante l'esecuzione, provare a correggerli direttamente invece di segnalare l'errore.
Utilizzare la sovrapposizione logo raccomandata per il CIP
Quando si generano mockup CIP, utilizzare un file logo esistente con il flag --logo è l'approccio raccomandato.
Il testo del banner deve rimanere sotto il 20% per gli annunci
Per i banner pubblicitari, mantenere la copertura testuale sotto il 20% dell'area totale poiché le piattaforme Meta penalizzano gli annunci con troppo testo.
Utilizzare Python invece di Python3 su Windows
Sui sistemi Windows, sostituire python3 con python in tutti gli esempi di comandi presenti nella skill.
Contenuto critico del banner nelle zone sicure centrali
Posizionare tutto il contenuto critico del banner all'interno della zona sicura centrale del 70-80% per garantire la visibilità su tutte le piattaforme.

04 Mettila al lavoro

Installa 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 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 design

Forma generica della CLI skills per .claude/skills/design/SKILL.md; il repository può documentare un proprio percorso.

Assegna alla Skill un Primo Task di Lavoro su Brand e Design System

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

Starter prompt

Design a complete brand package for [TechFlow], a B2B SaaS startup in the fintech space. Create a minimalist logo with tech-appropriate colors, generate a full corporate identity program including business cards, letterhead, and email signature, then build a 10-slide pitch deck presentation with our Q4 metrics [revenue chart data] and competitive positioning [market analysis]. Export everything with consistent design tokens.

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:

Verificare che le CTA del banner soddisfino il requisito minimo di altezza di 44px e siano posizionate in basso a destra
Assicurarsi che i banner da stampa utilizzino 300 DPI, modalità colore CMYK e includano un abbondaggio di 3-5mm

In OpenDesign importare il design dal suo link SKILL.md: Plugins → Add → Skill → Import from link, quindi selezionarlo 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/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 di utilizzo per 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 usarloElenca i casi d'uso: identità di marca, design token, stile UI, loghi, CIP, presentazioni, banner, foto social, icone
Instradamento Sub-skillInstrada le attività verso skill esterne di brand/design-system/ui-styling o verso i workflow integrati per logo/CIP/slides/banner/social/icon
Percorsi degli scriptSpiega che i percorsi degli script sono relativi alla directory della skill, non alla radice del progetto
Design del logo (integrato)Comandi per cercare tra 55 stili e generare loghi tramite Gemini, Atlas Cloud o MuAPI con sfondi bianchi
Design CIP (integrato)Comandi per cercare tra 50 deliverable e generare mockup di identità aziendale con modelli Flash o Pro
Slide (integrato)Fa riferimento alla creazione strategica di presentazioni HTML con Chart.js e formule di copywriting
Design del banner (integrato)Workflow per progettare 22 stili di direzione artistica utilizzando frontend-design, ai-artist e chrome-devtools per l'esportazione
Design delle icone (integrato)Comandi per generare icone SVG in 15 stili utilizzando l'output solo testuale di Gemini 3.1 Pro
Foto social (integrato)Workflow per il design di immagini social multipiattaforma, dall'HTML all'esportazione screenshot con verifica
WorkflowSequenze per pacchetti di brand completi e creazione di nuovi design system attraverso le sub-skill
PrerequisitiRequisito Python con istruzioni specifiche per Windows su python rispetto a python3
ConfigurazioneVariabili d'ambiente per le chiavi API Gemini e MuAPI più installazione di package Python

Descrizione della skill

"Skill di design completa: identità di marca, token di design, stile UI, generazione loghi (55 stili, Gemini, Atlas Cloud o MuAPI AI), programma di identità aziendale (50 deliverable, mockup CIP), presentazioni HTML (Chart.js), design banner (22 stili, social/ads/web/stampa), design icone (15 stili, SVG, Gemini 3.1 Pro), foto social (HTML→screenshot, multi-piattaforma). Azioni: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Piattaforme: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads."

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

06 Prima di installare

Domande sulla skill design

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

Come eseguo script Python su Windows?

Sostituisci python3 con python in tutti gli esempi di comando. Ad esempio, usa python scripts/logo/search.py invece di python3 scripts/logo/search.py. Lo stesso vale per i comandi pip, dove potrebbe essere necessario python -m pip install.

Design

Esegui design su un brand reale e un task di lavoro sul design-system.

Scarica OpenDesign, importa 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 design

Cosa fa il design Skill in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando usare lo skill design

Buona applicazione

Conosci i limiti

Cosa fornire

Regole che la skill di design fornisce a Claude Code e Codex

Genera sempre i loghi con sfondo bianco

I percorsi degli script sono relativi alla directory della skill

Chiedi all'utente informazioni sull'anteprima HTML dopo la generazione del logo

Correggi direttamente gli script non riusciti

Utilizzare la sovrapposizione logo raccomandata per il CIP

Il testo del banner deve rimanere sotto il 20% per gli annunci

Utilizzare Python invece di Python3 su Windows

Contenuto critico del banner nelle zone sicure centrali