تصميم Claude + Seedance 2.0 = مواقع إلكترونية متحركة مذهلة

CChase AI
Computing/SoftwareAdvertising/MarketingSmall Business/StartupsInternet Technology

Transcript

00:00:00اليوم ستتعلم كيفية الجمع بين قدرات "كلاود ديزاين" الجديدة كلياً و "سيد دانس 2.0"
00:00:06لإنشاء مواقع ويب متحركة تماماً مثل هذا الموقع. سآخذك في جولة عبر سير عملي بالكامل خطوة
00:00:12بخطوة حتى تتمكن من إعادة إنشاء هذا حتى لو لم تفعل شيئاً كهذا من قبل. وعلى طول
00:00:17الطريق سأريك كيف تحقق أقصى استفادة من أداة "أنثروبيك" الجديدة تماماً مع بعض النصائح و
00:00:22الحيل. الآن عندما يتعلق الأمر بإنشاء صفحة ويب مثل هذه، أول مكان نحتاج للبدء منه هو هذا
00:00:28الفيديو في الخلفية، وللحصول على فيديو الخلفية نحتاج أولاً إلى صورة للبدء. الآن سنقوم
00:00:32بإنشاء صورة البداية هذه باستخدام "نانو بانانا برو" ثم سنأخذ صورة البداية تلك
00:00:37ونحولها إلى فيديو باستخدام "سيد دانس 2.0" وكل ذلك سيحدث هنا على "هيغزفيلد" الذي
00:00:44هو متجري الشامل لأي وكل أدوات إنشاء محتوى الذكاء الاصطناعي. لذا للبدء سننتقل فقط
00:00:49إلى الصور ونتجه إلى "نانو بانانا برو" وعلى الفور سترى بعض الصور التي كنت أعمل
00:00:55عليها ويجب أن تبدو مألوفة جداً لصفحة الويب الخاصة بنا، وخاصة هؤلاء. الآن المطالبة الدقيقة
00:01:01التي استخدمتها يمكن العثور عليها داخل "سكول" المجانية الخاصة بي، وسيكون هناك رابط لذلك في الوصف
00:01:05ولكن ما أريد التركيز عليه هنا عندما نتحدث عن الصورة هو أقل عن المطالبة
00:01:11نفسها لأن الصورة التي سترغب في إنشائها ستكون مختلفة عن صورتي
00:01:15ولكن أكثر عن التكوين. لماذا تم إعداد هذه الصورة بهذه الطريقة؟ حسناً عندما ننظر إلى
00:01:21المنتج النهائي هنا، الأمر واضح نوعاً ما، أليس كذلك؟ لدينا صورة رئيسية كبيرة تأخذ الجانب الأيمن
00:01:26من الشاشة ولكننا ما زلنا بحاجة إلى بعض المساحة الفارغة على اليسار لنصنا، وعندما جعلت "نانو بانانا"
00:01:31برو تنشئ هذه الصورة كان لدي هذا النوع من التكوين في الاعتبار، كنت أقول "حسناً، سيكون لدينا صورة"
00:01:38حيث يتم تقسيمها نوعاً ما إلى نصفين؛ على الجانب الأيمن سيكون لدينا صورتنا "المبهرة"، ثم على
00:01:44اليسار هذا هو المكان الذي سيكون فيه النص الرئيسي، لذا هذا أشبه بشعار إعلاني هنا
00:01:51سيكون لدينا نوع من اللافتة في الأعلى مع شريط التنقل حيث يمكن للناس ضغط
00:01:55الصفحة الرئيسية أو الصفحات المختلفة، سيكون لدينا نوع من الأزرار هنا تقول "حسناً، سجل
00:02:00أو اعرف المزيد"، وربما سيكون لدينا نوع من الشريط الإخباري في الأسفل. كنت أعرف ذلك بالفعل
00:02:04وهذا شيء تحتاج إلى معرفته مسبقاً عندما تطلب من "نانو بانانا برو" إنشاء الصورة
00:02:10لك، لأن أياً كان التكوين الذي سيكون من هذا النوع من الإعدادات، فهذا ما سيملي
00:02:17مطالبتك. والآن سؤالك ربما هو "حسناً يا تشيس، ليس لدي أي فكرة عما هي خياراتي حتى،
00:02:22لا أعرف ما الذي يجب أن يكون عليه التكوين في المقام الأول، كيف أكتشف ذلك؟" حسناً، أسهل
00:02:25طريقة للقيام بذلك هي العثور على بعض المواقع التي تعجبك والبدء في تفكيك تكوين" البطل" و
00:02:30صفحة الهبوط بهذه الطريقة، ومكان رائع لرؤية أمثلة على ذلك هو "دريبل". لذا "دريبل"
00:02:35بثلاثة أحرف B، إذا ذهبت للبحث عن "landing page sass" يمكنك البحث عن "landing page"
00:02:40أياً كان، سترى ما أتحدث عنه. إذاً ماذا نرى هنا؟ هذا الواحد مباشرة هنا،
00:02:47حسناً، لديهم الصورة في الأسفل والنص في الأعلى، يمكننا القيام بشيء مشابه مع
00:02:52هذا، يمكننا تحريكه للأسفل هنا إلى المركز، ربما لدينا السحب على الجوانب
00:02:56بدلاً من ذلك، ثم يذهب النص هنا، مرة أخرى، يغير التكوين بالكامل، أو هل نريد شيئاً
00:03:02مثل هذا حيث تكون الصورة في مركز المسرح والنص يحيط بها، ونضيف بعض العناصر الأخرى
00:03:07أنت تعلم، بينما تمرر للأسفل سترى أن هناك مليون طريقة مختلفة يمكنك
00:03:11القيام بذلك، ولكن تحتاج إلى معرفة ذلك مسبقاً أو على الأقل يجب أن يكون لديك فكرتان أو ثلاث في
00:03:16جيبك، وعندما تذهب إلى "نانو بانانا برو" يمكنك بعد ذلك إعطاؤها مطالبات تعكس ذلك
00:03:22الأسلوب. لذا، لنلخص: عندما ننشئ صورتنا، فإن أهم شيء نحتاج إلى معرفته هو
00:03:26التكوين، وبالنسبة للتكوين، أين ستكون المساحة الفارغة؟ وأين سيكون النص؟
00:03:32هل سيكون على اليسار، المركز، اليمين، الأعلى؟ لا يهم، فقط تحتاج إلى الاختيار و
00:03:37جعل مطالبتك تعكس ذلك. وأيضاً عندما يتعلق الأمر بالمطالبة، اعتمد على أشياء مثل "كلاود" للمساعدة
00:03:42في كتابتها لك. الآن لعرضنا التوضيحي اليوم سنستخدم هذه الصورة، وسيكون لدي أيضاً نسخة من
00:03:47هذا داخل المجتمع إذا كنت ترغب فقط في نسخ ما أفعله خطوة بخطوة. ومع وجود صورتنا الثابتة في
00:03:51يدنا، الآن سنتجه إلى "كلاود ديزاين"، والتدفق العام سيكون: صورة تم إنشاؤها في
00:03:56نانو بانانا برو، سنقوم بعمل نموذج لموقعنا هنا على "ديزاين"، وبمجرد الحصول على موقع نحبه،
00:04:01أنت تعلم، تصميم نحبه، صفحة هبوط وكل ذلك، ثم سنأخذ تلك الصورة ونحولها إلى
00:04:05فيديو لأنه من السهل جداً القيام بذلك كخطوة أخيرة. لذا إذا كنت جديداً تماماً على "كلاود ديزاين"
00:04:10لا تقلق، سنغطي الأشياء الكبيرة التي تحتاج للقلق بشأنها في هذا الفيديو، ولكن لدي أيضاً غوص
00:04:14عميق يتطرق إلى التفاصيل قليلاً والذي يجب عليك مشاهدته أيضاً، وسأقوم بربط ذلك أعلاه. ولكن لـ
00:04:18أغراضنا، ما نريد القيام به هو التوجه إلى هنا على اليسار، نذهب إلى "بروتوتايب" وسنقوم
00:04:24فقط بإعطائه اسماً للمشروع، سأسمي مشروعي "إس دي 2" لنظام التصميم، ربما لن يكون لديك
00:04:30نظام تصميم، لا تحتاج إلى واحد في هذه الحالة في الوقت الحالي. مرة أخرى إذا كنت تريد معرفة المزيد عن أنظمة التصميم
00:04:35تحقق من فيديو الغوص العميق هذا، سنقوم بدقة عالية ثم سنقوم بإنشاء
00:04:40ذلك، سيأخذك هذا بعد ذلك إلى هذه الصفحة، وأول شيء نريد القيام به هو إضافة بعض السياق
00:04:45والسياق الذي سنضيفه هو الصورة التي قمنا بتنزيلها، لذا يمكنك رؤية هنا في الأسفل على اليسار
00:04:49لقد قمت بتحميل لقطة الشاشة الخاصة بي. بعد ذلك نريد إعطاؤه مطالبة. الآن يمكنك الاستمرار في إضافة المزيد من
00:04:55لقطات الشاشة هنا، وأنا أنصحك بشدة بذلك إذا كان لديك بعض الأمثلة الجيدة من شخص مثل "دريبل"، لذا
00:04:59إذا وجدت شيئاً على "دريبل" يعجبك من حيث التكوين العام، أضف ذلك أيضاً.
00:05:04الآن عندما يتعلق الأمر بالمطالبة الفعلية نفسها، أقترح بشدة أن تعتمد على شيء مثل "كلاود
00:05:09كود" لكتابتها لك. وإليك نظرة على المطالبة التي توصل إليها "كلاود كود" والتي سأقوم
00:05:13بلصقها في "كلاود ديزاين". هذا لشركتنا الوهمية "أوليمبوس" وهي منصة ذكاء سوق
00:05:19لذا فهي تتعمق في ماهية الشركة، وتصبح مفصلة جداً مع "البطل"، وتتحدث عن
00:05:25ما هي الأقسام التي تريد أن تكون على صفحة الهبوط، ثم تضيف بعض الأشياء مثل الحركة. الآن
00:05:30بشكل مهم جداً، لدينا هذا السطر في النهاية الذي يقول "اسألني أي أسئلة قبل أن تبدأ". الشيء الرائع
00:05:36بشأن "كلاود ديزاين" هو أنه يمكن أن يعمل نوعاً ما مثل "كلاود كود" من حيث أنه سينشئ وضع خطة
00:05:42لذا سأعطيه مطالبة، هذه المطالبة بالضبط التي تراها هنا، ثم سيطرح عليّ مجموعة
00:05:46من الأسئلة للتعمق أكثر فيما أحاول بناءه، والشيء العظيم بشأن ميزة وضع الخطة
00:05:50حيث يطرح علينا أسئلة هو حقيقة أنه إذا ظهرت بمطالبة سيئة
00:05:54لا تعد حتى نصف تفصيل كهذه، يمكنك الدخول إلى "كلاود ديزاين" والحصول على تمريرة أولى قوية إلى حد ما
00:06:01لأنك مررت بكل هذا السؤال والجواب مع "كلاود". لذا قمت بلصق كل شيء هناك، ونحن
00:06:06فقط سنضغط على "إرسال". الآن ملاحظة سريعة هنا حول الاستخدام مع "كلاود ديزاين": "كلاود ديزاين" يعمل على
00:06:11حدود الاستخدام الخاصة به، وهي منفصلة عن حدود "برو" الخاصة بك أو حدودك القصوى 5 أو 20 مع
00:06:18كلاود، إنه شيء خاص به ويمكن أن يكون مستهلكاً للموارد، لذا راقبه دائماً. في حالتي
00:06:23لقد تجاوزت ذلك بالفعل لأنني كنت أستخدم هذا كثيراً، لذا أنا على استخدامي الإضافي.
00:06:28للمرجع، عندما مررت بكل هذا الذي تراه اليوم بنفسي، من حيث الاستخدام الإضافي
00:06:33كلفني حوالي خمسة دولارات لإنشاء صفحة الهبوط، وكان بإمكاني الحصول على ذلك حتى أقل
00:06:38ولكن فقط ليكون لديك فكرة عن مكاننا. لذا هنا الأسئلة التي يعود بها
00:06:43معها: أسئلة حول قسم الطباعة، ماذا نريد أن نفعل؟ لنقم بلوحة ألوان "حديثة وأسطورية"
00:06:52لنقم بـ "معكوسة"، وفي النهاية سيكون لدينا المزيد من الخيارات بمجرد إنشائه فعلياً باستخدام التعديلات
00:06:58كما سترى لاحقاً. صوت النسخ، لنقم بـ "أسطوري" مضاف، لأنه في حال لم تدرك
00:07:06نحن نفعل شيئاً مثل اسم الشركة "أوليمبوس"، إنه مثل تطبيق ذكاء، لذا هذه الصورة بأكملها
00:07:11التي نتعامل معها من المفترض أن تكون مثل تشبيه نار "بروميثيوس". لذا "بطل
00:07:17التكوين": صورة كاملة النزيف، لنقم بـ "صورة كاملة النزيف"، ترتيب القسم، بووم بووم بووم بووم، وأنت
00:07:26يمكنك دائماً أن تقرر نيابة عني إذا كنت لا تعرف حتى، "إثبات اجتماعي"، قرر نيابة عني، قرر نيابة عني
00:07:32وهنا شيء رائع: "تعديلات". لذا "تعديلات" ستكون أكثر منطقية هنا في ثانية واحدة، ولكنني دائماً
00:07:39أقترح استخدام أكبر عدد ممكن من التعديلات، ويمكننا دائماً إضافة المزيد لاحقاً. لذا سنضغط على "متابعة"
00:07:45والآن سيقوم بالمضي قدماً وإنشاء هذا الشيء لنا. الآن، لمحة سريعة على التضاريس
00:07:50لـ "كلاود ديزاين" بينما يبني هذا، هنا في الأعلى على اليمين حيث يقول "مشاركة"، إذا نقرت على هذا
00:07:56نحن لسنا عالقين داخل "كلاود ديزاين" للأبد. الشيء الرائع حقاً بشأن هذا، وما سأعرضه لك لاحقاً
00:08:01هو أنه يمكننا تصدير هذا إلى "كلاود كود"، ثم بمجرد حصولنا على حل 80-90، انتهينا
00:08:07من السحق من حيث الاستخدام، يمكننا إحضاره إلى "كلاود كود" والعمل عليه لـ"، كما تعلم
00:08:12محتوى قلوبنا. يمكننا أيضاً تصديره كـ "إتش تي إم إل"، إرساله إلى "كانفا"، تصديره كـ "باوربوينت" أو "بي دي إف" لـ
00:08:17تنزيل الأشياء. يمكننا أيضاً إحضار زملائنا، لذا يمكنك جعل هذا شيئاً تعاونياً. لذا
00:08:22الكثير من الخيارات، و"كلاود ديزاين" ككل متعدد الاستخدامات جداً. وإليك ما عاد به "كلاود ديزاين"
00:08:27وسأقوم بتحريك هذا في كل مكان أثناء هذا الفيديو. الآن، أول شيء ألفت
00:08:33انتباهك إليه هو "تعديلات" هنا على اليمين. لذا "تعديلات" هي قائمة على هذه الصفحة تسمح لنا
00:08:40بتغيير العناصر الدقيقة لصفحتنا بسرعة كبيرة. لذا يمكنني تغيير اللمسات، يمكنني تغيير
00:08:48السمة من فاتح إلى داكن وهو أكثر وضوحاً هنا في الأسفل، يمكنك تغيير العنوان، شعار العلامة
00:08:54أسماء التسعير، أي نوع من الحركة، لذا يجعل من السهل جداً التكرار بين إصدارات مختلفة من
00:09:03موقعنا. أبعد من ذلك، لدي القدرة على تعديل الأشياء على مستوى دقيق إذا أتيت إلى هنا إلى
00:09:07أعلى اليمين وضغطت "تعديل"، يمكنني النقر على أشياء مختلفة مثل هذا الزر هنا، ويمكنني تغيير
00:09:13اللون مباشرة، يمكنني تغيير الخط، أنت تعلم، الحشو، العتامة، كل شيء. ولدي أيضاً
00:09:19القدرة على التعليق، لذا يمكنني النقر على نفس الزر، وبدلاً من تغيير
00:09:25القيم المحددة بالفعل، يمكنني ترك تعليق مثل "اجعله أكبر، اجعله أصغر" أو يمكنني الرسم عليه، لذا أنا
00:09:30يمكنني الرسم على هذا الشيء، أنت تعلم، تحديد كل هذا وأقول "يا، تحرك لليسار" ثم أرسل ذلك إلى
00:09:39كلاود هنا في الأسفل، وسوف يأخذ لقطة شاشة بشكل أساسي لما كتبته للتو
00:09:44ويكون مثل "أوه، حسناً، لنحرك ذلك لليسار قليلاً"، ويمكننا رؤيته الآن قد حركه لليسار، و
00:09:49لديه هذا الشيء البشع الذي يحدث هناك والذي يمكننا إزالته أيضاً. ولكن ما يجب عليك فعله عند هذه
00:09:55النقطة هو أولاً، أنت تعلم، ألقِ نظرة سريعة على "حسناً، ما رأيي في نوع التصميم العام
00:10:02التمريرة الأولى تبدو جيدة. والأهم من ذلك من حيث صورتنا، هل نحتاج للعودة إلى الداخل
00:10:09من "نانو بانانا برو" وتعديل هذه الصورة؟ هل نحتاج لجعلها أصغر، أكبر، أياً كان؟ إذا كان ذلك يبدو
00:10:14جيداً، اقتراحي عندما نكون في "كلاود ديزاين" هو أن نستخدم نوعاً من عملية من خطوتين. واحد: ما أريد
00:10:21القيام به هو أنني أريد رؤية متغيرات مختلفة لصفحة الويب الخاصة بي، ولا أتحدث عن تعديلات صغيرة،
00:10:26أريد رؤية تخطيطين مختلفين تماماً على الأقل للحصول على فكرة عن المسار الذي
00:10:32أريد أن أسلكه. وبمجرد أن نجد متغيراً نحبه على مستوى كلي، حسناً، بعد ذلك نركز عليه ونحصل
00:10:37على المزيد من التعديلات المعروضة لنا، ليس فقط 5 تعديلات، أنا أتحدث عن 15 تعديلاً، حتى نتمكن حقاً من الحصول على
00:10:43شيء نحبه، لأن الهدف هو الوصول إلى حل 90% قبل أن نحضر الفيديو في الداخل، وقبل أن
00:10:48نحضره إلى "كلاود كود" لنجعله خاصاً بنا. وللقيام بذلك، من السهل حقاً. كل ما علينا
00:10:53فعله هو مطالبة "كلاود ديزاين". لذا سأقول "هل يمكنك إنشاء متغيرين إضافيين للتخطيط لـ
00:10:58صفحة الويب الخاصة بنا التي يمكنني النقر خلالها بالإضافة إلى هذه الحالية؟" فقط بعض التصميمات الجديدة التي يمكننا
00:11:03تضمينها. وفكرة إنشاء متغيرات كلية ثم بمجرد أن نقرر متغيراً إنشاء الكثير
00:11:09من التعديلات، هذا هو ما يفصل حقاً "كلاود ديزاين" عن "كلاود كود". الآن، مباشرة، مطالبة
00:11:16بمطالبة، أعتقد أن "ديزاين" أفضل قليلاً من "كلاود كود" في الواجهة الأمامية، ولكن هذا
00:11:20النوع من التباين والتكرار البصري الذي يمكننا القيام به بسرعة كبيرة، أعتقد أن هذا هو الفتح الكبير
00:11:27مع "كلاود ديزاين" وهذا هو المكان الذي تكمن فيه القيمة، لأنه إذا حاولنا القيام بنفس الشيء داخل
00:11:32كلاود كود، فهو أمر مرهق قليلاً. وإليك ما أتحدث عنه: في الأعلى لدينا الإصدار السينمائي
00:11:37الذي كان الأصلي، والآن أعطانا "أرشيف" بالإضافة إلى إصدار "محطة طرفية"، ويمكنك
00:11:45رؤية أنها كلها فريدة جداً، وهذا ينطبق أيضاً على بقية الصفحة، ليس فقط قسم "البطل"
00:11:53بل كلها، وبصراحة بالنظر إلى هذا، أعتقد أن "المحطة الطرفية" تبدو في الواقع رائعة. سيتعين علينا
00:12:01تغيير الصورة هنا، وبالتأكيد سيتعين علينا الابتعاد عن الفيديو، ولكن مباشرة
00:12:09ترى هذا، وأنا أعتقد أن هذا يبدو رائعاً حقاً ويبدو بالتأكيد مختلفاً عن
00:12:13صفحة الويب اليومية العادية التي تم إنشاؤها بالذكاء الاصطناعي. لذا هذا ما أتحدث عنه عندما يتعلق الأمر
00:12:20بالتسخير الفعلي لقوة "كلاود ديزاين" وهو رؤية هذه الاختلافات، لأنني كنت
00:12:24لن أفكر أبداً في القيام بشيء كهذا أو حتى أعرف كيفية مطالبته ليعطيني هذا، أنا حقاً
00:12:29أحب هذا. ولكن للحفاظ على هذا الفيديو على المسار الصحيح، ما سنقوم به هو أننا سنبقى مع
00:12:35النسخة السينمائية، ولكنني أردت أن أريك ذلك لأن الفكرة هي أنك تفعل هذا، اختر الذي يعجبك، ثم
00:12:40تنتقل إلى الخطوة الثانية من عملية "كلاود ديزاين" وهي التعديلات، التعديلات، التعديلات. ولدينا
00:12:46كل هذه التعديلات هنا، ولكن تماماً مثل كيف طلبت من "كلاود ديزاين" في وقت سابق أن تعطيني المزيد من الاختلافات، الآن
00:12:51سأطلب منه أن يكون عدوانياً جداً مع التعديلات التي يقدمها لي. لا يجب أن أعرف ما هي التعديلات
00:12:56التي أريدها، لا يجب أن أعرف "أوه، أريد أن أكون قادراً على تغيير السمة أو العنوان أو الشعار". أنا
00:13:00لا أعرف، فقط أعطني مجموعة وسنكتشف ذلك. لذا كتبت هنا "دعنا نبقى مع
00:13:04السينمائي، يمكنك إزالة الاثنين الآخرين، وأيضاً زيادة عدد التعديلات المتاحة بعدوانية"
00:13:11وسنرى ما سيأتي به. الآن يمكننا رؤية كل التعديلات الإضافية التي أضافها. لذا
00:13:15انتقلنا من حوالي 5 تعديلات إلى حوالي 15 أو نحو ذلك، وهو أمر رائع، لذا لدينا هذه التعديلات الأصلية
00:13:22مع اللمسات، السمة، شعار العلامة، ذلك يبدو جيداً، الخطوط، خط الجسم، خط مونو، مقياس النوع
00:13:36انتظر، النقطة هي أنني أستطيع الآن تمزيق كل هذه مراراً وتكراراً. يمكنني حتى
00:13:42تغيير عتامة تراكب دعوة اتخاذ إجراء (CTA)، وهج الجمر، لا تتوقف، لا تتوقف. لذا مررت
00:13:51بكل التعديلات من جانبي، تخلصت من الجمر، وهذا ما حصلنا عليه في النهاية. الآن لدي
00:13:56القدرة على النظر إليه بملء الشاشة إذا ذهبت إلى "عرض" في الأعلى، "ملء الشاشة" حتى نتمكن من الحصول على فكرة أفضل عن
00:14:02ما سيبدو عليه الأمر، وبالنسبة لي، هذا يبدو جيداً جداً. تذكر أننا لا نحتاج إلى حل 100%
00:14:08داخل "كلاود ديزاين"، نريد الحصول على أقرب ما يمكن، نريد اتخاذ جميع قرارات التصميم
00:14:14التي يمكننا القيام بها، ثم ما نريد القيام به في النهاية هو إحضاره مرة أخرى إلى "كلاود كود" والقيام بالتعديلات الطفيفة
00:14:18لأن "كلاود ديزاين" مستهلك للموارد، أنت تحصل فقط على الكثير من الاستخدام، لذا نريد أن
00:14:23نجعلها ذات قيمة. لذا الآن يمكننا الانتقال إلى قسم الفيديو حيث نأخذ هذه الخلفية ونقوم
00:14:29فعلياً بتحريكها. الآن ملاحظة جانبية، من المهم أننا قمنا بكل هذا مع الخلفية الثابتة لأنه
00:14:35عندما نتحدث عن مستخدمي الهاتف المحمول، لا نريد أن يصطدم مستخدمو الهاتف المحمول ببعض الفيديو العملاق الذي
00:14:39يمكن أن يبطئهم، لذا إذا كان شخص ما على الهاتف المحمول وذهب إلى موقعنا الذي قمنا بإعداده هنا، فهم
00:14:43فقط سيرون الصورة الثابتة، لذا سنستخدم "سيد دانس" لهذا، لذا مرة أخرى أنا عدت هنا داخل
00:14:47هيغزفيلد، سأذهب إلى "سيد دانس 2.0"، لا يجب عليك استخدام "سيد دانس". "سيد دانس" هو فقط الأفضل الموجود
00:14:52حالياً. الخيارات الأخرى تشمل "كلينغ 3.0"، يمكنك أيضاً استخدام شيء مثل "فو 3.1"، وإعداد الفيديو
00:14:58سهل جداً، حرفياً أنت فقط ستأخذ صورتك وستقوم بإسقاطها هنا
00:15:04لذا أنت حرفياً فقط تسحب وتفلتها هنا كإطار بداية، ثم نعطيها فقط
00:15:08مطالبة. الآن المطالبة أساسية جداً، كل ما كتبته هو "اجعل الحركة بطيئة للغاية، السحب تتحرك بالكاد،
00:15:15الجمر من النار في يديه ينجرف ببطء"، ونحصل على شيء كهذا. نريد
00:15:21دقيقاً، لا نريد مجنوناً، لا تريد أن يبدو كفيديو لعبة جامح، تريده تقريباً
00:15:26أن يبدو فقط كملف "جيف" متحرك منخفض المستوى، وذلك لأن الصورة الرئيسية فقط تعطينا بعض
00:15:32اللمسة لموقعنا، لا تريد أن تأخذ كل شيء. وثانياً، كما سترى هنا، من المحتمل
00:15:37أنها ستقلب لأنك في الغالب ستحصل على 15 ثانية من هذا الشيء. من الناحية المثالية يمكنك إنشاء
00:15:43حلقة مثالية، ولكن هذا يمكن أن يكون صعباً نوعاً ما، لذا أفضل رهان هو القيام بما فعلناه هنا فقط
00:15:48فيديو مدته 15 ثانية وهو ما يبدو كثيراً في البداية، ولكنه ليس ثقيلاً جداً حقاً. و
00:15:54الشيء الآخر عندما نذهب لـ 15 ثانية، من غير المحتمل أن يذهب شخص ما إلى موقع الويب الخاص بك و
00:15:59يجلس فقط هناك على صفحة البطل الخاصة بك يقرأ لمدة 15 ثانية ثم يصاب بالذعر من
00:16:04القطع عندما يعود مرة أخرى في الحلقة. ما يرجح حدوثه هو أنهم يذهبون إلى
00:16:10البطل الخاص بك، "واو، يبدو رائعاً"، بعد 10 ثوانٍ يكونون في بقية صفحة الهبوط ليروا ما الذي تدور حوله
00:16:15لذا حافظ على المطالبة بسيطة، حافظ عليها دقيقة، إذا كنت تريد أن تصبح مجنوناً، انطلق، اجعلها
00:16:20طويلة بقدر الإمكان لمدة 15 ثانية، تريد أن تكون 16 بـ 9 وتريد أن تكون على الأقل
00:16:261080 بي. بعض النماذج ستعطيك الخيار لتعزيز المطالبة حيث يقول "تقريباً
00:16:30يقول "مرحباً، لقد وضعت مطالبتك السيئة وسنجعلها أفضل"، لا تفعل ذلك، أنت دائماً تريد سيطرة كاملة
00:16:34على مطالبتك وتوقع أنك ستضطر للقيام ببضع تكرارات لهذا حتى تحصل عليه
00:16:40بشكل صحيح. لذا من المحتمل للحصول على واحد يعمل فعلياً، ستضطر للقيام بذلك أربع أو خمس مرات
00:16:45حتى تحصل أخيراً على المخرجات التي تبحث عنها، ولكن بمجرد حصولنا على تلك المخرجات، كل ما نحتاج للقيام به هو
00:16:50تنزيله ثم نقفز مرة أخرى إلى "كلاود ديزاين" وسنقوم فقط بإسقاط ملف "إم بي 4" ذلك في
00:16:57نافذة المطالبة، لذا قمت فقط بتحميله هنا في الأسفل على اليسار ثم كتبت "هل يمكننا تبديل الثابت
00:17:01صورة بالفيديو الذي قمت بتحميله للتو لخلفية البطل؟" ثم سيعطيك شيئاً مثل
00:17:05هذا، وهو حرفياً بهذه البساطة، وعند هذه النقطة نحن انتهينا تقريباً داخل
00:17:12كلاود ديزاين. أعني إذا كنت تريد القيام بالمزيد من التغييرات، قم بالمزيد من التعديلات، الأمر متروك لك تماماً، ولكن إذا
00:17:17كنت في هذا المكان، أود أن أقول إنك مستعد فعلياً للانتقال من "كلاود ديزاين" والآن أحضر
00:17:22هذا إلى شيء مثل "كلاود كود" مثلما تحدثنا مبكراً، سهل جداً القيام به. سنذهب إلى
00:17:26مشاركة ونذهب إلى التسليم لـ "كلاود كود". الآن لأن هذا يتضمن فيديو في "إم بي 4"
00:17:34إذا حاولت فقط القيام بأمر "نسخ" قد يواجه بعض المشاكل في تنزيله فعلياً، لذا ما
00:17:38ستحتاج للقيام به بدلاً من ذلك هو أنك تريد فقط تنزيل "الزيب"، لذا سيأخذ
00:17:44كل الملفات، كل ذلك الفيديو المباشر، كل أشياء البرمجة تحت الغطاء ويضعها فقط في ملف "زيب"
00:17:49وهكذا يمكنك القيام بـ "تنزيل زيب"، ثم تريد استخراج كل هذا، ثم أنت فقط ستأخذ
00:17:56ذلك المجلد المستخرج، تضعه في "كلاود كود" وتقول "قم بتنزيل كل شيء، نحن الآن سنقوم
00:18:03بإنشاء موقع ويب باستخدام كل هذا الكود"، وأنت انتهيت تقريباً عند تلك النقطة. لذا قمت بإسقاطه
00:18:10وقلت "استخرج كل هذه الملفات لصفحة الويب التي نبنيها ثم قم بتشغيل خادم مطور" و
00:18:14إليك صفحة الويب على خادم المطور، تم تشغيله ومع ذلك اكتمل النقل إلى "كلاود كود".
00:18:19لقد قمت بإعداد قسم البطل المتحرك، لديه الفيديو، لديه الثابت، كل شيء جاهز للذهاب
00:18:25لك لتقوم بتغييرات طفيفة ثم ادفعه إلى "غيت هاب" قبل أن تدفعه إلى "فيرسيل" وتستضيفه فعلياً
00:18:29عبر الإنترنت. لذا هذا هو المكان الذي سأترككم فيه يا رفاق اليوم، آمل أن هذا كان قادراً على تسليط
00:18:33بعض الضوء على كيفية الجمع بين قوة "كلاود ديزاين" و "سيد دانس 2.0" لإنشاء هذا النوع من
00:18:39مواقع الويب المتحركة. كما هو الحال دائماً، أخبروني برأيكم، تأكدوا من التحقق من "تشيس إيه آي" إذا
00:18:44كنتم تريدون وضع أيديكم على كل تلك الموارد، وسأراكم في الأنحاء.

