Nelle parole della skill
Questo skill costruisce design system scalabili con design token, infrastruttura di theming e pattern di architettura dei componenti. Crea gerarchie di token a tre livelli — token primitivi per i valori grezzi, token semantici per il significato contestuale e token di componente per l'uso specifico — poi implementa il cambio di tema con CSS custom properties e React context provider.
Lo skill gestisce la generazione multi-piattaforma di token per CSS, iOS e Android, stabilisce workflow da Figma al codice con Style Dictionary, e progetta librerie di componenti usando compound component, componenti polimorfici, varianti, slot e pattern headless UI. Rileva le preferenze di sistema come prefers-color-scheme e le modalità di riduzione del movimento.
Che cosa produce
- File di token multi-piattaforma generati per CSS, iOS e Android
- Librerie di componenti con sistemi di varianti e dimensioni
- Documentazione e linee guida del design system
Come funziona
- 01Definire i Token Primitivi
Creare token di valore grezzo per colori, dimensioni e font che fungono da livello di base. Sono valori letterali come codici hex e misure in pixel.
- 02Costruire il Livello di Token Semantici
Fare riferimento ai token primitivi per creare token contestuali come text-primary, surface-elevated e border-default, che veicolano un significato piuttosto che una descrizione visiva.
- 03Creare Token Specifici per Componente
Definire token per l'uso specifico di un componente, come button-bg e card-border, che fanno riferimento ai token semantici.