من الصفر إلى الاحتراف: الدليل الكامل للبناء للمؤسسين غير التقنيين

ربما سمعت مؤخراً عن مصطلح vibe coding. يبدو أن الذكاء الاصطناعي موضوع نسمعه ونراه كل يوم. من الصعب مواكبة كل المنتجات الجديدة والتحديثات وطرق الانضمام إلى هذا الموجة.

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

نحن نعرف شعور ذلك، ولهذا السبب نحن في مهمة لمساعدة أي شخص لديه فكرة على إنشاء كل ما يدور في ذهنه.

وفي عصر السرعة والمعلومات المتدفقة بلا توقف من كل مكان، أردنا أن نأخذ وقتنا. أن نأخذ الوقت لنكتب كل ما نعرفه عن Vibe Coding. لذا إذا كنت مبتدئاً في هذا المجال: مرحباً بك في سلسلتنا من الصفر إلى الاحتراف، حيث ستتعلم كل أسبوع أساسيات Vibe Coding.

أهدافنا بسيطة لهذا المقال:

• ما هو الـ vibe coding في الواقع — ولماذا يختلف عن كل ما سمعته عن الذكاء الاصطناعي من قبل

• التحول الذهني الوحيد الذي يجعله يعمل لغير التقنيين

• جلستك البرمجية الأولى، خطوة بخطوة — من صفحة فارغة إلى شيء حقيقي

**ما هو الـ Vibe Coding؟**إذن، ما هو الـ Vibe Coding؟ لنبدأ بالأهم — الحصول على تعريف دقيق لفهم ما نتحدث عنه تماماً. في الواقع، تمت صياغة مصطلح Vibe Coding في فبراير 2025 بواسطة Andrej Karpathy في منشور واحد على X. إذا كان هذا الاسم لا يبدو مألوفاً، فسيصبح كذلك بعد هذا المقال.

يمكننا اعتبار Karpathy واحداً من أكثر باحثي الذكاء الاصطناعي احتراماً على قيد الحياة. كعضو مؤسس في OpenAI، قاد فريق الذكاء الاصطناعي في Tesla لبناء نظام الرؤية الحاسوبية الذي يشغل نظام Autopilot. نصيحتنا للمبتدئين في مجال Vibe Coding هي متابعته، فهو شخص قضى مسيرته المهنية في كتابة الأكواد على أعلى مستوى، وبناء أنظمة يعتمد عليها ملايين الأشخاص كل يوم.

ولكن لماذا نذكره عند محاولة فهم ما هو الـ vibe coding؟ حسناً، إليك ما قاله:

"انسَ أن الكود موجود"

كلماته مؤثرة. لقد وصف طريقة جديدة للبناء حيث "تستسلم تماماً للمشاعر (vibes)". أنت تصف ما تريده بلغة بسيطة، وتترك الذكاء الاصطناعي يكتب الكود، دون القلق بشأن ما يحدث في الخلفية. وهذا ليس لأن الكود لا يهم، بل لأنك لم تعد الشخص الذي يحتاج لكتابته أو قراءته.

إذن إليك تعريف كامل: الـ Vibe coding هو بناء برمجيات عن طريق وصف ما تريده بلغة بسيطة — ما يجب أن يفعله، كيف يجب أن يبدو، ولمن هو موجه — والسماح للذكاء الاصطناعي بترجمة هذا الوصف إلى كود عملي في الوقت الفعلي. أنت لا تكتب الكود. أنت لا تقرأ الكود. أنت تصف، تراجع النتيجة، تحسن من خلال الوصف مجدداً، وتكرر العملية حتى يطابق ما تراه ما كان في رأسك.

المهارة ليست تقنية. المهارة هي الوضوح والإبداع: القدرة على وصف النتيجة بدقة كافية لكي يتمكن الذكاء الاصطناعي من بنائها. هذه مهارة يمتلكها بالفعل كل مؤسس، وكل مفكر في المنتجات، وكل شخص راودته فكرة من قبل. لم تكن تُعتبر مهارة بناء من قبل الآن.

التحول الذهني الذي يغير كل شيء

إليك التحول المطلوب. يقترب معظم الأشخاص غير التقنيين من أدوات الذكاء الاصطناعي معتقدين أنهم بحاجة إلى الكلمات الصحيحة، أو المصطلحات، أو معرفة محددة. هذا إطار خاطئ، ونحن هنا لنرشدك خلاله.

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

والخبر السار هو: لقد كنت تبني هذه المهارة طوال حياتك. في كل مرة وصفت فيها شيئاً أردته. في كل مرة قدمت فيها ملاحظات على شيء لم يلبِ توقعاتك. في كل مرة شرحت فيها فكرة لصديق وراقبت وجهه لترى إن كان قد فهمها. هذه هي العضلة التي يستخدمها الـ vibe coding بالضبط.

أنت فقط لم توجهها نحو جهاز كمبيوتر بعد.

جلستك البرمجية الأولى، خطوة بخطوة

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

مهمتنا بسيطة: يجب أن يكون أي شخص لديه فكرة قادراً على بنائها. يجب ألا تحتاج إلى شهادة في علوم الكمبيوتر، أو شريك مؤسس مطور، أو ميزانية قدرها 50,000 دولار لإخراج شيء ما إلى النور. Enter هي المنصة التي يصبح فيها وصفك منتجاً حقيقياً وعملياً. وهذا القسم سيثبت ذلك.

