Refactoring UI Design System
Refactoring-UI designprinciper: personlighet, dämpad färg, hierarki, avstånd, typografi
Testad · Fungerar
Vad den gör
En 1100-raders designhandbok som mappar ett UI till en personlighetskvadrant och domän, och sedan driver konkreta val för färgmättnad, harmoni, layoutdensitet, typografi, avstånd och skuggor. Utlöses när du bygger eller granskar gränssnitt eller frågar om färger, typsnitt, avstånd, layout, responsivitet eller gränssnittstext.
Testrapport
Vid styling av en fintech-dashboards primära CTA, använde min baslinje utan färdighet en fullmättad indigogradient med en 10px radie — exakt den generiska AI-look som denna färdighet listar som misstag #11. Genom att följa kroppen landade jag istället på en dämpad hsl(215,45%,48%) primärfärg, en 6px radie för en formell/reserverad domän, en varm accent för att lyfta CTA mot en sval yta, och en subtil diffus skugga. Kedjan domän-till-personlighet-till-mättnad producerade specifika, försvarbara värden snarare än dekoration, och skillnaden var uppenbar sida vid sida.
Testad: 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
Kommandon och exempelprompter
/refactoring-uiRefactoring-UI designprinciper: personlighet, dämpad färg, hierarki, avstånd, typografi
Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):
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