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

اختيار Design System حسب نوع المنتج

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

أهم النقاط

ابدأ بنوع المنتج والمنصة قبل اختيار نظام التصميم.
يرشّح عبدول Material Design للمشاريع متعددة المنصات، وFluent UI لأدوات الإنتاجية والبرامج المؤسسية.
يقترح Carbon Design System للواجهات المؤسسية كثيفة البيانات، وPolaris للتجارة الإلكترونية.
يضع Human Interface Guidelines ضمن خيارات تطبيقات iOS، وBase Web للنماذج الأولية السريعة عبر الويب.
يذكر Stripe Design System لمنتجات المطورين أو FinTech ذات لوحات التحكم الخلفية.

اختيار Design System يبدأ من نوع المنتج: هل تبني تطبيق موبايل، متجرًا إلكترونيًا، لوحة بيانات، أم منتجًا يعمل على أكثر من منصة؟ يشرح Abdul Osama (عبدول أسامة) أن أنظمة التصميم التي تتيحها شركات كبرى يمكن أن تساعدك عند التصميم أو البرمجة بأسلوب vibe coding. وDesign System هو مجموعة إرشادات ومكوّنات تساعد على بناء واجهات متسقة.

أي نظام يناسب مشروعك؟

| المشروع | النظام الذي يقترحه عبدول | |---|---| | تطبيق ويب أو Android، أو منتج يعمل على منصات متعددة | Material Design: نظام تصميم من Google؛ يطرحه عبدول أيضًا للمنتجات المرتبطة بالذكاء الاصطناعي أو التي تحتاج أسلوبًا بصريًا بسيطًا. | | برنامج مؤسسي أو أداة إنتاجية | Fluent UI: نظام تصميم من Microsoft يرشّحه لهذه الاستخدامات. | | تطبيق مؤسسي معقّد، أو لوحة بيانات كثيفة الأرقام، أو منتج FinTech | Carbon Design System: نظام تصميم من IBM يرشّحه لهذه الحالات. | | متجر إلكتروني أو واجهة إتمام شراء أو لوحة تحكم للتجارة الإلكترونية | Polaris: نظام تصميم من Shopify يرشّحه لواجهات التجارة الإلكترونية. | | تطبيق iOS | Human Interface Guidelines: إرشادات تصميم من Apple لتطبيقات منصتها. | | نموذج أولي سريع لمنتج يعمل عبر الويب | Base Web: نظام تصميم من Uber يقترحه عبدول لهذا النوع من المشاريع. | | برنامج للمطورين أو منتج FinTech به لوحات تحكم خلفية | Stripe Design System: الاسم الذي يستخدمه عبدول للإشارة إلى خيار تصميم من Stripe لهذه الاستخدامات. |

«لو عايز تبني Enterprise Software أو Productivity Tool، ممكن تستخدم Fluent UI». — عبدول أسامة

خلفية

Vibe coding تعبير شائع عن بناء البرمجيات بمساعدة أدوات الذكاء الاصطناعي من خلال وصف المطلوب لها. وجود نظام تصميم يمنحك مرجعًا للمكوّنات وأنماط الواجهة، لكنه لا يغني عن اختبار ملاءمتها لمنتجك ومستخدميه.

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

حدّد المنصة ونوع الواجهة وكثافة البيانات أولًا، ثم قارن الأنظمة المناسبة من القائمة. يذكر عبدول أنه يمكن طلب قائمة بروابط GitHub عبر تعليق؛ وGitHub منصة لاستضافة المشاريع البرمجية.

أسئلة وأجوبة

ما نظام التصميم الذي يقترحه عبدول لتطبيق يعمل على أكثر من منصة؟

يقترح Material Design من Google، ويذكر تطبيقات الويب وAndroid ضمن استخداماته.

ماذا أستخدم لمنتج مؤسسي مليء بالبيانات ولوحات المعلومات؟

يرشّح Carbon Design System من IBM للتطبيقات المؤسسية المعقّدة وكثيفة الأرقام.

ما الخيار الذي ذكره للمتاجر الإلكترونية؟

ذكر Polaris من Shopify، بما يشمل واجهات المتجر وإتمام الشراء ولوحات التحكم.

هل القائمة قاعدة إلزامية لاختيار نظام التصميم؟

لا. هي ترشيحات بحسب حالات الاستخدام التي عرضها عبدول؛ قارنها بمتطلبات مشروعك قبل الاختيار.

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

GitHub

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

هل تعلم أن معظم الشركات الكبيرة عندها Design Systems متاحة لأن أنت تستخدمها وانت بتvibe code؟ يعني مثلا جوجل عندها Design System اسمه Material Design. ممتاز لو أنت بتعمل حاجة Cross-Platform, Web Application, Android App, Software أو AI Products أو حتى عايز تستخدم Motion Graphics وعايز حاجة Simple لأن جوجل أسدت Simplicity. أنت كمان ممكن تستخدم لو أنت عايز تبني حاجة Enterprise Software أو Productivity Tool فممكن تستخدم Fluent UI ده بتاع Microsoft وممتاز لليوس كيس دي. عايز تعمل حاجة Enterprise تقيلة شوية وفيها Data كتيرة وDashboards وApplications معقدة شوية ورخمة في الأرقام أو FinTech فتستخدم Carbon Design System بتاع IBM. بعد كده عندك لو هتعمل حاجة E-commerce فأحسن Design System طبعاً للE-commerce سواء Dashboards أو Front في E-commerce زي Checkout أو غيره أو حتى Designs للWebsite. Shopify عندهم Design System اسمه Polaris. بعد كده لو عايز تعمل Mobile App عموماً فطبعاً السياد الموبايل Apps واللي حولوا الموبايل Apps لحاجة يعتمد عليها جامد Apple مع احترامنا للAndroid يعني. عندهم Design System بيفرضوه على المستخدم الiOS أو مبرمجي الiOS اسمه Human Interface Guidelines ده اسمه. بعد كده لو أنت عايز تعمل حاجة Web Based MVP سريعة خفيفة وما فيهاش ألوان أصلاً كتير ومعتمد على الأسود فأحسن حاجة للMVP Design System Uber اسمه Base Web. أخيراً لو عايز تعمل حاجة لها دعوة بالFinTech أو Software اللي فيه Dashboards في Backend كتير وحاجة للDevelopers قوي فأكيد Stripe Design System وهو اسمه كده أحسن Option بالنسبة لك. لو يهمك تاخد الليستة دي باللينكات بتاعت GitHub اللي هتديها للAgency بتاعتك رد بأي تعليق وهبعتهلك على الخاص. أنا عبدالقسامك تابعوني عشان تعرف كل جديد في الزكاء الصناعي والتسويق.

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

شاهد أيضًا

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

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

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

مكتبة Public APIs على GitHub

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

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

نشر مشروع vibe coding باستخدام Cloudflare Workers

يقترح Abdul Osama (عبدول أسامة) استخدام Claude أو Codex مع Cloudflare Workers وWrangler لنشر مشروع بُني بمساعدة الذكاء الاصطناعي، وإضافة GitHub للاحتفاظ بسجل التعديلات. يقول إن البدء قد يكون مجانيًا، ويقدّر تكلفة لاحقة بنحو 5–10 دولارات شهريًا مع نمو المشروع والزيارات؛ وهذا تقديره، وليس سعرًا مضمونًا.

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