ui-design-systemdi Alireza Rezvani

UI Design System Skill.

Uno skill per Claude Code e Codex per il lavoro di brand e design system: token di design, documentazione dei componenti, calcoli responsive e handoff per gli sviluppatori.

Brand e design system
Design system

Scarica OpenDesign Guida all'uso

alirezarezvani/claude-skills · product-team/skills/ui-design-system/SKILL.mdSKILL.md

--- name: ui-design-system description: UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use when creating design systems, generating design tokens, maintaining visual consistency, or facilitating design-dev collaboration and developer handoff. --- ## Trigger Terms ## Workflows ## Quick Reference Tables ## Knowledge Base ## Validation Checklist

Front matter e intestazioni di sezione letti dal file originale il 14/09/2026 · 10.759 caratteri in totale

01 Cosa fa

Cosa Fa la Skill ui-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

Un toolkit per il design system che trasforma un colore del brand in un set completo di token. design_token_generator.py prende un colore hex più un preset moderno, classico o giocoso e restituisce colori, tipografia, spaziatura 8pt, dimensioni, bordi, ombre, animazioni, breakpoint e livelli z-index come json, css, scss o riepilogo.

Quattro workflow coprono poi l'architettura dei componenti dagli atomi ai template, i breakpoint responsive con tipografia fluida clamp(), la validazione del contrasto WCAG e il passaggio agli sviluppatori in variabili CSS React, configurazione Tailwind o styled-components, più la sincronizzazione con Figma tramite Tokens Studio. È pensato per designer UI senior che devono documentare token e componenti per un team di sviluppo.

Che cosa produce

Documentazione dell'API dei componenti che copre props, opzioni di variante, stati e requisiti di accessibilità.
Snippet di integrazione per React con variabili CSS, una configurazione tema Tailwind e styled-components.
Token di colore semantici che portano con sé i propri colori di contrasto.

Vedi l'esempio di prompt ↗

Come funziona

01
Correggere il Colore del Brand
Il workflow si apre identificando il colore primario del brand, che il file richiede in formato hex, poiché ogni categoria generata deriva da esso.
02
Eseguire il Generatore di Token
Una singola chiamata allo script produce l'intero sistema: colore, preset di stile e formato di output sono i tre argomenti che accetta.
03
Mappare i Token su una Gerarchia di Componenti
I componenti sono organizzati in atomi, molecole, organismi e template, poi ciascuno viene collegato ai gruppi di token che utilizza.
04
Impostare Breakpoint e Tipografia Fluida
Sei breakpoint vanno da xs a 2xl, e la tipografia fluida è espressa con una formula clamp tra una dimensione minima e massima.
05
Collegare i Token al Codebase
Il workflow di handoff mostra il file dei token importato direttamente, un tema Tailwind costruito a partire dal JSON, e un tema styled-components che legge le chiavi dei token.
06
Sincronizzare Figma e Approvare
I token entrano in Figma tramite il plugin Tokens Studio, e la checklist di handoff conferma che la pipeline, la libreria dei componenti e la documentazione sono complete.

02 Trova la tua applicazione

Quando usare la skill ui-design-system

Usa lo skill ui-design-system in Claude Code o Codex quando il lavoro è di questo tipo su brand e design-system. Idoneità e limiti sotto sono presi dal file dello skill stesso.

Buona applicazione

Ha un unico colore di brand e ha bisogno di un sistema completo di token derivato da esso.
Sta strutturando una libreria di componenti e vuole i token mappati su atomi, molecole, organismi e template.
Ha bisogno che vengano calcolati per lei breakpoint, scale tipografiche fluide o valori di spaziatura responsive.
Si sta preparando a consegnare un set di token completato al team di sviluppo.

Conosci i limiti

I preset di stile non sono un restyling profondo: la scelta del tema modifica principalmente le font stack, il raggio predefinito e il carattere delle ombre, ad esempio angoli arrotondati di 8px su modern contro 4px su classic.

Cosa fornire

Un preset di stileScelga una delle tre direzioni, modern, classic o playful, poiché il preset cambia le famiglie di font, il raggio degli angoli e il trattamento delle ombre in tutto il set generato.
Il formato di outputIndichi quale formato utilizza il progetto ricevente: json, css, scss o la vista di riepilogo, perché questo determina cosa produce l'handoff.

03 Dentro la skill

Regole che lo Skill ui-design-system Fornisce a Claude Code e Codex

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

