Narzędzia
Tokeny designu z dowolnej strony jako zmienne CSS
Wpisz adres strony i pobierz jej tokeny designu jako custom properties CSS: kolory, style tekstu, odstępy, zaokrąglenia, cienie i szerokość treści, zmierzone na stronie tak, jak się renderuje.
Wypróbujstripe.comlinear.appairbnb.com
Jak to działa
Stylepack otwiera stronę w prawdziwej przeglądarce, mierzy to, co się renderuje (a nie to, co mówi arkusz stylów) w czterech szerokościach i w obu motywach, a wynik zapisuje jako pakiet designu. Strona już zmierzona odpowiada od razu; nowa zajmuje mniej niż minutę. Każda wartość na tej stronie pochodzi z tego pakietu.
Pytania
Czym jest token designu?
Nazwana wartość designu (kolor, rozmiar czcionki, krok odstępu) używana w całym produkcie. Jako zmienne CSS tokeny pozwalają przestylować całą stronę, zmieniając jedną deklarację.
Skąd biorą się nazwy?
Z roli, jaką każda wartość pełni na zmierzonej stronie: --color-primary to akcent, --text-headline-lg styl nagłówka, --space-4 krok odstępu. tokens.json w pakiecie zawiera te same nazwy w formacie W3C.
Czy to cały design system?
To wartości. Pakiet designu dodaje zachowanie (hover, focus, menu, animacje, responsywność, tryb ciemny), przepisy na komponenty i zrzuty ekranu, w formie, z której budują agenty AI do kodowania.