Araçlar
Herhangi bir web sitesinden tasarım token’ları, CSS değişkenleri olarak
Bir web sitesi adresi girin ve tasarım token’larını CSS özel özellikleri (custom property) olarak alın: renkler, metin stilleri, boşluklar, köşe yarıçapları, gölgeler ve içerik genişliği, sayfanın render edilmiş halinden ölçülmüş.
Nasıl çalışır
Stylepack siteyi gerçek bir tarayıcıda açar, dört genişlikte ve iki temada ekranda ne render edildiğini ölçer (stil dosyasının ne dediğini değil) ve sonucu bir tasarım paketi olarak saklar. Daha önce ölçülmüş bir site anında cevap verir; yeni bir site bir dakikadan kısa sürer. Bu sayfadaki her değer o paketten gelir.
Sorular
Tasarım token’ı nedir?
Bir üründe baştan sona kullanılan, adlandırılmış bir tasarım değeri (bir renk, bir font boyutu, bir boşluk adımı). CSS değişkenleri olarak token’lar, tek bir tanımı değiştirerek tüm siteyi yeniden stillendirmenizi sağlar.
İsimler nereden geliyor?
Her değerin ölçülen sayfada oynadığı rolden: --color-primary vurgu rengi, --text-headline-lg bir başlık stili, --space-4 bir boşluk adımı. Paketin tokens.json dosyası aynı isimleri W3C formatında taşır.
Bu, tasarım sisteminin tamamı mı?
Bu, değerler. Tasarım paketi buna davranışı (hover, focus, menüler, animasyon, responsive yerleşim, koyu mod), bileşen tariflerini ve ekran görüntülerini, yapay zeka kodlama ajanlarının üzerine inşa ettiği biçimde ekler.