design-systemdi nextlevelbuilder

Design System Skill.

Uno skill per Claude Code e Codex dedicato a brand e design system: token di design a tre livelli, specifiche dei componenti e generazione di slide.

Brand e design system
Design system

Scarica OpenDesign Guida all'uso

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

--- name: design-system description: Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations. --- ## When to Use ## Token Architecture ## Script Paths ## Quick Start ## Component Spec Pattern ## Scripts

Frontespizio e intestazioni di sezione letti dal file upstream il 14/09/2026 · 7.414 caratteri in totale

01 Cosa fa

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

Genera architetture di token di design a tre livelli (primitivo → semantico → componente), specifiche dei componenti e slide di presentazione conformi al brand. I token primitivi definiscono valori grezzi come --color-blue-600. I token semantici li alias-ano per finalità (--color-primary). I token dei componenti specificano l'uso per singolo componente (--button-bg).

La skill fornisce script di generazione e validazione per variabili CSS, integrazione del tema Tailwind e un sistema di slide contestuale che utilizza la ricerca BM25 su 15 strutture di deck, 25 layout e archi emotivi sparkline di Duarte. Tutte le slide devono importare design-tokens.css e utilizzare esclusivamente variabili CSS. Chart.js è richiesto per la visualizzazione dei dati. Supporta il recupero di immagini da Pexels e Unsplash.

Che cosa produce

Report di validazione dei token che identifica i valori hardcoded nel codice sorgente che dovrebbero fare riferimento a token

Vedi l'esempio di prompt ↗

Come funziona

01
Caricare il Riferimento all'Architettura dei Token
La skill carica references/token-architecture.md per stabilire la struttura a tre livelli dei token prima di generarli o validarli.
02
Generare CSS da una Configurazione JSON
Esegua generate-tokens.cjs con un file di configurazione JSON per produrre un file CSS con la struttura dei token a tre livelli come variabili CSS.
03
Cercare Strategie di Slide per Obiettivo
Utilizzare la ricerca BM25 tramite search-slides.py per trovare strutture di deck corrispondenti, archi emotivi e sparkline beat da slide-strategies.csv, filtrando opzionalmente per dominio (copy o chart) e posizione contestuale.
04
Applicare il Flusso Decisionale Contestuale
Analizzare l'obiettivo, interrogare slide-layout-logic.csv per layout e flag break_pattern, slide-typography.csv per la scala tipografica, slide-color-logic.csv per il trattamento colore e slide-backgrounds.csv per la categoria immagine.
05
Generare HTML con Design Token
Creare l'HTML della slide che importa assets/design-tokens.css, utilizza var() per tutto lo stile, include Chart.js per i grafici e aggiunge classi di navigazione e animazione da slide-animations.css.
06
Validare la Conformità dei Token
Eseguire slide-token-validator.py per verificare che l'HTML della slide generata utilizzi esclusivamente variabili CSS e non contenga valori hardcoded di colore, font o spaziatura.

02 Trova la tua applicazione

Quando usare la skill design-system

Usa la skill design-system in Claude Code o Codex quando il lavoro riguarda brand e design system di questo tipo. Idoneità e limiti sono presi dal file della skill stessa.

Buona applicazione

Creazione di sistemi di design token con architettura a tre livelli per il cambio tema e la personalizzazione dei componenti
Definizione delle specifiche di stato dei componenti con varianti hover, active e disabled
Generazione di slide di presentazione conformi al brand con selezione contestuale del layout e pianificazione dell'arco emotivo
Conversione delle specifiche di design in configurazione del tema Tailwind utilizzando i token dei componenti
Handoff design-to-code con scale sistematiche di spaziatura e tipografia

Conosci i limiti

Non sono ammessi valori hardcoded di colore, font o spaziatura; tutto lo stile deve utilizzare variabili CSS da design-tokens.css

Cosa fornire

Documento delle linee guida del branddocs/brand-guidelines.md fornisce l'identità di brand, il tono di voce e le definizioni di colore che informano l'estrazione dei token primitivi.
Directory di origine per la validazioneUn percorso di directory del progetto che validate-tokens.cjs analizza per individuare valori hardcoded che dovrebbero invece utilizzare i token.

03 Dentro la skill

Regole che la Skill design-system 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.

