Refactoring UI Design System
Principy designu Refactoring-UI: osobnost, tlumené barvy, hierarchie, mezery, typ.
Otestováno · Funguje
Co umí
1100řádkový designový playbook, který mapuje UI na osobnostní kvadrant a doménu, a poté řídí konkrétní volby pro sytost barev, harmonii, hustotu rozvržení, typografii, mezery a stíny. Spouští se, když vytváříte nebo revidujete rozhraní nebo se ptáte na barvy, písma, mezery, rozvržení, responsivitu nebo text rozhraní.
Testovací report
Při stylování primárního CTA fintech dashboardu moje základní linie bez dovedností sáhla po plně sytém indigovém gradientu s poloměrem 10px — přesně ten generický AI vzhled, který tato dovednost uvádí jako chybu #11. Podle těla jsem místo toho zvolil tlumenou primární barvu hsl(215,45%,48%), poloměr 6px pro formální/rezervovanou doménu, jeden teplý akcent pro zvýraznění CTA proti chladnému povrchu a jemný rozptýlený stín. Řetězec doména-osobnost-sytost vytvořil specifické, obhajitelné hodnoty namísto dekorace a rozdíl byl zřejmý vedle sebe.
Testováno: 2026-07-20 · Claude Code 2.x (agent harness)
Instalace
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
Příkazy a ukázkové prompty
/refactoring-uiPrincipy designu Refactoring-UI: osobnost, tlumené barvy, hierarchie, mezery, typ.
Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):
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