Meta Open-Sources Astryx: نظام تصميم تفاعلي جاهز للوكيل يحتوي على أكثر من 150 مكونًا يمكن الوصول إليه وسبعة سمات وواجهة سطر الأوامر

أصدرت شركة Meta Astryx، وهو نظام تصميم مفتوح المصدر قابل للتخصيص بالكامل ومصمم ليتم تشغيله من قبل كل من الأشخاص ووكلاء الذكاء الاصطناعي الذين يعملون جنبًا إلى جنب معهم. وهي متاحة الآن في النسخة التجريبية. Astryx ليست تجربة جديدة. لقد تطور داخل Meta على مدى السنوات الثماني الماضية، حيث تقول الشركة إنه أصبح نظام التصميم الأكثر استخدامًا والأكبر، والذي تم تشكيله من قبل المهندسين والمصممين وفرق الإنتاج الذين يعتمدون عليه يوميًا.

النظام يشحن أكثر من 150 مكونًا يمكن الوصول إليها (يدرج موقع المستندات الآن ما يزيد عن 160)، والموضوعات على مستوى العلامة التجارية، والوضع المظلم، والقوالب الجاهزة للشحن، وواجهة سطر الأوامر (CLI) كحزمة واحدة متماسكة. إنه مبني على React و StyleX. يمكنك استيراد CSS المبني مسبقًا واستخدام مكونات React المكتوبة. لا يوجد مكون إضافي للإنشاء لتوصيله ولا توجد مكتبة تصميم لاعتمادها.

تحاول المقايضة Astryx إزالتها

تفرض معظم أنظمة التصميم الاختيار. اعتماد نظام شركة كبيرة ويميل تطبيقك إلى الظهور كمنتج شخص آخر. يمكنك الوصول إلى مكونات النسخ واللصق بدلاً من ذلك، وسيقوم كل مشروع بتفرع مقتطفاته الخاصة، دون أي تماسك مشترك، أو إصلاحات أولية، وتصبح إمكانية الوصول هي مشكلتك بهدوء.

يفصل Astryx بين القلقين. يتحكم النظام في السلوك وإمكانية الوصول والجودة. تتحكم السمات في مظهرها. يمكنك التخصيص على مستوى الرمز المميز (اللون والنوع ونصف القطر والحركة) بحيث يصبح التطبيق ملكك بشكل لا لبس فيه دون إعادة كتابته. السمة هي ببساطة مجموعة من تجاوزات خصائص CSS المخصصة، بحيث يمكن للمصمم إعادة تصميم Astryx دون تفرع أو تغليف مصدر المكون.

مبادئ التصميم المعلنة هي التوجيه بشأن التنفيذ, اتفاقيات موثقة قوية, نظام واحد للبشر والذكاء الاصطناعي، و المكتسبة بالقياس – يتم اختبار الاتفاقيات، وليس التأكيد عليها.

العمارة: الأسس والمكونات والأنماط

يتم تنظيم Astryx في ثلاث طبقات. أسس هي الأساسيات للواجهات المتماسكة التي يمكن الوصول إليها: الطباعة واللون والتخطيط وإمكانية الوصول. عناصر هي أكثر من 150 قطعة بناء قابلة لإعادة الاستخدام، وكلها مع دعم كامل لـ TypeScript. أنماط هي حلول تم اختبارها في المعركة لسير العمل الشائع: صفحات الجدول، وتخطيطات التفاصيل، ومعالجات النماذج، والتنقل، وتدفقات إدخال البيانات.

قراران للتصميم يجعلانه مفتوحًا بشكل غير عادي. تتكون المكونات على أي مستوى بدلاً من قفلها خلف واجهة برمجة التطبيقات ذات المستوى الأعلى المغلقة swizzle يمكنه إخراج المصدر الكامل للمكون إلى مشروعك عندما تحتاج إلى امتلاكه. يتم إنشاء التصميم باستخدام StyleX ولكنه يظل غير مرئي للمستهلكين، لذا يمكنك تجاوزه className باستخدام Tailwind، أو وحدات CSS، أو CSS العادي — أيًا كان ما يستخدمه المشروع بالفعل. يوضح الشرح أدناه كيف يتم إعادة تصميم مجموعة واحدة من المكونات عبر سمات Astryx السبعة المشحونة عندما تتغير الرموز المميزة فقط.

