टूल
किसी भी वेबसाइट के design tokens, CSS variables के रूप में
वेबसाइट का पता डालें और उसके design tokens CSS custom properties के रूप में पाएँ: रंग, टेक्स्ट स्टाइल, spacing, radius, shadows और कंटेंट की चौड़ाई, पेज के रेंडर होने पर मापे गए।
यह कैसे काम करता है
Stylepack साइट को असली ब्राउज़र में खोलता है, चार चौड़ाइयों पर और दोनों थीम में वह मापता है जो रेंडर होता है (न कि जो stylesheet कहती है), और नतीजे को डिज़ाइन पैक के रूप में रखता है। पहले से मापी गई साइट तुरंत जवाब देती है; नई साइट में एक मिनट से कम लगता है। इस पेज का हर मान उसी पैक से आता है।
सवाल
design token क्या है?
एक नाम वाला डिज़ाइन मान (एक रंग, एक फ़ॉन्ट साइज़, एक spacing step) जो पूरे प्रोडक्ट में इस्तेमाल होता है। CSS variables के रूप में tokens आपको एक declaration बदलकर पूरी साइट का रूप बदलने देते हैं।
नाम कहाँ से आते हैं?
मापे गए पेज पर हर मान की भूमिका से: --color-primary एक्सेंट है, --text-headline-lg एक शीर्षक स्टाइल, --space-4 एक spacing step। पैक की tokens.json में वही नाम W3C format में हैं।
क्या यही पूरा design system है?
यह उसके मान हैं। डिज़ाइन पैक में व्यवहार (hover, focus, मेन्यू, motion, responsive लेआउट, डार्क मोड), कंपोनेंट की रेसिपी और स्क्रीनशॉट भी जुड़ते हैं, उस रूप में जिससे AI कोडिंग एजेंट बनाते हैं।