Key Takeaway

يؤدي دمج الصور المولدة عبر Nano Banana Pro مع أدوات التحريك مثل Seedance 2.0 ونماذج Claude Design إلى تسريع بناء مواقع إلكترونية متجاوبة ومتحركة قابلة للنقل مباشرة إلى بيئات البرمجة مثل Claude Code.

Highlights

تعتمد عملية تصميم صفحة الويب على استخدام Nano Banana Pro لإنشاء صورة ثابتة بتكوين محدد يخصص مساحة للنصوص والصور قبل البدء بالبرمجة.

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

يتحول الفيديو إلى عنصر خلفية متحرك عبر دمج صورة ثابتة في أداة Seedance 2.0 مع توجيهات محددة للحركة البطيئة لضمان عدم تشتيت المستخدم.

تنتقل المشاريع من Claude Design إلى Claude Code عبر تصدير ملف ZIP يتضمن ملفات HTML والبرمجيات اللازمة لضمان العمل على خادم مطور خاص.

تكلف عملية إنشاء صفحة الهبوط باستخدام Claude Design حوالي 5 دولارات من الاستخدام الإضافي عند تجاوز الحدود القياسية للمنصة.

Timeline

التخطيط البصري وتوليد الصور الأساسية

  • يحدد تكوين الصورة مسبقاً أماكن العناصر مثل النصوص والأزرار وأشرطة التنقل.
  • يساعد موقع Dribbble في تحليل تخطيطات صفحات الهبوط الناجحة لاستخدامها كمرجع عند طلب الصور.
  • يتطلب توليد الصورة عبر Nano Banana Pro مراعاة المساحات الفارغة المخصصة للنصوص.

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