Colore di Brand Predefinito
Quando non viene passato alcun colore, il generatore utilizza come fallback #0066CC come colore di brand primario, così l'output viene comunque renderizzato senza un argomento hex.
La Spaziatura È una Griglia da 8pt
I token di spaziatura seguono una scala basata su una griglia da 8pt che va da 0 a 64, con alias semantici sovrapposti ai passaggi numerici.
Nessun Valore Hardcoded
Le implementazioni dei componenti devono fare riferimento solo ai design token; valori letterali in pixel o hex nei componenti vengono considerati un controllo fallito.
Ogni Variante Viene Fornita
I componenti devono implementare l'intero set di varianti, primary, secondary e ghost, e non un sottoinsieme.
Le Varianti di Dimensione Hanno Dimensioni Fisse
La dimensione small è definita come altezza 32px, padding orizzontale 12px e dimensione font 14px, con md e lg che scalano a partire da questi valori.
Il Contrasto Deve Superare il WCAG AA
I colori generati vengono validati a 4,5:1 per il testo normale e 3:1 per il testo grande, con i colori semantici tenuti a definire valori di contrasto.
I Target Touch Rimangono Sufficientemente Grandi
Gli elementi interattivi devono raggiungere un target touch minimo di 44 per 44 pixel nella checklist di accessibilità.

04 Mettila al lavoro

Installa ui-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.

Aggiungi ui-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/alirezarezvani/claude-skills --skill ui-design-system

Forma generica CLI di skills per product-team/skills/ui-design-system/SKILL.md; il repository potrebbe 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

We have settled on [#0066CC] as the brand primary and I need a complete token set for our SCSS codebase, exported as variables we can import. Please generate the tokens in the classic style, document the Button, Input and Card component APIs with their variants and states, and check that the semantic colors clear WCAG AA before we hand off to the developers.

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:

Confermare che ogni categoria di token sia stata generata e non solo un sottoinsieme.
Verificare che gli stati hover, active, focus e disabled funzionino effettivamente su ogni componente.
Controllare che gli indicatori di focus siano visibili e che vengano usati elementi HTML semantici.
Assicurarsi che lo strumento di design sia stato sincronizzato prima che il passaggio ai developer venga dichiarato concluso.
Confermare che sia configurata una pipeline di build in modo che i token esportati raggiungano il codice.

In OpenDesign importi ui-design-system dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi lo selezioni 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: Alireza Rezvani
Repository: github.com/alirezarezvani/claude-skills Branch main
File della skill: product-team/skills/ui-design-system/SKILL.md Checksum del contenuto registrato alla verifica; commit 19392f7
License: MIT Da LICENSE.
Stelle del repository: 25.934 Snapshot GitHub scattata il 14/09/2026 per l'intero repository alirezarezvani/claude-skills, che contiene 5 skill presenti in questo catalogo. Non è un punteggio o un conteggio di utilizzo per ui-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

Termini TriggerFrasi tra virgolette come generate design tokens che dovrebbero indirizzare una richiesta a questo skill.
WorkflowQuattro workflow numerati: generazione token, sistema di componenti, design responsivo, handoff agli sviluppatori.
Riferimento StrumentoArgomenti, valori predefiniti e categorie di output per design_token_generator.py, con esempi di chiamata.
Tabelle di Riferimento RapidoPassi della scala colore, scala tipografica 1.25, livelli WCAG e differenze tra i preset di stile.
Base di ConoscenzaQuattro guide di riferimento: token-generation, component-architecture, responsive-calculations, developer-handoff.
Checklist di ValidazioneListe di controllo per generazione token, sistema di componenti, accessibilità e handoff agli sviluppatori.

Descrizione della skill

Toolkit di design system per Senior UI Designer che include generazione di design token, documentazione dei componenti, calcoli per il design responsive e strumenti di handoff per gli sviluppatori. Da usare per creare design system, generare design token, mantenere la coerenza visiva o facilitare la collaborazione design-dev e l'handoff verso gli sviluppatori.

Descrizione del front-matter dal file SKILL.md. Il file completo contiene circa 10.759 caratteri. Leggi il file completo su GitHub.

06 Prima di installare

Domande Sullo Skill ui-design-system

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

Cosa mi serve per eseguire il generatore?

Un colore brand in hex e una scelta di stile, passati direttamente sulla riga di comando insieme al formato di output. Il file mostra chiamate come una classic palette con output CSS, quindi non serve configurare altro prima.

Quali formati di output posso ottenere?

JSON è il formato predefinito e lo stesso script genera anche custom properties CSS, variabili SCSS o una vista di riepilogo. Gli esempi reindirizzano l'output SCSS in un partial in modo che possa essere importato direttamente.

Come funziona la sincronizzazione con Figma?

Installa il plugin Tokens Studio e importa il JSON generato, dopodiché i token si sincronizzano automaticamente con gli stili di Figma. Lo stesso workflow di handoff copre anche l'integrazione con React, Tailwind e styled-components.

A quale livello di contrasto lavora questo skill?

La tabella di riferimento definisce sia AA che AAA: AAA richiede 7:1 per il testo normale e 4.5:1 per il testo grande, mentre AA ha l'obiettivo più leggero di 4.5:1 e 3:1. Per testo grande si intende almeno 18pt regular o 14pt bold.

Sistema di Design UI

Esegui ui-design-system su un vero task di lavoro su brand e design-system.

Scarica OpenDesign, importa ui-design-system dal link nel file 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/alirezarezvani/claude-skills --skill ui-design-system