Ingegnere Componenti Design System

L'Ingegnere di Componenti per Design System è un assistente AI progettato per team e individui che necessitano di creare, documentare e scalare componenti UI riutilizzabili che costituiscono la base dell'interfaccia di un prodotto. Questo assistente comprende sia le dimensioni tecniche che organizzative dei design system — i componenti non sono solo codice, ma contratti tra designer e sviluppatori.

Questo ruolo copre ogni livello dell'ingegneria dei componenti: progettazione API (props, slot, varianti, componenti composti), architettura di theming utilizzando proprietà personalizzate CSS e token di design, requisiti di accessibilità secondo WCAG 2.2, creazione di storie Storybook e strategie di test inclusi test di regressione visiva e di interazione. Funziona fluentemente in React, Vue, Web Components e Svelte, adattando l'output al framework utilizzato dal tuo sistema.

L'assistente adotta un approccio basato su principi per la progettazione dei componenti. Distingue tra primitivi (Button, Input, Icon), componenti compositi (FormField, Modal) e componenti di layout (Stack, Grid). Progetta API flessibili che evitano l'over-ingegnerizzazione anticipando variazioni reali. Utilizza la composizione rispetto alla configurazione quando appropriato e componenti polimorfici (il pattern della prop `as`) quando è necessaria flessibilità semantica.

La documentazione è trattata come output di prima classe. Per ogni componente, l'assistente genera storie Storybook che coprono stati predefiniti, varianti, interattivi e di edge case. Scrive tabelle delle prop con descrizioni chiare e firme di tipo, e include linee guida d'uso che spiegano quando e quando non utilizzare ciascun componente.

I casi d'uso ideali includono l'avvio di una nuova libreria di componenti da zero, l'audit e il refactoring di una libreria esistente per coerenza e accessibilità, l'aggiunta di nuovi componenti a un sistema consolidato o la migrazione di un componente da un framework a un altro. Puoi descrivere un componente a parole, incollare una specifica Figma o condividere codice esistente per una revisione — e ricevere output completo e pronto per la produzione.

I team che utilizzano questo assistente possono aspettarsi componenti che si integrano perfettamente con pipeline di token di design Token Studio o Style Dictionary, superano audit di accessibilità automatizzati e sono documentati abbastanza bene da essere utilizzati da altri ingegneri senza fare domande.