في عالم تطوير الويب المتسارع، لم يعد السؤال "كيف أكتب الكود؟" بل "كيف أبني المنتج بأسرع وأذكى طريقة؟". مؤخراً، قررت خوض تجربة Vibe Coding لبناء البورتفوليو الخاص بي باستخدام أدوات مثل Cursor و Windsurf. ظننت في البداية أن الأمر مجرد "ضغطة زر"، لكنني اصطدمت بالواقع: شاشات حمراء (Error 500)، دوائر تحويل لا نهائية (Infinite Loops)، ومكتبات غير متوافقة (Next.js 15 vs Legacy Code). هنا أدركت السر: الذكاء الاصطناعي ليس ساحراً، هو "موظف مجتهد" يحتاج إلى "مدير محترف". 1. الدرس الأول: البنية التحتية هي كل شيء (Architecture First) أكبر خطأ وقعت فيه في البداية هو الدخول في التفاصيل قبل رسم الأساسات. - المشكلة: طلبت من الـ AI بناء كل شيء دفعة واحدة (Backend + Database + Frontend)، والنتيجة كانت "اسباجيتي كود" وأخطاء اتصال معقدة. - الحل (Shift to Frontend-Only): قررت تبسيط البنية. لماذا أحتاج قاعدة بيانات لبورتفوليو شخصي؟ التحول إلى Frontend-Only باستخدام ملفات بيانات محلية (JSON/TypeScript) جعل الموقع "طائرة" في السرعة وألغى 90% من الأخطاء. * نصيحتي: قبل أن تكتب حرفاً واحداً في الـ Prompt، حدد معمارية المشروع. البساطة هي قمة الهندسة. 2. فن هندسة الأوامر (The Art of Prompting) اكتشفت أن جودة الكود تعتمد 100% على جودة الـ Prompt. - لا تقل: "اعمل لي موقع حلو". - بل قل: "تصرف كـ Senior Frontend Architect. ابني موقعاً بـ Next.js 15، استخدم Tailwind CSS، واجعل الثيم Deep Space مع دعم الـ RTL." * السر في السياق: عندما ذكرت للـ AI تفاصيل منهج الـ ITI (9-Month Track)، تحول المحتوى من كلام عام (Lorem Ipsum) إلى مهارات تقنية دقيقة تعكس خبرتي الحقيقية. 3. مراحل البناء: لا تبنِ السقف قبل الأعمدة تعلمت أن Vibe Coding يحتاج إلى مراحل محددة (Phases) لنجاحه: - مرحلة التأسيس (Scaffold): تثبيت المكتبات وضبط الـ Routing (خاصة مع Next-Intl). - مرحلة الهيكل (Structure): بناء الـ Layout والـ Navbar والـ Footer. - مرحلة البيانات (Data Layer): إنشاء ملفات البيانات الوهمية (Mock Data) لتغذية الموقع. - مرحلة الروح (The Vibe): هنا يأتي دور Framer Motion والتفاعلات الدقيقة (Micro-interactions) التي تحول الموقع من "صفحة جامدة" إلى تجربة حية. 4. تحديات تقنية وحلولها (دروس مستفادة) - واجهت مشاكل قد تواجه أي مطور يستخدم أحدث التقنيات: - Next.js 15 Breaking Changes: الـ AI قد يكتب كوداً قديماً. تعلمت أن أصحح له: "تذكر أن params أصبحت Promise ويجب عمل await لها". - التصميم المزدحم: الـ AI يميل لملء الشاشة. الحل كان استخدام "Container" مركزي (max-w-7xl mx-auto) لإعطاء التصميم مساحة للتنفس. الخلاصة: هل استبدلني الذكاء الاصطناعي؟ الإجابة: لا. أدوات الـ Vibe Coding مثل Windsurf و Cursor هي مجرد "مسرعات". هي تكتب الكود، لكن أنا من يضع الرؤية، أنا من يحلل الأخطاء المنطقية، وأنا من يقرر متى يكون التصميم "جيداً بما يكفي". تجربتي نقلتني من مطور "يكتب Syntax" إلى مهندس "يبني حلولاً". راوابط المشاريع