شرح Astryx من Meta: نظام تصميم مفتوح المصدر جاهز لوكلاء AI

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

في الدليل ده هنشرح إيه هو Astryx، أهم مميزاته، وإزاي تبدأ تستخدمه في مشروع React. المعلومات مبنية على المستودع والتوثيق الرسميين، وليست نتيجة اختبار أداء مستقل.

إيه هو Astryx من Meta؟

Astryx هو Design System: مجموعة مكونات واجهة وقواعد تصميم وثيمات وأدوات تساعدك تبني صفحات متسقة. الفكرة أوسع من مكتبة أزرار؛ النظام بيجمع أساسيات الألوان والخطوط والتخطيط مع المكونات والقوالب الشائعة في مكان واحد.

بحسب README الرسمي، النظام اتطور داخل Meta على مدار 8 سنين، وبيشغّل أكتر من 13,000 تطبيق داخل الشركة. دي أرقام يذكرها فريق المشروع عن الاستخدام الداخلي، ومش معناها إن الإصدار العام خارج مرحلة التجربة؛ المستودع بيصنّف Astryx حاليًا على إنه Beta.

أهم مميزات Astryx

أكتر من 150 مكوّن واجهة

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

7 ثيمات مع تخصيص هوية البراند

المشروع بيوفّر ثيمات جاهزة بأسماء neutral وbutter وchocolate وmatcha وstone وgothic وy2k، بجانب الوضع الداكن. تخصيص الثيم بيعتمد على CSS Custom Properties، وده بيساعد في تعديل الهوية البصرية من غير تكرار تعديلات منفصلة على كل مكوّن.

العمل مع أساليب التنسيق الموجودة عندك

رغم إن Astryx بيستخدم StyleX داخليًا، التوثيق يوضح إن الاستخدام المعتاد بيستفيد من CSS جاهز، مع إمكانية التخصيص عبر className باستخدام Tailwind أو CSS Modules أو CSS عادي. الربط البسيط لا يتطلب إضافة Build Plugin خاص بـAstryx، مع ضرورة اتباع إعدادات الإطار المستخدم.

قوالب لأنماط صفحات متكررة

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

يعني إيه Astryx جاهز لوكلاء الذكاء الاصطناعي؟

المقصود إن التوثيق وواجهات المكونات وأداة CLI متصممين عشان الإنسان ووكيل البرمجة يرجعوا لنفس القواعد. بدل ما الوكيل يخمّن أسماء المكونات أو خصائصها، يقدر يقرأ الفهرس والتوثيق والأمثلة.

أمر init في CLI بيضيف دليل اكتشاف مكونات Astryx إلى ملفات تعليمات المشروع مثل AGENTS.md أو CLAUDE.md. ده بيعرّف الوكيل بالمراجع المتاحة، لكنه مش ضمان إن أي واجهة هتتولد صح من أول محاولة. اطلب منه يقرأ توثيق المكوّن، ثم راجع النتيجة واختبرها.

إزاي تبدأ استخدام Astryx؟

1. راجع إصدار React

المتطلب المعلن هو React 19 أو أحدث، مع react-dom متوافق. لو مشروعك على إصدار أقدم، قيّم الترقية وتوافق باقي المكتبات قبل إضافة Astryx.

2. ثبّت المكتبة والثيم وأداة CLI

داخل مشروع React مناسب، أوامر npm المذكورة في التوثيق هي:

npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
npm install -D @astryxdesign/cli

3. أضف ملفات CSS بالترتيب

في الإعداد البسيط، حمّل ملفات التنسيق بالترتيب التالي، ثم اتبع مثال Theme Provider الخاص بإطارك في التوثيق:

@import '@astryxdesign/core/reset.css';
@import '@astryxdesign/core/astryx.css';
@import '@astryxdesign/theme-neutral/theme.css';

لو بتستخدم Tailwind، اتبع دليل الدمج المخصص له؛ ترتيب CSS Layers بيفرق في أولوية التنسيق، ومش كفاية تضيف الاستيرادات في أي مكان.

4. جهّز مرجع المكونات للوكيل

npx @astryxdesign/cli init
npx @astryxdesign/cli component --list
npx @astryxdesign/cli component Button

استخدم الاسم الكامل @astryxdesign/cli كما يوضح التوثيق. الاسم غير المحدد astryx قد يشير إلى حزمة npm مختلفة قبل تثبيت CLI ضمن المشروع. راجع تعديل ملفات التعليمات بعد init.

5. ابدأ بصفحة واحدة

اختار شاشة بسيطة، زي إعدادات الحساب، وجرّب المكونات والثيم عليها. راجع حالات التحميل والخطأ والحقول الفارغة، وبعد نجاح التجربة وسّع الاستخدام لباقي الصفحات.

مثال عملي: واجهة CRM بمساعدة وكيل برمجة

كمثال مقترح، اطلب من وكيل البرمجة بناء صفحة متابعة عملاء بمكونات Astryx، مع الرجوع لتوثيق كل مكوّن قبل استخدامه. حدد الأعمدة المطلوبة، وحالات عدم وجود بيانات، وطريقة عرض أخطاء الحفظ.

ممكن تبدأ بالطلب ده: «ابنِ صفحة متابعة عملاء باستخدام Astryx والثيم neutral. اقرأ توثيق المكونات أولًا، واستخدم بيانات تجريبية، وضمّن حالات التحميل والخطأ والجدول الفارغ. اعرض عليّ النتيجة قبل ربط أي خدمة فعلية».

ده مثال لطريقة توجيه الوكيل، وليس قالبًا تم اختباره هنا. ولو مهتم بإدارة أكثر من وكيل، اقرأ شرح OpenMausBot وفِرق AI Agents.

إيه اللي تراجعه قبل الاعتماد على Astryx؟

• حالة Beta واحتمال تغير الواجهات بين الإصدارات؛ ثبّت الإصدارات وراجع سجل التغييرات.
• توافق React وباقي مكتبات المشروع وإعدادات التنسيق.
• العربية واتجاه RTL والخطوط وأطوال النصوص في تطبيقك؛ لا تفترض اكتمال الدعم من غير اختبار.
• حزم الرسوم البيانية لها وضع مختلف: README يذكر أن charts وvega متاحتان تحت canary، بينما lab غير منشورة على npm.

أسئلة شائعة عن Astryx

هل Astryx مجاني ومفتوح المصدر؟

المستودع منشور بترخيص MIT. راجع ملف الترخيص والتبعيات عند إدخاله في منتجك.

هل لازم أستخدم AI عشان أستفيد منه؟

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

هل بيبني موقع كامل من غير برمجة؟

هو نظام تصميم لمشاريع React وأداة مساعدة في التطوير. بناء منتج كامل يظل محتاج منطق تطبيق وبيانات واختبارات وربط خدمات حسب المتطلبات.

المصادر الرسمية

ابدأ من مستودع Astryx من Meta، وراجع دليل المكتبة وخطوات الدمج. تقدر تشوف المكونات في Storybook الرسمي وتستكشف توثيق Astryx قبل اختيار المكونات لمشروعك.