صُمم خصيصًا للعملاء، ولم يتم تحديثه من أجلهم

الإطارات التعريفية Astryx هي استجابة لكيفية كتابة البرامج الآن. ومع إنتاج المزيد من التعليمات البرمجية من قبل الوكلاء، تقول الحجة، إنه يجب إعادة التفكير في أنظمة التصميم بدلاً من تصحيحها. تم تصميم واجهة برمجة التطبيقات (API) والاتفاقيات والمستندات وواجهة سطر الأوامر (CLI) معًا، بحيث يقوم الشخص ومساعد الذكاء الاصطناعي ببناء نفس الطريقة من نفس المرجع. ويشير الفريق إلى أن كل تغيير جعل Astryx أسهل بالنسبة للذكاء الاصطناعي، جعل الأمر أسهل بالنسبة للأشخاص أيضًا.

وهذا يظهر في الأدوات. سطر الأوامر (@astryxdesign/cli) يمكنه سرد القوالب ودعمها، وطباعة مستندات المكونات الكاملة، وإنشاء السمات وإنشائها، وتشغيل تعديلات التعليمات البرمجية لترحيل الإصدارات، وعرض المستندات التي يمكن قراءتها آليًا من سطر الأوامر أو عبره العملية التشاورية المتعددة الأطراف. تأتي المكونات بقواعد متسقة للتسمية والدعائم والتكوين، لذلك بمجرد أن تتعلم القليل منها، يمكن لكل من الأشخاص والنماذج التنبؤ بكيفية تصرف المكونات غير المألوفة.

المتطلبات وكيفية نشرها

نظرًا لأن Astryx عبارة عن مكتبة أمامية، فإن "النشر" يعني إضافتها إلى تطبيق React. الحزمة (@astryxdesign/core، ويشار إليها داخليًا باسم قوائم XDS). رد الفعل ورد الفعل ≥ 19.0.0 باعتبارها تبعيات نظير، جنبًا إلى جنب مع StyleX. إنه يشحن CSS مُصمم مسبقًا، لذلك لا يوجد تكوين PostCSS أو Babel لإضافته. تتضمن الإعدادات المدعومة Next.js مع Tailwind، وNext.js مع StyleX، وVite، ومسار CDN بدون إنشاء عبر حزمة UMD على unpkg أو jsDelivr. يُنشئ المدقق التفاعلي أدناه خطوات التثبيت والإعداد الدقيقة لمكدسك ويضع علامة على أي شيء يحتاج إلى التغيير أولاً.

الوجبات السريعة الرئيسية

• Astryx هو أكبر نظام تصميم داخلي لشركة Meta، وهو الآن مفتوح المصدر تحت إشراف معهد ماساتشوستس للتكنولوجيا.
• أكثر من 150 مكونًا من مكونات React يمكن الوصول إليها، وسبعة سمات، والوضع المظلم، والقوالب، وواجهة سطر الأوامر (CLI).
• السلوك وإمكانية الوصول يعيشون في النظام؛ انظر للحياة في سمات CSS-token.
• تم إنشاء الوكيل أولاً: واجهة برمجة تطبيقات واحدة ومستندات وواجهة سطر أوامر (بالإضافة إلى MCP) للبشر والذكاء الاصطناعي على حدٍ سواء.
• يتطلب رد فعل 19+؛ يأتي مع CSS مُصمم مسبقًا بدون مكون إضافي للإنشاء، وهو حاليًا إصدار تجريبي.

مصادر: astryx.atmeta.com و github.com/facebook/astryx