فيديو · 5 أكتوبر 2026 · قراءة 1 دقائق

أربع مكتبات UI لمساعدة AI Agent في التصميم

يعرض Abdul Osama (عبدول أسامة) أربع مكتبات لمكوّنات الواجهات يمكن تقديمها إلى AI Agent ليستند إليها عند بناء التصميم: Radix UI وArk UI وPark UI وAriakit. فكرته هي استخدام مكوّنات وأمثلة جاهزة كأساس، ثم تخصيص الألوان والخطوط بما يناسب المشروع.

أهم النقاط

استخدم مكتبة مكوّنات مرجعًا للـAI Agent بدل البدء من واجهة بلا أساس واضح.
الخيارات المذكورة هي Radix UI وArk UI وPark UI وAriakit.
يذكر الفيديو دعم Ark UI لأطر React وVue وSolid.
يمكن البناء على مكوّنات Ariakit وأمثلتها مع تخصيص الألوان والخطوط.

إذا كنت تطلب من AI Agent تصميم واجهة، يقترح Abdul Osama (عبدول أسامة) أن تعطيه مكتبة مكوّنات واضحة يستند إليها بدل أن تترك له ابتكار كل شيء من البداية. الـAI Agent هنا مساعد برمجي ينفّذ مهام بناء الواجهة، وUI kit أو مكتبة الواجهات مجموعة مكوّنات وأمثلة تساعده على ذلك.

«تقدر تديهم للـAI Agent… يبتدي يعمل لك UI حلو بدل ما يقعد يخترع في UI على ذوقك.» — عبدول أسامة

الخيارات الأربعة

| المكتبة | ما يميّزها في الفيديو | |---|---| | Radix UI | مكتبة مكوّنات مفتوحة المصدر لواجهات React؛ كانت نقطة انطلاق بحثه عن هذه الخيارات. | | Ark UI | مكتبة مكوّنات للواجهات؛ يشير إلى دعمها React وVue وSolid وإلى اختلاف طابعها عن Radix UI. | | Park UI | مكتبة مكوّنات يصف طابعها بأنه احترافي ومناسب لواجهات الشركات أو البرامج الإدارية. | | Ariakit | مكتبة مكوّنات مفتوحة المصدر؛ يلفت إلى كثرة أمثلتها وإمكان البناء عليها مع تخصيص الألوان والخطوط. |

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

بالأرقام

4 مكتبات يقترحها للفحص.
3 أطر عمل يذكرها عند الحديث عن Ark UI: React وVue وSolid.

ماذا تفعل بعد ذلك؟

افتح أمثلة المكتبة الأقرب لطبيعة مشروعك، ثم أعطِ AI Agent اسمها والمكوّنات التي تريد استخدامها، مع ألوانك وخطوطك. راجع الناتج بنفسك قبل اعتماده؛ فوجود مكتبة مكوّنات لا يحسم جودة التصميم النهائي أو ملاءمته لاحتياجات المستخدمين.

أسئلة وأجوبة

ما مكتبات الواجهات الأربع المذكورة؟

Radix UI وArk UI وPark UI وAriakit.

لماذا أعطي AI Agent مكتبة UI؟

ليقترح أو يبني الواجهة انطلاقًا من مكوّنات وأمثلة موجودة، بدل ابتكار شكلها بالكامل من الصفر.

أي خيار يذكر الفيديو أنه يدعم React وVue وSolid؟

Ark UI.

هل تكفي المكتبة وحدها لإنتاج تصميم مناسب؟

لا. يقترح الفيديو تخصيص الألوان والخطوط، ومن العملي أيضًا مراجعة الواجهة الناتجة قبل استخدامها.

النص الكامل للفيديو

جايب لك أربع UI Kits هيخلوا الAI Agent بتاعك يطلع شغل حلاوة والأحلى إنهم مش معروفين قوي أو ما كانوش معروفين قبل الفيديو ده وكلهم open source, accessible وتقدر تديهم للAI Agent بضغطة زر واحدة يبتدي يعمل لك UI حلو بدل ما يقعد يخترع في UI على زوقك إنت وبعدين تكتشف أنه زوقك يعني مش أعلى حاجة في الدنيا. على فكرة مش هقولهم بالترتيب وإنتوا عارفين أنا مش بخليكوا تستنوا للآخر عايز تستنى تستنى برحتك. الأربعة بترتيب random أول واحد Radix UI وده بصراحة اللي خلاني أعمل فيديو أصلا أنا كنت أتفرج على فيديو لفاوندر على طالع على Y Combinator اللي هو فاوندر Paper. Paper AI ده تول تصميم مكان فيجما كده للناس اللي عايزة تتزاين بالAI. المهم قالك إحنا قبل ما نعمل Paper كنا عاملين Radix دخلت بص إيه Radix دي لقيتها بقيت open source ومكتبة محترمة جداً وحلوة جداً ومش مشهورة. قلت أدور على إيه تاني اللي مش مشهور فلقيت أن في واحدة اسمها Arc UI كمان شبه Radix بس بزوق مختلف شوية والحلو فيها أنها مش بتشتغل React بس زي Radix. لا دي بتشتغل React وView وSolid. عندها components بصراحة زي Radix وقتر شوية مميزة ولذيذة خش بص عليها. التالتة بقى اسمها Park UI دي Professional قوي تحس أنها حزست بحديد كده. لشركة لمصنع لSoftware بتاع حسابات حاجة كده Professional يعني. بعدين الأخيرة لطيفة قوي برضو اسمها Aria Kit لقيتها في الآخر ودي ناس أقل بكتير بتتكلم عنها Online عموماً. مميزة Open Source Components والأمثلة فيها كتير والAgent بكل سهولة هيعرف يستخدم العضم بتاع الUI دوت ويعمل حاجة بألوانك وزوقك وفونتك الآخر. والخلاصة أسميهم Radix UI، Arc UI، Park UI وAria Kit. رد بأي تعليق وأبعتلك أسميهم والروابط بتاعتهم على الخاص. أنا عبدالقسامة تابعيني عشان تعرف كل جديد في الزكاة الصناعي والتسويق.

كُتب هذا النص بمساعدة الذكاء الاصطناعي من الفيديو، وقد يحتوي على أخطاء بسيطة في النقل. · نسخة Markdown

شاهد أيضًا

أنظمة تصميم مفتوحة المصدر لمشاريع Vibe Coding

يوضح Abdul Osama (عبدول أسامة) أن طلب تصميم «شكله حلو» من الذكاء الاصطناعي لا يحدد له اتجاهًا بصريًا واضحًا. ينصح بتسمية نظام التصميم وتحديد لوحة الألوان والهوية البصرية، ويعرض خمسة خيارات مفتوحة المصدر يمكن تجربتها في مشاريع Vibe Coding.

5 أكتوبر 2026 · قراءة 2 دقائق

ما فكرة bilya.ai للوكيل الذكي العربي؟

يطرح عبدول أسامة (عبدول أسامة) فكرة bilya.ai: استضافة وكيل ذكاء اصطناعي عربي يمكن للمستخدم التحكم فيه والاحتفاظ بسياقه وملفاته وتصديرها. يدعو المهتمين إلى الإجابة عن أسئلة المشروع وطلب الوصول المبكر؛ ولا يوضح المقطع أن الخدمة اكتمل تطويرها.

10 أكتوبر 2026 · قراءة 1 دقائق

هل تقلّ الحاجة إلى واجهات التطبيقات مع وكلاء AI؟

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

5 أكتوبر 2026 · قراءة 1 دقائق