كيف أنشأت فيديو موشن جرافيك احترافي باستخدام Claude Code ومهارات Remotion (بدون مونتاج)

AAndy Lo
Computing/SoftwareSmall Business/StartupsPhotography/ArtInternet Technology

Transcript

00:00:00ألقوا نظرة على هذا الفيديو التوضيحي الذي صممناه.
00:00:02المريخ، الكوكب الأحمر، عالمٌ سحر البشرية لقرون.
00:00:08إنه الكوكب الرابع من الشمس، ويقع خلف الأرض مباشرة في نظامنا الشمسي.
00:00:14لم يتم تعديل هذا الفيديو باستخدام برنامج After Effects.
00:00:16لم نلمس الإطارات المفتاحية (keyframes)، ولم نقم بتحريك أي شيء يدويًا.
00:00:21لقد قام Claude، باستخدام مهارة Remotion Agent الجديدة، ببناء الفيديو وإخراجه لنا.
00:00:26الحركة، التوقيت، كل شيء، تم تنفيذه بمجرد إعطاء الأوامر النصية.
00:00:30لكن أولاً، لنتحدث عن مهارات Claude.
00:00:33إذا كنتم تتابعون أخبار الذكاء الاصطناعي مؤخرًا، فإن مهارات Claude هي الموضوع الأكثر تداولاً الآن.
00:00:38الجميع يتحدث عنها، وإليكم حقيقتها.
00:00:43هي عبارة عن أدلة إرشادية تعلم Claude كيفية إتقان أدوات وسير عمل محددة.
00:00:49إنها حزم معرفية متخصصة تحول Claude من مساعد عام
00:00:54إلى خبير في مجالات مثل إنتاج الفيديو، أو تحليل البيانات، أو الأتمتة.
00:01:00وعندما تجمع بين المهارات وأداة البرمجة Claude Code وThorpe's agenda،
00:01:05فإنك تفتح آفاقاً قوية للغاية.
00:01:07والآن، نأتي لبرنامج Remotion.
00:01:09إنه إطار عمل يتيح لك إنشاء مقاطع فيديو باستخدام لغة البرمجية React،
00:01:13وهي التقنية نفسها التي تشغل المواقع الإلكترونية الحديثة.
00:01:15لكن المشكلة هنا هي:
00:01:16أن Remotion قوي للغاية، ولكنه معقد أيضاً.
00:01:20يجب أن تفهم React، ومكتبات الرسوم المتحركة، ودوال التوقيت، ومعالجة الفيديو.
00:01:26إنها أداة تطوير كانت بعيدة عن متناول معظم الناس.
00:01:30لهذا السبب تُعد مهارة Remotion Agent نقطة تحول حقيقية.
00:01:33فهي تمنح Claude معرفة عميقة بكامل إطار عمل Remotion،
00:01:37مثل كيفية بناء التكوينات، وتنسيق الحركات،
00:01:41وإدارة التوقيت، والتعامل مع الأصول، وكل شيء.
00:01:45فبدلاً من أن يخمن Claude الكود البرمجي للفيديو، أصبح الآن يفهم إطار العمل
00:01:50مثل مطور Remotion خبير.
00:01:53إنه الإعداد نفسه الذي يستخدمه المطورون حالياً لإنشاء الفيديوهات تلقائياً.
00:01:58وبنهاية هذا الفيديو،
00:02:00ستتمكن من إخراج رسوم متحركة احترافية باستخدام الأوامر النصية فقط.
00:02:04لذا، دعونا نبدأ.
00:02:05أولاً، نحتاج إلى تثبيت مهارة Remotion لـ Claude.
00:02:08للقيام بذلك، سنقوم بكتابة هذا الأمر هنا.
00:02:11يمكنكم العثور على هذا الأمر في أداة موقع Remotion الإلكتروني.
00:02:14وسنختار كل هذه النماذج في القائمة بالضغط على المسافة ثم Enter.
00:02:19بمجرد تثبيت مهارة Claude في المشروع،
00:02:22سنفتح الآن واجهة Claude Code ونطلب منه بدء مشروع Remotion جديد.
00:02:28لنتظر قليلاً حتى ينتهي من الإعداد.
00:02:30لقد انتهى الآن من إعداد المشروع والقالب.
00:02:38ببساطة، اتبع هذه التوجيهات هنا لتشغيل Remotion Studio.
00:02:42ودعونا نرى كيف يبدو. رائع.
00:02:45هذا هو شكل Remotion.
00:02:46إنه يشبه تطبيقات تحرير الفيديو، لكنك تقوم ببرمجة كل مشهد.
00:02:51الآن بعد أن قمنا بتثبيت المشروع وعرفتم شكل Remotion،
00:02:56لننتقل إلى مرحلة التطوير.
00:02:59عملية التطوير لدينا تتكون من تسع مراحل.
00:03:02المراحل من 1 إلى 3 ستحدد الأنظمة التي يعمل من خلالها Claude.
00:03:07والمراحل من 4 إلى 7 مخصصة لإنشاء الأصول وتحديد المكونات القابلة للاستخدام.
00:03:13أما المرحلتان 8 و9 فهما للتنفيذ.
00:03:16ومع ذلك، دعونا نبدأ.
00:03:19بالطبع، سنبدأ بالمرحلة الأولى.
00:03:21الآن بعد أن قمنا بتثبيت كل شيء،
00:03:25لنفتح دليل البناء الذي صممناه خصيصاً لهذا الفيديو.
00:03:29وبينما يختص هذا الدليل بتطوير الفيديو المعين الذي نريد إنتاجه،
00:03:35يمكنكم أيضاً إعادة استخدامه لإنشاء فيديوهات أخرى تريدونها
00:03:39بمجرد فهمكم لكيفية عمل هذه الأوامر.
00:03:42لذا، إذا أردتم نسخة من هذا الأمر،
00:03:44يمكنكم زيارة مجتمعنا المجاني حيث نرفع أدلة مثل هذه.
00:03:48حتى تتمكنوا أنتم أيضاً من البناء باستخدام الذكاء الاصطناعي.
00:03:51لننسخ أمر المرحلة الأولى ونلصقه في Claude Code.
00:03:56ثم نضغط على Enter.
00:03:57ما يفعله هذا الأمر هو تأسيس القاعدة التقنية
00:04:02التي يجب على Claude اتباعها طوال فترة التطوير.
00:04:06يمكنكم اعتبارها القواعد والأنماط التي يجب عليه الالتزام بها.
00:04:09وهذا أمر مهم جداً لأن معظم المشاريع تفشل
00:04:13ليس بسبب نقص الرؤية البصرية لدى القائمين عليها،
00:04:16بل لأن الذكاء الاصطناعي لم يُعطَ قواعد محددة فينتهي به الأمر بفعل أشياء من تلقاء نفسه.
00:04:23بمجرد انتهاء المرحلة الأولى، سيبدو الأمر هكذا.
00:04:27وسيتم إنشاء ملف بصيغة markdown خاص بالتطوير.
00:04:31لقد انتهى Claude من وضع الأساسات.
00:04:34ويمكنكم الآن الانتقال إلى المرحلة التالية، المرحلة الثانية.
00:04:37سنقوم الآن بتحديد التوجه الفني والنظام البصري لهذا الفيديو.
00:04:42وهذه خطوة في غاية الأهمية في سير العمل.
00:04:46حتى الآن، قمنا بإعداد البيئة وتأكدنا من أن Claude يفهم Remotion فعلاً.
00:04:52ما نفعله هنا هو تعليم Claude كيف يفكر بصرياً قبل أن يكتب أي كود برمجي حقيقي.
00:05:00لذا، اذهبوا وافتحوا دليل البناء مرة أخرى.
00:05:03سترون قسماً بعنوان المرحلة الثانية.
00:05:05يمكنكم نسخ الأمر بالكامل كما هو بالضبط.
00:05:10ثم ارجعوا إلى واجهة Claude Code في جهازكم.
00:05:15الصقوا الأمر واضغطوا على Enter.
00:05:17واتركوا Claude يتولى المهمة للحظات.
00:05:21أود أن أتوقف هنا لأوضح لماذا يهم هذا الأمر كثيراً.
00:05:25لأن الكثير من الناس إما يتجاوزون هذه الخطوة أو يحاولون المبالغة في التحكم في الأمور.
00:05:30هذا الأمر لا يطلب من Claude بناء الفيديو كاملاً بعد.
00:05:35بل هو يرسخ "التفكير المنظم".
00:05:39فنحن نحدد قواعد العالم الذي سيبدأ Claude بالبناء عليه.
00:05:43يمكنكم اعتبارها توجيهات إبداعية، وليست مجرد تعليمات.
00:05:46نحن نخبر Claude بأشياء مثل النغمة العامة، والقيود البصرية،
00:05:52وكيفية انسياب الحركة، وكيفية اتخاذ قرارات التصميم عندما لا يكون هناك شيء محدد بوضوح.
00:06:00وهذا مهم جداً لأننا لن نصف كل بكسل في هذا الفيديو يدوياً، أليس كذلك؟
00:06:07سيكون ذلك مستحيلاً.
00:06:08لكن في الوقت نفسه، لا نريد أن يخمن Claude عشوائياً أو يبتكر أنماطاً لا تناسب أسلوبنا أبداً.
00:06:15لذا، هذا الأمر يمنحنا التحكم دون الحاجة للإدارة التفصيلية المملة.
00:06:19وهو يعطي Claude إطاراً للعمل من خلاله.
00:06:22فبدلاً من تخمين معنى كلمة "نظيف" أو "عصري"، أصبح لديه تعريف مشترك معنا.
00:06:29وبدلاً من التخريف، أصبح لديه الآن المهارة التقنية
00:06:33والضوابط الإبداعية للعمل بشكل صحيح.
00:06:36لذا، لنضغط على Enter وننتظر Claude لمعالجة الطلب.
00:06:39حسناً، بمجرد أن ينتهي Claude، سترون هنا أنه أنشأ ملفاً للتوجه الفني،
00:06:44يوضح كيف سيفكر وينفذ القرارات المستقبلية.
00:06:48عندما نصل إلى التطوير الفعلي، لا تترددوا في المراجعة والتعديل في هذا الجزء،
00:06:55فأنتم تريدون أن يكون لمشروعكم التوجه الفني الذي ترغبون فيه.
00:06:58لذا قد تضطرون لطلب تعديل أو إضافة أشياء من Claude.
00:07:02وبهذه البساطة، فتحنا المرحلة التالية من سير العمل.
00:07:07لدينا الآن لغة بصرية مشتركة بينكم وبين الذكاء الاصطناعي.
00:07:12لذا يعرف Claude كيف يفكر في هذا الفيديو قبل أن يكتب أي تكوين أو تسلسل.
00:07:18وهذا إنجاز كبير.
00:07:19في هذه المرحلة، نجحنا في تحديد التوجه الفني والتحكم البصري.
00:07:24لم نبنِ الفيديو بعد.
00:07:26لكننا وضعنا الأساس الذي يجعل البناء الفعلي متوقعاً واحترافياً.
00:07:31مع تثبيت التوجه الفني، الخطوة التالية هي صياغة قصة الفيديو.
00:07:37هذه الخطوة تكتمل بها المنظومة التي نحتاجها.
00:07:40نحن ننتقل من "كيف يجب أن يكون شعور الفيديو" إلى "ماذا يحدث فعلاً لحظة بلحظة".
00:07:47والهدف هنا بسيط للغاية.
00:07:49تحديد المشاهد، والتدفق، والتوقيت.
00:07:52ليكون للفيديو معنى قبل أن نبدأ في تحريك أي شيء.
00:07:56حسناً، لنعد إلى دليل البناء ونجد أمر المرحلة الثالثة.
00:08:02يمكننا نسخ الأمر بالكامل.
00:08:03وبمجرد حصولكم عليه، ارجعوا إلى Claude Code.
00:08:08ثم الصقوا الأمر واضغطوا على Enter.
00:08:10والآن ننتظر Claude لمعالجة الطلب.
00:08:13يقوم Claude الآن بأخذ التوجه الفني الذي حددناه سابقاً ويستخدمه لإنشاء جدول زمني.
00:08:18إنه يقرر عدد المشاهد التي نحتاجها، ومسؤولية كل مشهد،
00:08:23وكم يجب أن تبقى كل لحظة على الشاشة.
00:08:27هذا ما يسمح لنا ببناء فيديو مدته 10 ثوانٍ أو 60 ثانية
00:08:32يبدو مدروساً ومنظماً بدلاً من أن يكون متسرعاً أو عشوائياً.
00:08:36بمجرد انتهاء Claude، سترون تقسيماً للفيديو إلى مشاهد.
00:08:40كل مشهد له دور واضح.
00:08:43عادةً ما يكون هناك مشهد افتتاحي لجذب الانتباه، وقسم للرسالة الأساسية، ولحظات داعمة، وخاتمة، أليس كذلك؟
00:08:52وهذا في الواقع لوحة قصة (storyboard)، ولكنها مكتوبة.
00:08:56وهو يشبه لوحة القصة تماماً، ولكنه مكتوب بنصوص بدلاً من الصور.
00:09:02في هذه المرحلة، يمكنك أن تطلب من Claude تعديل بعض الأمور.
00:09:05فإذا لم تشعر أن مشهداً ما يناسب ما تريد إنشاءه، يمكنك قول ذلك ببساطة.
00:09:10إذا أردت إعادة ترتيب الأقسام أو حذف أحدها تماماً، فهذا هو الوقت المناسب.
00:09:15هذه نقطة أخرى يتردد عندها الناس، حسناً؟
00:09:17باعتقادهم أن عليهم قبول النتيجة الأولى.
00:09:20في الحقيقة، لست ملزماً بذلك.
00:09:21تعامل مع الأمر وكأنه مسودة تعاونية، اتفقنا؟
00:09:25وهذا كل ما في الأمر.
00:09:27في هذه الحالة، يبدو الهيكل متيناً، أليس كذلك؟
00:09:30الإيقاع منطقي، والمشاهد تنساب بسلاسة، وهي تناسب الطول الذي نهدف إليه.
00:09:37لذا بدلاً من الاستمرار في التعديل، سنعطي Claude إشارة البدء.
00:09:41كل ما عليك فعله هو إخبار Claude بالمتابعة
00:09:45وإنشاء ملف لوحة القصة بناءً على هذا الهيكل.
00:09:48بمجرد القيام بذلك، سيقوم Claude بإنشاء ملف مخصص
00:09:52يمثل الجدول الزمني الكامل للفيديو.
00:09:55ويصبح هذا الملف هو المصدر الوحيد للمعلومات لما نحن بصدد بنائه.
00:10:00وبهذه البساطة، أصبح لدينا الآن قصة الفيديو جاهزة ومثبتة.
00:10:04نحن نعرف ماذا سيحدث، ومتى سيحدث، ولماذا هو موجود.
00:10:08لم يتم تحريك أي شيء بعد، لكن أصعب القرارات الإبداعية قد أُنجزت بالفعل.
00:10:13الآن بعد انتهاء لوحة القصة، سننتقل إلى المرحلة الرابعة،
00:10:18وهي تحديد قائمة الأصول الخاصة بنا.
00:10:20هذه إحدى الخطوات التي قد تبدو اختيارية في البداية،
00:10:24لكنها في الواقع ضرورية إذا كنت تريد نتائج نظيفة ومتسقة.
00:10:28والهدف هنا بسيط للغاية، وهو تحديد الأصول الموجودة،
00:10:33وكيف يجب أن يكون شكلها قبل أن نحاول إنشاءها وتحريكها أو وضعها في أي مكان.
00:10:38هذه الخطوة حاسمة لأنها تخلق فصلاً بين قرارات التصميم ومنطق المشهد.
00:10:44وهذا الفصل هو ما يحمي الأشياء من التعطل لاحقاً.
00:10:48وإليكم سبب أهمية ذلك.
00:10:50إذا طلبت من Claude تصميم أحد الأصول، وتحديد كيف يجب أن يبدو،
00:10:54ومعرفة أين يوضع في المشهد، كل ذلك في وقت واحد.
00:10:59فإنك تضع الكثير من القرارات في خطوة واحدة، وهنا يحدث الفشل.
00:11:04ستحصل على نتائج سيئة وغير متسقة.
00:11:07لذا، دعونا نعد إلى دليل البناء مرة أخرى وننسخ أمر المرحلة الرابعة.
00:11:11بمجرد حصولكم عليه، ارجعوا إلى واجهة Claude، وألصقوه، واضغطوا على Enter.
00:11:17والآن يمكننا انتظار Claude للمعالجة.
00:11:19بينما يتم تنفيذ ذلك، دعوني أشرح ما يفعله هذا الأمر خلف الكواليس.
00:11:24إنه لا ينشئ عناصر بصرية بعد.
00:11:25بل يحدد معايير التصميم لكل أصل سنحتاجه.
00:11:29أشياء مثل الأشكال، واستخدام الألوان، وما إلى ذلك.
00:11:33من الأخطاء الشائعة هنا تخطي هذه الخطوة وترك كل مشهد يبتكر أصوله الخاصة.
00:11:39هكذا ينتهي بك الأمر بفيديو يبدو فيه كل مشهد باهتاً ولا يشعرك بالترابط.
00:11:45بمجرد أن ينتهي Claude، سيقوم بإنشاء ملف لقائمة الأصول منسق بوضوح.
00:11:53وكل أصل له اسم ومعايير محددة.
00:11:57في هذه المرحلة، لا تحتاج لتغيير الكثير إلا إذا كان هناك شيء ناقص أو غير ضروري بوضوح.
00:12:04إذا أردت إضافة أو تغيير أي شيء، فقط اطلب من Claude فعل ذلك.
00:12:10وبهذه البساطة، لدينا الآن قائمة كاملة بالأصول ونظام تصميم يحكمها.
00:12:17وهذا يعني أنه عندما يبدأ Claude في إنشاء مكونات Remotion،
00:12:22فلن يخمن كيف يجب أن تبدو الأشياء.
00:12:25بل سيسحبها من هذه القائمة مباشرة.
00:12:28الآن بعد تثبيت مواصفات الأصول، يمكننا الانتقال إلى المرحلة الخامسة،
00:12:33وهي إنشاء الأصول نفسها.
00:12:36سنقوم الآن بإنتاج القطع الملموسة التي سيتم استخدامها في الفيديو بالكامل.
00:12:42حسناً، حتى هذه اللحظة، كنا نفصل بين المهام بشكل متعمد.
00:12:48أولاً حددنا النظام، ثم التوجه الفني، ثم لوحة القصة، ثم سابقاً مواصفات الأصول.
00:12:56وهذه الخطوة الآن تحول تلك التعريفات إلى أصول فعلية قابلة للاستخدام دون تداخل في المسؤوليات،
00:13:04مما يهيئ كود Claude للتطوير بتعليمات وسياق واضحين جداً.
00:13:10وهذا هو سبب نجاح هذه الطريقة واعتماديتها.
00:13:13لذا، دعونا نمر على الخطوات.
00:13:15لنأخذ أمر المرحلة الخامسة من دليل البناء مرة أخرى، ثم نلصقه في واجهة Claude.
00:13:20لكن قبل أن نضغط على Enter، إليكم ملاحظة هامة.
00:13:23عندما تعملون على مشاريع أكبر تحتوي على الكثير من الأصول من فئات مختلفة،
00:13:29من الجيد جداً إنشاؤها في دفعات حسب الفئة.
00:13:33ما أعنيه بذلك هو إضافة قاعدة للأمر تخبر Claude
00:13:37بإنشاء فئة واحدة من الأصول في كل مرة.
00:13:40وهذا يقلل من فرص حدوث "تخريف" من الذكاء الاصطناعي، مما يقلل من احتمال
00:13:45فقدان Claude للأنماط عبر الأصول غير المرتبطة ببعضها.
00:13:49في حالتنا هذه، لا يحتوي هذا الفيديو على قائمة أصول ضخمة.
00:13:53لذا سنقوم ببساطة بإنشاء كل شيء في جولة واحدة.
00:13:57فقط اعلم أنه كلما كبرت مشاريعك، يصبح التجميع في دفعات هو الممارسة الأفضل.
00:14:03حسناً، هذا الجزء عادة ما يستغرق بعض الوقت، لذا تحلَّ بالصبر فقط.
00:14:08بمجرد الانتهاء، خذ لحظة سريعة لفحص المخرجات والتأكد من وجود جميع العناصر التي تحتاجها.
00:14:15عادةً، ستجد كل شيء في مجلد المصدر (SRC).
00:14:20وهكذا، أصبح لدينا الآن مجموعة كاملة من العناصر الجاهزة للاستخدام.
00:14:25وهذه لم تعد مجرد أفكار مجردة بعد الآن.
00:14:28بل هي وحدات بناء حقيقية سيتم إعادة استخدامها عبر المشاهد،
00:14:32وهذا هو ما سيمنح الفيديو الاتساق الذي ننشده.
00:14:36بعد اكتمال جميع عناصرنا، الخطوة التالية هي منحها الحركة.
00:14:41هذه هي المرحلة السادسة، والهدف هنا هو تحديد كيفية سلوك كل عنصر من عناصرنا.
00:14:47ليست المشاهد النهائية بعد، بل مجرد لبنات بناء الحركة التي ستُستخدم في كل مكان.
00:14:53هذه هي ما نعتبرها أساسيات الحركة.
00:14:56وبشكل أساسي، نحن ننشئ لغة حركة مشتركة يمكن للفيديو بأكمله استخدامها.
00:15:01لذا، في دليل البناء، انسخ مطالبة المرحلة السادسة ثم الصقها في Claude code.
00:15:07الآن إليكم التحول المهم في العقلية.
00:15:10لا نحتاج إلى أن نكون تقنيين للغاية هنا.
00:15:13فنحن لا ندرج كل إطار مفتاحي أو نصف كل رسوم متحركة بالتفصيل.
00:15:18والسبب في قدرتنا على فعل ذلك هو العمل الذي أنجزناه سابقاً.
00:15:23لأننا في المراحل الأولى من هذا المشروع، أسسنا كيفية تفكير Claude.
00:15:28لقد حددنا قواعد وأنماط التطوير، والمبادئ البصرية، وسرد القصص،
00:15:33وقيود التصميم باستخدام كل ملفات الـ markdown تلك.
00:15:37وهذا يمنح Claude فهماً عميقاً للأسلوب، والإيقاع، والنبرة التي نهدف إليها.
00:15:44لذا في هذه المرحلة، يمكننا الوثوق به لتقييم المشروع ككل
00:15:48واقتراح أنماط حركة منطقية.
00:15:50بمجرد لصق المطالبة، يمكننا المضي قدماً والضغط على Enter.
00:15:55سيبدأ Claude في تحليل العناصر وتوليد أساسيات الحركة.
00:15:58من الأخطاء الشائعة هنا محاولة الإفراط في التحكم في هذه الخطوة.
00:16:02إذا حاولت إدارة الحركة بدقة متناهية في هذه المرحلة،
00:16:05ينتهي بك الأمر بدمج حركة خاصة بمشهد معين داخل نظام الحركة الخاص بك.
00:16:10وهذا يجعل إعادة استخدام الأشياء أصعب لاحقاً.
00:16:13بدلاً من ذلك، نحن نهدف إلى أنماط حركة مرنة وعامة الأغراض
00:16:17تبدو متسقة عبر الفيديو بأكمله.
00:16:21والآن، هذا لا يعني أن Claude سيتقن كل شيء تماماً.
00:16:25لا بأس بذلك.
00:16:26مهمتنا هنا ليست توقع حركة مثالية من المحاولة الأولى، أليس كذلك؟
00:16:31مهمتنا هي الحصول على أساس قوي.
00:16:34سنعود بالتأكيد لاحقاً لصقل لحظات معينة عندما نرى مخرجات المشاهد.
00:16:39بعد قليل من المعالجة، ينتهي Claude.
00:16:42وهكذا، أصبح لدينا الآن مجموعة من أساسيات الحركة المحددة للمشروع.
00:16:47هذه القواعد قابلة لإعادة الاستخدام، ومتسقة، ومتماشية مع النظام البصري
00:16:52والسردي الذي أنشأناه سابقاً.
00:16:54هذا إنجاز ضخم.
00:16:57لدينا الآن العناصر ولدينا الحركة.
00:17:00ونحن قريبون جداً من تحويل كل هذا إلى فيديو.
00:17:04والآن ننتقل للمرحلتين السابعة والثامنة.
00:17:06هذه هي الأجزاء التي نقوم فيها أساساً بربط كل شيء معاً.
00:17:09بعض الأشياء التي ستطلب هذه المطالبة من Claude القيام بها
00:17:12هي على الأرجح أشياء تم أخذها في الاعتبار بالفعل خلال المراحل المبكرة.
00:17:17لكن مع ذلك، من المهم تشغيلها لإنشاء المكونات الضرورية
00:17:22وللتأكد من عدم وجود أي فجوات.
00:17:25لذا فقط قم بتشغيلها في واجهة Claude code
00:17:28مع مطالبة Claude بتخطي الأشياء التي قام بها بالفعل.
00:17:31حسناً، الآن بعد أن تم كل ذلك،
00:17:34لدينا أخيراً الضوء الأخضر لبناء المشاهد وتجميع الفيديو، حسناً؟
00:17:40وهذه هي المرحلة التاسعة.
00:17:42وبصراحة، هذا هو أسهل جزء في سير العمل بالكامل
00:17:46لأن كل التفكير الصعب قد تم إنجازه بالفعل من أجلنا.
00:17:50لذا فلنواصل العمل.
00:17:51في هذه المرحلة، لم يعد Claude يخمن.
00:17:54إنه ينفذ المهام داخل نظام قمنا بإعداده بعناية.
00:17:57هدفنا هنا بسيط للغاية.
00:17:59توليد الكود الخاص بكل مشهد.
00:18:02مراجعة كيف يبدو المظهر.
00:18:05ثم تجميع كل شيء في فيديو نهائي واحد مصقول.
00:18:10أولاً، انسخ مطالبة المرحلة التاسعة من دليل البناء
00:18:13والصقها في واجهة Claude ثم اضغط على Enter.
00:18:17وما تفعله هذه المطالبة هو توجيه Claude
00:18:21للبدء في بناء مشاهد الحركة الفعلية
00:18:23باستخدام كل ما أنشأناه حتى الآن.
00:18:26حيث يجتمع هنا كل من التوجه الفني، ولوحة القصة، والعناصر،
00:18:29وأساسيات الحركة معاً.
00:18:32الآن، من الناحية المثالية، خاصة في المشاريع الكبيرة،
00:18:35ستحتاج إلى إنشاء المشاهد واحداً تلو الآخر.
00:18:38ولهذا السبب صممنا المطالبة بهذه الطريقة.
00:18:41وعلى الرغم من أن هذا الفيديو مدته دقيقة و30 ثانية فقط،
00:18:45إلا أن تعلم هذه الممارسة المثالية مبكراً سيوفر عليك الكثير من العناء لاحقاً.
00:18:49عندما يتم إنشاء المشاهد بشكل فردي،
00:18:52يصبح من السهل جداً تصحيح الأخطاء وتطويرها
00:18:55وإجراء تغييرات مستهدفة دون إفساد الفيديو بأكمله.
00:18:59بمجرد الانتهاء من المشهد الأول، ننتقل لإنشاء بقية المشاهد.
00:19:04وبعد الانتهاء من ذلك، سنرغب فعلياً في رؤية ما قمنا ببنائه.
00:19:08يمكنك أن تطلب من Claude تشغيل Remotion Studio لك
00:19:10وسيعطيك الرابط (URL).
00:19:12أو يمكنك فقط تشغيل npm start في واجهة الأوامر.
00:19:16نحن الآن داخل Remotion Studio، دعونا نضغط على زر التشغيل.
00:19:21وعلى الفور يمكنك أن ترى أن التوجه الفني
00:19:24والنمط البصري يبدوان متسقين في كل مشهد.
00:19:28وهذه علامة جيدة حقاً.
00:19:29إذا شعرت أن الفيديو جامد قليلاً، فهذا أمر متوقع تماماً.
00:19:34حالياً قمنا بإنشاء المشاهد فقط، ولم نقم بعد
00:19:38بتجميع الفيديو بالكامل أو صقل الانتقالات.
00:19:42لذا من هنا، سنعود ببساطة إلى Claude's code
00:19:45ونطرح المشكلات التي لاحظناها ونخبر Claude بما نريد تحسينه بالضبط.
00:19:50مثل المعايير الدقيقة لكيفية تحرك المشاهد في رأينا.
00:19:56المشكلة الدقيقة التي استخدمناها هنا ليست بهذه الأهمية.
00:19:58فقد تبدو مخرجاتك مختلفة في كل قسم، مخرجاتك مقارنة بمخرجاتي.
00:20:04المشكلة الدقيقة التي نستخدمها هنا ليست بهذه الأهمية.
00:20:07قد تبدو مخرجاتك مختلفة في كل قسم مقارنة بمخرجاتي.
00:20:10وهذا أيضاً أمر جيد لأن هذا هو المكان الذي تبدأ فيه
00:20:14بتطوير مهارة صقل وتصحيح عملك الخاص.
00:20:17لم تعد مجرد تابع للمطالبات.
00:20:20بل أصبحت تتخذ القرارات النهائية.
00:20:22وبعد الانتهاء من ذلك، نتحقق من الفيديو مرة أخرى.
00:20:25وهكذا، يبدو كل شيء أكثر تماسكاً.
00:20:28الحركة أصبحت أسلس، والانتقالات أفضل،
00:20:31وبدأ الفيديو أخيراً يبدو احترافياً ومقصوداً بدلاً من كونه آلياً.
00:20:35حسناً، لكننا لن نتوقف عند هذا الحد.
00:20:37الطبقة الأخيرة هي التعليق الصوتي وموسيقى الخلفية.
00:20:41لأجل هذا، سنستخدم برمجية 11 Labs SDK.
00:20:44سنجعل هذا الجزء سريعاً.
00:20:46فقط توجه إلى وثائق 11 Labs.
00:20:49واختر الأمر المناسب لإعداداتك.
00:20:52وبما أننا نستخدم Node.js، فسنستخدم ذلك الأمر.
00:20:56ثم اطلب من Claude تشغيل الأمر وإعداد تكامل 11 Labs للتعليق الصوتي والموسيقى.
00:21:03سيقوم Claude بإنشاء ملف ENV لك حيث يمكنك ببساطة لصق مفتاح API الخاص بـ 11 Labs.
00:21:09بعد ذلك، يمكنك أن تطلب من Claude إنشاء نص للتعليق الصوتي
00:21:13يتناسب مع الفيديو الذي قمت ببنائه.
00:21:16وبمجرد الانتهاء من الربط، دعونا نتحقق من النتيجة مرة أخرى.
00:21:20المريخ، الكوكب الأحمر، عالمٌ سحر البشرية لقرون.
00:21:27إنه الكوكب الرابع من الشمس، ويقع خلف الأرض مباشرة في نظامنا الشمسي.
00:21:31في أقرب نقطة له، يبعد المريخ مسافة 225 مليون كيلومتر عن الأرض.
00:21:37هذه رحلة تستغرق سبعة أشهر بواسطة مركبة فضائية.
00:21:41تسلَّح بالصبر.
00:21:42المريخ يبلغ نصف حجم الأرض تقريباً، عالم أصغر لكنه ليس أقل إثارة.
00:21:48اليوم على المريخ هو تقريباً نفس اليوم على الأرض، 24 ساعة و37 دقيقة.
00:21:54لكن السنة؟ تستغرق 687 يوماً أرضياً، أي ما يقرب من عامين من أعوامنا.
00:22:01الغلاف الجوي رقيق جداً، يمثل 1% فقط من غلاف الأرض.
00:22:05ستحتاج بالتأكيد إلى بدلة فضاء.
00:22:07لماذا هو أحمر جداً؟
00:22:09أكسيد الحديد، أو الصدأ، يغطي السطح، مما يعطي المريخ لونه المميز.
00:22:15المريخ هو موطن جبل أوليمبوس، أكبر بركان في النظام الشمسي،
00:22:19وهو أطول بثلاث مرات من جبل إيفرست.
00:22:21وهناك ماء، متجمد عند القطبين وربما مخفي تحت الأرض،
00:22:27وهو المفتاح لاستكشاف المستقبل.
00:22:29لقد أرسلنا بالفعل خمس عربات استكشاف: سوجورنر، سبيريت، أوبورتيونيتي، كوريوسيتي، وبيرسيفيرانس.
00:22:37يوماً ما، سيطأ البشر أرض المريخ،
00:22:40سنبني مساكن، ونرفع الأعلام، ونسميه موطننا الثاني.
00:22:45المريخ ينتظرنا!
00:22:46هذا هو شكل الفيديو التوضيحي الخاص بنا عن المريخ.
00:22:51فيديو توضيحي مكتمل البناء، ومصقول، ونظيف، واحترافي.
00:22:56بُني من خلال نظام، وليس بالتخمين.
00:22:59سرد القصص يبدو رائعاً، والمرئيات تبدو مذهلة في كل انتقال.
00:23:05سرد القصص يبدو رائعاً، والمرئيات مذهلة، وكل انتقال يتم بسلاسة تامة.
00:23:12حسناً، دعونا نتوقف للحظة وننظر إلى ما فعلناه للتو.
00:23:16انتقلنا من مجلد فارغ إلى فيديو احترافي مكتمل الإخراج.
00:23:22بدون استخدام After Effects، ولا جدول زمني، ولا إطارات مفتاحية.
00:23:26استخدمنا Claude Code وRemotion ومهارات الوكيل كنظام واحد متكامل.
00:23:32وقمنا بتوجيه النتيجة بدلاً من بناء كل قطعة يدوياً.
00:23:38هذا أصل حقيقي يمكنك نشره وشحنه ودمجه في سير عملك اليوم.
00:23:44وهذا هو الدرس الأكبر هنا.
00:23:47القوة لا تكمن فقط في أن الذكاء الاصطناعي أسرع، بل في أن هذه الأدوات تعمل معاً.
00:23:52عندما يتمكن Claude Code من فهم Remotion وتقديم المعرفة المناسبة في الوقت المناسب،
00:23:59فأنت لم تعد تعمل كمنشئ محتوى منفرد، بل تعمل كفريق صغير.
00:24:05وهذا هو التحول من مجرد استخدام الذكاء الاصطناعي إلى البناء الفعلي به.
00:24:09من الآن فصاعداً، أنت لا تصنع فيديوهات فقط، بل تبني أنظمة بصرية.
00:24:14يمكنك تعديل الأجواء، وتبديل البيانات، وتوليد نسخ جديدة والإطلاق دون انتظار أحد.
00:24:21وهذا لا يحل محل الإبداع، بل يضاعفه.
00:24:26بمجرد امتلاكك لسير العمل هذا، يمكنك تطبيقه على عروض المنتجات،
00:24:30أو مقاطع التواصل الاجتماعي، أو عمل العملاء، أو أي شيء آخر تريد إنجازه.
00:24:34إذا كنت ترغب في التعمق أكثر، فهذا هو بالضبط ما نفعله داخل مجتمع AnyNoCode المميز.
00:24:40نحن نفصل سير العمل الواقعي مثل هذا، ونوضح لك كيفية كسب المال من الذكاء الاصطناعي،
00:24:46وستتعلم جنباً إلى جنب مع مؤسسين وبنائين محترفين.
00:24:50بالإضافة إلى ذلك، يمكنك الحصول على دورتنا التدريبية حول تصميم المواقع بالذكاء الاصطناعي لمساعدتك على التنفيذ بشكل أسرع.
00:24:54إذا أعجبك هذا الفيديو، يرجى الضغط على زر الإعجاب والاشتراك
00:24:58لمزيد من الدروس التعليمية مثل هذه في المستقبل.
00:25:01أراكم في الفيديو القادم.

