frontend-aesthetics
Twoje projekty UI przestają być generyczne – przewodnik po typografii, kolorach i animacjach dla designu, który wyróżnia się.
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill zapobiegający "AI slop" estetyce w projektach frontendowych. Uczy Cię wybierać charakterystyczne czcionki (zamiast Inter czy Roboto), budować spójne palety kolorów inspirowane tematami IDE czy kulturowymi estetkami, oraz dodawać przemyślane animacje i tła. Idealny do tworzenia landing page'ów, dashboardów i interfejsów, które rzeczywiście zachwycają użytkowników zamiast wyglądać jak każdy inny projekt AI.
Jak używać
Zainstaluj skill frontend-aesthetics w swoim środowisku Claude/Codex, dodając go do katalogu skills agenta.
Gdy zaczynacie projekt UI/UX (landing page, dashboard, interfejs), wyzwól skill przed rozpoczęciem designu, aby Claude miał dostęp do wytycznych.
W typografii – wybierz jedną charakterystyczną czcionkę zamiast domyślnych (unikaj Inter, Roboto, Open Sans). Rozważ JetBrains Mono dla estetyki kodu, Playfair Display dla redakcyjnej, lub Bricolage Grotesque dla czegoś bardziej odważnego. Załaduj z Google Fonts.
Przy kolorach – zamiast rozmywać się po całej palecie, zdecyduj się na jedną dominującą barwę z ostrym akcentem. Czerpij inspirację z tematów IDE (Dracula, Nord, Catppuccin) lub estetyk kulturowych (japońska minimalizm, skandynawski design). Unikaj fioletowych gradientów na białym tle – to klasyczny "AI slop".
Dla ruchu i tła – skill wskaże Ci, jak dodać przemyślane animacje i wybór tła, które wzmacniają całą kompozycję zamiast być przypadkowe.
Podczas pracy z Claude'em opisz swój projekt i pozwól skillowi kierować decyzjami designu na każdym z czterech wymiarów (typografia, kolor, ruch, tło), aby wynik był spójny i wyróżniający się.