ui-design-system
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
How to use
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ą.