Key Takeaway

يمثل هذا الدليل تحولاً جذرياً في صناعة المحتوى البصري من خلال استبدال أدوات المونتاج التقليدية بسير عمل برمجى يعتمد على Claude Code وRemotion لإنتاج فيديوهات احترافية عبر الأوامر النصية والأنظمة المنظمة.

Highlights

استخدام أداة Claude Code مع مهارة Remotion Agent لإنشاء فيديوهات موشن جرافيك احترافية دون الحاجة لتعديل يدوي أو إطارات مفتاحية.

مفهوم مهارات كلوود (Claude Skills) كأدلة إرشادية متخصصة تحول الذكاء الاصطناعي من مساعد عام إلى خبير في مجالات تقنية محددة.

اعتماد إطار عمل Remotion الذي يدمج بين برمجة React وإنتاج الفيديو، مما يسمح ببناء المشاهد برمجياً بالكامل.

تقسيم عملية التطوير إلى 9 مراحل منظمة تبدأ بتأسيس القواعد التقنية وتنتهي بالتنفيذ وتجميع المشاهد النهائية.

أهمية فصل قرارات التصميم (الأصول) عن منطق الحركة لضمان اتساق بصري عالي وتجنب أخطاء الذكاء الاصطناعي.

دمج التعليق الصوتي والموسيقى باستخدام 11 Labs SDK لإضفاء طابع احترافي نهائي على الفيديو المنتج.

