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

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

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

أهم النقاط

الطلب العام لتصميم «شكله حلو» لا يحدد اتجاهًا بصريًا واضحًا.
اذكر نظام التصميم ولوحة الألوان والهوية البصرية في تعليماتك لوكيل AI.
الخيارات المذكورة هي shadcn/ui وMaterial UI وChakra UI وRadix UI وHeroUI.
HeroUI هو المفضل لدى عبدول من بين الخيارات التي عرضها.
تحقق من ترخيص كل خيار قبل استخدامه تجاريًا.

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

«لكي تحصل على شيء مميز، تحتاج إلى التحدث مع AI.» — عبدول أسامة

الخيارات التي ذكرها

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

| الخيار | ما هو؟ | تعليق عبدول | | --- | --- | --- | | shadcn/ui | مجموعة مكونات واجهة قابلة للاستخدام والتخصيص. | مشهور ولطيف. | | Material UI | مكتبة مكونات واجهة تستند إلى أسلوب Material Design. | خيار قوي مفتوح المصدر. | | Chakra UI | مكتبة مكونات لبناء واجهات المستخدم. | لطيف. | | Radix UI | مجموعة مكونات أساسية تساعد في بناء واجهات قابلة للتخصيص. | من الخيارات التي رشّحها. | | HeroUI | مكتبة مكونات لبناء واجهات المستخدم. | المفضل لديه؛ يصف مظهره بالبساطة والأناقة وطابع 2026. |

كيف تطبّق الفكرة؟

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

بالأرقام

خمسة خيارات عرضها عبدول لتجربتها.
2026 وصف استخدمه لطابع HeroUI البصري، وليس رقم إصدار ذكره.

خلفية

Vibe Coding أسلوب لبناء البرمجيات بمساعدة AI عبر وصف المطلوب له. وتحديد مرجع بصري واضح يساعد على جعل الطلب أدق؛ أما شروط الاستخدام التجاري فتُراجع في ترخيص كل خيار قبل اعتماده.

ما الخطوة التالية؟

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

أسئلة وأجوبة

لماذا تبدو بعض مشاريع Vibe Coding متشابهة؟

بحسب عبدول، من الأخطاء الشائعة طلب واجهة جميلة دون تحديد نظام التصميم أو الألوان أو الهوية البصرية؛ فتخرج واجهة عادية تشبه مشاريع أخرى.

ماذا أقول لوكيل AI عند تصميم الواجهة؟

اذكر له اسم نظام التصميم الذي تريد العمل به، وحدد لوحة الألوان والهوية البصرية المطلوبة. ويمكن تزويده بمرجع الأداة من موقعها أو من GitHub.

ما الخيارات التي رشّحها عبدول؟

ذكر shadcn/ui وMaterial UI وChakra UI وRadix UI وHeroUI، بهذا الترتيب وفق تفضيله الشخصي.

هل هذه الخيارات مجانية للاستخدام التجاري؟

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

المصادر والأدوات المذكورة

GitHub

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

أنت عارف إنك ممكن تحسن من جودة مشاريع الفايب كودينج بتاعتك بمجرد ما تستخدم open source design systems؟ من الأخطاء الشائعة اللي شوفت الناس اللي بيعملوا vibe coding أو design coding بيعملوها إن هو بيخش يقول له اعمل لي حاجة شكلها حلو وخلاص ما بيحددلوش بالتحديد الdesign system أو الcolor palette أو الvisual brand اللي هو حابب يشتغل بيه وبعد كده بيستعجب ليه مشروعي طالع شبه معظم المشاريع الفايب كود اللي طلع شوية آيكونات على شوية ألوان لطيفة بس عادية عشان تطلع حاجة مميزة محتاج تتكلم مع الAI من ضمن كلامك مع الAI إنك تقوله على الdesign system يشتغل عليه هديك بقى خمسة open source design systems ما لهمش حل top rated على الانترنت متاحين للاستخدام التجاري ببلاش وهيفريوا جامد جدا في النتائج اللي هتطلع بيها في المشروع الجاي بتاعك أقولهم لكوا بترتيب من أكتر واحد أنا ما بحبوش وما كلهم جامدين لأكتر واحد أنا بحبه وانتو ممكن تجربوهم كلهم وفي آخر الفيديو ممكن تكتب تعليق وهبعتلك الليستة على الخاص أول واحد اسمه شاد سي ان معرفش بصراحة بيتنطق إزاي اسمه شاد سي ان يو آي لطيف جدا ومشهور جدا بعد كده فيه واحد اسمه material UI برضو open source قوي جدا طبعا بفكر الماتيريال بعد كده فيه واحد اسمه شكرة UI لطيف بعد كده فيه واحد اسمه راديكس UI وأخيرا والمفضل بالنسبالي واحد اسمه هيرو UI بصراحة بيطلع شغل تحفة هو simple كده و elegant و 2026 style فبحب استخدمه جدا هتقول ال AI agent بتاعك مجرد اسم ال open source design system ده وهو هيروح يجيبه أو هتجيب اللينك من على GitHub أو هتروح على الموقع بتاعهم وفيه ناس منهم دلوقتي بعملين اختصار لل AI عشان يخش يقرأ على طول ال design system ويفهمه بس رد بقية تعليق وهبعتلك على الخاص أنا عبدالقسامة وتابعيني عشان تعرف كل جديد عن الزكاة الصناعي والتسويق. سلام.

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

شاهد أيضًا

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

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

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

لماذا يجرب المدير التقني الفايب كودينج؟

يدعو Abdul Osama (عبدول أسامة) المديرين في المجال التقني إلى تجربة الفايب كودينج بأنفسهم، بدل الاكتفاء بوضع الخطط وإحالة كل فكرة إلى المبرمجين. لا يقصد أن يصبح المدير مبرمجًا أو أن يستبدل المبرمجين؛ بل أن تتسع قدرته على تنفيذ بعض المهام وفهم العمل التقني.

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

مكتبة Public APIs على GitHub

يشير Abdul Osama (عبدول أسامة) إلى مكتبة على GitHub يمكن العثور عليها بالبحث عن Public APIs، وتجمع واجهات API مصنّفة حسب المجال. يوضح أن هذه الواجهات قد تساعد تطبيقات Agentic AI في جلب بيانات أو معلومات حديثة وقت الحاجة.

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