frontend-aesthetics
Prevents generic AI-generated designs by guiding typography, color, motion, and background choices. Use when creating frontend designs, landing pages, dashboards, or any UI/UX work. Helps avoid the \
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Prevents generic AI-generated designs by guiding typography, color, motion, and background choices. Use when creating frontend designs, landing pages, dashboards, or any UI/UX work. Helps avoid the \
How to use
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ę.