التحول من مجرد مستخدم للأوامر النصية إلى مدير نظام بصري متكامل يقود فريقاً من أدوات الذكاء الاصطناعي.

Timeline

مقدمة وتعريف بمهارات كلوود وRemotion

يبدأ الفيديو باستعراض نموذج لفيديو توضيحي عن كوكب المريخ تم إنشاؤه بالكامل دون استخدام After Effects أو تحريك يدوي. يشرح المتحدث مفهوم مهارة Remotion Agent الجديدة التي تمنح كلوود معرفة عميقة بكيفية بناء التكوينات وتنسيق الحركات برمجياً. يتم تسليط الضوء على أن مهارات كلوود هي حزم معرفية تحوله إلى خبير متخصص في أدوات معقدة مثل Remotion الذي يعتمد على لغة React. يوضح القسم أن الهدف النهائي هو تمكين المستخدم من إخراج رسوم متحركة احترافية باستخدام الأوامر النصية فقط. يشدد المتحدث على أن هذا الدمج يكسر حاجز التعقيد التقني الذي كان يواجه المطورين في السابق.

تثبيت الأدوات وإعداد بيئة العمل

ينتقل المتحدث إلى الجانب العملي بشرح كيفية تثبيت مهارة Remotion لـ Claude باستخدام أوامر برمجية محددة متوفرة في موقع الأداة. يتم توضيح عملية اختيار النماذج المطلوبة من القائمة وتفعيلها داخل المشروع لضمان جاهزية البيئة البرمجية. بعد الإعداد، يتم فتح واجهة Claude Code لطلب بدء مشروع Remotion جديد والانتظار حتى انتهاء بناء القالب الأساسي. يستعرض الفيديو واجهة Remotion Studio التي تشبه تطبيقات التحرير ولكنها تعتمد على البرمجة لكل مشهد بصري. تُعد هذه الخطوة التأسيسية ضرورية للانتقال إلى مراحل التطوير الفعلي التسع التي سيتم شرحها لاحقاً.

