AI DS Composer
Ragiona attraverso i metadati del sistema di design per comporre l'interfaccia utente da componenti esistenti anziché inventare nuovo codice.
Promosso
Cosa fa
Guida Claude a leggere i metadati gerarchici del sistema di design di un progetto (filosofia di alto livello, file di metadati per atomo/molecola/organismo) e a scegliere componenti, varianti e props citando selectionCriteria anziché l'intuizione. Si attiva durante la generazione o la modifica di componenti/layout UI dove il riutilizzo e l'aderenza a un sistema di design esistente sono importanti, e segnala esplicitamente anti-pattern e requisiti non mappati invece di inventare silenziosamente componenti.
Rapporto di test
Ho chiesto un pulsante CTA hero prominente a /pricing: la risposta di base ha semplicemente emesso <Button href> senza ulteriori riflessioni, mentre lo skill ha evidenziato l'anti-pattern incluso ('Button for plain navigation → use Link') e poi ha esplicitamente ragionato sull'eccezione documentata per i CTA hero primari prima di mantenere Button — una decisione che la baseline non aveva nemmeno considerato.
Testato il: 2026-07-14 · Claude Code 2.x (agent harness)
Installazione
git clone https://github.com/cris-achiardi/claude-skills cd claude-skills mkdir -p ~/.claude/skills cp -r skills/ai-ds-composer ~/.claude/skills/ai-ds-composer
Comandi e prompt di esempio
/ai-ds-composerRagiona attraverso i metadati del sistema di design per comporre l'interfaccia utente da componenti esistenti anziché inventare nuovo codice.
Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):
I need a button for the hero section, what fits our design system?Build this card using our existing design system componentsDoes this new Modal fit our design system or should I reuse something?