Non Utilizzare Mai Valori Hex Grezzi nei Componenti
I componenti devono sempre fare riferimento ai token tramite variabili CSS, senza mai hardcodare direttamente i valori di colore.
Tutte le Slide Devono Importare design-tokens.css
Ogni file HTML della slide deve importare assets/design-tokens.css come unica fonte di verità e utilizzare var() per tutte le proprietà di stile.
Utilizzare Chart.js per la Visualizzazione dei Dati
I grafici devono essere renderizzati con Chart.js (versione 4.4.1 o successiva), non con barre solo CSS o altri approcci.
Percorsi degli Script Relativi alla Directory di SKILL.md
Percorsi di script come scripts/generate-tokens.cjs sono relativi alla directory contenente SKILL.md, non alla root del progetto.
Usare il formato HSL per il controllo dell'opacità
I valori dei token devono usare il formato colore HSL per consentire regolazioni dell'opacità senza duplicare le definizioni dei token.
Interruzioni di pattern alle posizioni 1/3 e 2/3
I deck premium alternano le emozioni tra "What Is" (frustrazione) e "What Could Be" (speranza), con interruzioni di pattern calcolate a 1/3 e 2/3 delle posizioni del deck seguendo il metodo sparkline di Duarte.
Le slide devono concentrarsi sulla persuasione
Tutte le slide generate devono includere la navigazione (freccie da tastiera, click, barra di avanzamento), centrare il contenuto e concentrarsi su obiettivi di persuasione o conversione.
Documentare lo scopo di ogni token
Ogni definizione di token deve includere una documentazione che spieghi il suo scopo previsto nel sistema.

04 Mettila al lavoro

Installare design-system in Claude Code o Codex

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

Aggiungere design-system 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-system

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

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

Adatta questo prompt con i tuoi contenuti e vincoli, poi eseguilo in Claude Code o Codex.

Example prompt

/slides:create "10-slide investor pitch for ClaudeKit Marketing"

Fonte: esempio SKILL.md (testuale).

Verifica il primo risultato

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

Verificare che il tag script di Chart.js sia presente e che i grafici usino il costruttore Chart.js, non un rendering solo CSS
Verificare che le specifiche dei componenti seguano lo schema della tabella di stato con colonne default, hover, active e disabled
Rivedere l'implementazione di riferimento in assets/designs/slides/claudekit-pitch-251223.html per la completezza delle funzionalità

In OpenDesign importa design-system dal 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/design-system/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 è un punteggio o conteggio di utilizzo per design-system.
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 usarloDesign token, specifiche dei componenti, variabili CSS, scale di spaziatura, handoff design-to-code, configurazione Tailwind, generazione di slide
Architettura dei tokenStruttura a tre livelli: valori primitivi grezzi, alias semantici per lo scopo, token specifici del componente con esempi di variabili CSS
Percorsi degli scriptPercorsi degli script relativi alla directory di SKILL.md; directory di lavoro nella root del progetto per l'accesso ai file
Avvio rapidoComandi per generare token da una configurazione JSON e validare l'uso dei token nelle directory di origine
RiferimentiSette file di riferimento che coprono architettura, token primitivi/semantici/di componente, specifiche, stati, varianti, integrazione Tailwind
Schema delle specifiche dei componentiStruttura a tabella per definire le proprietà dei componenti negli stati default, hover, active, disabled
ScriptCinque script: generazione dei token, validazione, ricerca slide BM25, validazione dei token delle slide, recupero delle immagini
TemplateTemplate JSON iniziale con struttura a tre livelli dei token
IntegrazioneEstrae i primitivi dal brand, alimenta i token dei componenti verso Tailwind; dipende dalle skill brand e ui-styling
Sistema di slidePresentazioni conformi al brand che usano design token, Chart.js, CSV di decisione contestuali, ricerca BM25
Fonte di veritàLe linee guida del brand, design-tokens.json e .css, slide-animations.css definiscono l'intero stile delle slide
Ricerca slide (BM25)Ricerca dei template di slide per obiettivo con filtri di dominio e parametri contestuali (posizione, totale, emozione precedente)

Descrizione della skill

Architettura dei token, specifiche dei componenti e generazione di slide. Token a tre livelli (primitivo→semantico→componente), variabili CSS, scale di spaziatura/tipografia, specifiche dei componenti, creazione strategica di slide. Da usare per design token, design sistematico, presentazioni conformi al brand.

Descrizione dal front-matter di SKILL.md. Il file completo è di circa 7.414 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande sullo skill design-system

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

Quali agenti dovrebbero usare questa skill?

Lo skill indica ui-ux-designer e frontend-developer come agenti principali. Si integra con lo skill brand (per estrarre i primitivi dai colori e dalla tipografia del brand) e con lo skill ui-styling (per fornire i token dei componenti alla configurazione di Tailwind).

Design System

Esegui design-system su un Task Reale di Lavoro su Brand e Design System.

Scarica OpenDesign, importa design-system dal suo link SKILL.md, incolla il prompt qui 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-system

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

Nelle parole della skill

Come funziona

Quando usare la skill design-system

Buona applicazione

Conosci i limiti

Cosa fornire

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

Non Utilizzare Mai Valori Hex Grezzi nei Componenti

Tutte le Slide Devono Importare design-tokens.css

Utilizzare Chart.js per la Visualizzazione dei Dati

Percorsi degli Script Relativi alla Directory di SKILL.md

Usare il formato HSL per il controllo dell'opacità

Interruzioni di pattern alle posizioni 1/3 e 2/3

Le slide devono concentrarsi sulla persuasione

Documentare lo scopo di ogni token