elegant-design

Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.

1. 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.

2. 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ć.

3. 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.

4. 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.

5. 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.

6. 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.