visual-design-foundations
Twórz spójne systemy wizualne z typografią, kolorami i siatką spacing
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do budowania profesjonalnych systemów designu. Zastosuj zasady typografii, teorii kolorów, siatki spacing i ikonografii, aby utworzyć spójne projekty wizualne. Idealny do definiowania design tokenów, tworzenia style guide'ów, poprawy hierarchii wizualnej i audytu konsystencji designu. Zawiera gotowe skale modularne, palety kolorów semantyczne i wytyczne do line height'u.
Jak używać
Zainstaluj skill w swoim projekcie agenta, dodając referencję do visual-design-foundations w konfiguracji narzędzi.
Użyj skilla gdy chcesz ustalić design tokeny dla nowego projektu. Zdefiniuj skalę typografii, wybierając rozmiary czcionek z zaproponowanej skali modularnej (od 12px do 48px), a następnie przypisz odpowiednie line height'y dla nagłówków (1.1–1.3), tekstu głównego (1.5–1.7) i etykiet UI (1.2–1.4).
Stwórz system spacing oparty na siatce 8-punktowej. Zdefiniuj zmienne CSS dla odstępów od 4px do 64px, używając predefiniowanych wartości (--space-1 do --space-16), aby zapewnić konsystencję we wszystkich komponentach.
Zbuduj paletę kolorów semantyczną, definiując kolory podstawowe (primary, hover, active), kolory statusów (success, error, warning) i kolory neutralne. Skill dostarcza gotowych wartości hex do szybkiego wdrożenia.
Przeprowadź audyt istniejącego designu, porównując obecne wartości typografii, spacing i kolorów ze zdefiniowanymi tokenami. Zidentyfikuj niespójności i dostosuj komponenty do ustalonego systemu.
Implementuj dark mode lub warianty tematyczne, tworząc alternatywne zestawy tokenów kolorów dla różnych schematów, zachowując tę samą strukturę spacing i typografii.