00:00:00كيف تعرف أي أدوات التصميم تستحق الاستخدام فعلاً عندما تظهر أداة جديدة كل أسبوع؟
00:00:04المشكلة هي أن هناك أدوات جديدة تصدر يومياً، وكلها تعد بالجودة، لكن أغلبها مجرد ضجيج إعلامي.
00:00:09خلال اختبارنا للأدوات، وجدنا القليل منها الذي ينفذ وعوده فعلاً ويتناسب جيداً مع سير عملنا.
00:00:15كان أحد أعضاء فريقنا يعمل على صفحة هبوط لمنتج عبارة عن سيارة مع رسوم متحركة ثلاثية الأبعاد في القسم الرئيسي.
00:00:21كود المصدر لهذا الموقع وجميع الميزات المستخدمة متاحة في AI Labs Pro.
00:00:25لمن لا يعرف، هو مجتمعنا الذي أطلقناه مؤخراً حيث تحصل على قوالب جاهزة، ومطالبات، وكل الأوامر والمهارات التي يمكنك دمجها مباشرة في مشاريعك لهذا الفيديو وكل الفيديوهات السابقة.
00:00:36إذا وجدت قيمة فيما نقدمه وأردت دعم القناة، فهذه هي الطريقة الأفضل للقيام بذلك. الروابط في الوصف.
00:00:42لذا، الخطوة الأولى لبناء موقع كهذا هي امتلاك عنصر جيد، ولأجل ذلك استخدمت Tripo3D، مولد العناصر ثلاثية الأبعاد المدعوم بالذكاء الاصطناعي.
00:00:50عندما سجلت الدخول، حصلت على حوالي 300 رصيد، وهو ما كان أكثر من كافٍ لحوالي 10 عمليات توليد.
00:00:54الآن كنت بحاجة إلى صورة لتحويلها إلى نموذج ثلاثي الأبعاد.
00:00:57كانت لدي صورة للسيارة للقسم الرئيسي، لكن الخلفية تداخلت مع توليد النموذج لأن تحديد الخلفية والمقدمة أمر صعب لمثل هذه الأدوات، ولم أرغب في إهدار الرصيد على مخرجات سيئة.
00:01:08لذا قمت بإزالة الخلفية باستخدام أداة إزالة الخلفية من Canva، ولكن يمكنك أيضاً استخدام Remove BG، وهو بديل مجاني.
00:01:16بمجرد إزالة الخلفية، ذهبت إلى Tripo3D وأعطيته تلك الصورة كمرجع.
00:01:21استغرق الأمر حوالي دقيقة واحدة لتوليد النموذج، وقد طابق الصورة إلى حد كبير.
00:01:25تمكنت من فحص جميع الزوايا من كل جانب، وكان النموذج يشبه الشيء الحقيقي باستمرار من جميع الجهات.
00:01:31بمجرد أن أصبح النموذج ثلاثي الأبعاد جاهزاً، قمت بتصديره.
00:01:34في Tripo3D، تحصل فقط على 15 عملية تصدير في الخطة المجانية، لذا تأكدت من رضاي عن التوليد، ومن بين محاولتين، قمت بتنزيل الأفضل.
00:01:43ضبطت الدقة على 4K وقمت بتصديره.
00:01:45بمجرد تنزيل ملف GLB، أضفته إلى المجلد العام لتطبيق Next.js تم إنشاؤه حديثاً، لسهولة الوصول إليه.
00:01:52السبب في التصدير بصيغة GLB بدلاً من الصيغ الأخرى هو أن GLB يحتوي على الأنسجة والمواد في ملف واحد بدلاً من فصلها، وهي صيغة ويب أصلية، لذا تندمج بسهولة مع مكتبات الويب.
00:02:04بمجرد أن أصبح ملف GLB جاهزاً، حان الوقت لتنفيذه في تطبيق الويب.
00:02:08لبناء صفحة الهبوط، اخترت تطبيق Codex، الذي صدر مؤخراً وهو متاح فقط على نظام macOS.
00:02:14الآن قد تتساءل، على الرغم من أن لدينا بالفعل Claude Code، فلماذا نستخدم Codex في هذا الفيديو؟
00:02:19مع إطلاق منتجهم الجديد، هم يقدمون حدوداً موسعة وحصصاً سخية حتى في الخطط المجانية، لذا الآن هو الوقت الأنسب لكم للاستفادة منه لأقصى حد.
00:02:29لكن يمكنك استخدام نفس العملية في أي وكيل ذكاء اصطناعي من اختيارك.
00:02:32قمت بتنزيل Codex وفتحت مجلد المشروع فيه.
00:02:34الواجهة تشبه مدير وكلاء AntiGravity إلى حد كبير، ولكنها تركز أكثر على الوكلاء بدلاً من الكود.
00:02:40كانت ميزة “المهارات” (Skills) هي أكثر ما أعجبنا.
00:02:43في الوكلاء الآخرين، عندما تحتاج لإنشاء مهارتك الخاصة، عليك الحصول على منشئ مهارات مفتوح المصدر وبناؤها من هناك.
00:02:49لكن Codex يحتوي بالفعل على منشئ مهارات مدمج والكثير من المهارات الجاهزة للاستخدام التي تأتي مع التثبيت، وهذا لم يكن متاحاً في الوكلاء الآخرين.
00:02:56لتبسيط عملية الرسوم المتحركة ثلاثية الأبعاد، استخدمت منشئ المهارات وقدمت وصفاً مفصلاً لكيفية بناء الرسوم المتحركة، والمكتبات التي يجب استخدامها.
00:03:06طرح بعض الأسئلة، وبمجرد الإجابة عليها، قام بتشغيل البرامج النصية الموجودة في منشئ المهارات، وبنى المهارة وجعلها جاهزة للاستخدام.
00:03:13الآن كان هناك شيء واحد مختلف.
00:03:14عادةً، يقوم الوكلاء بتثبيت المهارات في مجلد .agent أو .claud، لكن Codex قام بتثبيتها في المجلد الرئيسي، لذا نقلتها إلى مجلد .agent يدوياً.
00:03:24لكنه اتبع نفس النمط الذي وضعه إطار عمل الوكلاء مفتوح المصدر من Claude، حيث يحتوي على السكريبتات والمراجع وجميع الأصول لإضافة الإمكانيات للمهارة.
00:03:33تضمن أيضاً ملف yaml مع مطالبة عامة تعمل كمرجع للوكيل لمعرفة أي مطالبات المستخدم ستفعل المهارة.
00:03:40أعطيت Codex مهمة إعداد الرسوم المتحركة باستخدام المهارة التي تم إنشاؤها للتو، مع تضمين كافة التفاصيل المطلوبة في المطالبة.
00:03:47بدأ في التنفيذ وقام بتشغيل أوامر التثبيت.
00:03:49بعد مرور وقت طويل، أكمل المهمة، لكنه قال إنه لم يتمكن من تثبيت التبعيات بسبب انتهاء وقت الأمر في البيئة، فطلبت منه كتابة التبعيات في ملف package.json بدلاً من ذلك.
00:04:01عندما قمت بتشغيل أمر التثبيت يدوياً، واجهت أخطاء بسبب عدم تطابق التبعيات نتيجة لاختلاف إصدارات المكتبات في المشروع.
00:04:08اضطررت لتصحيح الأخطاء مع Codex عدة مرات حتى عملت الرسوم المتحركة في القسم الرئيسي أخيراً بالطريقة التي أردتها.
00:04:14بما أن Codex كان يستغرق وقتاً طويلاً لإكمال الميزات الفردية، قمت بتقسيم المهام إلى أربع مهام فرعية.
00:04:21تضمنت كل مهمة ميزة واحدة من صفحة الهبوط وكانت معزولة عن الأخرى وتحتوي على الأهداف والمتطلبات والقيود.
00:04:28استخدمت ميزة تعدد الوكلاء في Codex وجعلت كل وكيل يعمل على إحدى المهام.
00:04:32بما أن جميعهم كانوا يعملون على نفس صفحة الهبوط، جعلتهم يعملون في فروع عمل منفصلة بدلاً من إجراء التغييرات جميعاً على الفرع الرئيسي، لأن عمل الوكلاء على نفس القسم يسبب تعارضاً في الكود.
00:04:43تقريباً جميع الوكلاء أنهوا مهامهم في إطار زمني مماثل.
00:04:46دمجت المخرجات وحصلت على جميع الميزات منفذة معاً دون أي تعارضات، وبسرعة أكبر بكثير بالنظر لمدى بطء Codex بمفرده.
00:04:55الآن بعد أن أصبح الموقع جاهزاً ويحتوي على المكونات المطلوبة، كان كل شيء باستثناء القسم الرئيسي يفتقر للرسوم المتحركة ويبدو مسطحاً، لذا لجأت إلى gsap لأجل ذلك.
00:05:03gsap هي مكتبة جافا سكريبت للرسوم المتحركة يستخدمها الكثير من المحترفين وتقدم أداءً ثابتاً.
00:05:09بما أن التبعيات كانت متعارضة سابقاً وواجهت خطأ انتهاء الوقت، ذهبت إلى نافذة الأوامر وثبّت gsap قبل التنفيذ باستخدام أمر npm install.
00:05:18أعطيت Codex مطالبة مفصلة للغاية تحتوي على تعليمات لإضافة الرسوم المتحركة وأخبرته تحديداً ألا يلمس القسم الرئيسي لأنه كان في حالة جيدة.
00:05:27أضفت تعليمات محددة حول كيفية ومكان إضافة الرسوم المتحركة. استغرق تنفيذ هذه المهمة وقتاً طويلاً.
00:05:33كانت هناك بعض الأخطاء البسيطة التي قمت بتصحيحها من خلال إعادة إرسال رسالة الخطأ إلى Codex.
00:05:37بعد ذلك، تم تنفيذ الرسوم المتحركة وبقي القسم الرئيسي كما هو تماماً.
00:05:42لكن تمت إضافة رسوم متحركة تعمل مع التمرير لجميع الأقسام الأخرى، مما أحدث فرقاً ملحوظاً في شكل الموقع العام.
00:05:48الآن على الرغم من وجود رسوم متحركة في الموقع، إلا أن المكونات كانت لا تزال تبدو مسطحة مقارنة بالقسم الرئيسي.
00:05:54لذا ذهبت إلى Aceternity UI واخترت مكونات من هناك لأن مكونات Aceternity تأتي مع الكثير من التفاعلات الدقيقة والرسوم المتحركة المدمجة الجاهزة للدمج في المشروع.
00:06:04ذهبت إلى Codex وطلبت منه استبدال المكونات الحالية بمكونات Aceternity مع الحفاظ على نفس الرسوم المتحركة.
00:06:10بعد التنفيذ، لاحظت أنه أضاف تدرجات لونية لم تكن تتناسب مع سمة التطبيق.
00:06:14لذا أعطيته لقطة شاشة وأشرت إلى أن التدرجات تتعارض مع السمة الموجودة، وبعد ذلك قام بتغييرها إلى ألوان متطابقة.
00:06:21لكن عندما نظرت إلى الرسوم المتحركة، كانت المكونات التي نفذها ثابتة ولا تحتوي على التفاعلات الدقيقة التي تأتي بها مكونات Aceternity عادةً.
00:06:30فأخبرت Codex أن هناك مكونات من Aceternity مع تفاعلات دقيقة مدمجة مثل تأثيرات “التحريك عند التمرير” وطلبت منه استخدامها بدلاً من المكونات العادية.
00:06:38بعد ذلك، أصبحت المكونات تحتوي على تأثيرات التحريك والتفاعل المدمجة، وأصبح الموقع يبدو أكثر تفاعلية بشكل ملحوظ.
00:06:44لتحسين المرئيات بشكل أكبر، استخدمت مستودعاً عاماً يسمى post-processing وهو متاح كحزمة NPM.
00:06:51إنها طبقة رسوم متحركة لمعالجة ما بعد التأثيرات يتم تطبيقها عند استخدام React Three Fiber.
00:06:56من خلال هذا، يمكننا استخدام ميزات معالجة الصور مثل تصحيح غاما وتحسينات أخرى لنتائج عالية الأداء.
00:07:01أعطيت Codex مطالبة لاستخدام هذه المكتبة لإنشاء تأثيرات إضاءة خفيفة وطلبت منه توجيهي خلال العملية.
00:07:07لم ينجح في الأمر في البداية ولم يكن هناك فرق مرئي في المخرجات.
00:07:11اضطررت لتصحيح الأمر عدة مرات عبر مطالبته مجدداً حتى ضبط التأثير أخيراً وأضاف توهجاً خفيفاً للنموذج ثلاثي الأبعاد، مما أعطى القسم بأكمله مظهراً أكثر اكتمالاً مع إضاءة دافئة في القسم الرئيسي.
00:07:23هذا يوصلنا إلى نهاية هذا الفيديو.
00:07:25إذا كنت ترغب في دعم القناة ومساعدتنا في الاستمرار في صنع فيديوهات كهذه، يمكنك القيام بذلك عبر زر “شكراً” (Super Thanks) أدناه.
00:07:31كما دائماً، شكراً لكم على المشاهدة وأراكم في الفيديو القادم.