المراحل 1-3: تأسيس القاعدة والتوجه الفني وقصة الفيديو

يركز هذا القسم على وضع الأساسيات التقنية والإبداعية من خلال ثلاث مراحل حاسمة تبدأ بتعريف القواعد والأنماط التي يجب على كلوود الالتزام بها. المرحلة الثانية مخصصة لتحديد النظام البصري والتوجه الفني، حيث يتم تعليم الذكاء الاصطناعي كيف يفكر بصرياً قبل كتابة الكود لضمان عدم التخريف. في المرحلة الثالثة، يتم صياغة قصة الفيديو وتقسيمها إلى مشاهد محددة التوقيت والتدفق، وهو ما يسمى بلوحة القصة المكتوبة. يوضح المتحدث أن هذه الخطوات تضمن تحكماً كاملاً دون الحاجة لإدارة التفاصيل المملة لكل بكسل يدوياً. يتم التأكيد على أن هذه المسودة تعاونية ويمكن تعديلها قبل الانتقال لمرحلة البناء الفعلي.

المراحل 4-6: تعريف الأصول وبناء نظام الحركة

تتناول هذه المراحل الجانب البصري والحركي، حيث تبدأ المرحلة الرابعة بتحديد قائمة الأصول (Assets) ومعايير تصميمها مثل الأشكال والألوان. المرحلة الخامسة تحول هذه التعريفات إلى قطع برمجية ملموسة داخل مجلد المصدر، مع نصيحة بإنشائها في دفعات للمشاريع الكبيرة لتقليل الأخطاء. في المرحلة السادسة، يتم إنشاء لغة حركة مشتركة (Motion Primaries) تحدد كيفية سلوك العناصر بشكل عام ومتسق عبر الفيديو. يوضح المتحدث أن العمل السابق يتيح لكلوود اقتراح أنماط حركة منطقية دون الحاجة لوصف كل إطار مفتاحي بالتفصيل. تهدف هذه العملية إلى خلق فصل واضح بين التصميم ومنطق المشهد لحماية المشروع من التعطل مستقبلاً.

