Refactoring UI Design System
Principes de conception Refactoring-UI : personnalité, couleur atténuée, hiérarchie, espacement, typographie
Testé · Fonctionne
Ce que fait
Un playbook de conception de 1100 lignes qui mappe une UI à un quadrant de personnalité et un domaine, puis guide des choix concrets pour la saturation des couleurs, l'harmonie, la densité de la mise en page, la typographie, l'espacement et les ombres. Se déclenche lorsque vous construisez ou révisez des interfaces ou posez des questions sur les couleurs, les polices, l'espacement, la mise en page, la réactivité ou le texte de l'interface.
Rapport de test
En stylisant le CTA principal d'un tableau de bord fintech, ma référence sans compétence a opté pour un dégradé indigo à pleine saturation avec un rayon de 10px — exactement l'apparence générique d'IA que cette compétence liste comme erreur #11. En suivant le corps, j'ai plutôt abouti à un primaire hsl(215,45%,48%) atténué, un rayon de 6px pour un domaine formel/réservé, un accent chaud pour faire avancer le CTA sur une surface froide, et une ombre diffuse subtile. La chaîne domaine-personnalité-saturation a produit des valeurs spécifiques et défendables plutôt que de la décoration, et le delta était évident côte à côte.
Testé le: 2026-07-20 · Claude Code 2.x (agent harness)
Installation
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
Commandes et exemples de prompts
/refactoring-uiPrincipes de conception Refactoring-UI : personnalité, couleur atténuée, hiérarchie, espacement, typographie
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
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