U
ui-designer
Extract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs matching reference aesthetics.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Extract design systems from reference UI images and generate implementation-ready UI design prompts. Use when users provide UI screenshots/mockups and want to create consistent designs, generate design systems, or build MVP UIs matching reference aesthetics.
How to use
- Przygotuj folder z obrazami referencyjnymi — zbierz zrzuty ekranu, mockupy lub projekty UI, które chcesz analizować. Umieść je w jednym katalogu.
- Przygotuj plik z opisem projektu — napisz dokument zawierający ideę produktu, cele i kontekst, dla którego tworzysz design.
- 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.
- 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.
- Otrzymasz dokumentację systemu designu w formacie markdown — wynik zostanie zapisany w pliku z pełnym opisem ekstrahowanych elementów.
- 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.