ui-design-system
Zautomatyzuj tworzenie systemów projektowych z generowaniem tokenów i dokumentacją komponentów
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Profesjonalny zestaw narzędzi do budowania i utrzymania spójnych systemów projektowych. Generuj tokeny projektowe (kolory, typografię, spacing), dokumentuj komponenty, obliczaj responsywne breakpointy i przygotowuj materiały do przekazania deweloperom. Idealne dla projektantów interfejsów, którzy chcą zautomatyzować tworzenie siatek projektowych, palet kolorów i skal typograficznych na podstawie kolorów marki.
Jak używać
Sklonuj repozytorium lub zainstaluj skill w swoim środowisku Claude/Copilot, wskazując ścieżkę do folderu ui-design-system.
Przygotuj kolor marki w formacie szesnastkowym (np. #FF5733) oraz wybierz styl projektowy: modern, classic lub playful — będą one podstawą do wygenerowania całej palety.
Uruchom generator tokenów poleceniem: python scripts/design_token_generator.py [kolor_marki] [styl] [format], na przykład python scripts/design_token_generator.py #FF5733 modern json.
Wybierz format eksportu (json, css lub scss) w zależności od tego, czy tokeny będą używane w kodzie frontendowym czy w narzędziach projektowych.
Otrzymasz kompletny zestaw tokenów obejmujący paletę kolorów, skalę typografii, system spacing oparty na siatce 8pt, tokeny cieni i animacji oraz responsywne breakpointy — wszystko gotowe do dokumentacji komponentów i przekazania zespołowi deweloperów.
Wykorzystaj wygenerowane tokeny do dokumentacji komponentów i materiałów handoff, aby zapewnić spójność wizualną między projektowaniem a implementacją.