elegant-design
Projektuj interfejsy z dostępnością i responsywnością – chat, terminale, kod w jednym miejscu
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do tworzenia profesjonalnych, dostępnych interfejsów webowych z zaawansowanymi elementami interaktywnymi. Zawiera gotowe wzorce dla czatów, terminali, wyświetlania kodu i treści strumieniowanej. Idealny do budowania aplikacji React/Next.js, narzędzi dla developerów i systemów czasu rzeczywistego. Opiera się na zasadach przejrzystości, spójności i wydajności – każdy element ma cel, każda interakcja jest naturalna.
Jak używać
Zainstaluj skill elegant-design w swoim projekcie, dodając go do konfiguracji agenta lub systemu MCP. Skill zawiera gotowe komponenty i wytyczne projektowe dla interfejsów webowych.
Przed rozpoczęciem projektowania interfejsu, przeprowadź fazę Discovery & Planning (15–30 minut). Zmapuj doświadczenie użytkownika, identyfikując główne cele i przepływy interakcji. Użyj pętli OODA (Observe, Orient, Decide, Act) do optymalizacji każdego kroku – określ, jakie informacje użytkownik musi zaobserwować, jak powinien zrozumieć kontekst, jaką decyzję podjąć i jaką akcję wykonać.
Wybierz odpowiedni system projektowania (shadcn/ui, daisyUI lub HeroUI) i stosuj core principles skilla: priorytetyzuj przejrzystość nad sprytnym designem, konsystencję nad nowością, wydajność nad liczbą funkcji. Pamiętaj o dostępności od początku – nie dodawaj jej później.
Implementuj zaawansowane elementy interaktywne zgodnie z dokumentacją: czaty z naturalnym przepływem wiadomości, terminale z responsywnym wyświetlaniem, komponenty do pokazywania kodu z syntax highlightingiem, streamy treści w czasie rzeczywistym. Każdy element powinien służyć celowi i czuć się naturalnie dla użytkownika.
Zastosuj progressive disclosure – ujawniaj złożoność tylko wtedy, gdy jest potrzebna. Łatwe akcje powinny być dostępne natychmiast, akcje destrukcyjne wymagają dodatkowego potwierdzenia lub trudniejszego dostępu.
Testuj interfejs na różnych urządzeniach i rozmiarach ekranu, upewniając się, że design jest w pełni responsywny. Weryfikuj dostępność dla wszystkich użytkowników, w tym osób z niepełnosprawnościami, od samego początku projektu.