00:00:00مع مدى قوة الذكاء الاصطناعي التوليدي الذي أصبح عليه.
00:00:02تظهر أدوات جديدة باستمرار، ومن بين الجميع، قامت Google بتطوير أدائها حقًا منذ إطلاق Gemini 3.
00:00:07بسبب ذلك، ربما رأيت أشخاصًا على X يُنشئون صفحات هبوط مذهلة بمحاولة واحدة ويقولون إن النموذج يُحدث تغييرًا جذريًا.
00:00:14لكنهم يكذبون.
00:00:15الحقيقة أنهم بحاجة إلى استخدام أدوات متعددة لبناء هذه المواقع.
00:00:18وقد كانت Google مُذهلة مع أدواتها التجريبية، التي تعمل بقوة Gemini 3 وNano Banana.
00:00:23لكن Google لا تُوفر طريقة لاستخدامها جميعًا معًا.
00:00:26لذا ستحتاج إلى سير عمل متكامل يجمع كل هذه الأدوات.
00:00:29لدينا الكثير للحديث عنه اليوم، حيث لم أكن أتوقع حقًا أن تعمل بهذا التناغم معًا.
00:00:34الرسوم المتحركة التي تراها على تلك المواقع هي مجرد سلسلة من الإطارات.
00:00:37لكن إذا استخدمت أدوات الذكاء الاصطناعي لتوليد هذه الإطارات، فلن تحصل على نتائج متسقة.
00:00:41تحل Google هذه المشكلة بإطلاق أداة تجريبية تُسمى WISC، مُصممة خصيصًا لتوليد العناصر المرئية.
00:00:47تعمل بقوة Nano Banana لتوليد الصور.
00:00:49غالبًا ما أستخدم WISC لتوليد تسلسلات من الصور لأقسام البطل الرئيسية.
00:00:53أقدم مطالبات بكلمات بسيطة، وأُحدّث التفاصيل خطوة بخطوة لكل تسلسل، ثم أستخدم الصور الناتجة في أقسام البطل.
00:01:01باستخدام هذه العملية بأكملها، أنشأت صفحة الهبوط هذه وتمكنت من تنفيذ هذا التأثير المتحرك الرائع مع الكاميرا.
00:01:07للبدء، سنقوم بتوليد الإطار الأول والأخير فقط من التسلسل، ثم إنشاء رسم متحرك باستخدام هذين الإطارين الرئيسيين لقسم البطل.
00:01:14لكن إذا بدأت في إعطاء المطالبات دون أي هيكل، فلن تحتفظ الإطارات الرئيسية التي تريدها بنفس الاستمرارية الهيكلية.
00:01:20لهذا الغرض، يجب عليك تحديد الموضوع بوضوح، والنية البصرية، ومستوى التفاصيل الذي تريده في الصورة.
00:01:26يستخدم WISC إطار عمل يتضمن الموضوع والمشهد والأسلوب لتوجيه توليد الصور، مما يتيح لك دمجها في صورة مرئية جديدة واحدة.
00:01:33لهذا السبب قمت بتضمين جميع التفاصيل حول نوع الكاميرا التي أريدها، وكيف أريد أن تبدو الانعكاسات على العدسة، والدقة، وعمق الصورة، وقد أنشأت الصورة المرئية تمامًا كما حدد الطلب.
00:01:44الصورة المُولدة لن تُلبي توقعاتك دائمًا.
00:01:47في هذه الحالة، عليك فقط ذكر التغيير بكلمات بسيطة، وسيدمج التغييرات في صورة مرئية جديدة.
00:01:53ما أحبه أكثر في WISC هو أنك لست بحاجة إلى كتابة مطالبات طويلة ومفصلة للحصول على نتائج رائعة.
00:01:58هذا لأنه يستخدم Gemini 3 كطبقة وسيطة، تكتب المطالبة التفصيلية فوق كلماتك البسيطة، مما يؤدي إلى صور مرئية قوية.
00:02:05الآن يُثار السؤال عن سبب اختياري لـ WISC.
00:02:08بينما يتطلب Nano Banana مطالبات نصية مُطولة، وتم تصميم Mix Board من Google للوحات المزاج، فإن أيًا منهما ليس مُحسنًا لإعادة مزج الصور بشكل سريع ومُتحكم فيه.
00:02:16تكمن قوة WISC الأساسية في الجمع بين الصور المرجعية، مما يتيح لك توليد صور بتحكم أفضل.
00:02:21بمجرد حصولي على إطاري الأول، أردت أن يكون إطاري الأخير زاوية جانبية للكاميرا، مع تفكيك العدسة لإظهار المكونات.
00:02:28لذا طلبت منه توليد مقطع تقني مفصول، مُحددًا كيف يجب أن يُرتب العدسات الداخلية، وكيف يجب أن تظهر الخلفية.
00:02:35لم يُنفذها بشكل صحيح في المحاولة الأولى.
00:02:37قام أيضًا بتفصيل الدوائر الداخلية، وهو ما لم أُرد أن يُظهره.
00:02:40كما قلت سابقًا، تذكر فقط التغيير الذي تحتاج إلى إجرائه.
00:02:42لذا أمرته بإظهار ترتيب العدسات فقط، وبعد ذلك نجح في توليد الصورة دون إظهار الدوائر الداخلية.
00:02:49الآن، يدعم WISC أيضًا الرسوم المتحركة باستخدام نموذج VIO.
00:02:53لكن رسوم WISC المتحركة تركز على تحريك صورة واحدة، بدلاً من القدرة على ربط إطارات رئيسية متعددة معًا.
00:02:58لهذا السبب استخدمت أداة أخرى تُسمى Google Flow.
00:03:01يستخدم Flow نموذج Gemini للتخطيط للقصة، ونماذج صور Google لتصميم الشخصيات الثابتة، وVIO لإنشاء محتوى الفيديو.
00:03:07كنت قد أنشأت بالفعل إطاراتي الأولى والأخيرة للرسم المتحرك للكاميرا، والآن أردت إنشاء انتقال بينهما.
00:03:13لذا استخدمت خيار الإطار إلى الفيديو وقدمت إطاراتي.
00:03:16لضمان انتقال سلس، تحتاج إلى ذكر كيفية انتقال الإطار الأول إلى الإطار النهائي في التعليمات، لأن ذلك يوفر للنموذج مساراً منطقياً.
00:03:24يجب أن تتضمن تعليماتك كيفية سير الحركة، وكيفية انتقال الإطار الأول إلى الإطار النهائي، وأسلوب الرسوم المتحركة، حيث تضمن هذه التفاصيل أن تكون الحركة مقصودة.
00:03:33أحياناً تميل هذه النماذج إلى ارتكاب أخطاء في المهام المعقدة، لذا لم تنجز الرسوم المتحركة بشكل صحيح من المحاولة الأولى.
00:03:38كان الفيديو الناتج خاطئاً تماماً في كل من اتجاه الدوران والإطار النهائي، مما جعل الانتقال محرجاً.
00:03:44كان الحل ببساطة هو إعادة كتابة التعليمات مع بعض التغييرات الضرورية لضمان صحة الرسوم المتحركة، تماماً كما طلبت تغيير اتجاه دوران الكاميرا للحصول على انتقال أكثر سلاسة، وبعدها أنتج النسخة التي أردتها والتي قمت بتنزيلها لاستخدامها في مشروعي.
00:03:58إنشاء الفيديو غير متاح بشكل غير محدود في الخطة المجانية لأن نماذج إنشاء الفيديو مكلفة.
00:04:04يوفر فقط 180 رصيداً شهرياً حسب المنطقة.
00:04:08نظراً لأن كل عملية إنشاء فيديو باستخدام VIO 3.1 تستهلك 20 رصيداً، يمكنك الحصول على ما يصل إلى 9 مقاطع فيديو شهرياً.
00:04:14نظراً لأن مقاطع الفيديو التي ينشئها Flow بصيغة MP4 ولا يمكن استخدامها مباشرة في أقسام Hero لأنه من الصعب ربطها بحركات التمرير، لهذا السبب قمت بتحويلها إلى WebP باستخدام محول مجاني عبر الإنترنت.
00:04:26قمت برفع فيديو MP4، وضبطت إعدادات التحويل لإنتاج أفضل جودة لملف WebP متحرك، وتم تحويله إلى صيغة WebP التي قمت بتنزيلها لاستخدامها في مشروعي.
00:04:35اختيار WebP مهم لأنه من الأسهل ربط تفاعلات التمرير معه، حيث يتم التعامل مع هذا الشكل على الويب كصورة لا تتطلب مشغل وسائط كما تفعل الصيغ الأخرى.
00:04:46هذه الملفات أكثر إحكاماً وتوفر أداءً محسّناً، مما يجعلها مثالية للمحتوى المتحرك القصير..
00:04:52أضفت ملف WebP المحول إلى المجلد العام في مشروع Next.js الذي قمت بتهيئته حديثاً لأن هذا هو المكان الذي توجد فيه جميع العناصر في المشروع.
00:05:00بمجرد أن أصبحت الرسوم المتحركة جاهزة، أردت إضافتها إلى قسم Hero في صفحتي الرئيسية.
00:05:05عادةً أقوم بكتابة التعليمات لـ Claude بصيغة XML لأن نماذجهم محسّنة لفهم XML، مما يسمح لها بتحليل المقصد المُنظّم بشكل أكثر موثوقية والتفكير في كل قسم بشكل مستقل.
00:05:15التعليمات التي أعطيتها لـ Claude لإضافة الرسوم المتحركة تضمنت السياق حول ما أريد بناءه، وأين توجد عناصر الرسوم المتحركة، وكيف يجب أن تعمل حركة التمرير، وهدفنا في علامة السياق.
00:05:26أدرجت جميع المتطلبات في علامات المتطلبات، ووصفت كيفية سلوك الرسوم المتحركة في علامات سلوك الرسوم المتحركة، وحددت تفاصيل التنفيذ والقيود والمخرجات المطلوبة مباشرة في التعليمات ضمن علاماتها الخاصة.
00:05:38عندما أعطيت Claude هذه التعليمات، نفذ الرسوم المتحركة تماماً كما أردت.
00:05:42على الرغم من أن قسم Hero بدا جيداً، إلا أن باقي المكونات بدت كالمواقع العامة التقليدية التي يميل الذكاء الاصطناعي إلى إنشائها.
00:05:50هذا لأننا كنا نتوقع نتائج عالية الجودة من CSS العادي بدلاً من الاعتماد على مكتبات المكونات الجميلة الموجودة..
00:05:57هناك العديد من مكتبات واجهة المستخدم، كل منها له أسلوب تصميم متخصص وموضوعات خاصة، لكن عليك اختيار المكتبة التي تناسب أسلوب مشروعك بشكل أفضل.
00:06:06بالنسبة لصفحة الهبوط الخاصة بالكاميرا، كنت أهدف إلى واجهة مستخدم بأسلوب Apple، والمكتبة الأقرب لتلك الفكرة هي Hero UI.
00:06:13إنها مبنية على Tailwind CSS وتعتمد على Framer Motion لإحياء مكوناتها عبر الموقع..
00:06:17تدعم المكتبة معظم الأطر الشائعة الاستخدام مثل Next.js وVite وLaravel.
00:06:22لذا كان استخدامها مع إعداد Next.js الحالي الخاص بي سهلاً.
00:06:25هناك طريقتان للتثبيت.
00:06:26إما أن تقوم بتثبيتها على مستوى المشروع بالكامل مع توفير جميع المكونات عبر أمر التثبيت، أو تقوم بتثبيت المكونات الفردية حسب الحاجة، وهو ما فعلته مع Claude.
00:06:36طلبت من Claude استبدال المكونات الموجودة بمكونات Hero UI، وتحسن الموقع بشكل ملحوظ، مما أعطى الموقع مظهراً وشعوراً أكثر احترافية.
00:06:43يقرر المستخدمون ما إذا كانوا سيبقون على الصفحة المقصودة خلال بضع ثوانٍ من خلال النظر إلى مدى جاذبية واجهة المستخدم.
00:06:50تساعد الحركة في توجيه انتباه الزائر إلى الميزات التي نريدهم أن يلاحظوها، مما يضمن معدل احتفاظ أعلى بالمستخدمين.
00:06:57قد يكون تنفيذ الرسوم المتحركة من الصفر باستخدام JavaScript الخام أمراً صعباً، لذا أعتمد على المكتبات الموجودة لتبسيط العملية.
00:07:05في هذا المشروع، استخدمت Motion.dev، وهي مكتبة مجانية ومفتوحة المصدر تقدم مجموعة واسعة من الرسوم المتحركة الجاهزة للاستخدام.
00:07:12عادةً، تتطلب الرسوم المتحركة مزامنة يدوية لتحديثات DOM مع توقيتات الرسوم المتحركة.
00:07:17ومع ذلك، تجرد Motion.dev هذا المنطق من خلال معالجة تحديثات DOM داخلياً.
00:07:21تقوم تلقائياً بتحديث المكونات عندما يقوم المستخدم بالتمرير، لذا تعمل الرسوم المتحركة بسلاسة دون الحاجة إلى تتبع مواضع التمرير يدوياً.
00:07:29تستخدم هذه المكتبة مكونات الحركة بدلاً من المكونات القياسية.
00:07:33هذه المكونات لها حالات بداية ونهاية محددة في الخصائص، وتتعامل المكتبة تلقائياً مع المنطق الانتقالي بينها.
00:07:39بالنسبة لصفحتنا المقصودة، طلبت من Claude تنفيذ رسوم متحركة للمنظر المتوازي والتمرير باستخدام المكتبة.
00:07:45ونتيجة لذلك، تحسنت تجربة المستخدم من خلال توجيه الانتباه نحو الأقسام الرئيسية للصفحة.
00:07:50وصف كيف يجب أن تبدو أقسام الصفحة هو عملية مملة.
00:07:53من الأفضل الحصول على الإلهام من المعارض الموجودة حيث ينشر الناس إبداعاتهم.
00:07:58استخدمت 21st.dev، وهي منصة تقدم الإلهام لمجموعة متنوعة من مكونات واجهة المستخدم المبنية من قبل مصممين متعددين.
00:08:04المكونات مبنية على مكتبات واجهة مستخدم شائعة مثل Aceternity UI وPrism UI وCoconut UI وMagic UI وغيرها الكثير.
00:08:11أثناء البحث عن أفكار، صادفت قسم الدعوة لاتخاذ إجراء هذا الذي سيبدو رائعاً على صفحتي المقصودة.
00:08:17الجزء الذي أحبه أكثر في 21st.dev هو أنه بالنسبة لأي مكون أريد استخدامه، يمكنني فقط نسخ موجه مصمم خصيصاً لوكلاء البرمجة بالذكاء الاصطناعي.
00:08:25لا أحتاج إلى توجيه Claude بنفسي.
00:08:27الموجه منظم بشكل مكثف، ويتضمن متطلبات المشروع مثل دعم ShadCN وTypeScript.
00:08:31يوفر كوداً مع تعليمات لوكيل البرمجة للصقه مباشرة في دليل المكونات.
00:08:35يتضمن جميع أكواد التبعيات الضرورية والمسارات التي يجب إضافتها فيها، ويسرد حزم NPM المطلوبة للتثبيت.
00:08:41يتضمن أيضاً دليل تنفيذ لوكيل الذكاء الاصطناعي الخاص بك، يوضح بالتفصيل جميع الخطوات اللازمة لدمج المكون مباشرة في تطبيقك وكيف يجب على الوكيل تخصيصه لاحتياجات المشروع المحددة.
00:08:52أعطيت هذا الموجه لـ Claude ودمج نفس قسم الدعوة لاتخاذ إجراء بالضبط الذي نسخت الموجه من أجله.
00:08:57كما أضاف حركة من مكتبة الحركة التي قمنا بتثبيتها، على الرغم من أنني لم أذكر صراحة إضافة حركة في أي مكان.
00:09:04حصلت أيضاً على التذييل من 21st.dev، على الرغم من أن التذييل التجريبي تضمن أيقونات GitHub وTwitter..
00:09:11عندما أعطيت Claude الموجه المنسوخ، أغفل أيقونة GitHub لأنها لم تكن ذات صلة بمشروعنا.
00:09:16خصص التذييل ليتضمن فقط الأيقونات المتعلقة بموقع منتجات الكاميرا، مما أنشأ تذييلاً يتناسب تماماً مع صفحتنا المقصودة.
00:09:23بهذا نصل إلى نهاية هذا الفيديو..
00:09:25إذا كنت ترغب في دعم القناة ومساعدتنا في الاستمرار في صنع مقاطع فيديو مثل هذه، يمكنك القيام بذلك باستخدام زر الشكر الفائق أدناه.
00:09:32كما هو الحال دائماً، شكراً لك على المشاهدة وأراك في المرة القادمة..