ui-designer

Skill do analizy interfejsów użytkownika na podstawie zrzutów ekranu i mockupów. Automatycznie ekstrahuje palety kolorów, typografię, spacing i komponenty z referencyjnych obrazów, a następnie generuje dokumentację systemu designu i gotowe do implementacji prompty. Idealne dla zespołów budujących MVP-y, które mają być spójne z istniejącymi estetycznymi wzorcami lub tworzących nowe systemy designu z wizualnych przykładów.

1. Przygotuj folder z obrazami referencyjnymi — zbierz zrzuty ekranu, mockupy lub projekty UI, które chcesz analizować. Umieść je w jednym katalogu.
2. Przygotuj plik z opisem projektu — napisz dokument zawierający ideę produktu, cele i kontekst, dla którego tworzysz design.
3. Uruchom skill i podaj ścieżkę do folderu z obrazami oraz plik z opisem projektu. Jeśli masz już gotowy PRD, możesz go dołączyć, aby pominąć krok generowania.
4. Skill przeanalizuje obrazy — system wyodrębni palety kolorów, rodziny czcionek, rozmiary tekstu, style komponentów (przyciski, karty, pola wejścia), system odstępów i wzorce animacji.
5. Otrzymasz dokumentację systemu designu w formacie markdown — wynik zostanie zapisany w pliku z pełnym opisem ekstrahowanych elementów.
6. Na podstawie systemu designu skill wygeneruje gotowe do wdrożenia prompty UI — będą one zawierać szczegółowe instrukcje do implementacji interfejsów zgodnie z wyekstrahowanymi wzorcami designu.