أنا أبرمج منذ 2021، وهذا الأسبوع أردت أن أجرب vibe coding فعلياً. ظللت أريد تجربتها منذ أن بدأ ثيو يستخدمها لبناء تطبيقات جديدة لم يكن لديه وقت لها، وبدأ بيتر شتاينبرغر بإنشاء عدد هائل من المشاريع بل وأسس أوبن كلو.
في هذه التجربة قررت إعادة بناء معرض أعمالي باستخدام الذكاء الاصطناعي فقط، دون لمس أي كود. الموقع السابق كان يعتمد Next.js مع Next-Intl للتدويل. أردت الانتقال بالكامل إلى Astro، لأنني لم أكن أستخدم أي من ميزات Next.js الأثقل.
جدير بالذكر أن كل محتوى السيرة كان في ملفات .json بلغات مختلفة للترجمة. الأدوات التي استخدمتها كانت Cursor وOpen Code وClaude Code.
البداية
أولاً أنشأت فرعاً جديداً، وشغّلت أمر /init لـ Open Code وClaude Code، وأضفت مهارة التصميم الأمامي من Claude إلى المشروع.
فتحت Claude Code، شغّلت مهارة /frontend-design، وطلبت من الذكاء الاصطناعي إعادة بناء المشروع وتصميمه من جديد باستخدام Astro والترجمات مع الحفاظ على تصميم احترافي وأنيق (مع تفعيل التفكير).
ثم انتظرت دقائقاً وفحصت الموقع. كان يعمل، لكن في بعض الأقسام كان محاذاة النص خاطئة بدلاً من أن تكون في الوسط مثل العناوين، وكانت أقسام قليلة مفقودة رغم وجودها في ملفات الترجمة. أنشأت خمسة فروع مختلفة وجربت نفس الطلب مع تنويعات بسيطة لمقارنة النتائج:
- «اجعله بأسلوب جمالية المطور»
- «اجعله جذاباً للموظفين وفرص الأعمال»
- «اعرض مهاراتي أولاً ثم خبرتي»
جربت أيضاً الذكاء الاصطناعي الافتراضي لـ Open Code. إجمالاً أدى Claude Code عملاً قوياً. عند الطلب لملف شخصي بأسلوب المطور أنتج قسم بطل على شكل طرفية مع مؤشر وامض. فروع أخرى كانت تحتوي نافذة بأسلوب Mac تعرض محتوى الصفحة، أو ملفي الشخصي ككرة أرضية مع رموز المطور (لابتوب، كود) تدور حولها. كل تشغيل استخدم ألواناً أساسية مختلفة: أزرق، أخضر، برتقالي، أحمر، ذهبي.
إصلاح المشاكل واللمسات النهائية
المشاكل المشتركة بين التشغيلات كانت ترجمات ناقصة ونصاً غير centered في أقسام معينة.
اخترت النسخة التي شعرت أنها الأنسب لي، تلك التي تنظر إليها الآن. بعد ذلك شغّلت تدقيق Lighthouse من DevTools. النتائج كانت في الغالب في التسعينات العالية، مع بعض المئات (مثلاً SEO). العيوب الرئيسية كانت في إمكانية الوصول، بسبب تباين ألوان ضعيف في بعض النصوص لأن اللون الأساسي كان ذهبياً والخلفية بيضاء. نبهت الذكاء الاصطناعي لتلك المشاكل وتم إصلاحها بسرعة.
ثم جاء الجزء الممتع: vibe coding قسم المدونة. تعامل معها دفعة واحدة بتخطيط نظيف. ثم طلبت ميزات مثل وقت القراءة والوسوم والمؤلفين، وأضفت: «…ورجاءً اسألني قبل إضافة أي شيء.» اقترح الذكاء الاصطناعي أشياء مثل أزرار المشاركة والمنشورات ذات الصلة والتجميع حسب الفئة أو السلسلة… أضفت الكل ما عدا التجميع لأنني لا أحتاجه بعد لكن يمكنني إضافته لاحقاً بجملة واحدة.
بناء قسم المدونة
ثم الاختبار الأخير: بناء المشروع. فشل البناء بخطأين، شيء عن قراءة مجلد غير صالح ومسار غير موجود. Cursor جاء للإنقاذ وساعد في إصلاحهما.
أخيراً دمجت على main ونشرت على Cloudflare Pages، وكل ذلك في نحو ثلاث ساعات.
أنا سعيد جداً بالشكل الذي أصبح عليه المعرض، وأشعر أنني في بداية الطريق مع الذكاء الاصطناعي.