Nelle parole della skill
Genera documentazione di handoff per gli sviluppatori a partire da un design, pensata per i team il cui design è pronto per l'engineering e necessita di una scheda tecnica. Puntalo verso un URL Figma, oppure, in alternativa, una descrizione o uno screenshot, e lavora su specifiche visive, specifiche di interazione, specifiche di contenuto, casi limite e accessibilità.
L'output è una Design Handoff Spec in Markdown con sezioni per panoramica, layout, design token utilizzati, componenti, stati e interazioni, comportamento responsive, casi limite, animazione e motion, e note sull'accessibilità. I suoi quattro principi dichiarati sono: specificare tutto invece di presumere, fare riferimento ai token invece che a valori grezzi, mostrare ogni stato e spiegare il perché di un comportamento.
Che cosa produce
- Una tabella dei design token che elenca ogni token, il suo valore e il suo utilizzo.
- Una tabella dei componenti che indica la variante, le props e le note sui comportamenti speciali di ciascun componente.
- Una tabella di animazione e motion che registra elemento, trigger, animazione, durata ed easing.
Come funziona
- 01Risolvere la Fonte del Design
Un URL di Figma significa che il design viene estratto da Figma; senza di esso, la skill lavora a partire da una descrizione scritta o da uno screenshot.
- 02Specificare gli Elementi Visivi
Padding, margini e larghezze esatti, riferimenti ai design token per colori, tipografia e spaziatura, breakpoint responsive, e varianti e stati dei componenti.
- 03Specificare le Interazioni
Comportamenti di click e tap, stati hover, supporto ai gesti, e transizioni registrate con durata ed easing.
- 04Coprire Contenuti e Casi Limite
Limiti di caratteri, troncamento, stati vuoti, stati di caricamento ed errore, oltre a contenuto minimo e massimo, stringhe internazionali più lunghe, connessioni lente e dati mancanti.
- 05Aggiungere Dettagli sull'Accessibilità
Ordine di focus, etichette e ruoli ARIA, interazioni da tastiera, e annunci per screen reader.
- 06Emettere la Spec nel Template
Il risultato viene scritto come una Design Handoff Spec in Markdown utilizzando la struttura di sezioni e tabelle del file.