frontend-design-extractor

Skill do automatycznego ekstrakcji reusable'owych systemów UI/UX z repozytoriów frontendowych. Analizuje komponenty, design tokeny, globalne style, wzorce interakcji i szablony stron niezależnie od frameworka (React, Vue, Angular, Next, Vite itd.). Idealny do dokumentacji designu, migracji UI między projektami lub budowania design system z istniejącego kodu. Skupia się wyłącznie na UI/UX – ignoruje logikę biznesową.

1. Określ tryb pracy: czy tworzysz nowy projekt od zera (greenfield), czy analizujesz istniejący kod. Upewnij się, że logika biznesowa jest poza zakresem – skill skupia się wyłącznie na warstwie designu.

2. Dla istniejącego repozytorium uruchom skrypt skanujący: scripts/scan_ui_sources.sh z katalogu głównego projektu. Skrypt automatycznie przeszuka pliki, ignorując typowe foldery build i cache.

3. Jeśli struktura projektu jest niestandardowa, dostosuj skan za pomocą dodatkowych parametrów: scripts/scan_ui_sources.sh /ścieżka/do/repo [plik_wyjścia] [dodatkowe_globy] lub flagi --root, --out, --ignore.

4. Wygeneruj strukturę wyjściową poleceniem scripts/generate_output_skeleton.sh, które utworzy folder ./ui-ux-spec (lub wskazany katalog) do przechowywania wyników ekstrakcji.

5. Skill wyprodukuje kompletny spec UI/UX zawierający: design tokeny (kolory, typografia, spacing, promienie, cienie, animacje), globalne style, katalog komponentów, wzorce interakcji oraz szablony stron. Dla trybu greenfield otrzymasz również rekomendacje implementacyjne dla wybranego frameworka.

6. Przejrzyj wygenerowany spec i dostosuj go do potrzeb – możesz go następnie wykorzystać do migracji designu między projektami lub jako podstawę nowego design systemu.