الموقع الجديد صار متاحًا. استغرقت إعادة بنائه بالذكاء الاصطناعي أسبوعًا، مع بضعة تغييرات في الخطة على طول الطريق. إليك نسخة الفيديو، أو تابع القراءة للقصة المختصرة.
Play videoقليل من السياق: عملتُ سبع سنوات مديرًا للمنتجات، ولا أعرف البرمجة فعلًا. لكنني خلال السنوات الثلاث الماضية أبني مشاريع بالذكاء الاصطناعي، وهذا الموقع أحدها.
ما الذي لم يكن ناجحًا
ظل الموقع القديم قائمًا أكثر من عام. كنت ما زلت أحبه، لكن بعض الأمور أزعجتني:
- الواجهة الرئيسية. سئمتُ من تأثير الخلفية، وأردتُ أن أكون أنا داخل التصميم، بشخصية أوضح.
- المشاريع. جدار للمشاريع وقسم للمختارات، لكن الزائر كان مضطرًا مع ذلك إلى النقر ليعرف أي شيء، ولم يكن التحميل جميل المنظر.
- الخدمات. كانت تسرد مهاراتي، لكن العميل غير التقني قد يظل يتساءل عمّا يمكنني فعله له تحديدًا.
- أجزاء ناقصة. أردتُ مدونة واشتراكًا بالبريد الإلكتروني.
فكانت الخطة: حسم الشكل، وإعادة التفكير في المشاريع والخدمات، ثم إضافة الميزات الجديدة.
البحث عن الشكل
بدأتُ بجمع المراجع: مواقع وصور وتخطيطات، وكل ما لفت نظري. وكان من الأشياء التي أردتُ تجربتها شخصية واقعية. مواقع كثيرة تستخدم شخصيات كرتونية ثلاثية الأبعاد، وأردتُ أن أرى ماذا يستطيع الذكاء الاصطناعي أن يقدّم غير ذلك.
جرّبتُ عدة مفاهيم: نسخة كرتونية ثلاثية الأبعاد مني، وأنا جالس في الماء، وأنا على خلفية سادة، ولقطة علوية تحيط بي فيها المرايا. بدت المرايا رائعة كصورة ثابتة، لكن كل تلك الانعكاسات كانت ستجعل الحفاظ على اتساق الشخصية صعبًا بمجرد أن تتحرك.
اخترتُ شخصًا حقيقيًا يقف على الغيوم، في مشهد لا يمكن أن يوجد.
تحريك صورة ثابتة
أرسلتُ المفهوم إلى Claude، وقسّمنا المشهد إلى طبقات: غيوم متحركة في الخلف، وJACK MIAO في الوسط، وأنا في المقدمة، والتنقل والنصوص في الأعلى.
أما الشخصية، فكانت الفكرة مقاطع مصوّرة أمام شاشة خضراء أنظر فيها إلى الأعلى والأسفل واليسار واليمين، يُبدَّل بينها حسب موضع الفأرة، فيبدو كأنني أتابع مؤشرك بنظري. والشاشة الخضراء تتيح وضع الشخص بدقة بين الطبقات الأخرى.
وأردتُ أيضًا انتقالًا للخروج من الواجهة الرئيسية، كأنك تسقط عبر الغيوم وتخرج من تحتها. حاولتُ أولًا بناء الغيوم في Blender، لكنها بعد عدة جولات ظلت بعيدة عن المفهوم. وبدلًا من مطاردة إعداد غيوم مدفوع، انتقلتُ إلى الفيديو.
أعدّ Claude قائمة العناصر المطلوبة وكتب أوامر الفيديو انطلاقًا من أمر المفهوم الأصلي. ربطتُ Claude بـ Higgsfield عبر واجهته البرمجية، وولّدتُ مقاطع تجريبية، وحين صحّ الاتجاه، أنتجتُ النسخ النهائية بدقة 4K. ثم جاء كثير من الأخذ والرد: إصلاح العيوب، ووضع المقاطع في الصفحة، والمراجعة، وإعادة التوليد.
المشاريع: السقوط عبر السماء
احتاج هذا القسم إلى أكبر عدد من المحاولات. خلفية بيضاء والمشاريع على أسطوانة دوّارة. سماء زرقاء. غيوم متحركة. لا شيء منها بدا مناسبًا.
جاءت نقطة التحول من صورة على Pinterest لمظلّي يسقط في منتصف إطار صورة. منحني ذلك قصة: في الأعلى أقف على الغيوم، وتمرّر أنت عبرها إلى الأسفل، وفي قسم المشاريع شخص يسقط عبر السماء.
الطريقة نفسها: أوامر مع Claude، ولقطات من Higgsfield، وضبط على الصفحة. وقلّصتُ القائمة أيضًا إلى مجموعة صغيرة مختارة.
جزء واحد من الخطة لم يتحقق. كنتُ أنوي حذف صفحات تفاصيل المشاريع، فانتهى بي الأمر إلى الإبقاء عليها. مشاريع أقل في الصفحة، لكن ما زال بإمكانك النقر لتلقي نظرة أقرب.
الخدمات: قلها ببساطة
كان الهدف بسيطًا: أن يتضح بجلاء ما يمكنني المساعدة فيه. في الأماكن الأخرى حركة كثيرة بما يكفي، لذا كُتبت الخدمات هنا بكلمات واضحة لا أكثر.
ولتستمر القصة، ولّدتُ نسخة مني معلّقة بالبالونات، وحرّكتها على مسار خلف النص. الكلمات تشرح، والشخصية تربط القسم بالبقية.
المدونة والاشتراك والتغيير الأخير في الخطة
مضت المدونة والاشتراك بالبريد بسلاسة مقارنة بغيرهما. بنى Claude كليهما، وأنت تقرأ النتيجة الآن.
أما تذييل الصفحة فهو المكان الذي غيّرتُ فيه الاتجاه للمرة الأخيرة. كانت فكرتي الأولى مفتاح لوحة مفاتيح يطفو في السماء ويفتح نموذج طلب المشروع. حين بُني بالشيفرة لم يكن بالشكل المطلوب، وحين صُمّم في Blender اقترب لكنه لم يكن صحيحًا بعد.
فاستبدلتُه بشيء أسهل تنفيذًا: نافذة تطفو في السماء، وخلفها أنا أعمل. وبذلك اكتملت السلسلة: الوقوف على الغيوم، والسقوط عبر السماء، والطفو بالبالونات، وأخيرًا نظرة على مكان عملي.
وخلف الكواليس حسّنتُ أيضًا الحماية من الروبوتات، وحدّثتُ نقاط النهاية في الواجهة البرمجية، وغيّرتُ طريقة نشر الموقع. لن ترى شيئًا من ذلك، لذا سأتركه لوقت آخر.
ما خرجتُ به
بعض الأفكار وصلت إلى النهاية. أما غيوم Blender، وجدار المشاريع الدوّار، ومفتاح لوحة المفاتيح فلم تصل، وكل منها مرّ أولًا بعدة محاولات. أحيانًا غيّرتُ طريقة بنائي للشيء، وأحيانًا غيّرتُ الفكرة نفسها.
تلك كانت العملية الحقيقية: أن تجعل الفكرة واقعية بما يكفي لتنظر إليها، وترى كيف تعمل، وتقرر هل تمضي بها أم تجرّب شيئًا آخر. والذكاء الاصطناعي يجعل هذه الدورة سريعة بما يكفي لتكرارها مرات كثيرة في أسبوع واحد.
مرّر الموقع من الأعلى، وإن أردت أن ترى ما سأبنيه بعد ذلك، فاشترك في الأسفل.
