ملاحظة من المؤلف: Astryx نظام تصميم لـ React مفتوح المصدر من Meta، وما زال في مرحلة Beta. يجمع المكوّنات والسمات والوثائق التي يمكن للوكلاء قراءتها. وهو ليس نموذجًا، ولا يوفّر واجهة خاصة بنماذج اللغة الكبيرة.
عند استخدام وكلاء مثل Claude Code أو Cursor أو Codex لتعديل واجهات React، تتكرر مشكلة مألوفة: أزرار الصفحة الأولى مستديرة الحواف، بينما أزرار الصفحة التالية ليست كذلك؛ بعض النوافذ المنبثقة تُغلق عند النقر على الخلفية، وبعضها لا؛ والمسافات تتفاوت بين 12px و14px. السبب ليس قدرة النموذج، بل افتقار الوكيل إلى نظام تصميم يمكنه الرجوع إليه. فيضطر إلى تخمين أسماء المكوّنات والخصائص اعتمادًا على ذاكرته. تعتمد Astryx على جعل الإنسان والوكيل يطّلعان على مرجع المكوّنات نفسه: يقرأ الإنسان الوثائق عبر الموقع، ويصل الوكيل إلى المحتوى نفسه عبر CLI أو AGENTS.md أو MCP.
هذا المقال ليس مجرد تكرار لأوامر التثبيت. سنوضح أدناه ما المعلومات التي أعلنتها Meta رسميًا، وما الذي استند إلى تجربة واحدة أجراها كاتب من جهة خارجية، وما الأعداد التي يمكن التحقق منها حتى 2026-11-10 لكنها قابلة للتغيير. وسنذكر أيضًا، على نحو منفصل، المشاريع التي لا يُنصح بترحيلها في الوقت الحالي.
القيمة الأساسية: بعد قراءة المقال، ستتمكن من تحديد مدى ملاءمة Astryx لمشروع React لديك، وربطها في 4 خطوات بمسار واحد يستخدمه الإنسان والوكيل معًا.
الصورة أعلاه هي اللافتة التي نشرتها Astryx رسميًا. ويمكنك الاطلاع على الواجهات الفعلية عبر الروابط الرسمية الثلاثة التالية؛ لذلك لن نضيف لقطات شاشة أخرى في هذا المقال:
- موقع الوثائق:
astryx.atmeta.com - استعراض المكوّنات (Storybook):
astryx.atmeta.com/storybook/ - التجربة عبر الإنترنت (Sandbox):
astryx.atmeta.com/sandbox/
النقاط الأساسية حول Astryx: ما هو وما ليس عليه
لنوضّح الحدود أولًا. يصف المستودع الرسمي Astryx بأنه نظام تصميم مفتوح المصدر، يمكن تخصيص مظهره بالكامل، وصُمّم لدعم العمل المشترك بين البشر والوكلاء. ترخيصه MIT، ولغته الأساسية TypeScript. ويشير ملف README إلى أنه «حاليًا في مرحلة تجريبية» ولم يصل بعد إلى الإصدار 1.0.
| النقطة | التوضيح | ما يعنيه ذلك لك |
|---|---|---|
| الأساس التقني | يذكر الموقع الرسمي أنه مبني على React 19+ وStyleX | مشاريع React 18 غير مدعومة |
| حجم المكوّنات | يضم، وفقًا للمصدر الرسمي، أكثر من 150 مكوّنًا متاحًا، مع أنواع TypeScript | ستجد فيه معظم العناصر الشائعة لبناء الصفحات |
| مصدر المظهر | سبعة قوالب جاهزة، مع إمكانية تعديل الألوان والخطوط والزوايا والحركات على مستوى الرموز التصميمية | لتغيير النمط، عدّل القالب بدلًا من تعديل كل مكوّن |
| مدخل الوكلاء | CLI، وملف AGENTS.md مُنشأ تلقائيًا، وMCP عن بُعد |
يرجع الوكيل إلى الوثائق بدلًا من الاعتماد على ذاكرته |
| واجهة النماذج | لا يوفّرها؛ لذا عليك ربط أدوات البرمجة بالنموذج بنفسك، مثلًا عبر APIYI على apiyi.com | لا يحتاج عرض المكوّنات بحد ذاته إلى نموذج |
خلفية Astryx: ما الذي صرّحت به الشركة رسميًا؟
كل ما يلي وارد في ملف README والمقال التعريفي الرسمي المنشور في 2026-06-18، والمنسوب إلى فريق Astryx. هذه تصريحات رسمية لم تخضع لتدقيق مستقل: تطوّر Astryx داخل Meta على مدى ثماني سنوات، وأصبح نظام التصميم الأكثر استخدامًا والأكبر حجمًا داخل الشركة، ويدعم أكثر من 13,000 تطبيق. ويتضمن المقال أيضًا رأيًا مفاده أن أنظمة التصميم كانت تُكتب في الماضي ليقرأها البشر، لكن مع كتابة عدد متزايد من الشيفرات البرمجية بواسطة الوكلاء، صُمم Astryx منذ البداية ليكون قابلًا للتشغيل بواسطة الذكاء الاصطناعي، بدلًا من إضافة دعم الوكلاء إليه لاحقًا.
هناك تاريخان في التسلسل الزمني، فلا تخلط بينهما. نُشر المقال التعريفي الرسمي في 2026-06-18، بينما ظهر @astryxdesign/core للمرة الأولى على npm في 2026-06-24. أما مستودع GitHub، فقد أُنشئ في 2026-01-09؛ وهذا تاريخ إنشاء المستودع، وليس تاريخ الإطلاق العام.
ما الفرق بين Astryx وتغيير مظهر الحزمة بالكامل أو النسخ واللصق؟
يقارن المقال التعريفي الرسمي بين طريقتين شائعتين. يقتصر الجدول التالي على نقل وصف Astryx الرسمي، ولا يتناول نتائج اختبارات الأداء:
| الأسلوب | المشكلة كما تصفها الشركة رسميًا | دور Astryx |
|---|---|---|
| تغيير مظهر الحزمة بالكامل: استخدام نظام تصميم شركة كبيرة كاملًا | يكتسب التطبيق طابع العلامة التجارية لتلك الشركة | يتولى النظام السلوك، وإمكانية الوصول، والجودة |
| النسخ واللصق: إنشاء نسخة متفرعة من شيفرة المكوّن في كل مشروع | لا توجد ترقيات موحّدة، وعلى المستخدم ضمان إمكانية الوصول بنفسه | يتولى المظهر نظام السمات، ويمكن تعديله على مستوى الرموز |
| Astryx: تثبيت الحزمة ثم تغيير مظهرها باستخدام السمات | لا يزال في الإصدار التجريبي، ضمن سلسلة الإصدارات 0.x | عند الحاجة، يتيح swizzle إخراج الشيفرة المصدرية لمكوّن منفرد إلى المشروع |
كما يسرد README أربعة أوجه اختلاف. أولًا، الانفتاح الداخلي: يمكن تركيب المكوّنات على أي مستوى، وتصدير الأجزاء الشائعة مباشرةً، كما تتيح ميزة swizzle نقل الشيفرة المصدرية الكاملة لمكوّن معين إلى مشروعك، لتتولى صيانتها بعد ذلك. ثانيًا، لا يفرض النظام قيودًا على التنسيق: يمكنك استخدام className لتجاوز الأنماط، سواء مع Tailwind أو CSS modules أو CSS العادي. ثالثًا، لا حاجة إلى إضافة غلاف لتخصيص المكوّن؛ فالسمات في جوهرها مجموعة من تجاوزات خصائص CSS المخصصة. رابعًا، صُممت واجهات API والوثائق وأداة CLI معًا، بحيث يرجع إليها البشر ومساعدو الذكاء الاصطناعي على حد سواء.
حالة استخدام فردية من طرف ثالث: تجربة أحد المؤلفين مع تبديل السمات
نشر موقع LogRocket مقالًا في 2026-08-13، ربط فيه المؤلف Chizaram Ken أداة Claude Code بـ Astryx، وأنشأ ثلاث واجهات، ثم أنشأ الواجهات الثلاث نفسها باستخدام shadcn/ui. ووفقًا للمؤلف، عندما بدّل السمة من neutral إلى gothic، عدّل ملفين وأربعة أسطر من الشفرة، من دون المساس بأي ملف مكوّنات.
هذه تجربة أجراها المؤلف بنفسه، وليست اختبارًا معياريًا ولا نتيجة اختبار أجريناه في هذا المقال. كما أنها أُجريت قبل الإصدار الحالي 0.7.11، لذا كان الإصدار المستخدم آنذاك مختلفًا عن الإصدار الحالي. يمكن الاستشهاد بها مثالًا على تصميم يفصل بين السمات والمكوّنات، لكن لا يصح اعتبارها استنتاجًا عن الأداء.
البدء سريعًا باستخدام Astryx: 4 خطوات لوصل المستخدم والوكيل بالمسار نفسه
تتوافق الخطوات الأربع أدناه مع وثيقتَي البدء السريع والعمل باستخدام الذكاء الاصطناعي الرسميتين. توضح كل خطوة ما ينبغي فعله في الطرفية أو الملف، والنتيجة التي تدل على اكتمالها. رُتبت الخطوات التالية استنادًا إلى الوثائق الرسمية، ولم ننفّذ التثبيت فعليًا هنا.
الخطوة 1: تثبيت الحزم الأربع من Astryx
- شغّل في الطرفية:
npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex - ثم شغّل:
npm install -D @astryxdesign/cli - تتوفر الصيغة المقابلة لكل من pnpm وyarn، مع بقاء أسماء الحزم كما هي.
- معيار الإكمال: تظهر أسماء الحزم الأربع في
package.json، ويكون إصداراreactوreact-domهو 19 أو أحدث.
يجب تثبيت StyleX لأنه أحد تبعيات النظير لـ core. لكن التوثيق الرسمي يوضح أيضًا أن استخدام Astryx لـ StyleX في كتابة الأنماط أمر شفاف للمستخدم، ولا يتطلب من مشروعك التحول إلى StyleX. لن تستقبل المكونات الأنماط عبر xstyle إلا إذا اخترت استخدام StyleX بنفسك.
الخطوة 2: إنشاء مستندات يقرأها الوكيل باستخدام init
- شغّل في الطرفية:
npx @astryxdesign/cli init - لا يتطلب هذا الأمر أي تفاعل، ويمكن للأشخاص وCI والبرامج النصية والوكلاء تشغيله مباشرة.
- معيار الإكمال: يظهر الملف
AGENTS.mdفي جذر المشروع. وإذا كان المشروع يحتوي مسبقًا علىCLAUDE.md، فستُضاف إليه التعليمات نفسها أيضًا.
والسبب في إضافتها إلى CLAUDE.md هو أن التوثيق الرسمي يوضح أن Claude Code يتجاوز AGENTS.md عندما يكون ملف CLAUDE.md موجودًا في المشروع. ويمكنك تحديد الأداة المطلوبة باستخدام وسيطة، مثل --agent claude أو --agent cursor أو --agent codex أو --agent all. أما Gemini CLI فلا يقرأ إلا GEMINI.md، لذا يضيف init سطرًا فيه للإشارة إلى AGENTS.md.
تدير Astryx القسم المحصور بين العلامات في الملف، ولا يعدّل init وupgrade إلا هذا القسم، من دون التأثير في أي محتوى آخر أضفته بنفسك. ويشير التوثيق الرسمي أيضًا إلى أن الوكلاء كثيرًا ما يخطئون في تخمين مسار CLI، لذا يُنصح بإضافة اسم مستعار لبرنامج نصي في package.json:
- اسم البرنامج النصي:
astryx - قيمة البرنامج النصي:
node node_modules/@astryxdesign/cli/clients/cli/bin/astryx.mjs - طريقة الاستدعاء:
npm run astryx -- component --list
الخطوة 3: أضف CSS وغلّف التطبيق بموضوع neutral
- استورد
@astryxdesign/core/reset.cssفي ملف CSS العام. - ثم استورد
@astryxdesign/core/astryx.css. - شغّل
npx @astryxdesign/cli theme add neutralفي الطرفية لإنشاء وحدة الموضوع الخاصة بالتطبيق. - استورد
Themeمن@astryxdesign/core/theme، ومرّر إليهthemes[defaultThemeSlug]لتغليف التطبيق بالكامل. - استورد
Buttonمن@astryxdesign/core/Button. يستخدم المثال الرسمي الخاصيتينlabelوonClick. - معيار الإنجاز: ظهور زر بتنسيق Astryx على الصفحة، لا زر المتصفح الافتراضي.
لا يحتاج هذا المسار إلى إضافة بناء، ولا إلى إعداد PostCSS أو Babel. لكن انتبه إلى أن reset موضوع ضمن @layer reset، وأن أنماط المكوّنات ضمن @layer astryx-base. إذا كان المشروع يتضمن CSS عامًا أو reset قديمًا أو Tailwind، فعليك تحديد ترتيب الطبقات بنفسك؛ فالأنماط غير الموضوعة ضمن طبقات ستتجاوز astryx-base، بصرف النظر عن أولوية المحددات. توصي الوثائق الرسمية بقراءة القسمين الواردين في npx @astryxdesign/cli docs migration/migration-setup قبل البدء في إنشاء الصفحات.
فيما يلي الأوصاف الرسمية للموضوعات السبعة الجاهزة. إذا لم تكن لديك تفضيلات محددة، توصي الوثائق الرسمية بالبدء بـ neutral:
| حزمة الموضوع | الوصف الرسمي | مناسبة للاستخدام في |
|---|---|---|
theme-neutral |
ألوان منخفضة التشبع وتصميم بسيط | نقطة بداية افتراضية |
theme-butter |
درجات ذهبية دافئة مع لمسات زرقاء | منتجات ذات طابع دافئ |
theme-chocolate |
ألوان الشوكولاتة والكراميل | أسلوب يميل إلى الطابع القديم |
theme-gothic |
داكن فقط، بطابع الحبر وnoir | واجهات داكنة بالكامل |
theme-matcha |
أخضر نباتي | أسلوب يميل إلى الطبيعة |
theme-stone |
درجات محايدة دافئة شبيهة بالحجر الرملي | لوحات تحكم بطابع رصين |
theme-y2k |
أسلوب حيوي مستوحى من فترة ما حول عام 2000 | صفحات الحملات والمنتجات الترفيهية |
الخطوة 4: اجعل الوكيل يكتب واجهة المستخدم وفق الخطوات الرسمية الثلاث، واستعن بـ MCP عند الحاجة
تطلب القواعد التي ينشئها init من الوكيل اتباع الترتيب التالي قبل كتابة واجهة المستخدم:
npx @astryxdesign/cli build "<想法>": يعرض قالب الصفحة الأقرب إلى فكرتك، ويشمل قالبًا واحدًا على الأقل لهيكل التطبيق، وقالبين بديلين، إلى جانب الكتل والمكونات التي لا تزال مطلوبة.npx @astryxdesign/cli template <名字> <路径>: يضيف القالب إلى المشروع، مع الحفاظ على الإطار والتباعد الأصليين واستبدال المحتوى فقط.npx @astryxdesign/cli component <组件名>: يعرض خصائصpropsوأمثلة لكل مكوّن ستستخدمه.- تتضمن القواعد أيضًا عدة محظورات: ابدأ كل صفحة من قالب؛ لا تستخدم عناصر
divمجردة؛ لا تكتبstyle={{}}؛ استخدم الرموز التصميميةtokenبدلًا من الأرقام السحرية. - معيار الإنجاز: يجب أن تكون أسماء المكونات وخصائص
propsالتي يستشهد بها الوكيل واردة في مخرجات CLI، لا من اختراعه.
يمكنك التحقق من ذلك بطرح الأسئلة الرسمية الثلاثة: ما مسار الاستيراد الصحيح لـ Button؟ كيف تمنع إغلاق Dialog بسهولة؟ وما الخاصية التي يستخدمها Selector لتمرير items؟ إذا لم يستطع الوكيل الإجابة، شغّل init أولًا. الإجابات الصحيحة هي ما يعرضه CLI على جهازك.
عند الحاجة إلى البحث عن بُعد، يمكنك ربط MCP الرسمي عبر العنوان https://astryx.atmeta.com/mcp. يوفّر أداتين: search(query) للبحث عن المكونات والوثائق والقوالب، وget(name) لجلب الوثائق كاملة. تختلف طريقة الإعداد من عميل إلى آخر:
| العميل | طريقة الإعداد | ملاحظات |
|---|---|---|
| Claude Code | شغّل claude mcp add --transport http astryx https://astryx.atmeta.com/mcp في الطرفية |
اسم الخدمة هو astryx |
| Cursor | اكتب عنوان URL فقط في .cursor/mcp.json |
لا تكتب type للخدمة البعيدة |
| Cline | اجعل قيمة transport هي streamableHttp |
وليست http |
| Claude Desktop | من الإعدادات، اختر Connectors → Add custom connector، ثم ألصق عنوان URL | لا تضع في ملف الإعدادات إلا stdio المحلي |
| عملاء آخرون | اجعل قيمة type هي http، وأضف عنوان URL |
سيتم تجاهل قيمة transport غير المعروفة، وقد يظهر الاتصال على أنه قائم من دون توفر أي أدوات |
لم توضّح الجهة الرسمية اتفاقية مستوى الخدمة (SLA) لهذا العنوان البعيد، ولا طريقة التعامل مع تعذّر الخدمة. أما CLI فهو واجهة محلية لمجموعة الوثائق نفسها، لذا يمكنك مواصلة العمل به إذا تعذّر الاتصال بـ MCP.
من أين يحصل وكيل البرمجة على النموذج؟
يتولى نظام التصميم مسؤولية المكوّنات والوثائق، لكن وكيل البرمجة يحتاج إلى الاتصال بنموذج منفصل كي يتمكن من إنشاء الشفرة. إذا أراد الفريق توفير نموذج لأدوات مثل Claude Code وCursor، فيمكنه استخدام واجهة API المتوافقة مع OpenAI من APIYI apiyi.com، مع تعيين base_url إلى https://api.apiyi.com/v1، وضبط اسم النموذج وفقًا للاسم الوارد في قائمة النماذج الحالية. يُرجى الرجوع إلى قائمة النماذج في منصة APIYI لمعرفة الطرازات والأسعار؛ وتوفر APIYI النماذج المتاحة بحسب القائمة.
تجدر الإشارة إلى أن المكوّنات تُعرض في المتصفح، لذا لا تحتاج إلى أي واجهة لنموذج. واستخدام APIYI من عدمه لا يؤثر في تثبيت Astryx أو تشغيله.
🚀 اقتراح للبدء السريع: يمكنك تنفيذ الخطوات الأربع السابقة لإنشاء صفحة قالب في فرع جديد، ثم تطلب من الوكيل كتابة الصفحة مرتين باستخدام النموذج نفسه: مرة مع ملف
AGENTS.mdومرة من دونه. قارن أسماء المكوّنات وخصائصpropsفي الناتجين. ويمكن للمستخدمين الجدد الحصول على رصيد مجاني للاختبار من APIYI apiyi.com، واستخدامه لإجراء هذه المقارنة.
مخاطر Astryx والحالات التي لا يُنصح فيها بالانتقال إليه
المخاطر المرتبطة بمنتج Astryx نفسه
لا يزال Astryx في مرحلة Beta، ورقم إصداره 0.x. حتى 2026-11-10، كان الإصدار latest على npm هو 0.7.11 (صدر في 2026-11-07)، بينما صدر الإصدار المستقر السابق 0.7.10 في 2026-11-06. تُحدَّث الإصدارات المستقرة بوتيرة تقارب التحديث اليومي. عند الترقية، يجب تحديث جميع الحزم @astryxdesign/* التي يستخدمها المشروع إلى الإصدار نفسه، ثم تشغيل الأمر npx @astryxdesign/cli upgrade --from <旧的 core 版本> --apply. يحدد كل قالب إصدار core المتوافق معه؛ وإذا لم تُحدّث القوالب، فسيحدث تعارض بين القالب وcore. وإذا كان مدير الحزم يؤخر تثبيت الإصدارات الجديدة استنادًا إلى تاريخ نشرها، فيجب استثناء النطاق @astryxdesign/* بأكمله. وفي pnpm، يُضاف @astryxdesign/* إلى minimumReleaseAgeExclude.
أما في ما يخص المخططات، فلا تُنشر الحزمتان @astryxdesign/vega و@astryxdesign/charts إلا تحت وسم canary على npm، ولا تتوفر لهما إصدارات مستقرة. حتى 2026-11-10، كان إصدار canary هو 0.7.12-canary.dfd75a6. ورغم أن رقم إصداره أحدث من latest، فلا ينبغي استخدامه اعتمادًا إنتاجيًا.
مخاطر استخدام النماذج عبر APIYI
يقتصر هذا القسم على استدعاء النماذج بواسطة وكيل البرمجة. تمر الطلبات عبر بوابة APIYI، ويتولى المستدعي إدارة مفتاح API والتكاليف بنفسه. ويعتمد الأداء الفعلي للنموذج على الطراز الذي تختاره والاستجابة الفعلية من البوابة. هذا ليس تسجيل دخول إلى حساب Meta، ولا خدمة لتجميع الحسابات.
مشاريع لا يُنصح بنقلها في الوقت الحالي
- ما زال المشروع يستخدم React 18: تتطلب تبعيات النظير في core أن يكون كل من
reactوreact-domبالإصدار 19.0.0 أو أحدث. - تحتاج إلى ضمانات استقرار الإصدار 1.0 الآن: يصنّف المطورون المنتج حاليًا على أنه Beta، ولم يقدموا هذا النوع من الضمانات.
- تحتاج إلى إصدارات مستقرة من المخططات الآن: لا تتوفر حزم المخططات إلا بإصدارات canary.
- تريد أن تكون الشيفرة المصدرية لكل مكوّن في مستودعك منذ اليوم الأول: هذا أسلوب قائم على النسخ واللصق. يُثبَّت Astryx افتراضيًا كحزمة، وتتيح لك ميزة swizzle استخراج الشيفرة المصدرية لمكوّن واحد عند الحاجة لاحقًا.
انتشار Astryx وإصداراته: إحصاءات حتى 2026-11-10
الأرقام التالية حتى 2026-11-10، وستتغير لاحقًا؛ لذا لا ينبغي اعتبارها حقائق ثابتة:
| المؤشر | القيمة | المصدر |
|---|---|---|
| نجوم GitHub | 20,217 | GitHub API meta/astryx |
| التفرعات (forks) | 1,536 | GitHub API |
| المسائل وطلبات السحب غير المغلقة | 297 / 373 | GitHub Search API (المجموع 670، ولا يعني ذلك وجود 670 خطأ) |
| التنزيلات الأسبوعية لـ core | 661,968 مرة (من 2026-11-02 إلى 11-08) | npm Downloads API؛ الإحصاء لعدد مرات التنزيل، لا لعدد المستخدمين |
| تنزيلات core خلال آخر 30 يومًا | 1,725,492 مرة (من 2026-10-10 إلى 11-08) | npm Downloads API |
الأسئلة الشائعة
س1: هل Astryx مكتبة مكوّنات مبنية على Tailwind؟
لا. يوضح الموقع الرسمي أنها مبنية على React 19+ وStyleX، وتوفّر ملفات CSS مُسبقة التجميع. ويمكن استخدامها مع Tailwind؛ إذ يمكن تعديل المظهر باستخدام `className`، كما يضم مجلد `apps/` في المستودع مثالين: example-vite-tailwind وexample-nextjs-tailwind. عند استخدامهما معًا، انتبه إلى ترتيب طبقات CSS المذكور سابقًا.
س2: هل يمكن استخدام Astryx في مشروع React 18؟
لا. يشترط الحِزم الأساسية في الإصدار 0.7.11 أن يكون كل من `react` و`react-dom` بالإصدار 19.0.0 أو أحدث، وهذا الشرط لا ينطبق على React 18. لذا عليك ترقية المشروع إلى React 19 أولًا.
س3: هل يمكن للوكيل Agent استخدام وثائق Astryx من دون الاتصال بـ MCP؟
نعم. يكفي ملف `AGENTS.md` الذي ينشئه الأمر init، مع واجهة سطر الأوامر المحلية، لتنفيذ الخطوات الثلاث: build وtemplate وcomponent. أما MCP فهو مدخل آخر للاستعلام عن بُعد. وإذا أردت لصق المحتوى في محادثة عبر الويب، يمكنك استخدام `–detail brief` أو `–detail compact` أو `–dense` لتقصير المخرجات.
س4: هل facebook/astryx وmeta/astryx مستودعان مختلفان؟
لا، إنهما مستودع واحد. حتى 2026-11-10، يؤدي الوصول إلى `github.com/facebook/astryx` إلى إعادة توجيه 301 إلى `github.com/meta/astryx`، وهو العنوان الرسمي للمستودع. والمقصود بـ facebook/astryx في المقالات القديمة هو المستودع نفسه.
س5: هل يمكن استخدام مكوّنات الرسوم البيانية في Astryx في بيئة الإنتاج؟
لا نوصي بذلك حاليًا. لا تُنشر حزمتا `@astryxdesign/vega` و`@astryxdesign/charts` إلا ضمن وسم canary، كما يوضح ملف README أنه لا يتوفر إصدار مستقر منهما. يمكن لمشروعات الإنتاج مواصلة استخدام حلول الرسوم البيانية الحالية في الوقت الراهن.
س6: هل يكفي ترقية الحزمة core وحدها عند التحديث؟
لا. تشترط الجهة المطوّرة ترقية جميع حزم `@astryxdesign/*` المستخدمة في المشروع إلى الإصدار نفسه، وإلا فلن يتوافق المظهر مع الحزمة core. بعد الترقية، شغّل `upgrade –from <旧版本> –apply`؛ فسيحدّث أيضًا أقسام Astryx القديمة في ملف `AGENTS.md`.
س7: هل يتطلب استخدام Astryx واجهة API لنموذج؟ وما علاقتها بـ APIYI؟
لا يتطلب عرض المكوّنات واجهة API لنموذج. تحتاج إلى الاتصال بنموذج فقط عندما تطلب من وكيل برمجة كتابة الشيفرة، وتتولى هذه المهمة أدوات مثل Claude Code وCursor. وإذا أراد الفريق توفير نموذج بنفسه، فيمكنه استخدام مفتاح واحد عبر APIYI على apiyi.com لاستدعاء عدة نماذج رائجة. ولا توجد أي علاقة شراكة بين APIYI وMeta أو Astryx.
س8: هل يمكن نسخ الشيفرة المصدرية لمكوّن معين إلى مستودعي وتعديلها؟
نعم، لكن هذا ليس الإجراء الافتراضي. ينقل `swizzle` الشفرة المصدرية الكاملة لمكوّن واحد إلى مشروعك، وبعدها تصبح مسؤولًا عن صيانتها والتعامل بنفسك مع الترقيات اللاحقة. كما توصي الوثائق الرسمية باستخدام `theme eject` فقط عندما تكون بحاجة واضحة إلى فرع مستقل من الشفرة المصدرية.
النقاط الأساسية حول Astryx
- الهدف: نظام تصميم مفتوح المصدر من Meta مبني على React، ومرخّص بموجب MIT، ولا يزال في المرحلة التجريبية وإصدارات 0.x.
- تقسيم المسؤوليات: يتولى النظام السلوك وإمكانية الوصول، بينما يتولى المظهر؛ لذا لا يتطلب تغيير السمة تعديل ملفات المكوّنات.
- المتطلبات الأساسية: يلزم React 19 أو إصدار أحدث، ويجب تثبيت StyleX باعتباره اعتمادًا نظيرًا.
- مسار Agent: ابدأ بتشغيل
initلإنشاءAGENTS.md، ثم أنشئ الصفحة بالترتيب التالي: build → template → component. - استخدام MCP اختياري: العنوان البعيد هو
https://astryx.atmeta.com/mcp، أما واجهة CLI المحلية فهي مدخل إلى مجموعة الوثائق نفسها. - قواعد الترقية: حدّث جميع حزم
@astryxdesign/*إلى الإصدار نفسه، علمًا بأن حزمة المخططات متاحة بإصدار canary فقط. - توفير النموذج بشكل منفصل: يمكن توصيل النموذج الذي يحتاج إليه Agent البرمجة عبر APIYI apiyi.com من خلال نقطة موحّدة.
الخلاصة: هل يستطيع Astryx مساعدة الوكلاء على إنشاء واجهات متناسقة؟
تكمن المشكلة في عدم اتساق الواجهات التي ينشئها الوكلاء في أنهم لا يستطيعون سوى تخمين أسماء المكوّنات وخصائصها (props). ويعالج Astryx هذه المشكلة بوضع المكوّنات والسمات والوثائق المخصّصة للوكلاء ضمن نظام واحد:
- البدء في 4 خطوات: ثبّت الحزم الأربع، وشغّل init، واستورد CSS، وأحِط التطبيق بـ Theme. بعدها، اطلب من الوكيل إجراء استعلام من ثلاث خطوات قبل كتابة الشفرة.
- ميّز بين مصادر المعلومات: أرقام أكثر من 13,000 تطبيق وثماني سنوات من الاستخدام الداخلي هي بيانات تذكرها الجهة المطوّرة؛ أما تغيير السمة بتعديل أربعة أسطر فقط، فهو نتيجة تجربة واحدة أجراها كاتب مستقل؛ وعدد النجوم والتنزيلات هو كما كان في 2026-11-10.
- تحقّق أولًا من مدى ملاءمته: إذا كان مشروعك لا يزال يعمل بـ React 18، أو كنت تحتاج إلى مكتبة رسوم بيانية مستقرة أو ضمانات إصدار 1.0، فيمكنك تأجيل الترحيل.
إذا كان مشروعك يعمل بالفعل بـ React 19، وكنت تريد الحد من اختلاق الوكيل لخصائص غير موجودة، فجرّب صفحة قالب واحدة على فرع منفصل. ويمكنك الوصول إلى النماذج التي يحتاج إليها وكيل البرمجة عبر APIYI على apiyi.com، ثم مقارنة أداء النماذج المختلفة في توليد الشفرة باستخدام رصيد الاختبار المجاني، مع توحيد ملف AGENTS.md لكلٍّ منها.
📚 المراجع
- مستودع Astryx على GitHub: ملف README، وقائمة الحزم، وقائمة السمات، وشرح المبادئ
- الرابط:
github.com/meta/astryx -
ملاحظة: المصدر الرئيسي للمعلومات التي أعلنها الفريق رسميًا؛ ويُعاد توجيه
facebook/astryxإلى هذا المستودع. -
المقال التعريفي الرسمي بـ Astryx: شرح فلسفة التصميم، نُشر في 2026-06-18
- الرابط:
astryx.atmeta.com/blog/introducing-astryx -
ملاحظة: المقارنة مع استبدال مظهر الحزمة بالكامل ومع أسلوب النسخ واللصق مستمدة من هذا المقال.
-
وثيقتا Getting Started وWorking with AI: التثبيت، والسمات، وتهيئة
initوMCP - الرابطان:
astryx.atmeta.com/docs/getting-started،astryx.atmeta.com/docs/working-with-ai -
ملاحظة: هما المرجع الرسمي للخطوات الأربع الواردة في هذا المقال.
-
ملاحظات إصدار Astryx v0.7.11: الإصدار المستقر الحالي وطريقة الترقية
- الرابط:
github.com/meta/astryx/releases/tag/v0.7.11 -
ملاحظة: المصدر الأصلي للشرط الذي ينص على توحيد إصدار جميع الحزم.
-
مقال مقارنة من LogRocket: نُشر في 2026-08-13، بقلم Chizaram Ken
- الرابط:
blog.logrocket.com/astryx-vs-shadcn-meta-ai-react-claude - ملاحظة: تجربة واحدة من جهة خارجية، أُجريت بإصدار أقدم من 0.7.11.
الكاتب: فريق APIYI التقني
للتواصل التقني: إذا كانت لديكم أسئلة بشأن ربط وكلاء البرمجة بالنماذج، يُسعدنا التواصل معكم عبر الصفحة الرئيسية لموقع APIYI.
