الخلاصة السريعة: في أول حلقة من سلسلة «اتعمل بالـ AI» نعمل موقع ووردبريس متحرك ينفع لأكتر من استخدام: بالبرومبت الهيكلي نفسه طلع موقع أفكار بتصويت («مشروع يجنن») وموقع فندق بحجوزات («فندق الحلم»). الصفحة فيديو بيتحرك مع التمرير (Scroll)، والبيانات محفوظة في Custom Content Type من JetEngine. ونفتح الكواليس خطوة بخطوة، من أول فولدر فاضي لحد موقع شغال.
غيّر الفكرة والحقول، والهيكل نفسه يشتغل لسيناريو تاني أو لموقع عميل: واجهة بتتحرك مع التمرير، ومحتوى بيتدار من لوحة التحكم زي أي موقع ووردبريس عادي. وكمان هتعرف إيه اللي الـ AI بيعمله فعلًا، وإيه اللي لسه شغلك إنت.
«مشروع يجنن» موقع لأفكار المشاريع المجنونة، مستوحى من مشهد فكرة الكتاكيت الشهير في السينما المصرية. يفتح بمشهد فيديو يتحرك مع التمرير (Scroll)، ثم صفحة «قهوة الأفكار» التي يعرض فيها الزوار أفكارهم ويصوّتون لها، ونموذج «اطلب من الجرسون» لإضافة فكرة جديدة.
جرّب الموقع بنفسك وأضف فكرتك: demo.arabcms.com/katakeet
ملاحظة: الموقع نسخة عرض (Demo) وليس مشروعًا نهائيًا لعميل؛ الهدف أن ترى الفكرة كاملة وتعرف كيف بُنيت.
تخيّل بناء الموقع مثل بناء بيت؛ لكل أداة دور في الفريق:
| الدور | الأداة | ماذا تفعل |
|---|---|---|
| المقاول | أنت | صاحب المشروع؛ تقرر ماذا نبني ومن يفعل ماذا وتراجع النتيجة. |
| الأرض | WordPress | نظام إدارة المحتوى الذي يُبنى عليه كل شيء. |
| المهندس | Claude Code | الـ Agent الذي يصمم الصفحات ويكتب الكود وينفذ التعليمات. |
| مهندس الاتصالات | MCP عبر Novamira | ينقل تعليمات الـ AI إلى ووردبريس وإضافاته، فيعمل Claude داخل الموقع نفسه. |
| المكعبات | Elementor 4 | النسخة الجديدة (Atomic): خفيفة ولا تضيف كودًا زائدًا. |
| أمين المخزن | JetEngine | يحفظ الأفكار والحجوزات في Custom Content Type، ويدير التصويت عبر Data Store. |
| الرسّام | Nano Banana | يرسم أول لقطة وآخر لقطة لكل مشهد من برومبت يكتبه Claude. |
| المخرج | Google Flow | يحرّك المشهد بين اللقطتين في مقطع مدته من 5 إلى 8 ثوانٍ تقريبًا. |
في JetEngine: اخترنا Custom Content Type بدل Custom Post Type لأن المحتوى يُحفظ في جدول خاص به يحتوي الحقول المطلوبة فقط، فلا يزدحم جدول المقالات، ولا نحتاج صفحة مستقلة لكل فكرة أو حجز.
استغرق بناء «مشروع يجنن» نحو 8 ساعات عمل، وما زال نسخة عرض تحتاج إلى مزيد من التحسين قبل أن يصبح مشروعًا نهائيًا. أول نسخة يخرجها الذكاء الاصطناعي لا تكون جاهزة، وبعدها تبدأ جولات التعديل والتجربة والإصلاح.
بصراحة: الـ AI بيسرّع الشغل جدًا ومش بيكتب لك كود ولا محتوى من الصفر، بس إنت لازم تهندس: تقول له عاوز إيه، تشوف غلطه، وتوصفه له صح.
لكي ترى العملية كاملة، بنينا في الحلقة موقعًا ثانيًا لفندق من البرومبت الهيكلي نفسه الذي بُني به «مشروع يجنن».
نبدأ بفولدر جديد للمشروع في Visual Studio Code مع Claude Code، فكل ملفات المشروع في مكان واحد. نعطيه البرومبت الهيكلي مع وصف الفكرة (موقع فندق)، فيطرح أسئلته: عدد الغرف، ونظام الحجز، والحقول المطلوبة.
ينشئ Claude ملف CLAUDE.md وهو ذاكرة المشروع: يحفظ فيه ما فهمه منك، وأي ملاحظة تعطيها له يسجلها ويراجعها في كل مرة.
من إعدادات Novamira نفعّل AI Abilities، ونختار الأداة التي نستخدمها (Claude Code في حالتنا)، ثم طريقة الاتصال: Novamira CLI أو OAuth أو Application Password. نفضّل CLI لأنه يتعامل مع الموقع مباشرة من سطر الأوامر وأسرع. ننسخ البرومبت الذي تعطيه Novamira إلى Claude Code، وإذا تعثر الاتصال يفحصه Novamira Doctor تلقائيًا.
تحذير: تفعيل قدرات الـ AI يسمح له بتنفيذ كود PHP وعمليات على الملفات. اشتغل بها على نسخة محلية أو Staging، ولا تفعّلها على الموقع الحي إلا للضرورة ثم أغلقها.
يكتب Claude برومبت كل صورة بالإنجليزية، ونولّدها بـ Nano Banana. إذا لم تعجبك صورة اطلب تعديل شيء واحد فقط مع إبقاء الباقي كما هو. اختر لكل مشهد صورة البداية وصورة النهاية، ثم أعطهما لـ Google Flow ليصنع الحركة بينهما.
نضع الصور والمقاطع في فولدر داخل المشروع ونطلب من Claude أن يكمل: الصفحة الرئيسية بالفيديو، وصفحة الغرف، ونوعا المحتوى «الغرف» و«الحجوزات». يسأل ما يحتاجه ثم يبني، وفي النهاية يعطيك روابط الصفحات لتراجعها.
بعد البناء نراجع النتيجة: الفيديو مع التمرير، ونافذة الغرف، وصفحة الحجز. وفي JetEngine نضبط أعمدة لوحة التحكم (Admin Columns) لتظهر بيانات الحجوزات بوضوح، ونتأكد أن الحجوزات تُحفظ في جدولها المستقل. وبما أن الموقع ووردبريس عادي، يمكنك تعديل المحتوى والصور بالطريقة المعتادة.
CLAUDE.md يتراكم؛ كل قرار تكتبه فيه يوفر عليك تكرار الشرح.كل البرومبتات اللي استخدمناها في الحلقة متاحة للتحميل:
{{...}} بفكرتك. بيه اتبنى «مشروع يجنن» و«فندق الحلم».س: هل أحتاج إلى خبرة برمجية؟
ج: لا تحتاج إلى كتابة الكود بنفسك، لكنك تحتاج إلى فهم ووردبريس جيدًا لتوجّه الـ AI وتكتشف أخطاءه.
س: هل يمكن استخدام MCP على الموقع الحي؟
ج: الأفضل العمل على نسخة محلية أو Staging، لأن قدرات الـ AI تسمح بتنفيذ كود على الخادم.
س: لماذا Custom Content Type وليس Custom Post Type؟
ج: لأن المحتوى يُحفظ في جدول مستقل بالحقول المطلوبة فقط، فيبقى الموقع أخف، ولا نحتاج صفحة لكل عنصر.
س: هل أستطيع استخدام البرومبت نفسه لموقع مختلف؟
ج: نعم، فهو برومبت هيكلي بفراغات تملؤها بفكرتك، وبه بنينا «فندق الحلم» بعد «مشروع يجنن».
س: هل يمكن بناء موقع كامل بالذكاء الاصطناعي في 10 دقائق؟
ج: لا. يمكن الحصول على نسخة أولى سريعة، لكن الموقع في هذه الحلقة احتاج نحو 8 ساعات من التوجيه والتعديل والمراجعة.
الذكاء الاصطناعي لن يأخذ مكانك، لكنه يسرّع شغلك بشكل كبير إذا وجّهته صح. أنت المقاول: تقرر وتراجع وتصحح، وهو ينفذ. وفي الحلقة الجاية من «اتعمل بالـ AI» نعرض موقعًا جديدًا اتعمل بالطريقة نفسها.
مفيش اختبار للدرس ده لسه.