Refactoring UI Design System
Refactoring-UI designprincipper: personlighed, dæmpet farve, hierarki, afstand, type
Testet · Virker
Hvad det gør
En 1100-linjers design-playbook, der mapper en UI til et personlighedskvadrant og domæne, og derefter driver konkrete valg for farvemætning, harmoni, layout-tæthed, typografi, afstand og skygger. Udløses, når du bygger eller gennemgår grænseflader eller spørger om farver, skrifttyper, afstand, layout, responsivitet eller grænseflade-tekst.
Testrapport
Ved styling af et fintech-dashboards primære CTA greb min baseline uden færdigheder efter en fuldmættet indigogradient med en 10px radius — præcis det generiske AI-look, denne færdighed lister som fejl #11. Ved at følge teksten landede jeg i stedet på en dæmpet hsl(215,45%,48%) primærfarve, en 6px radius for et formelt/reserveret domæne, en varm accent for at fremhæve CTA'en mod en kølig overflade og en subtil diffus skygge. Kæden fra domæne til personlighed til mætning producerede specifikke, forsvarlige værdier snarere end dekoration, og deltaet var tydeligt side om side.
Testet: 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
Kommandoer og eksempelprompter
/refactoring-uiRefactoring-UI designprincipper: personlighed, dæmpet farve, hierarki, afstand, type
Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):
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