Refactoring UI Design System
Zasady projektowania Refactoring-UI: osobowość, stonowane kolory, hierarchia, odstępy, typografia
Testowano · Działa
Co robi ten skill
1100-liniowy podręcznik projektowania, który mapuje interfejs użytkownika do kwadrantu osobowości i domeny, a następnie kieruje konkretnymi wyborami w zakresie nasycenia kolorów, harmonii, gęstości układu, typografii, odstępów i cieni. Uruchamia się, gdy budujesz lub przeglądasz interfejsy lub pytasz o kolory, czcionki, odstępy, układ, responsywność lub tekst interfejsu.
Raport z testu
Stylizując główny CTA pulpitu fintech, mój podstawowy test bez umiejętności sięgnął po w pełni nasycony gradient indygo z promieniem 10px — dokładnie taki ogólny wygląd AI, który ta umiejętność wymienia jako błąd #11. Postępując zgodnie z treścią, zamiast tego wybrałem stonowany kolor podstawowy hsl(215,45%,48%), promień 6px dla formalnej/zarezerwowanej domeny, jeden ciepły akcent, aby wyróżnić CTA na tle chłodnej powierzchni, i subtelny rozproszony cień. Łańcuch domena-osobowość-nasycenie wygenerował konkretne, dające się obronić wartości, a nie dekoracje, a różnica była oczywista, gdy porównano je obok siebie.
Testowano: 2026-07-20 · Claude Code 2.x (agent harness)
Instalacja
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
Komendy i przykładowe prompty
/refactoring-uiZasady projektowania Refactoring-UI: osobowość, stonowane kolory, hierarchia, odstępy, typografia
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
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