Refactoring UI Design System
Refactoring-UI designprinsipper: personlighet, dempet farge, hierarki, avstand, type
Bestått
Hva den gjør
En 1100-linjers design-spillebok som kartlegger et brukergrensesnitt til en personlighetskvadrant og domene, og deretter driver konkrete valg for fargemetning, harmoni, layouttetthet, typografi, avstand og skygger. Utløses når du bygger eller gjennomgår grensesnitt eller spør om farger, fonter, avstand, layout, responsivitet eller grensesnitttekst.
Testrapport
Ved styling av et fintech-dashbords primære CTA, valgte min grunnlinje uten ferdigheter en full-mettet indigogradient med en 10px radius – nøyaktig det generiske AI-utseendet denne ferdigheten lister som feil #11. Ved å følge kroppen landet jeg i stedet på en dempet hsl(215,45%,48%) primærfarge, en 6px radius for et formelt/reservert domene, en varm aksent for å fremheve CTA mot en kjølig overflate, og en subtil diffus skygge. Kjeden fra domene til personlighet til metning produserte spesifikke, forsvarlige verdier i stedet for dekorasjon, og deltaet var åpenbart side om side.
Testet på: 2026-07-20 · Claude Code 2.x (agent harness)
Installer
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 designprinsipper: personlighet, dempet farge, hierarki, avstand, type
Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen 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