visual-design-foundations
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
How to use
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.