عن المشروع
designlang (المستودع manavarya09/design-extract، حزمة npm designlang) هو سطر أوامر CLI مفتوح المصدر ومرخص بموجب MIT، ويتطلب Node 20+، يستخدم متصفّحًا بلا رأس لاستخراج نظام تصميم من أي عنوان URL مباشر. يُنتج أكثر من 17 ملفًا في ./design-extract-output، بما في ذلك لغة تصميم من 19 قسمًا بتنسيق ماركداون، وتوكنات تصميم W3C DTCG ذات الطبقات الأولية والدلالية والتركيبية، وإعداد Tailwind، ومتغيرات موضوع shadcn/ui، وجدول بيانات Figma Variables بصيغة JSON، وخصائص CSS المخصصة، وقوالب React مُنسَّقة لتشريح المكونات، وتوكنات الحركة، وJSON لصوت العلامة التجارية، وجاهزية لنسخ أوامر lovable و Cursor و v0 و Claude Artifacts. يكتب أيضًا حمولة خادم MCP ويمكن أن يعمل كخادم MCP.
بeyond استخراج التوكنات للصفحة الواحدة، يوفر التقاط نظام التخطيط (الشبكة، flex، عرض الحاويات، الفواصل)، والتنقّل المتجاوب عند أربع نقاط كسر، والتقاط حالات التفاعل (hover/focus/active)، والتقاط حركة وقت التشغيل عبر document.getAnimations() للدورات والرتال والتنسيق والتمرير، وتنقّل متعدد الصفحات مع مواءمة التوكنات المشتركة مقابل خاصة بالمسار، وتقييم تباين WCAG 2.1 مع اقتراحات لوحة تصحيحية، وخريطة z-index، وكشف التدرجات، واستخلاص أيقونات SVG، وكشف ملفات الخطوط، وتصنيف أنماط الصور، وبصمة التجميع، ومراجعة صحة CSS، وتصنيف المناطق الدلالية (القائمة، البطل، التسعير، الشهادات، CTA، التذييل)، وتجميع المكونات القابلة لإعادة الاستخدام.
الأوامر تشمل: designlang URL للاستخراج الكامل؛ site للنظام الموحد للموقع وتقييم الاتساق؛ grade لتقرير HTML قابل للمشاركة وشارة SVG؛ battle للتقييم المواجهة؛ remix لإعادة الطراز بمفردات مثل brutalist وswiss وart-deco وcyberpunk وsoft-ui وeditorial؛ pack لتجميع المخرجات؛ theme-swap لدوران OKLCH hue حول لون أساسي جديد؛ brand لكتاب إرشادات العلامة التجارية بـ 13 فصلًا؛ pair لدمج تصميمين؛ dna ووضع التصميم في فضاء ثلاثيني الميزة مقابل مجموعة مرجعية؛ dna-corpus لبناء مجموعة مرجعية مخصصة؛ fidelity لتقييم نسخة طبق الأصل بصريًا وحركيًا مع خطة تصحيح؛ gallery لإنشاء معرض ثابت؛ clone لتوليد قالب Next.js؛ apply لكتابة التوكنات داخل إطار عمل مكتشف؛ drift وlint وvisual-diff لفحوصات جاهزة لـ CI؛ sync وhistory وwatch وdiff للمراقبة والمقارنة.
مولّدو المنصات المتعددة يضيفون مخرجات iOS SwiftUI وAndroid Compose وFlutter وWordPress. إضافة Chrome (MV3، activeTab) توفّر تسليمًا بنقرة واحدة. يمكن تثبيتها عالميًا عبر npm أو إضافتها كمهارة وكيل، وتُشحن كإضافة Claude Code مع أوامر شرطية. الخيار الاختياري --smart يمكنه استخدام Atlas Cloud أو مفاتيح OpenAI/Anthropic الموجودة. يشير الملف README إلى التشغيل الحتمي والمجاني أساسًا لاستخراج المواقع وأن تقييم التصميم لا يحل محل القياسات الناقصة. هذا مشروع أدوات تصميم وتطوير مفيد لعمليات مراجعة أنظمة التصميم، وتوليد التوكنات، ومراجعة إمكانية الوصول، وسير العمل من التصميم إلى الكود، وقياس دقة الاستنساخ.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.