المراحل 7-9: التنفيذ النهائي وتجميع المشاهد

تصل العملية إلى ذروتها في مرحلة التنفيذ حيث يتم ربط جميع المكونات السابقة معاً لبناء المشاهد الفعلية. يقوم Claude Code بتوليد الكود الخاص بكل مشهد بناءً على لوحة القصة وأساسيات الحركة التي تم إعدادها مسبقاً. يفضل بناء المشاهد واحداً تلو الآخر لتسهيل تصحيح الأخطاء وإجراء التعديلات المستهدفة دون التأثير على كامل الفيديو. بعد توليد المشاهد، يتم تشغيل Remotion Studio لمراجعة المخرجات والتأكد من اتساق النمط البصري وسلاسة الانتقالات. يبرز هذا القسم دور المستخدم كصاحب قرار نهائي يقوم بصقل المخرجات وتصحيح المشكلات لضمان مظهر احترافي ومقصود.

إضافة التعليق الصوتي والخاتمة

تكتمل اللمسات النهائية بدمج التعليق الصوتي وموسيقى الخلفية باستخدام برمجية 11 Labs SDK، حيث يقوم كلوود بكتابة النص وربطه تقنياً بالفيديو. يتم عرض النتيجة النهائية لفيديو المريخ الذي يظهر جودة عالية في التوقيت، السرد، والمرئيات الاحترافية المنتجة برمجياً. يلخص المتحدث الدرس الأكبر وهو أن القوة تكمن في عمل الأدوات معاً كفريق متكامل يقوده المستخدم من خلال الأنظمة وليس التخمين. ينتهي الفيديو بدعوة للانضمام إلى مجتمع AnyNoCode لتعلم كيفية استغلال هذه التقنيات في مشاريع تجارية وتحقيق الربح. يؤكد المتحدث أن هذا الأسلوب لا يحل محل الإبداع بل يضاعفه ويفتح آفاقاً جديدة لإنتاج المحتوى بسرعة مذهلة.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video