aesthetic

Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.

1. Zainstaluj umiejętność w swoim środowisku Claude, dodając ją do katalogu skills. Umiejętność integruje się automatycznie z narzędziami do analizy designu i przetwarzania obrazów.

2. Gdy projektujesz interfejs, zacznij od fazy BEAUTIFUL: przeanalizuj istniejące projekty z serwisów inspiracyjnych (Dribbble, Mobbin, Behance), aby zidentyfikować wzory i wyodrębnić zasady projektowania. Umiejętność pomoże ci zrozumieć hierarchię wizualną, typografię i teorię kolorów.

3. Przejdź do fazy RIGHT: upewnij się, że twój design jest funkcjonalny i dostępny. Odwołaj się do wytycznych systemów designu i wymagań dostępności, aby piękne projekty były również użyteczne.

4. Dodaj mikro-interakcje i animacje w fazie SATISFYING. Umiejętność wspiera iteracyjne generowanie obrazów designu aż do osiągnięcia standardów estetycznych.

5. Sfinalizuj projekt w fazie PEAK, dodając storytelling i dokumentację designu. Utwórz przewodnik stylu i dokumentację systemu designu dla zespołu.

6. Wykorzystaj integracje z narzędziami do przechwytywania zrzutów ekranu, analizy kodu i stylowania interfejsów, aby usprawnić cały proces od inspiracji do implementacji.