Transcript
00:00:00Claude Code سيئ في عمل عروض الصور (carousels)، والخطأ خطؤك.
00:00:03حالياً، وسائل التواصل الاجتماعي تغرق
00:00:05في عروض صور منخفضة الجودة تم إنشاؤها بواسطة Claude Code
00:00:08والتي لا تحصل على أي تفاعل.
00:00:10وهذا لأنها تبدو جميعها متشابهة تماماً،
00:00:12وكلها مصنوعة بلغة HTML بحتة.
00:00:15وهذه مشكلة كبيرة إذا كنت شخصاً
00:00:17يحاول الاستفادة من الذكاء الاصطناعي في تسويق وسائل التواصل الاجتماعي الخاص به،
00:00:20لأن عروض الصور هي واحدة من أكثر أشكال محتوى
00:00:23وسائل التواصل الاجتماعي تحقيقاً للتحويلات اليوم.
00:00:25لذا في هذا الفيديو، سأساعدك
00:00:27من خلال إظهار كيفية الخروج من هذا الاتجاه
00:00:29بنهج هجين يأخذ الأفضل من Claude Code
00:00:32وأصول HTML الخاصة به ويجمعها مع نماذج صور خارجية
00:00:36مثل GPT Images 2 وNano Banana Pro
00:00:39لإنشاء عروض صور تعمل بالفعل.
00:00:42لذا عندما نتحدث عن عروض صور تحقق تحويلات،
00:00:45أنا أتحدث عن شيء كهذا.
00:00:46هذا منشور قمت به منذ حوالي خمسة أسابيع،
00:00:49مئات الآلاف من المشاهدات.
00:00:50حصلنا على حوالي 18,000 إعجاب على هذا المنشور،
00:00:52وهو مثال مثالي لهذا النوع من النهج الهجين
00:00:55الذي سأعلمك عنه.
00:00:56أولاً وقبل كل شيء، عندما نتحدث عن عروض الصور،
00:00:59نحتاج إلى التفكير في صورة الغلاف.
00:01:01هذا هو أول شيء سيراه الناس،
00:01:03ويجب أن تكون الأكثر لفتًا للانتباه بصريًا.
00:01:05ما تراه هنا تم إنشاؤه باستخدام GPT Images 2،
00:01:08ومن خلال صورة الغلاف هذه
00:01:10سنعتمد على أدوات خارجية،
00:01:12سواء كانت GPT Images 2
00:01:14أو شيئًا مثل Nano Banana Pro.
00:01:16بينما نتصفح بقية عرض الصور،
00:01:19عندما ننظر إلى شرائح المحتوى أو شرائح القيمة،
00:01:22هنا يكون استخدام شيء مثل أصول HTML
00:01:25التي تنشئها Cloud Code نفسها، مناسبة تماماً.
00:01:28لقد جذبتهم بالفعل بشريحة الغلاف.
00:01:30لقد حصلنا عليهم هنا.
00:01:31الآن نحتاج إلى تقديم بعض القيمة الفعلية لهم،
00:01:34ولا يوجد تركيز كبير
00:01:35على كونها مذهلة بصريًا.
00:01:38نحن فقط بحاجة إلى تقديم قيمة،
00:01:40ونحتاج إلى القدرة على القيام بذلك
00:01:41بطريقة قابلة للتكرار،
00:01:42حيث يمكننا القيام بذلك مرارًا وتكرارًا
00:01:44بطريقة منظمة
00:01:45وفي وقت سريع نسبيًا.
00:01:47وهي أيضًا غير مكلفة،
00:01:49لأن تذكر،
00:01:50إن إنشاء هذه الصور ليس مجانيًا
00:01:52بشيء مثل GPT Images 2
00:01:54أو Nano Banana Pro.
00:01:55لا أستطيع فعل ذلك لكل صورة على حدة.
00:01:59أعني، يمكنني ذلك،
00:02:00لكنه سيستغرق وقتًا طويلًا، أليس كذلك؟
00:02:01نحن بحاجة إلى الموازنة بين السرعة والجودة،
00:02:04وقد وجدت بعد القيام بذلك
00:02:06مرارًا وتكرارًا بنفسي
00:02:07أن هذه هي أفضل طريقة
00:02:09لنهج عروض الصور في الذكاء الاصطناعي ووسائل التواصل الاجتماعي،
00:02:12ونتحدث عن وسائل التواصل الاجتماعي
00:02:13التي تغرق بهذه العروض منخفضة الجودة.
00:02:15أنت تعرف ما أتحدث عنه،
00:02:16خاصة إذا كنت في مجال الذكاء الاصطناعي هنا.
00:02:18أربعة من هذه الستة التي تراها هنا
00:02:19تم إنشاؤها بوضوح تام باستخدام Claude Code.
00:02:21لا أحتاج حتى إلى الإشارة إليها لك، أليس كذلك؟
00:02:23إنها تحتوي على نمط الـ HTML الخاص بشرائح العرض،
00:02:26وتبدو متشابهة جدًا،
00:02:27ولن ترى إلا المزيد والمزيد من هذا.
00:02:29لذا إذا كنت تريد أن تحقق عروضك تحويلات،
00:02:31عليك التفكير في شيء يبرز عن الآخرين.
00:02:34وكما أشرت لك للتو،
00:02:36إنها عملية من جزأين.
00:02:37الأول هو صورة الغلاف.
00:02:39هذا هو المكان الذي نستخدم فيه توليد الصور بالذكاء الاصطناعي.
00:02:41اليوم سأعرض لك
00:02:43كيفية القيام بذلك باستخدام Higgsfield CLI.
00:02:46أحب Higgsfield CLI
00:02:47لأنه يمنحني طريقة للوصول إلى
00:02:49أي أداة لتوليد الصور بالذكاء الاصطناعي،
00:02:52سواء كانت Nano Banana،
00:02:55GPT Images 2،
00:02:55أو أي شيء آخر سيصدر الأسبوع المقبل ويكون في القمة،
00:02:57والقيام بذلك عبر سطر الأوامر.
00:02:59والجزء الثاني هو شرائح المحتوى
00:03:00عبر Claude Code باستخدام أصول HTML.
00:03:04لكن أولاً، قبل أن نبدأ في بناء أي شيء،
00:03:06نحتاج إلى العثور على الإلهام.
00:03:07نحتاج فعليًا إلى إجراء بعض البحث،
00:03:08ومعرفة ما الذي ينجح عندما يتعلق الأمر بتنسيقات عروض الصور،
00:03:11خارج مجالك بشكل خاص،
00:03:13حتى يكون لدينا شيء نبني عليه.
00:03:15إذا حاولت القيام بكل هذا من الصفر،
00:03:17أعدك بأنك ستعاني،
00:03:18وسيستغرق الأمر منك الكثير من الوقت.
00:03:20لماذا نبدأ من الصفر؟
00:03:21فقط انظر ما الذي ينجح،
00:03:23ولا تنسخهم، بل خذ الإلهام.
00:03:25وأين تجده؟
00:03:27حسنًا، ستجده على وسائل التواصل الاجتماعي.
00:03:29والشيء السهل الذي يجب فعله
00:03:30هو الذهاب إلى إنستغرام،
00:03:31أو تيك توك،
00:03:32والبحث عن عرض صور (carousel)،
00:03:33هذا كل ما وضعته هنا في الأعلى،
00:03:34وابدأ في التصفح
00:03:35ورؤية ما الذي يلفت انتباهك في الصفحة.
00:03:39ما الذي تنجذب إليه بصريًا؟
00:03:41ما الذي تعتقد أنه يبدو رائعًا؟
00:03:43هذا ما سنفعله.
00:03:44وإذا رأيت شيئًا أعجبني،
00:03:45سأقوم بأمرين.
00:03:48أولاً، سأقوم فقط بالنقر عليه
00:03:50والتقاط لقطة شاشة لصورة الغلاف،
00:03:54ثم سأفعل الشيء نفسه بالنسبة للجسم.
00:03:57سألقي نظرة على شريحة المحتوى،
00:03:59أرى ما إذا كانت شيئًا يعجبني،
00:04:00وسأقوم بالتقاط لقطة شاشة لذلك أيضًا.
00:04:02وإذا كانت هذه هي المرة الأولى التي تقوم فيها بذلك،
00:04:04بصراحة، يجب أن تفعل هذا
00:04:05لمدة تتراوح بين 20 إلى 30 دقيقة على الأقل.
00:04:07ويجب أن تبدأ في بناء مكتبة
00:04:10من الإلهام البصري.
00:04:13أنا شخصيًا لدي مجلد كامل
00:04:15مخصص لإلهام عروض الصور،
00:04:16وليس كل شيء متعلقًا بالذكاء الاصطناعي.
00:04:18بصراحة، يجب أن تنظر إلى أشياء
00:04:19خارج مجالك
00:04:21التي يمكنك جلبها إلى مجالك.
00:04:22لأنه إذا كنت أفعل نفس الشيء
00:04:24مثل أي شخص آخر في مساحة الذكاء الاصطناعي،
00:04:26أو كنت تفعل كل شيء
00:04:26يفعله الجميع في مجالك،
00:04:28فلن يبرز ذلك.
00:04:30لذا من الرائع دائمًا رؤية
00:04:31ما يفعله الآخرون
00:04:32في مجالات مختلفة تمامًا.
00:04:34إذًا الخطوة صفر، الإلهام.
00:04:36أريدك أن تبدأ في بناء تلك المكتبة.
00:04:38وبالنسبة لفيديو اليوم،
00:04:39أريدك أن تركز على نموذج محدد
00:04:41ترغب في استخدامه
00:04:43أو الاعتماد عليه كقالب
00:04:44لعرض الصور الذي سنبني عليه اليوم.
00:04:46الخطوة التالية، الخطوة الأولى،
00:04:47هي تثبيت Higgs Field CLI.
00:04:48مرة أخرى، هذا يمنحك الوصول
00:04:49إلى كل مختلف مولدات الصور
00:04:51والفيديو الموجودة هناك.
00:04:53لذا، توجه فقط إلى موقع Higgs Field.ai،
00:04:56اذهب إلى علامة تبويب MCP و CLI،
00:04:58انقر هنا فوق CLI.
00:04:59يوجد أيضًا MCP،
00:05:00لكنني أفضل CLI.
00:05:02وبعد ذلك ستقوم فقط بتثبيته
00:05:03باستخدام هذا الأمر.
00:05:04ستقوم بعد ذلك بتشغيل
00:05:05Higgsfield auth login
00:05:07لتسجيل الدخول فعليًا إلى حسابك.
00:05:09ويمكنك بعد ذلك إضافة هذه المهارات أيضًا.
00:05:12لذا دعنا الآن نتحدث عن إنشاء عروض الصور هذه.
00:05:15أولًا وقبل كل شيء،
00:05:15تريد إنشاء مجلد لعروض الصور الخاصة بك.
00:05:18أنا أسمي مجلدي Chase AI Carousels.
00:05:19لا يهم ما تسميه مجلدك.
00:05:21السبب في ذلك هو أنه على المدى الطويل،
00:05:24تريد البدء في بناء مكتبة
00:05:25خاصة بك لعروض الصور التي كان أداؤها جيدًا.
00:05:28لقد فعلنا كل شيء للتو، أليس كذلك؟
00:05:29حيث ننظر خلال
00:05:30كل تلك العروض للحصول على الإلهام.
00:05:32حسنًا، تخيل بعد أن قمت بإنشاء
00:05:3430، 40، 50، 60 عرض صور،
00:05:36وتعلم أن لديك حوالي 10 أو 15 قالبًا
00:05:39تعمل دائمًا.
00:05:41حسنًا، القدرة على إنشاء عروض صور
00:05:43في وقت لاحق تصبح أسهل بمليون مرة
00:05:44لأنك حينها تستطيع ببساطة إخبار Claude Code،
00:05:46مرحبًا، قم بعمل عرض الصور الإصدار 10.
00:05:49سنقوم به الآن حول هذا الموضوع.
00:05:51إلخ، إلخ.
00:05:51لذا ستبدأ في بناء
00:05:53هذا الأساس اليوم هنا.
00:05:54ولكن اليوم، نظرًا لأنه ليس لدينا شيء،
00:05:56نحتاج إلى البدء ببعض الإلهام.
00:05:57لذا ما سنفعله
00:05:59هو أننا سنأخذ لقطة شاشة
00:06:00لصفحة العنوان التي تعجبنا
00:06:03والتي نحاول القيام بها بأنفسنا.
00:06:04حسنًا، لقد وجدت شريحة العنوان هذه للإلهام.
00:06:06لذا هذا ما سأستخدمه.
00:06:08والموضوع الذي سأتحدث عنه
00:06:10لعرض الصور الخاص بي هو أفضل خمسة
00:06:12أفضل خمس إضافات لـ Cloud Code لشهر يونيو.
00:06:15وباستخدام لقطة الشاشة لتلك الصورة
00:06:16ووضعها في Cloud Code،
00:06:18سأقوم الآن بتوجيه أمر
00:06:19شيء على غرار،
00:06:21مرحبًا، ها هي الصورة
00:06:22أريد استخدامه للإلهام.
00:06:24استخدم واجهة سطر أوامر Higgs field.
00:06:26استخدم نموذج الصورة هذا.
00:06:28سنستخدم صور GPT أيضاً.
00:06:29ثم سأتحدث عن
00:06:30كيف أريده أن يختلف
00:06:32عن الصورة الأصلية.
00:06:34لذا أريدك أن تستخدم واجهة سطر أوامر Higgs field
00:06:36لإنشاء صورة غلاف
00:06:38لعرضي التقديمي الجديد
00:06:40الذي سيتناول
00:06:41أفضل خمس إضافات لـ Cloud Code لشهر يونيو.
00:06:45هذا هو العنوان الذي أريده على الصفحة.
00:06:46أفضل خمس إضافات لـ Cloud Code لشهر يونيو.
00:06:48أريد استخدام لقطة الشاشة
00:06:51التي أعطيتك إياها للتو كصورة مرجعية.
00:06:53لذا أريدها أن تكون
00:06:54مطابقة تماماً لتلك الصورة،
00:06:57ولكن استبدل المرأة الحالية
00:07:02التي تشبه التمثال في الوسط،
00:07:03بذكر.
00:07:05لذا فلنغيرها قليلاً،
00:07:06ولكن حافظ على كل شيء آخر كما هو
00:07:08من حيث الجماليات.
00:07:09وما أريد تغييره أيضاً
00:07:10هو أنني لا أريد أن تكون تلك الأشياء
00:07:12أيقونات فوتوشوب.
00:07:14اجعلها مجرد أيقونات GitHub
00:07:17أو أيقونة Anthropic بدلاً من ذلك.
00:07:20أريدك أن تستخدم صور GPT أيضاً.
00:07:22أريدك أن تستخدم نسبة عرض إلى ارتفاع
00:07:24قريبة قدر الإمكان من 4 إلى 5.
00:07:27أريدها أن تكون عالية الجودة.
00:07:28أريدها بدقة 2K.
00:07:29وأريدك أن تنشئ أربع صور.
00:07:32وبمجرد الانتهاء،
00:07:33قم بإظهارها لي.
00:07:35والآن سيمضي قدماً
00:07:36ويبدأ في إنشائها لي.
00:07:37لذا أخبرته بالصورة المرجعية.
00:07:39وأخبرته كيف أريد تغييرها.
00:07:41لأنه تذكر، إذا نظرنا إليها،
00:07:42أنا أقول أساساً استبدل التمثال
00:07:45ليكون شيئاً ذكورياً،
00:07:46وتخلص من أيقونات فوتوشوب
00:07:48لتصبح أيقونات GitHub،
00:07:49ثم غير النص الفعلي.
00:07:51بعد ذلك، أخبرته بنموذج الصورة
00:07:52الذي يجب استخدامه، صور GPT أيضاً،
00:07:54ثم أعطيته بعض التعليمات
00:07:56من حيث الجودة.
00:07:59الآن، إذا كنت لا تعرف
00:08:00نوع المدخلات التي تحتاج لتقديمها
00:08:01لنموذج صورة معين،
00:08:02قل إنك تستخدم Nano Banana Pro
00:08:04بدلاً من صور GPT،
00:08:05فإن Cloud Code يعرف.
00:08:07لديه المهارات.
00:08:07لديه واجهة سطر الأوامر.
00:08:08لذا يمكنه إخبارك بما يعتقد أنه الأفضل.
00:08:11أهم شيء هو الحصول على المطالبة الصحيحة
00:08:14من حيث ما تريد تغييره.
00:08:16الآن، الشيء الآخر الذي تحتاج إلى تذكره هو،
00:08:19خاصة في البداية،
00:08:20عندما تبدأ للتو هنا،
00:08:21من المحتمل أن تضطر للقيام بذلك بضع مرات.
00:08:23سيعيد لنا صورة.
00:08:24من المحتمل أن نضطر لتعديلها.
00:08:25لذا فهناك عملية إبداعية تكرارية.
00:08:28من النادر جداً أن تنجح هذه الأشياء من المرة الأولى.
00:08:30وهذا هو سبب قيامنا بذلك فقط لصفحة العنوان.
00:08:33تخيل المرور بهذه العملية
00:08:34لكل شريحة،
00:08:36لكل صورة في عرضك التقديمي،
00:08:38والذي قد يصل إلى 10 صور.
00:08:39يستغرق الأمر وقتاً طويلاً جداً.
00:08:41لهذا السبب نقوم بذلك فقط على العنوان،
00:08:42وبقية هذا نقوم به بسرعة أكبر عبر HTML.
00:08:46إذن هذه هي الصور التي عاد بها.
00:08:48أول شيء، النص الفعلي مفقود.
00:08:52لكنني أود أن أقول، بشكل عام، ليس سيئاً
00:08:56من حيث الانطباع العام الذي نسعى إليه.
00:08:58أعجبني كيف ظهر التمثال.
00:09:00أعجبني كيف ظهرت الأيقونات.
00:09:01يمكننا التدقيق قليلاً في أيقونة Anthropic.
00:09:05ربما يبدو الكريم مختلفاً قليلاً.
00:09:07لكنه يحتوي نوعاً ما على ما نبحث عنه.
00:09:09إذا تمكنا فقط من تخيل وضع النص هناك،
00:09:11سأكون سعيداً بهذا.
00:09:13لدينا حتى بعض الظلال وأشياء من هذا القبيل.
00:09:14وإذا قارناها بالأصل،
00:09:16وسأبتعد عن الشاشة قليلاً،
00:09:18قريبة جداً، أليس كذلك؟
00:09:20مثلما يمكنك رؤية من أين جاء الإلهام.
00:09:23هناك القليل من الأشياء الإضافية
00:09:24في الأصل، أليس كذلك؟
00:09:26سيكون لديهم أيقونة أخرى في أعلى اليسار،
00:09:27لكنني أحبها.
00:09:28أعتقد أنه إذا أضفنا النص هنا الآن،
00:09:30سأكون سعيداً تماماً.
00:09:31لأكون صادقاً، لست متأكداً تماماً
00:09:32لماذا اختفى النص،
00:09:34لكنها خطوة سهلة للمضي قدماً، أليس كذلك؟
00:09:36وأنت في الواقع لديك خياران هنا.
00:09:38الأول هو أننا نأخذ غطاء الصورة هذا
00:09:40لأنني أحب هذا من بين الأربعة التي تم إنتاجها.
00:09:43نقوم فقط بتغذيتها مرة أخرى في Cloud Code
00:09:45ونقول، مرحباً، فقط حافظ على كل شيء كما هو.
00:09:47كل ما أريدك فعله هو إضافة النص إلى الأعلى.
00:09:51الخيار الآخر هو أنه يمكنك إحضار هذا
00:09:52إلى شيء مثل Canva
00:09:53إذا كنت ترغب في أن تكون أكثر عملية.
00:09:55الخيار لك.
00:09:57ولكن بالنسبة لفيديو اليوم،
00:09:57سوف نعطيها هذه الصورة ونقول،
00:09:59أضف النص لأفضل خمس مهارات
00:10:02أو أفضل خمس إضافات لـ Cloud Code في يونيو
00:10:05ومثل تسليط الضوء على جزء منها
00:10:07حتى يكون لها ذلك، كما تعلم،
00:10:08تأثير قوس قزح الذي نراه على طول العينين.
00:10:11لذا أحببت هذه الصورة التي توصلنا إليها،
00:10:13لكنني أردت إضافة النص
00:10:15وأردت محاكاة النص
00:10:16من الصورة الأصلية التي نستخدمها كصورة مرجعية.
00:10:20لذا تذكر بالنسبة للعنوان،
00:10:21النص الذي أريده أن يقوله
00:10:23أفضل خمس إضافات لـ Cloud Code لشهر يونيو.
00:10:27ثم جزء من ذلك
00:10:29يجب أن يحتوي على نوع من تدرج قوس قزح،
00:10:33نفس الشيء الذي يمر على طول
00:10:35عيني تمثالنا، إذا جاز التعبير.
00:10:38لذا امض قدماً وافعل ذلك
00:10:40وأنشئ أربع نسخ من ذلك أيضاً.
00:10:41وهذا تقريباً كيف يجب أن تسير تلك العملية المتبادلة
00:10:44عندما تمر بهذا.
00:10:45لا تحتاج إلى تعقيد الأمر.
00:10:46فقط قل ما تريده.
00:10:47اطلب صوراً متعددة.
00:10:48يمكنه القيام بأربع في المرة الواحدة.
00:10:50في الواقع، أعتقد أنه يمكنه القيام بما يصل إلى 16 في المرة الواحدة،
00:10:52لكنني وجدت أن أربعة هي نوع من الحل الوسط الجيد.
00:10:55سنرى ما سيعود به.
00:10:56إذن هذا ما حصلنا عليه عندما أخبرناه بإضافة النص.
00:10:58كما قلت، حصلنا على أربعة خيارات من الأربعة.
00:11:02أعتقد أنني أحب هذا الخيار أكثر.
00:11:05لو كان لدي المزيد من الوقت، ربما كنت سأعدل هذا أكثر قليلاً،
00:11:09ربما أضيف نوعاً من الظل المسقط للنص نفسه
00:11:12لإعطائه مزيداً من البروز.
00:11:14لكن يمكنك الاستمرار إلى الأبد في محاولة الحصول على شيء يعجبك.
00:11:18لكن أعتقد أن هذا جيد بما يكفي في الوقت الحالي.
00:11:20إذا رأيت هذا أثناء التمرير عبر Instagram أو TikTok الخاص بي أو أي شيء
00:11:23ورأيت هذا كصورة غلاف، سأتوقف.
00:11:25بمجرد تثبيت صورة الغلاف، يمكننا الآن الانتقال إلى شرائح المحتوى.
00:11:29وتذكر، عندما نتحدث عن شرائح المحتوى،
00:11:31هذا مجرد كل شيء بعد شريحة العنوان.
00:11:35وبعض الأشياء التي نريد وضعها في الاعتبار هي
00:11:37أننا لا نملك مساحة كبيرة للعمل هنا.
00:11:40مثل هذه الشريحة الواحدة، صحيح؟
00:11:42لدينا صورة واحدة، ولدينا عنوان،
00:11:45ثم لدينا سطر أو سطرين من النص للعمل بهما.
00:11:48أنت نوعاً ما تريد التعامل مع هذا كما لو كنت تتعامل مع عرض تقديمي عادي باستخدام PowerPoint.
00:11:51لا نريد ملأها بالنصوص.
00:11:53الصور جيدة.
00:11:54نحن جميعاً نحب الصور.
00:11:55ابتكر نوعاً من العنوان، ثم ستحصل على، كما تعلم،
00:11:58تحصل على جملتين.
00:12:00لذا، كما تعلم، اقتصاد العمل كبير حقاً هنا.
00:12:03لكن ما تحتاج إلى التفكير فيه هو، حسناً، ماذا ستكون الصور؟
00:12:07ماذا ستكون الخلفية العامة؟
00:12:08وماذا سيكون النص؟
00:12:10الآن، الشيء الرائع هنا هو أن هذا يتم بالكامل تقريباً باستخدام HTML.
00:12:14لذا يقوم Cloud Code بإنشاء كل هذا بمفرده.
00:12:17باستثناء واحد، وهو لقطات الشاشة هذه.
00:12:20لذا أعطيت Cloud Code لقطات الشاشة التي تراها للكثير من هذه الأشياء.
00:12:24حسناً، لبعض هذه الأشياء.
00:12:25إذن كانت هذه لقطة شاشة قدمتها، وأخبرته بوضعها هناك.
00:12:28كانت هذه لقطة شاشة قدمتها له.
00:12:30لكن يمكنه أيضاً إنشاء صور خاصة به.
00:12:31لذا فإن هذا الشيء الذي يظهر كأنه محطة طرفية، قام Cloud Code بإنشاء كل ذلك.
00:12:35لم أفعل شيئاً.
00:12:36لذا في هذا الجزء، ما نحتاج إلى القيام به هو معرفة كيف نريد أن تبدو هذه الشرائح.
00:12:42وبعد ذلك سنقوم، تماماً كما فعلنا مع شريحة الغلاف، بعملية تكرارية.
00:12:46لكن يمكننا أن نكون أكثر عملية.
00:12:48لأن ما سأعرضه لك هو أننا سنجعل Cloud Code ينشئ شرائح HTML هذه لنا.
00:12:52لكننا سنقوم بإظهارها في متصفحنا.
00:12:54ويمكننا إجراء تعديلات فعلياً.
00:12:55مثل أنه يمكننا الدخول إلى هناك، تغيير النص، نقل الأشياء، وإخباره بإجراء تعديلات.
00:13:00لذا نحصل على تحكم أكثر مما لدينا مع شريحة العنوان.
00:13:03ولكن تماماً مثل شريحة العنوان، هذا هو المكان الذي يمكننا فيه أيضاً استخدام الإلهام.
00:13:07لذا دعنا نقول أنني أردت نسخ ما فعلته هنا وواحد من خاصتي بالفعل.
00:13:11أو أردت نسخ واحد من خاصتي.
00:13:12إذن ماذا سنفعل؟
00:13:13سنأخذ لقطة شاشة.
00:13:15سنقوم بلصقها هنا.
00:13:16والآن سأعطيه مطالبة، تقول شيئاً مثل، مهلاً، الآن لنعمل قليلاً على العنوان.
00:13:20الآن دعنا ننظر إلى شرائح المحتوى.
00:13:21لقد انتهينا من شرائح العنوان.
00:13:23إليك نوعاً ما ما أنظر إليه.
00:13:24أريد القيام ببعض HTML الخالص.
00:13:26هل يمكننا إظهارها في المتصفح؟
00:13:27الآن أنا فقط أقوم بهذه التوجيهات بشكل أولي.
00:13:30كل هذه التوجيهات التي أعطيها لـ Claude Code الآن يمكن أن تكون أيضًا مهارات، لأننا نستطيع تمامًا تحويل كل هذا إلى كود.
00:13:36الآن لدي مهاراتي الخاصة لكل هذه الأشياء بالإضافة إلى أمثلة من شرائح العرض الخاصة بي.
00:13:42يمكنك الحصول على كل ذلك داخل مجتمعي.
00:13:44سأضع رابطًا لذلك في التعليق المثبت.
00:13:47لكن إذا كنت تفعل هذا بنفسك، فهذا ما يجب أن يبدو عليه الأمر نوعًا ما.
00:13:50الآن دعنا ننتقل إلى عمل شريحة المحتوى.
00:13:53إذن لدينا شريحة العنوان جاهزة.
00:13:54أعجبني ما فعلناه هناك.
00:13:55والآن بالنسبة لشريحة المحتوى، ستكون بلغة HTML.
00:13:57هذه الصورة التي رأيتها هي ما أريد استخدامه كإلهام.
00:14:00أريد نوعًا ما استخدام هذا كقالب لكيفية القيام بشرائح المحتوى الخاصة بنا.
00:14:04أحببت نمط النص.
00:14:05أحببت الخلفية.
00:14:06أحببت كل ذلك.
00:14:07لذا أريد إنشاء شرائح المحتوى.
00:14:10أريدها أن تكون بلغة HTML.
00:14:11أريدك أن تكون قادرًا على فتح هذا الـ HTML في المتصفح.
00:14:14وأريد أن أكون قادرًا على إجراء التعديلات.
00:14:15لذا أريد أن أكون قادرًا على تحريك الأشياء، تغيير حجم الخط، تغيير النص الفعلي هناك،
00:14:19وأن أكون قادرًا على القيام بذلك عبر المتصفح.
00:14:21عليّ نسخ ملف JSON.
00:14:23عندما أجري تلك التعديلات، فليكن.
00:14:24لكنني أريد أن يكون الأمر سهلاً قدر الإمكان.
00:14:27وبالنسبة لشرائح المحتوى الخمس، أريدها أن تتعلق بالإضافات الخمس لشهر يونيو.
00:14:33على سبيل المثال، خمس إضافات يمكننا القيام بها.
00:14:35دعنا نختار واحدة منها.
00:14:36دعنا نختار “Caveman”.
00:14:38التالية، سنختار إضافة “Codex”.
00:14:41الثالثة، دعنا نختار “Impeccable”.
00:14:43ثم توصل إلى الإضافة الرابعة والخامسة بنفسك.
00:14:47ثم قم بعرضها بمجرد انتهائك من ذلك.
00:14:49لذا مضى قدماً وقام ببناء الشرائح، وأخبرنا بالإضافات الخمس التي أنشأها،
00:14:53ثم أنشأ أيضًا حلقة التعديلات هذه.
00:14:55لذا نحن نعرضها هنا داخل المتصفح.
00:14:58يمكنك رؤيتها.
00:14:59لذا تذكر، ماذا أعطيناه؟
00:15:01أعطيناه لقطة شاشة لشرائح العرض التي أنشأتها هنا.
00:15:05لذا فهي متشابهة نسبيًا، يمكنك أن ترى أنه حاول محاكاة شعار Anthropic في الخلفية.
00:15:10يمكنني بسهولة تزويد Claude Code بصورة فعلية لشعار Anthropic
00:15:14وجعله يعتمد عليها.
00:15:16لكن لدينا نوعًا ما هذا العنصر في الأعلى، إضافة رقم واحد، وضع “Caveman”.
00:15:21وأيضًا، لم أخبره بماهية “Caveman”.
00:15:25تذكر، إنه من تلقاء نفسه قام ببحثه، وألقى نظرة على GitHub،
00:15:28وأنشأ كل النصوص لنا.
00:15:30لم أعطه أي نصوص.
00:15:31وقام بالمضي قدماً وفعل ذلك لكل شيء تقريباً.
00:15:34ويمكنك أن ترى هنا في الأسفل، هذا الشيء الصغير الذي يشبه الطرفية الذي أنشأه،
00:15:38بسيط نسبيًا لأن، مرة أخرى، إنه يعمل فقط بناءً على أصول HTML الخاصة به.
00:15:41لم أعطه أي لقطات شاشة.
00:15:43لكن القوة الحقيقية لهذا تكمن هنا في التعديلات.
00:15:45لذا هذه الفكرة ولدت نوعاً ما من Claude Design، الذي لديه أيضاً نوعه الخاص من وضع التعديل.
00:15:50لذا فكرت، لماذا لا نبدأ فقط في تنفيذ شيء كهذا،
00:15:53وهو أمر سهل التنفيذ إلى حد ما عندما نقوم بشرائح العرض الخاصة بنا.
00:15:56لذا يمكنني تغيير، كما تعلم، حجم العنوان، حجم النص الأساسي، كما تعلم، الشفافية في الخلفية.
00:16:03وبعد ذلك يمكنني حقاً بسهولة، كما تعلم، تغيير الأشياء على الطاير، أليس كذلك؟
00:16:10هذه هي قوة القيام بكل شيء من خلال HTML مقابل الاضطرار إلى القيام بكل شيء من خلال مولد صور بالذكاء الاصطناعي.
00:16:15وأي شيء هنا، يمكنني تعديله، أليس كذلك؟
00:16:17البطاقة، يمكننا ضبطها لإمالة كل شيء.
00:16:20الآن، إذا قمت بتغيير شيء ما، عندما ينشئ هذا الشيء الخاص بالتعديلات لك، مرة أخرى، لدي مهاراتي الدقيقة لذلك في مجتمع المدرسة.
00:16:29لكن إذا قمت بهذا بنفسك، فمن المحتمل أن يقول، مهلاً، كما تعلم، عندما تجري هذه التغييرات، تحتاج إلى تصدير تعديلاتك.
00:16:34لذا هناك تصدير للتعديلات في الأسفل، وهي فقط بصيغة JSON.
00:16:38لذا في أي وقت نقوم فيه بإجراء تغيير، ويمكنني القيام بذلك على شرائح متعددة في وقت واحد، أقوم فقط بتصدير التعديلات، والعودة إلى هنا،
00:16:44ثم لصقها مباشرة في Claude Code.
00:16:47وبعد ذلك سيقوم بتحديثه من تلقاء نفسه.
00:16:49لذا من السهل جداً تغيير الأشياء.
00:16:51ومثل من هنا، ماذا سنفعل؟
00:16:54حسناً، سنمر فقط عبر الشرائح.
00:16:55سنرى ما إذا كانت تطابق رؤيتنا.
00:16:57كما تعلم، هل هي كثيرة الكلام، ليست كثيرة الكلام؟
00:17:00هل تتحدث عن الأشياء الصحيحة؟
00:17:01وأعتقد أن المكان الذي يمكنك فيه حقاً الإضافة إلى هذا هو إضافة لقطات شاشة للأشياء.
00:17:07لذا على سبيل المثال، ما هو الشيء الذي لدينا هنا؟
00:17:10وضع Caveman.
00:17:11لذا يمكنني الذهاب إلى GitHub الخاص بـ Caveman.
00:17:13ويمكن أن يكون الأمر بسيطاً مثل أن أقوم أنا بالتقاط لقطة شاشة لهذه الصورة، والذهاب إلى Claude Code،
00:17:19لصق الصورة هناك والقول، مهلاً، هل يمكننا إضافة هذه الصورة إلى شريحة Caveman؟
00:17:26إنها صورة Caveman بدلاً من أي شيء قمت بإنشائه.
00:17:30وبعد ذلك سنكرر فقط تلك العملية مراراً وتكراراً.
00:17:33ويمكنك أن ترى أنه أضاف صورة Caveman هنا.
00:17:36وهي كبيرة جداً.
00:17:37لذا يمكنني فقط، كما تعلم، تحريكها حتى أحصل على شيء يعجبني.
00:17:43وعلاوة على ذلك، يمكنك أيضاً إخبار Claude Code بالخروج إلى الإنترنت والعثور على صور مناسبة لكل هذه الأشياء أيضاً.
00:17:49الأمر ليس مجرد HTML أو لقطات شاشة، يمكنك أن تكون مبدعاً جداً هنا.
00:17:53وفي هذه المرحلة، سنكرر فقط هذه العملية مراراً وتكراراً حتى نحصل على شيء يعجبنا.
00:17:58مرة أخرى، من حيث الإبداع، الكثير منه سيأتي من الإلهام الذي وجدته.
00:18:02خاصتي كانت هذه.
00:18:03لكن تماماً كما تحدثت من قبل، حيث نذهب فعلياً للبحث عن شرائح العرض على إنستغرام، قمنا بذلك لصورة الغلاف.
00:18:09يمكنك النظر إلى كل شرائح المحتوى الخاصة بهم أيضاً.
00:18:11وهذا كل شيء تقريباً من حيث كيفية القيام بذلك.
00:18:14الآن، لجعله يبدو جيداً، كما تعلم، تعتمد الأشياء الإبداعية على ما تتحدث عنه.
00:18:18ولكن مثل، هذا هو جزء Claude Code منه.
00:18:20هذا هو جانب البناء منه.
00:18:21وهو بسيط للغاية.
00:18:23ومرة أخرى، كما تحدثت في وقت سابق، أنت فقط ستقوم بذلك لكل شرائح العرض الخاصة بك.
00:18:27وجميعها سيكون لها قوالب مختلفة.
00:18:28وهكذا عندما يحين الوقت، كما تعلم، لبناء شريحة العرض رقم 20، عندما تكون قد فعلت هذا مراراً وتكراراً،
00:18:35أنت لا تضطر حتى للمرور بكل هذه المتاعب التي مررنا بها في هذه المرحلة، مثل،
00:18:38حسناً، ابحث عن الإلهام، قم بإجراء هذه التعديلات.
00:18:39مثل، إنه مبني مسبقاً نوعاً ما.
00:18:41أنت فقط تقوم بتغيير النص.
00:18:43وهكذا فمن خلال هذه العملية المكونة من ثلاث خطوات: العثور على الإلهام، وإنشاء صورة الغلاف بنماذج ذكاء اصطناعي خارجية،
00:18:49ثالثاً، إنشاء شرائح المحتوى باستخدام HTML، نحصل على عملية مستدامة وقابلة للتكرار
00:18:57التي تمنحنا نوعاً ما أفضل ما في العالمين.
00:18:58نحصل على كل الإبداع الرائع وكل الصور الرائعة مع نماذج الذكاء الاصطناعي للصور،
00:19:03ومع ذلك فإن HTML هي العمود الفقري، لكنها سهلة التنفيذ بما يكفي لدرجة أننا يمكننا القيام بذلك على نطاق واسع مراراً وتكراراً
00:19:08ولا نجلس أمام الكمبيوتر لساعات كل يوم.
00:19:11لذا مع وضع كل ذلك في الاعتبار، هذا هو المكان الذي سأتركك فيه اليوم.
00:19:14آمل أن يلقي هذا بعض الضوء على كيفية إنشاء شرائح عرض أفضل قليلاً، كما أعتقد، مما تراه هناك.
00:19:20لا تقع في فخ، أوه، كل ما تحتاجه هو هذه المهارة الواحدة داخل Claude Code.
00:19:25يمكننا القيام بأكثر من ذلك بقليل.
00:19:26ومرة أخرى، ليس هذا الكثير من العمل الإضافي.
00:19:29عليك فقط بناء أساس.
00:19:31لذا كما هو الحال دائماً، دعني أعرف ما رأيك.
00:19:34تأكد من التحقق من Chase AI Plus إذا كنت تريد الحصول على Masterclass الخاص بـ Claude Code،
00:19:38بالإضافة إلى كل مهاراتي وأمثلة على شرائح العرض الخاصة بي.
00:19:41هذا داخل التعليق المثبت.
00:19:43بجانب ذلك، سأراك لاحقاً.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video