الدرس الثاني: كيف تبدأ Vibe Coding من الصفر؟ تعرف على الأدوات والخطوات الأولى لبناء أول مشروع.
بعد أن تعرفنا في الدرس السابق على مفهوم Vibe Coding، حان الوقت للانتقال إلى الجانب العملي. في هذا الدرس سنبدأ من الصفر تمامًا، وسنتعرف على الأدوات التي يحتاج إليها المبتدئ، وكيف يختار الأداة المناسبة، وكيف يكتب أول Prompt، ثم كيف يحول فكرة بسيطة إلى مشروع برمجي قابل للتجربة.
والأهم من ذلك أننا لن نتعامل مع الذكاء الاصطناعي على أنه آلة تقوم بكتابة الكود فقط، بل سنتعلم كيف نجعله مساعدًا برمجيًا نتعاون معه في التفكير والتنفيذ والتطوير.
ما الذي تحتاج إليه لبدء Vibe Coding؟
من أهم مميزات Vibe Coding أنك لا تحتاج في البداية إلى جهاز بمواصفات خارقة أو مجموعة كبيرة من البرامج.
غالبًا ستحتاج إلى:
- جهاز كمبيوتر أو لابتوب.
- اتصال بالإنترنت.
- متصفح حديث.
- أداة ذكاء اصطناعي تساعدك في كتابة وفهم الكود.
- محرر أكواد، خصوصًا عندما تبدأ في بناء مشاريع فعلية.
- فكرة بسيطة تريد تحويلها إلى مشروع.
إذا كنت ستبدأ بتطوير صفحات الويب، فيمكنك البدء بأدوات بسيطة جدًا مثل:
HTML + CSS + JavaScript + متصفح + أداة ذكاء اصطناعي.
ولا تحتاج إلى تثبيت خادم أو قاعدة بيانات في أول مشروع لك.
هل يجب أن تكون مبرمجًا قبل أن تبدأ؟
لا.
هذه نقطة مهمة جدًا.
Vibe Coding مناسب للمبتدئ الذي لا يزال في بداية طريقه، لأنه يسمح له بطرح الأسئلة والحصول على أمثلة عملية وشرح للكود.
لكن هناك فرق بين أن تستخدم Vibe Coding للتعلم وبين أن تعتمد عليه اعتمادًا كاملًا دون فهم.
الأفضل أن تتعلم أثناء بناء المشاريع.
مثلًا، إذا أعطاك الذكاء الاصطناعي هذا الكود:
<h1>Welcome to My Website</h1>لا تكتفِ بنسخه.
اسأله:
ما وظيفة هذا السطر؟ وما الفرق بين h1 و h2 و h3؟
وبذلك يتحول المشروع نفسه إلى وسيلة لتعلم البرمجة.
اختيار أول مجال لتطبيق Vibe Coding
من الأفضل للمبتدئ ألا يبدأ بمشروع ضخم.
لا تقل:
أريد إنشاء Facebook جديد.
أو:
أريد إنشاء متجر إلكتروني عالمي.
ابدأ بفكرة صغيرة تستطيع فهمها واختبارها.
ومن أفضل المجالات للمبتدئين:
مشاريع HTML وCSS
مثل:
- صفحة شخصية.
- صفحة Portfolio.
- صفحة هبوط.
- صفحة تعريفية.
- صفحة مطعم.
- صفحة لعرض خدمة.
مشاريع JavaScript
مثل:
- آلة حاسبة.
- قائمة مهام.
- تطبيق ملاحظات.
- عداد.
- محول عملات.
- مولد كلمات مرور.
مشاريع Python
بعد اكتساب بعض الخبرة يمكنك الانتقال إلى:
الخطوة الأولى: اختر فكرة المشروع
لنبدأ بمشروع بسيط.
سنفترض أننا نريد إنشاء:
صفحة Portfolio شخصية.
تحتوي الصفحة على:
- اسم المستخدم.
- نبذة قصيرة.
- المهارات.
- المشاريع.
- معلومات التواصل.
هذه الفكرة بسيطة، لكنها ممتازة لتعلم Vibe Coding لأنها ستعلمنا كيفية تحويل المتطلبات إلى تعليمات يفهمها الذكاء الاصطناعي.
الخطوة الثانية: لا تطلب المشروع كله بطريقة عشوائية
من الأخطاء الشائعة أن يكتب المبتدئ:
اصنع لي موقعًا احترافيًا.ثم يتوقع الحصول على نتيجة مثالية.
المشكلة أن الذكاء الاصطناعي لا يعرف ما الذي تقصده تحديدًا بكلمة "احترافي".
لذلك يجب أن تكون أكثر تحديدًا.
يمكنك كتابة Prompt مثل:
أريد إنشاء صفحة Portfolio شخصية باستخدام HTML وCSS.
الصفحة يجب أن تحتوي على:
- قسم رئيسي يحتوي على الاسم والمسمى الوظيفي.
- قسم نبذة عني.
- قسم المهارات.
- قسم المشاريع.
- قسم للتواصل.
أريد التصميم أن يكون بسيطًا وحديثًا.
يجب أن يكون متجاوبًا مع الهواتف وأجهزة الكمبيوتر.
استخدم HTML دلاليًا وCSS منظمًا.
لا تستخدم مكتبات خارجية.
اجعل المشروع في ملف index.html واحد.لاحظ الفرق.
أنت هنا لم تقل فقط:
"أنشئ موقعًا."
بل شرحت للذكاء الاصطناعي:
- ماذا تريد.
- ما الأقسام المطلوبة.
- نوع التصميم.
- الأجهزة التي يجب دعمها.
- التقنيات المستخدمة.
- القيود المطلوبة.
وهذه واحدة من أهم مهارات Vibe Coding.
الخطوة الثالثة: اجعل الذكاء الاصطناعي يشرح لك قبل التنفيذ
هناك طريقة ممتازة للمبتدئين.
بدلًا من طلب الكود مباشرة، قل:
قبل كتابة الكود، حلل متطلبات المشروع واشرح لي كيف ستبنيه وما الملفات التي سنحتاج إليها.
لا تكتب الكود بعد.هذه الخطوة تجعلك ترى طريقة تفكير المشروع قبل البدء في التنفيذ.
وقد يجيبك الذكاء الاصطناعي مثلًا:
سنحتاج إلى ملف واحد:
index.html
وسنقسم الصفحة إلى:
Header
Hero
About
Skills
Projects
Contact
Footerبعد ذلك يمكنك القول:
ممتاز، ابدأ الآن بإنشاء المشروع.وهذا أفضل من إعطاء الذكاء الاصطناعي تعليمات عشوائية طوال الوقت.
الخطوة الرابعة: اطلب الكود
بعد تحديد بنية المشروع يمكنك طلب الكود.
مثلًا:
أنشئ الآن ملف index.html كاملًا وفق الخطة السابقة.
استخدم HTML5 دلاليًا.
ضع CSS داخل نفس الملف.
اجعل التصميم Responsive.
استخدم تعليقات بسيطة داخل الكود لشرح الأقسام المهمة.سيقوم الذكاء الاصطناعي بإنشاء الكود.
هنا يبدأ الجزء الممتع.
الخطوة الخامسة: انسخ المشروع وشغله
بعد الحصول على الكود، أنشئ ملفًا باسم:
index.htmlثم ضع الكود داخله.
احفظ الملف وافتحه باستخدام المتصفح.
ستظهر لك الصفحة.
حتى لو كانت الصفحة ليست مثالية، لا تقلق.
هذه ليست النتيجة النهائية.
هذه مجرد النسخة الأولى.
وهنا يبدأ الأسلوب الحقيقي لـ Vibe Coding.
النسخة الأولى ليست النهاية
من المهم جدًا أن تتعامل مع المشروع باعتباره شيئًا يتطور تدريجيًا.
مثلًا، إذا كانت الصفحة تعمل ولكن شكلها بسيط، يمكنك أن تقول:
التصميم يعمل بشكل جيد، لكن مظهر الصفحة بسيط جدًا.
حسّن التصميم ليبدو أكثر احترافية.
استخدم مساحات بيضاء مناسبة.
حسّن أحجام العناوين والأزرار.
اجعل قسم المشاريع أكثر جاذبية.
حافظ على جميع الوظائف الموجودة.ثم اختبر النتيجة.
إذا أعجبتك، انتقل إلى التعديل التالي.
ماذا لو ظهر خطأ؟
هنا تظهر واحدة من أقوى فوائد Vibe Coding.
لنفترض أن زرًا لا يعمل.
لا تقل:
الكود لا يعمل.
بل صف المشكلة.
مثلًا:
عند الضغط على زر Contact لا يحدث أي شيء.
راجِع الكود وحدد سبب المشكلة.
اشرح لي سبب الخطأ أولًا، ثم اقترح التعديل المطلوب.
لا تغير أي جزء آخر من الصفحة.لاحظ أنك طلبت من الذكاء الاصطناعي:
تحديد المشكلة.
شرح السبب.
إصلاحها.
عدم تغيير الأجزاء الأخرى.
وهذا أفضل بكثير من قول:
Fix it.قاعدة مهمة: لا تطلب إعادة بناء المشروع كل مرة
من الأخطاء التي يقع فيها المبتدئون أن يقولوا للذكاء الاصطناعي:
اكتب المشروع كاملًا من جديد.
في كل مرة تظهر مشكلة.
هذا قد يؤدي إلى فقدان تعديلات سابقة.
الأفضل أن تقول:
أريد تعديل الجزء الخاص بـ JavaScript فقط.
لا تغير HTML أو CSS.
أرسل لي الجزء المعدل واشرح ما الذي تغير.وبهذه الطريقة تستطيع التحكم في المشروع بشكل أفضل.
استخدم الذكاء الاصطناعي كمبرمج ومعلّم
يمكنك أن تطلب منه القيام بأدوار مختلفة.
مثلًا:
لفهم الكود
اشرح لي هذا الكود كما لو كنت مبتدئًا في JavaScript.لاكتشاف الأخطاء
راجع الكود وابحث عن الأخطاء المحتملة.لتحسين الكود
راجع الكود وحسّن تنظيمه دون تغيير النتيجة النهائية.لتحسين الأمان
راجع المشروع بحثًا عن المشاكل الأمنية المحتملة.للتعلم
استخرج من هذا المشروع أهم 10 مفاهيم برمجية يجب أن أتعلمها.وهنا يتحول الذكاء الاصطناعي من مجرد مولد كود إلى مدرس برمجة ومراجع ومساعد تطوير.
كيف تكتب Prompt احترافي؟
يمكنك استخدام قاعدة بسيطة جدًا:
الدور + الهدف + المتطلبات + القيود + النتيجة المطلوبة
مثلًا:
أنت مطور ويب محترف.
أريد إنشاء صفحة Portfolio شخصية.
المتطلبات:
- صفحة رئيسية.
- نبذة شخصية.
- المهارات.
- المشاريع.
- التواصل.
التصميم:
- حديث.
- بسيط.
- متجاوب.
- مناسب للهواتف.
التقنيات:
HTML5
CSS3
JavaScript
القيود:
- لا تستخدم Frameworks.
- لا تستخدم مكتبات خارجية.
- اجعل الكود منظمًا.
قبل كتابة الكود، اقترح بنية المشروع.هذا النوع من Prompts يعطي الذكاء الاصطناعي معلومات كافية للعمل عليها.
لا تخف من المحادثة الطويلة
Vibe Coding يعتمد بدرجة كبيرة على الحوار.
يمكن أن تبدأ برسالة:
أريد إنشاء آلة حاسبة.
ثم:
اجعل التصميم أكثر احترافية.
ثم:
أضف الوضع الليلي.
ثم:
أضف دعم لوحة المفاتيح.
ثم:
أصلح مشكلة القسمة على صفر.
ثم:
اجعلها متجاوبة مع الهاتف.
وهكذا.
المشروع ينمو من خلال مجموعة من التعليمات الصغيرة.
لماذا لا ننفذ كل شيء في Prompt واحد؟
يمكنك ذلك في المشاريع الصغيرة.
لكن في المشاريع الكبيرة قد يؤدي ذلك إلى نتائج غير مستقرة.
مثلًا، إذا طلبت من AI في رسالة واحدة:
أنشئ متجرًا إلكترونيًا كاملًا يحتوي على تسجيل مستخدمين وقاعدة بيانات ودفع إلكتروني ولوحة تحكم وإدارة منتجات ونظام كوبونات وإشعارات...
قد تحصل على كمية ضخمة من الكود، لكن إدارة هذا المشروع ستكون أصعب.
الأفضل تقسيمه إلى مراحل.
مثلًا:
المرحلة الأولى: التصميم.
المرحلة الثانية: تسجيل المستخدم.
المرحلة الثالثة: المنتجات.
المرحلة الرابعة: سلة المشتريات.
المرحلة الخامسة: لوحة التحكم.
المرحلة السادسة: الاختبارات.
وهذه الطريقة تسمى أحيانًا التطوير التدريجي.
قاعدة ذهبية في Vibe Coding
احفظ هذه القاعدة:
لا تطلب من الذكاء الاصطناعي أن يبني شيئًا لا تستطيع اختباره.
إذا أنشأت تطبيقًا، يجب أن تعرف كيف تجربه.
إذا أنشأت صفحة تسجيل دخول، يجب أن تعرف كيف تختبرها.
إذا أنشأت قاعدة بيانات، يجب أن تعرف كيف تتحقق من البيانات.
وإذا كان المشروع يتعامل مع بيانات حساسة أو عمليات مالية، فلا تعتمد على الكود الذي يولده AI دون مراجعة واختبار مناسبين.
مشروعك الأول في هذا الدرس
الآن جاء دورك.
سنبدأ بمشروع بسيط جدًا:
إنشاء صفحة تعريف شخصية
استخدم هذا الـ Prompt:
أريد إنشاء صفحة ويب شخصية بسيطة باستخدام HTML وCSS.
اجعل الصفحة تحتوي على:
1. Header يحتوي على اسمي.
2. قسم ترحيبي.
3. نبذة قصيرة عني.
4. قسم المهارات.
5. قسم المشاريع.
6. قسم التواصل.
7. Footer.
أريد تصميمًا حديثًا وبسيطًا.
يجب أن يكون متجاوبًا مع الهاتف والكمبيوتر.
استخدم HTML5 وCSS3 فقط.
لا تستخدم Bootstrap أو أي Framework خارجي.
قبل كتابة الكود، اشرح لي بنية الصفحة التي ستنشئها.بعد أن يعطيك الذكاء الاصطناعي الخطة، اطلب منه إنشاء الكود.
ثم افتح الصفحة في المتصفح.
تمرين الدرس الثاني
بعد إنشاء الصفحة، اطلب من الذكاء الاصطناعي تنفيذ التعديلات التالية واحدًا تلو الآخر:
التمرين الأول
أضف زرًا باسم:
Contact Meالتمرين الثاني
اجعل الزر يتحرك بتأثير بسيط عند تمرير مؤشر الماوس فوقه.
التمرين الثالث
أضف الوضع الليلي Dark Mode.
التمرين الرابع
اجعل الصفحة متوافقة مع الهواتف الصغيرة.
التمرين الخامس
اطلب من الذكاء الاصطناعي مراجعة الكود بالكامل واكتشاف المشاكل المحتملة.
ماذا تعلمنا اليوم؟
في هذا الدرس تعلمنا أن البدء في Vibe Coding لا يحتاج إلى معرفة برمجية متقدمة، لكن يحتاج إلى طريقة تفكير منظمة.
تعلمنا أيضًا:
- كيف نختار أول مشروع.
- كيف نكتب Prompt واضحًا.
- كيف نطلب تحليل المشروع قبل كتابة الكود.
- كيف ننشئ النسخة الأولى.
- كيف نختبرها.
- كيف نكتشف الأخطاء.
- كيف نطلب تعديلات تدريجية.
- كيف نستخدم AI كمدرس ومبرمج ومراجع.
- لماذا لا ينبغي الاعتماد على الكود دون اختباره.
والأهم أن Vibe Coding ليس مجرد:
"اكتب لي برنامجًا."
بل هو دورة مستمرة:
فكرة → تخطيط → Prompt → كود → اختبار → اكتشاف مشكلة → إصلاح → تحسين → اختبار جديد.
الدرس القادم
في الدرس الثالث سننتقل إلى نقطة مهمة جدًا:
Vibe Coding vs البرمجة التقليدية: أيهما أفضل؟
وسنقارن بين الطريقتين عمليًا، ونوضح متى يكون استخدام Vibe Coding مفيدًا، ومتى يمكن أن يتحول إلى مشكلة، وهل يستطيع الشخص أن يصبح مبرمجًا حقيقيًا بالاعتماد عليه، وما المهارات التي يجب أن يتعلمها بجانب الذكاء الاصطناعي.