بحلول نهاية هذا، ستكون قد فعلتها مرة في رأسك. وفي المرة الثانية، ستفعلها في الواقع.

قبل أن تكتب أي شيء — تشريح التوجيه (Prompt) الجيد

إذا كانت وظيفتك هي وصف النتيجة — كيف يبدو الوصف الجيد في الواقع؟

التوجيه الجيد يتكون من ثلاثة أجزاء. لا يتطلب أي منها معرفة تقنية.

1. ماذا تبني: الشيء الأساسي الذي تريده أن يوجد. كن محدداً بما يكفي ليفهمه الغرباء. ليس "تطبيقاً". → "متتبع عادات يومي يسمى StreakUp."

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

3. كيف يعمل: السلوك. ماذا يحدث عندما ينقر شخص ما. كيف تشعر بتدفق العمل. ماذا يفعل التطبيق في الواقع. صف التجربة — لا تصف الآليات التقنية.

الآن انظر كيف تجتمع الأجزاء الثلاثة في توجيه واحد:

"ابنِ متتبع عادات يومي يسمى StreakUp. خلفية بيضاء، لمسات خضراء، تصميم بسيط. يمكن للمستخدمين إضافة عاداتهم، وتحديدها كل يوم، ورؤية عداد متتالي يوضح عدد الأيام المتتالية التي التزموا فيها. إذا فاتهم يوم، يعود العداد إلى الصفر ويظهر رسالة تحفيزية صغيرة."

• ماذا تبني → متتبع عادات يومي يسمى StreakUp

• كيف يبدو → خلفية بيضاء، لمسات خضراء، بطاقات بسيطة

• كيف يعمل → إضافة عادات، تحديد يومي، عداد متتالي، إعادة تعيين مع رسالة تحفيزية

الخطوة 1 — اكتب توجيهك الأول

افتح Enter. (نعم، نعم، افعل ذلك بينما تقرأ هذا المقال، ثق بنا، إنها أفضل طريقة للتعلم) اكتب توجيهك في المحادثة. اضغط على enter.

هذه هي الخطوة بالكامل.

لا تبالغ في التفكير. لا تحاول أن تكون مثالياً. التوجيه الأول ليس المنتج النهائي — إنه بداية محادثة. تأكد من وجود أجزائك الثلاثة، واكتبه بلغة بسيطة، وأرسله.

سيظهر شيء ما على شاشتك في غضون ثوانٍ.

شيء واحد يجب تذكره: المطالبة الغامضة تؤدي إلى نتيجة عامة. قارن بين هذين المثالين:

غامض ← "اصنع لي متتبع عادات." جيد ← "ابنِ متتبع عادات يومية يسمى StreakUp. خلفية بيضاء، لمسات خضراء..."

نفس الفكرة. نتائج مختلفة تماماً. قدِّم دائماً توجيهات محددة.

الخطوة 2 — راجع ما تم إنشاؤه

يوجد الآن شيء ما على شاشتك. إنه حقيقي، وتفاعلي، ويعمل مباشرة. ليس نموذجاً أولياً (mockup). وليس مخططاً هيكلياً (wireframe). إنه تطبيق فعلي يعمل.

إليك ما يجب النظر إليه: هل يقوم بالوظيفة الأساسية التي طلبتها؟ هل الهيكل العام موجود؟ بالنسبة لـ StreakUp: هل يمكنك رؤية قائمة حيث تضيف العادات؟ هل يؤدي تحديد إحدى العادات إلى نتيجة؟ هل يوجد عداد للسلسلة (streak counter)؟

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

إذا كان الأساس صحيحاً، انتقل إلى الخطوة الثالثة. إذا كان هناك شيء أساسي مفقود، صف ما هو غائب وأرسل الطلب مرة أخرى.

الخطوة 3 — التحسين من خلال وصف ما تريد تغييره

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

تحسين سيئ: "غيّر CSS الخاص بمكون عداد السلسلة." تحسين جيد: "عداد السلسلة صغير جداً ويصعب قراءته. اجعله أكبر، وضعه في منتصف أعلى الشاشة، واستخدم رقماً أخضر عريضاً."

أحدهما يصف إجراءً تقنياً. والآخر يصف النتيجة المرجوة. صف دائماً النتيجة.

أرسل الطلب. شاهد التحديث. راجع مرة أخرى.

الخطوة 4 — كرر حتى تشعر أن الأمر أصبح صحيحاً

هذه هي الحلقة: وصف ← مراجعة ← تحسين ← تكرار.

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

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

الخطوة 5 — انشر بنقرة واحدة

عندما تشعر أن الأمر صحيح، اضغط على نشر (publish).

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

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

هذه هي جلستك الأولى. لقد بنيت للتو شيئاً حقيقياً!!

ما التالي في هذه السلسلة

لقد قمت بأول عملية بناء لك! تهانينا! أنت تعرف الآن ما هو الـ vibe coding، وتعرف كيفية كتابة المطالبات، وتعرف كيفية جعل شيء ما متاحاً للعمل. الأساس موجود.

في المرة القادمة، سنتعمق أكثر. لأن معرفة كيفية البناء شيء - ومعرفة الأخطاء التي يجب تجنبها شيء آخر. معظم المبتدئين يرتطمون بنفس الجدران في جلساتهم الأولى دون أن يدركوا ذلك. سنقوم بتسميتها، وشرح سبب حدوثها، ونوضح لك بالضبط كيفية تخطيها.

نراكم قريباً!