الأدوات
Design tokens من أي موقع كمتغيرات CSS
أدخل عنوان موقع واحصل على design tokens الخاصة به كخصائص CSS مخصصة: الألوان وأنماط النص والمسافات والاستدارات والظلال وعرض المحتوى، مقاسة من الصفحة كما تُعرض.
كيف يعمل
يفتح Stylepack الموقع في متصفح حقيقي، ويقيس ما يُعرض فعلًا (لا ما يقوله ملف الأنماط) بأربعة عروض وفي كلا الوضعين، ويحفظ النتيجة كحزمة تصميم. الموقع المقاس سابقًا يجيب فورًا؛ والجديد يستغرق أقل من دقيقة. كل قيمة في هذه الصفحة تأتي من تلك الحزمة.
أسئلة
ما هو الـ design token؟
قيمة تصميم مسماة (لون، أو حجم خط، أو درجة مسافة) تُستخدم في المنتج كله. وبصيغة متغيرات CSS، تتيح لك الـ tokens إعادة تنسيق موقع كامل بتغيير تصريح واحد.
من أين تأتي الأسماء؟
من الدور الذي تؤديه كل قيمة في الصفحة المقاسة: --color-primary هو اللون المميز، و--text-headline-lg نمط عنوان، و--space-4 درجة مسافة. ويحمل ملف tokens.json في الحزمة الأسماء نفسها بصيغة W3C.
هل هذا هو نظام التصميم كاملًا؟
هذه هي القيم. وتضيف حزمة التصميم السلوك (hover وfocus والقوائم والحركة والتخطيط المتجاوب والوضع الداكن) ووصفات المكونات ولقطات الشاشة، بالصيغة التي يبني منها وكلاء البرمجة بالذكاء الاصطناعي.