Refactoring UI Design System
Principi di design Refactoring-UI: personalità, colore attenuato, gerarchia, spaziatura, tipografia
Promosso
Cosa fa
Un playbook di design di 1100 righe che mappa un'interfaccia utente a un quadrante di personalità e dominio, quindi guida scelte concrete per saturazione del colore, armonia, densità del layout, tipografia, spaziatura e ombre. Si attiva quando si costruiscono o si revisionano interfacce o si pongono domande su colori, font, spaziatura, layout, reattività o testo dell'interfaccia.
Rapporto di test
Stilizzando la CTA principale di una dashboard fintech, la mia baseline senza skill ha optato per un gradiente indaco a piena saturazione con un raggio di 10px — esattamente l'aspetto generico AI che questa skill elenca come errore #11. Seguendo il corpo, invece, sono approdato a un primario hsl(215,45%,48%) attenuato, un raggio di 6px per un dominio formale/riservato, un accento caldo per far risaltare la CTA su una superficie fredda e un'ombra diffusa sottile. La catena dominio-personalità-saturazione ha prodotto valori specifici e difendibili anziché decorazioni, e il delta era evidente fianco a fianco.
Testato il: 2026-07-20 · Claude Code 2.x (agent harness)
Installazione
git clone https://github.com/jaywilburn/refactoring-ui-skill mkdir -p ~/.claude/skills cd refactoring-ui-skill && cp -r skills/refactoring-ui ~/.claude/skills/refactoring-ui
Comandi e prompt di esempio
/refactoring-uiPrincipi di design Refactoring-UI: personalità, colore attenuato, gerarchia, spaziatura, tipografia
Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):
This interface looks too flat, help me fix the color and spacingWhat personality quadrant fits this dashboard and how should I style itMy UI has no visual hierarchy, help me fix typography and shadows