بناء النموذج الأولي باستخدام Claude Design

  • يُستخدم Claude Design لبناء هيكلية الموقع عبر إدخال سياق الصورة والمطالبات التفصيلية.
  • توفر خاصية التعديلات إمكانية تغيير اللمسات والسمات والخطوط بشكل سريع ومباشر.
  • يسمح النظام بتوليد متغيرات تخطيط متعددة لمقارنة المسارات التصميمية قبل الاعتماد النهائي.

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

تحريك الخلفية ودمجها

  • يتم تحويل الصورة الثابتة إلى فيديو مدته 15 ثانية عبر Seedance 2.0.
  • تتطلب مطالبات تحريك الخلفية الحفاظ على حركة بطيئة ودقيقة لتجنب تشتيت المستخدم.
  • تُدمج الخلفية المتحركة كملف MP4 داخل نافذة Claude Design لاستبدال الصورة الثابتة.

يتم استخدام Seedance 2.0 لإضافة لمسة حركية للموقع عبر تحويل الصورة الثابتة إلى فيديو قصير. يفضل استخدام حركة خفيفة جداً تظهر كملف GIF بدقة 1080p لضمان عدم التأثير على أداء الموقع، خاصة لمستخدمي الهواتف المحمولة الذين قد يكتفون برؤية الصورة الثابتة.

النقل إلى بيئة التطوير النهائية

  • يُصدر المشروع من Claude Design عبر ملف ZIP يحتوي على كامل الكود والملفات الوسائطية.
  • يُشغل الكود داخل Claude Code لإنشاء الخادم الخاص وبدء العمل على التعديلات النهائية.
  • يتم دفع الموقع إلى GitHub ثم Vercel للاستضافة الفعلية عبر الإنترنت.

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

Community Posts

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

Write about this video