Refactoring UI Design System
Refactoring-UI ontwerpprincipes: persoonlijkheid, gedempte kleur, hiërarchie, spatiëring, type
Getest · Werkt
Wat het doet
Een 1100-regelige design playbook die een UI koppelt aan een persoonlijkheidskwadrant en domein, en vervolgens concrete keuzes stuurt voor kleurverzadiging, harmonie, lay-outdichtheid, typografie, spatiëring en schaduwen. Activeert wanneer je interfaces bouwt of beoordeelt of vragen stelt over kleuren, lettertypen, spatiëring, lay-out, responsiviteit of interface-tekst.
Testrapport
Bij het stylen van de primaire CTA van een fintech-dashboard, greep mijn no-skill baseline naar een volledig verzadigde indigogradient met een 10px radius — precies de generieke AI-look die deze skill als fout #11 noemt. Door de body te volgen, kwam ik in plaats daarvan uit op een gedempte hsl(215,45%,48%) primaire kleur, een 6px radius voor een formeel/gereserveerd domein, één warm accent om de CTA te benadrukken tegen een koel oppervlak, en een subtiele diffuse schaduw. De keten van domein naar persoonlijkheid naar verzadiging produceerde specifieke, verdedigbare waarden in plaats van decoratie, en het verschil was duidelijk naast elkaar.
Getest op: 2026-07-20 · Claude Code 2.x (agent harness)
Installatie
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
Commando's en voorbeeldprompts
/refactoring-uiRefactoring-UI ontwerpprincipes: persoonlijkheid, gedempte kleur, hiërarchie, spatiëring, type
Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):
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