human-optimized-frontend
Przeprojektuj interfejs z optymalizacją estetyki, animacji i doświadczenia użytkownika
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umiejętność do automatycznego przeprojektowania frontendu poprzez wspólną optymalizację wyglądu, animacji i doświadczenia użytkownika. Narzędzie analizuje istniejący interfejs, wybiera spójny kierunek estetyczny i filozofię interakcji, a następnie generuje szczegółowe wytyczne typografii, kolorów, układu i animacji. Aktywuj ją jawnie, gdy chcesz przeprojektować frontend lub interfejs użytkownika.
Jak używać
Przygotuj wszystkie informacje o swoim interfejsie — obecny kod, zrzuty ekranu, opis funkcjonalności lub cele biznesowe. Jeśli brakuje Ci szczegółów, umiejętność założy neutralny, funkcjonalny punkt wyjścia.
Wyraźnie poproś agenta o użycie umiejętności human-optimized-frontend, używając słów kluczowych takich jak "użyj human-optimized-frontend", "przeprojektuj frontend" lub "przeprojektuj interfejs". Umiejętność aktywuje się tylko na jawne polecenie.
Czekaj na analizę kontekstu — umiejętność przeanalizuje dostarczone informacje i określi jeden spójny kierunek estetyczny (np. minimalistyczny, nowoczesny, klasyczny) oraz jedną filozofię interakcji (np. clarity-first, flow-driven).
Otrzymaj szczegółowe wytyczne projektowe obejmujące typografię (rozmiary czcionek, interlinie, pary fontów), paletę kolorów (kolory dominujące, drugorzędne, akcent), kontrast tekstu i elementów interaktywnych, układ siatki, oraz specyfikacje animacji i przejść.
Zastosuj wytyczne w swoim kodzie frontendu — każda decyzja projektowa powinna wzmacniać wybrany kierunek estetyczny i filozofię interakcji bez mieszania stylów.
Przetestuj interfejs pod kątem dostępności — upewnij się, że kontrast tekstu wynosi co najmniej 4.5:1, a elementy interaktywne 3:1, zgodnie ze standardami WCAG.