00:00:00تصميمات الواجهة التي يبرمجها Claude سيئة للغاية، والخطأ خطؤك أنت،
00:00:04لكن هذه مشكلة يمكننا حلها بخارطة طريق بسيطة.
00:00:07كل ما عليك فعله هو معرفة وجهتك الصحيحة.
00:00:09وفي هذا الفيديو،
00:00:10سأقوم بتفصيل المستويات السبعة لتصميم الواجهات
00:00:13باستخدام Claude code وأشرح ما يمكنك توقعه في كل
00:00:16مستوى، والفخاخ التي يجب تجنبها،
00:00:18وما تحتاجه للانتقال إلى المستوى التالي.
00:00:21وفي النهاية،
00:00:22سيكون لديك عملية بسيطة وقابلة للتكرار لإنشاء
00:00:25تصميمات واجهة باستخدام Claude code لا تبدو كأنها
00:00:28مجرد قالب تقليدي ممل آخر.
00:00:30دراسة الحالة لفيديو اليوم ستكون عن تطبيق
00:00:33SaaS وهمي نطلق عليه اسم "Argus".
00:00:36تطبيق Argus سيكون مخصصاً لذكاء وسائل التواصل الاجتماعي.
00:00:41بمعنى أنه مكان يمكن لصناع المحتوى أو أي شخص
00:00:43التوجه إليه للعثور على المواضيع الرائجة في مجالهم.
00:00:48ومن خلال Argus،
00:00:49سنمر عبر عملية المستويات السبعة بالكامل.
00:00:52لذا لنبدأ بالمستوى الأول.
00:00:53وللأسف، الكثير من الناس عالقون هنا بالفعل.
00:00:55هذا المستوى عبارة عنك أنت وأمر نصي فقط.
00:00:57ستفتح Claude code وستقول
00:00:59شيئاً مثل: "مرحباً،
00:01:01لننشئ صفحة هبوط لـ Argus،
00:01:02تطبيقي الذي يعمل كأداة ذكاء لصناع
00:01:05المحتوى للعثور على المواضيع الرائجة وتحديدها في
00:01:08مجال تخصصهم". والآن،
00:01:09حتى لو فعلت ذلك واستخدمت "وضع التخطيط"،
00:01:12فإن ما سنحصل عليه هو شيء عام جداً.
00:01:15لماذا؟ لأننا لم نعطه أي توجيهات تصميمية فعلاً.
00:01:18ونحن نعتمد نوعاً ما على Claude code لملء الفجوات
00:01:20فيما يتعلق بما يبدو جيداً.
00:01:22تسمع هذا كثيراً: "الذكاء الاصطناعي ليس لديه ذوق"، وهذا صحيح،
00:01:26لكن في الحقيقة معظم الناس ليس لديهم ذوق أيضاً.
00:01:28وبسبب هذه المشكلة،
00:01:31لا يمكنهم شرح ذلك لـ Claude code، أليس كذلك؟
00:01:33إذا كنت لا تعرف كيف يبدو التصميم الصحيح،
00:01:35فكيف يفترض بـ Claude code أن يعرفه؟
00:01:37لذا هنا في أبسط المستويات، نحتاج إلى
00:01:39البدء في إتقان بعض المهارات.
00:01:41هذه المهارات الثلاث هي كتابة أوامر وصفية،
00:01:43تحديد أطر العمل وفهم ماهية هذه الأطر
00:01:46في الأساس،
00:01:46ثم البدء في بناء مفردات تصميم أساسية.
00:01:50الآن، بمجرد استخدام "وضع التخطيط" في هذه العملية،
00:01:53ستبدأ في بناء بعض هذه المهارات لأنه
00:01:55سيطرح عليك أسئلة مثل: ما هي الأدوات البرمجية التي تريد
00:01:57استخدامها لصفحة الهبوط هذه؟
00:01:58هل تريد Next JS، أو HTML عادية، أو Astro؟
00:02:00قد لا يكون لديك أدنى فكرة عما تعنيه هذه المصطلحات،
00:02:02لكن بمجرد كتابة سؤال بسيط مثل
00:02:05"ما هي أطر العمل هذه؟"،
00:02:07ستبدأ في بناء مستوى معين من الكفاءة في
00:02:11هذا المجال؛ فيما يخص أطر العمل وهذه الأمور،
00:02:13عليك فقط طرح الأسئلة.
00:02:14وضع التخطيط سيجبرك أيضاً على التفكير في قرارات
00:02:17التصميم والهدف الفعلي لموقعك،
00:02:19لأنه لا يكفي أن تقول: "مرحباً،
00:02:20أريد فقط صفحة هبوط لـ Argus".
00:02:21ما الغرض من هذا؟
00:02:23ما هي النتيجة الفعلية التي تطمح إليها؟
00:02:25في هذه الحالة،
00:02:26نريد كلاً من تسجيل في قائمة الانتظار وعرضاً للمنتج.
00:02:29وبعد ذلك، سيطرح علينا أسئلة صريحة حول
00:02:32الأسلوب. والآن، ستدرك فوراً
00:02:35أن أنواع الأساليب البصرية التي سيقترحها
00:02:38هي مجرد قوالب عامة: مظلم وتقني، نظيف وبسيط،
00:02:41أليس كذلك؟
00:02:42هذا ليس محدداً بما يكفي للحصول على النتائج التي
00:02:45نريدها بعد. وهذا هو المكان الذي يتوقف عنده الجميع.
00:02:47ولهذا السبب يبدو كل شيء عاماً جداً.
00:02:49بالنسبة لنا، سنمضي قدماً ونختار "نظيف وبسيط"،
00:02:52ثم سنقوم فقط بعمل قسم الواجهة الرئيسية،
00:02:53والمميزات، وزر الدعوة لاتخاذ إجراء، ونرسل الطلب.
00:02:55الآن ربما تفكر: إذا كان كل هذا أساسياً جداً،
00:02:58فكيف سأكتب فعلياً أوامر وصفية
00:03:01وأبني تلك المفردات التصميمية الأساسية؟
00:03:03بصراحة،
00:03:04الأمر سيتطلب بعض الوقت وسيتطلب
00:03:06الخبرة. فكلما تعرضت أكثر
00:03:09لما يبدو عليه التصميم الصحيح والواجهات المبتكرة،
00:03:12زادت قدرتك على التقاط هذه التفاصيل.
00:03:13وسنتحدث عن ذلك أكثر في المستويات القادمة.
00:03:16لذا دعونا نلقي نظرة على ما بناه لنا... يا للهول، يا لهذا الهراء!
00:03:20هذا قبيح، أليس كذلك؟ هذا أقصى درجات الابتذال.
00:03:24حتى أننا نرى التدرجات الأرجوانية،
00:03:27التي يعشقها الذكاء الاصطناعي لسبب ما. فماذا حدث؟
00:03:30ما الخطأ الذي وقع؟ حتى مع وضع التخطيط، هذا ما حصلنا عليه.
00:03:32حسناً، الحقيقة هي وكما تعلمون بالفعل،
00:03:35أن Claude code والذكاء الاصطناعي بشكل عام،
00:03:37ليس الأفضل في تصميم الواجهات.
00:03:38وإذا أعطيته أوامر مملة وغير وصفية،
00:03:42فهذا هو نوع المخرجات التي ستحصل عليها، أليس كذلك؟
00:03:44ومع ذلك، هذا هو ما تراه في كل مكان مع
00:03:46ربما بعض الاختلافات البسيطة. فماذا يمكننا أن نفعل؟
00:03:48ماذا نفعل للخروج من المستوى الأول والهروب من
00:03:51جحيم التصميم؟ لكن قبل أن نفعل ذلك،
00:03:52كلمة سريعة من راعيكم المفضل: أنا.
00:03:55لقد أطلقت للتو دورة "Claude code masterclass"
00:03:58منذ وقت ليس ببعيد.
00:03:59وهي المكان الأول لتتحول من مبتدئ إلى مطور ذكاء اصطناعي،
00:04:02خاصة إذا لم تكن قادماً من خلفية تقنية،
00:04:04أقوم بتحديثها كل أسبوع. ومنذ إطلاقها،
00:04:07أضفنا بالفعل أكثر من ساعة من المحتوى الجديد وحدثنا
00:04:10أكثر من 20 وحدة تعليمية. لذا إذا أردت الحصول عليها،
00:04:13يمكنك العثور عليها في Chase AI.
00:04:14بالإضافة إلى وجود رابط لذلك في التعليق المثبت،
00:04:17لكن إذا كنت جديداً تماماً على الذكاء الاصطناعي،
00:04:18وتشعر أن هذا خطوة كبيرة جداً،
00:04:19فتأكد من التحقق من مجتمع Chase AI المجاني.
00:04:22يوجد رابط لذلك في الوصف.
00:04:24حسناً، للانتقال إلى المستوى الثاني،
00:04:25نحتاج إلى منح Claude ثقافة تصميمية.
00:04:28وهنا نبدأ في استحضار المهارات.
00:04:30هذا هو المكان الذي نبدأ فيه بجلب أوامر متخصصة خارجية
00:04:33تخبر Claude code بكيفية التصميم بشكل أفضل.
00:04:36الآن هذه المهارات التي نعتمد عليها مثل مهارة تصميم الواجهات
00:04:39ومهارة UI UX pro max ستقوم بالكثير من
00:04:41العمل الشاق نيابة عنا.
00:04:42ستقوم بتزويد Claude code بتلك الأوامر التي
00:04:45تقول: "مرحباً، إذا كنت تنشئ صفحة ويب في هذه الصناعة،
00:04:49فإليك أنواع الأشياء التي يجب أن تبحث عنها".
00:04:51وإليك قائمة بكل تقنيات تصميم الذكاء الاصطناعي الرديئة،
00:04:55تجنبها.
00:04:56لذا فهي ستقوم بشحن أوامرنا بقوة.
00:04:58حتى لو بدأنا بطلب متواضع نوعاً ما، وإليك
00:05:00نظرة على مهارة UI UX pro max تلك.
00:05:03هذا مستودع مفتوح المصدر على GitHub، ولديه 52 ألف نجمة.
00:05:07يمكننا الدخول إلى مجلد المهارات هنا ورؤية
00:05:09كيفية إعداد كل شيء فعلياً. إذا أردنا الكتابة،
00:05:12فكلها مجرد أوامر نصية، وهي مجموعة من الأوامر
00:05:15التي تعمل كقائمة مراجعة لـ Claude code، مرة أخرى،
00:05:17لإخراجه من هذا النمط المكرر.
00:05:19حتى لا نبقى عالقين هنا. والآن لتثبيت هذه
00:05:21المهارة تحديداً وكل المهارات الأخرى المشابهة لها،
00:05:23الأمر بسيط جداً. إذا ذهبنا إلى GitHub،
00:05:26سنجد التعليمات موضحة لنا هنا تماماً.
00:05:27سنكتب فقط forward slash ثم plugin marketplace،
00:05:30ونضيف المهارة ثم نقوم بتثبيتها.
00:05:32سنقوم فقط بتشغيل هذا داخل مبنى أوامر Claude code.
00:05:35وإذا كان هذا مربكاً قليلاً، فاعلم
00:05:37أنه يمكنك دائماً نسخ رابط URL الخاص بهذا،
00:05:40ووضعه في Claude code وقول: "مرحباً،
00:05:41أرغب في تثبيت هذه المهارة".
00:05:42لذا دعونا نضع المهارة قيد الاختبار.
00:05:44لقد قمت بتحميل المهارة باستخدام الشرطة المائلة.
00:05:46يمكنك أيضاً استخدام اللغة الطبيعية وقول شيء مثل:
00:05:47"يا Claude code، استخدم مهارة UI UX pro max".
00:05:50وسنقول:
00:05:51"أريدك أن تعيد إنشاء صفحة الهبوط باستخدام هذه المهارة.
00:05:54اطرح عليّ أي أسئلة تحتاجها".
00:05:55والآن، تماماً مثل وضع التخطيط القياسي في Claude code،
00:05:57سيطرح علينا بعض الأسئلة حول الأسلوب.
00:05:59سنفعل ما يوصي به هذه المرة، حسناً؟
00:06:03اختيار بعض الخطوط؟ بالتأكيد، يبدو رائعاً.
00:06:05ثم لون زر الإجراء؟ لنختر اللون البرتقالي.
00:06:07نريد الابتعاد عن اللون الأرجواني بأي ثمن.
00:06:09لقد انتهى Claude code من إعادة التصميم، فلنلقِ نظرة.
00:06:12هذه هي صفحة الهبوط باستخدام مهارة UI UX pro max.
00:06:15وفوراً، نرى تحسناً هائلاً، أليس كذلك؟
00:06:18لدينا الآن خلفية مناسبة وأضفنا هذا الشكل
00:06:21المربع الصغير.
00:06:22الأزرار نفسها لديها وهج خفيف حتى أنها
00:06:25تغير لونها عند تمرير الفأرة فوقها،
00:06:27لدينا رسم بياني والألوان تتغير من قسم
00:06:30إلى آخر. لذا هذا أفضل بكثير، رغم أنه لا يزال
00:06:33يعشق الأرجواني تماماً. ومع ذلك،
00:06:36من الواضح أن هذا من صنع الذكاء الاصطناعي، أليس كذلك؟
00:06:38هذا ليس شيئاً تراه وتنبهر به.
00:06:40لا يزال يبدو كقالب ذكاء اصطناعي.
00:06:43يبدو كقالب ذكاء اصطناعي مصمم بعناية،
00:06:46لكنه يظل قالباً. وفي جوهره،
00:06:48هو نفس الموقع الذي رأيته من قبل،
00:06:49مع القليل من اللمسات التجميلية.
00:06:51فكيف يمكننا تحسين هذا فعلياً؟
00:06:52كيف ننتقل من المستوى الثاني إلى المستوى الثالث؟
00:06:55لأن هذه المهارات رائعة.
00:06:56فهي تجلب بعض أفكار نظرية الألوان وتنسيق الخطوط
00:06:59والتباعد وتصميم التخطيط العام، لكن في جوهره،
00:07:02لا يزال هذا التصميم عادياً.
00:07:04والحقيقة هي أنه عندما يتعلق الأمر بالمهارات التي يجب إتقانها،
00:07:07فإن أكبرها هي:
00:07:08كيف نقيم هذه المخرجات بعين المصمم ثم
00:07:11نحول تلك الانتقادات إلى أوامر نصية؟
00:07:13هذه لا تزال مشكلة في كتابة الأوامر، لكن المشكلة فيها،
00:07:16وهنا نقع في الفخ، هي أن هناك
00:07:18سقفاً لقدرتنا الوصفية، خاصة عندما نبدأ، أليس كذلك؟
00:07:21نحن نفتقر إلى المعرفة اللازمة لشرح المشكلات فعلياً،
00:07:23أليس كذلك؟
00:07:27أنا أحاول شرح وسيط بصري ومشكلة بصرية
00:07:27باستخدام النص بشكل أساسي، وهنا نفقد بعض التفاصيل.
00:07:31فما الذي يمكننا فعله حقاً؟ حسناً،
00:07:34نحتاج للبدء في عرض المشكلة لـ Claude code.
00:07:36علينا أن نبدأ في إظهار أمثلة فعلية
00:07:39لما نحاول الوصول إليه لـ Claude code. صحيح؟
00:07:41لفتح المستوى الثالث،
00:07:44نبدأ بالابتعاد عن الأوامر النصية فقط
00:07:46ونبدأ في الانتقال إلى الوسيط البصري، أليس كذلك؟
00:07:49نبدأ بـ "الإظهار" بدلاً من مجرد "الإخبار".
00:07:52نبدأ في توضيح الأمر عملياً، وليس مجرد الحديث عنه.
00:07:54والمستوى الثالث هو حيث تصبح أنت المخرج البصري.
00:07:56هنا نبدأ في إعطاء كود «كلود» (Claude Code)
00:07:58أمثلة ملموسة لما نسعى للوصول إليه، أليس كذلك؟
00:08:01بهذه الطريقة، لا نعتمد فقط على النصوص والمهارات.
00:08:03سنستخدم الآن النصوص بالإضافة إلى المهارات والأمثلة البصرية.
00:08:07يعد هذا طفرة كبيرة لسببين؛ الأول:
00:08:09أن كود «كلود» سيكون قادراً بشكل أفضل على محاكاة
00:08:12صورة تعرضها له مقارنة بوصفك لتلك الصورة.
00:08:15أما السبب الثاني، فبما أننا نستخدم الصور،
00:08:17فهذا يعني أننا نتصفح مواقع إلكترونية أخرى،
00:08:20وسنتمكن مجدداً من رؤية الشكل الصحيح للتصميم،
00:08:23وماذا يفعل المحترفون الحقيقيون في هذا المجال وكيف يمكننا محاكاتهم؟
00:08:25والآن،
00:08:26هناك عدة أماكن يمكنك العثور فيها على إلهام
00:08:28لتصاميم واجهاتك الأمامية، وسأذكر أربعة منها.
00:08:31الأول هو Awwwards (بثلاثة حروف W)؛
00:08:34وهو مكان يرسل فيه الأشخاص أعمالهم في الواجهات الأمامية
00:08:37ويتم تقييمهم عليها، لذا فهو يتمتع بلمسة إبداعية كبيرة.
00:08:40الثاني هو موقع godly.website.
00:08:42وهو موقع ذو تصفح لا نهائي حيث يمكنك ببساطة
00:08:45رؤية مجموعة متنوعة من التصاميم. الثالث هو Pinterest،
00:08:48والذي يضم بشكل مفاجئ بعض الأشياء الرائعة حقاً.
00:08:49هنا أبحث فقط عن صفحات هبوط لبرامج (SaaS).
00:08:52وعندما أجد واحدة تعجبني،
00:08:53يمكنني أيضاً رؤية الكثير من النتائج المشابهة لها.
00:08:56وأخيراً لدينا Dribbble (بثلاثة حروف B)؛
00:08:58وضعت هنا أيضاً "صفحة هبوط SaaS". ومرة أخرى،
00:09:01أرى مجموعة من التصاميم المختلفة التي تبدو رائعة.
00:09:04لنفترض أنني استقررت على موقع مثل Open Hands وأعجبني.
00:09:07أعجبني مثلاً ذلك
00:09:09العنصر المتحرك في الأعلى الذي يعرض سير العمل.
00:09:11وأعجبني نوعاً ما نظام الألوان المختلف.
00:09:14إنه شيء غير مألوف على الفور.
00:09:15لديهم أدلة اجتماعية، وبشكل عام،
00:09:19أنا معجب بالأسلوب، أليس كذلك؟ على سبيل المثال. لذا مجدداً،
00:09:22ما سأفعله بسيط للغاية.
00:09:23سآخذ مجموعة من لقطات الشاشة لهذه الصفحة،
00:09:26وأضعها في كود «كلود» وأقول: "هذا هو الأسلوب البصري
00:09:29الذي أريد التوجه نحوه". فداخل كود «كلود»، قلت:
00:09:31"في الواقع أريد أن يطابق موقعنا أسلوب Open Hands".
00:09:34أعطيته رابط الموقع، ثم قلت:
00:09:36"إليك بعض لقطات الشاشة كمرجع".
00:09:38وأرفقت جميع لقطات الشاشة هناك.
00:09:40والآن أصبح لديه مراجع بصرية فعلية ليعتمد عليها.
00:09:43سيكون من الصعب عليّ على الأقل وصف ما
00:09:45كنت أبحث عنه هنا بالكلمات،
00:09:47حتى مع مساعدة شيء مثل مهارة خبير واجهة وتجربة المستخدم (UI UX pro).
00:09:51ومن خلال هذه العملية،
00:09:52سنبدأ في انتقاء مراجع بصرية جيدة حقاً.
00:09:55هناك الكثير منها المتاحة.
00:09:57وبمجرد أن تبدأ في رؤيتها أكثر فأكثر،
00:10:00ستجد أن أشياء مثل التصاميم القديمة أصبحت منفرة تماماً، وتقول:
00:10:03"لماذا قد أفعل شيئاً كهذا بينما كل هذه الأشياء الرائعة
00:10:05متاحة؟". ومع رؤية المزيد من تلك المراجع،
00:10:07حتى وإن كنا نعطي كود «كلود» مجرد لقطات شاشة،
00:10:09فهذا سيساعدك على توضيح ما تريده بالضبط،
00:10:12لأنك
00:10:12ستبدأ في ملاحظة نفس العناصر تتكرر مراراً وتكراراً
00:10:14بينما تتصفح كل هذه المراجع.
00:10:16وما ستحتاج أيضاً للبدء في فعله هو
00:10:18دمج مراجع من عدة مواقع مختلفة، أليس كذلك؟
00:10:21فبالرغم من استخدامنا لـ Open Hands هنا،
00:10:23فمن المحتمل وجود أشياء رائعة وجدتها في Pinterest أو
00:10:26godly.websites تجعلني أقول: دعني آخذ هذا من هنا،
00:10:28وهذا من هناك، أليس كذلك؟
00:10:29أريد أن آخذ الأفضل من كل هذه المواقع المختلفة
00:10:32وأدمجه معاً. ومع ذلك،
00:10:33من السهل جداً الوقوع في فخ معين في هذا المستوى.
00:10:36وأقول إن معظم الناس يتوقفون هنا عند المستوى الثالث،
00:10:39حيث يدركون ضرورة استخدام المهارات.
00:10:41وأن أداء كود «كلود» ضعيف في البداية،
00:10:42لكن مع المهارات ولقطات الشاشة، يمكنهم الوصول لمرحلة جيدة.
00:10:45الحقيقة هي أن هناك سقفاً هنا لأننا
00:10:49سنعلق نوعاً ما في "فجوة الطابع العام" (vibe gap).
00:10:50كما ستلاحظ في النتيجة التي سيخرج بها؛
00:10:52ستكون قريبة نوعاً ما، أليس كذلك؟
00:10:55لكنها لن تكون مثالية، لأنه مجدداً،
00:10:57لا يزال هناك تأثير فقدان البيانات
00:11:01الناتج عن محاولة إخبار كود «كلود» - الذي يتعامل برمجياً فقط -
00:11:03بأن ينظر إلى صورة بصرية ويقوم
00:11:05بترجمة هذا المنظر إلى كود برمي.
00:11:08وهذه هي المشكلة في الكثير من تصاميم الواجهات الأمامية.
00:11:10إنها وسيط بصري، ومع ذلك
00:11:12أحاول كتابتها نصياً، وفي الوقت نفسه،
00:11:15حتى لو أرفقت لقطات شاشة بصرية،
00:11:17تظل هناك فجوة في الترجمة.
00:11:18كيف يمكنه القيام بذلك بشكل صحيح؟ حسناً،
00:11:20الحقيقة هي أن له حدوداً، ويمكننا رؤية
00:11:22هذه الحدود بوضوح هنا،
00:11:24لأن هذا هو ما أنشأه باستخدام كل لقطات الشاشة تلك.
00:11:28هذا هو التصميم الأصلي، وهذا هو تصميمنا.
00:11:31وكما قلت سابقاً،
00:11:32هنا يعلق معظم الناس.
00:11:33لأننا إذا تصفحنا هذا، فستجد أنه
00:11:36إذا نظرت إليه بتركيز أقل،
00:11:37يمكنك رؤية ما كان يحاول الوصول إليه.
00:11:39وربما وصل إلى منتصف الطريق تقريباً.
00:11:41وهناك بعض الأشياء التي تعجبنا،
00:11:43ولكن ما يفعله الناس الآن هو أنهم يذهبون إلى هنا،
00:11:46ويأخذون لقطة شاشة أخرى للقسم الرئيسي (Hero section).
00:11:49ويبدؤون في العمل على هذا القسم مراراً وتكراراً،
00:11:51عبر الكثير من الأوامر النصية؛ التقط صورة، عد للأوامر، وهكذا.
00:11:53ويستغرق الأمر وقتاً طويلاً دون أن تتقنه حقاً.
00:11:56أليس كذلك؟
00:11:57بسبب مشكلة ترجمة لقطات الشاشة
00:11:59إلى كود برمجي.
00:11:59لذا للخروج من المستوى الثالث والبدء في الانتقال إلى
00:12:02المستوى الرابع،
00:12:03لا نحتاج فقط للنظر إلى القشور الخارجية لهذه المواقع
00:12:06التي نحبها ونستمد منها الإلهام.
00:12:08نحن بحاجة لتعلم كيفية استنساخها بشكل صحيح
00:12:11والحصول فعلياً على الكود الأساسي الذي يدير موقعاً
00:12:15مثل Open Hands. وهذا يتجاوز مجرد فكرة
00:12:18أننا نريد استنساخه أو تقليده فقط.
00:12:20لا، فعملية الاستنساخ واكتشاف كيفية
00:12:23نسخ هذه الأشياء تأتي بفوائد هائلة لنا،
00:12:26ليس فقط بسبب جزء القوالب الجاهزة، وهو أمر رائع،
00:12:30بل لأنك ستتعرف على الكود الفعلي
00:12:34الذي يجري تحت السطح، وتنتقل
00:12:36من المستوى الثالث إلى المستوى الرابع.
00:12:38يجب علينا الآن تجاوز مجرد النظر السطحي
00:12:41إلى هذه المواقع للإلهام عبر لقطات الشاشة.
00:12:44علينا الآن تعلم الغوص تحت سطحها،
00:12:48والنظر خلف الستار لرؤية كيف تم بناء هذه المواقع
00:12:51من حيث مكوناتها البرمجية الفعلية، ولغة HTML،
00:12:54وCSS، وJavaScript.
00:12:56والمستوى الرابع هو "المستنسخ" (The Cloner).
00:12:59هذا هو المكان الذي نتعلم فيه عبر "الاقتباس" من المحترفين.
00:13:02دعوني أكون واضحاً جداً.
00:13:04هذا المستوى لا يتعلق بـ:
00:13:05"سنذهب لسرقة المواقع ونسخها ونسبها
00:13:08لأنفسنا". ليس هذا هو الحال هنا.
00:13:10ما سنفعله هو العثور على مواقع نحبها
00:13:13ونقوم بتفكيكها ثم استخدامها كقالب
00:13:16نبني فوقه. وفي خضم هذه العملية،
00:13:20سنتعلم الكثير، تماماً مثل أي مهارة في أي مجال.
00:13:24كيف تطور مهاراتك؟ ترى ما يفعله المحترفون.
00:13:27تحاول محاكاتهم.
00:13:28وتتعلم الكثير من خلال محاولة تقليدهم.
00:13:30وبمرور الوقت تضع لمستك الخاصة وتصنع
00:13:33شيئاً أصلياً. هذا هو جوهر هذا المستوى.
00:13:35ولتحقيق أقصى استفادة من هذا،
00:13:37نحتاج للبدء في فهم ما يحدث في
00:13:39تصميم الواجهات الأمامية. ولتبسيط الأمر،
00:13:42يتكون التصميم من ثلاثة أجزاء؛ الأول هو HTML.
00:13:45اعتبره بمثابة الهيكل العظمي للموقع،
00:13:47فهو يحدد كيفية هيكلته. ولدينا CSS.
00:13:50وهو المسؤول عن التنسيق والجماليات؛
00:13:52فكر فيه كأنه الملابس التي يرتديها الموقع.
00:13:55ثم لدينا JavaScript.
00:13:56فكر في JavaScript كأنه العضلات.
00:13:59فهو ما يسمح بحدوث التفاعلات عند النقر
00:14:01على زر أو القيام بأي إجراء.
00:14:02ومن خلال النظر إلى هذه الأجزاء الثلاثة للموقع، سنتمكن
00:14:05من استنساخ الموقع أو استخدامه كقالب بشكل أفضل،
00:14:08وأيضاً فهم آلية عمله، أليس كذلك؟
00:14:10تلك الفكرة المتعلقة بتفكيك الموقع ومعرفة
00:14:13كيفية تنفيذهم للأمور. فكيف نفعل ذلك؟
00:14:15كيف يمكننا تفكيك موقع Open Hands مثلاً؟
00:14:17من الواضح أن لقطات الشاشة لا تكفي لأنها ليست نفس الشيء.
00:14:21حسناً، الأمر بسيط نسبياً. للحصول على كود HTML،
00:14:25سنذهب للموقع ونضغط على (Control + U).
00:14:28ما تراه هنا هو كود HTML بالكامل.
00:14:33لذا ما سنفعله هو نسخه،
00:14:37سنقوم بنسخ هذا الكود بالكامل.
00:14:39ثم نقوم بلصقه في كود «كلود».
00:14:42غالباً ما سيكون الملف كبيراً جداً؛ في هذه الحالة،
00:14:44يصل إلى 1152 سطراً من الأكواد. والآن في الأسفل
00:14:48تماماً من هذا الملف،
00:14:50يمكنك رؤية روابط لملفات CSS
00:14:54بالإضافة إلى ملفات JavaScript.
00:14:56وهذا ما أقوم بتحديده هنا في الأسفل.
00:14:58ستجد هذا في نهاية جميع ملفات HTML تقريباً،
00:15:01وسأقوم بتصغير الصورة قليلاً لتوضيح ذلك.
00:15:04قد يصعب رؤيته، لكن في الأسفل،
00:15:06لدينا ملفات JavaScript وكذلك CSS.
00:15:09هذه ملفات فعلية تحتوي أيضاً على كم هائل من الأكواد.
00:15:13لذا فما سنفعله هو أنه بعد إعطائه كود HTML،
00:15:17سنطلب أيضاً من كود «كلود» أن يلقي نظرة
00:15:19على ملفات JavaScript وCSS
00:15:22ليفهم حقاً ما يحدث. لذا كتبت:
00:15:24"ألقِ نظرة على ملفات CSS وJS أيضاً". يمكنك التوقف هنا.
00:15:29وسيقوم باستخدام خاصية (web fetch) من تلقاء نفسه لفحصها.
00:15:31لكن المشكلة في طريقة عمل هذه الخاصية هي أن كود «كلود»
00:15:35يستدعي نموذجاً أصغر للقيام بذلك نيابة عنه، أليس كذلك؟
00:15:39لذا فإن هذه النسخة من كود «كلود» لا تذهب فعلياً لتلك الصفحة.
00:15:42بل تستخدم نموذجاً أصغر يقوم بفحصها وتلخيصها
00:15:46وإعادتها لكود «كلود» الرئيسي.
00:15:47والمشكلة تكمن في أن ملفات CSS وJS كبيرة جداً وتحتوي
00:15:51على التفاصيل الدقيقة لكيفية بناء هذا الموقع.
00:15:54لذلك نحن نريد الكود بالكامل، لا أريد ملخصاً لهذه الملفات.
00:15:58لذا قمت بإنشاء مهارة تسمح لكود «كلود» بالقيام بذلك
00:16:03بشكل أفضل. إنها في الأساس أمر نصي مُحسّن.
00:16:04بحيث يسحب كل ما يحتاجه من ملفات CSS وJavaScript.
00:16:07لذا أقول له فقط: "استخدم مهارة تحليل الموقع" (site tear down skill).
00:16:12سأضع مهارة تحليل الموقع هذه داخل مجتمع المدرسة المجاني،
00:16:16والرابط موجود في الوصف.
00:16:18لذا عليك فقط تحميلها وستتمكن من القيام بذلك أيضاً.
00:16:21وبشكل عام، ماذا قلت؟ قلت: "إليك كود HTML لموقع Open Hands.
00:16:25ألقِ نظرة على ملفات CSS وJS أيضًا.
00:16:28استخدم مهارة "تفكيك الموقع" واستعن بهذه المعلومات لاستنساخ موقع Open Hands الأصلي بشكل أفضل.
00:16:31الآن، كيف سيعلمنا هذا؟ حسنًا، أولاً وقبل كل شيء،
00:16:36ربما ليس لديك أدنى فكرة عن كيفية قيامي بأشياء مثل هذه الخلفية، أليس كذلك؟
00:16:39صح؟
00:16:40ربما لا تفهم حقًا أو حتى تعرف نوع المصطلحات التي
00:16:43كان يجب عليك استخدامها لجعله يحاكي هذا بشكل أفضل، أليس كذلك؟
00:16:46عندما أعطيناه مجرد لقطات شاشة، حصلنا على هذا الشيء الذي يبدو،
00:16:50كما تعلم، قريب نوعًا ما،
00:16:52ولكن بجعل Claude Code ينظر فعليًا إلى ما يجري في العمق،
00:16:56يمكننا الآن الاعتماد على Claude Code ليعلمنا هذه الأشياء لأن Claude Code الآن
00:17:01يفهم فعليًا ما يحدث على مستوى البرمجة.
00:17:04يمكننا الآن إجراء حوار ذكي مع Claude Code ونقول: "مهلاً،
00:17:07كيف فعلوا هذا؟ ماذا يعني ذلك؟ ما هو GSAP؟"
00:17:11مثل "كيف قاموا بعمل رسوم التمرير المتحركة؟ كيف فعلوا هذا؟
00:17:13كيف فعلوا ذاك؟"
00:17:14ومع مرور الوقت، بعد استنساخ المزيد والمزيد من هذه المواقع واستخدامها
00:17:18كنماذج لأعمالك الخاصة، لأنك مرة أخرى،
00:17:19ستضع دائمًا لمستك الأصلية عليها.
00:17:21أنت فقط تستخدم هذا كأساس أولي.
00:17:23ستصبح أفضل في التصميم الأمامي (Front-end)،
00:17:26تمامًا كما تفعل مع أي مهارة أخرى.
00:17:29وهذه هي العملية التي لا تكتفي فيها بالاطلاع فحسب،
00:17:31بل تبدأ في إدخال تقنيات احترافية في بناء مواقعك،
00:17:34ولكن للانتقال إلى المستويات الإضافية. كما قلت، لا يمكنك أن تكون مجرد،
00:17:38كما تعلم، شخص يضغط عشوائيًا على لوحة المفاتيح مع Claude Code،
00:17:41تمامًا كما هو الحال مع كل شيء آخر تحدثنا عنه. لا يمكنك الضغط فقط على "قبول، قبول،
00:17:43قبول، التالي، التالي، التالي"، فكيف ستميز نفسك؟
00:17:46إذن ما هي المهارات التي نحتاج إلى إتقانها في هذه العملية؟
00:17:48نحتاج أن نتعلم قراءة وفهم الكود المصدري.
00:17:51وClaude Code يساعدنا في ذلك.
00:17:52نحتاج إلى تحديد أي التقنيات تعطي كل تأثير لأننا عند
00:17:57نقطة معينة يجب أن نكون قادرين على رؤية هذه المواقع و
00:18:02إدراك ما يحدث فيها فورًا. وأخيرًا،
00:18:04نحتاج إلى تعلم كيفية تكييف أنماط الاستنساخ هذه مع تصاميمنا الخاصة، صح؟
00:18:09نحن لا نسرق الأفكار، نحن نستلهم منها.
00:18:12وإذا لم تتقن هذه المهارات،
00:18:13ستقع في هذا الفخ، "سقف الاستنساخ"،
00:18:16ستكتفي بالنسخ، لكنك لن تستطيع الابتكار.
00:18:18ولن ترغب في فهم "السبب".
00:18:20وبالتالي ستصطدم بحد أقصى لقدراتك.
00:18:22وفي نهاية المطاف، يمكنني استبدالك بأي شخص من الشارع
00:18:25وأطلب منه فقط تنفيذ الخطوات الأولى والثانية والثالثة، أليس كذلك؟
00:18:27وهذا لن يوصلك إلى المدى الذي تطمح إليه.
00:18:29فلنرى ما استطاع Claude Code بناءه عندما أعطيناه كل هذا السياق البرمجي الإضافي،
00:18:32وها هي النسخة المحدثة.
00:18:35وهذه النسخة تبدو بوضوح أقرب بكثير إلى الأصل،
00:18:39خاصة الآن بعد أن أصبحت الخلفية تبدو واقعية.
00:18:41إذا قارنا بين الاثنين الآن، فمن الواضح أنها ليست مطابقة تمامًا بعد.
00:18:45كانت هذه في الأساس محاولته الأولى، لكنها أفضل بكثير،
00:18:48وأقرب بكثير مما كان لدينا.
00:18:50وإذا أردنا الاستمرار في التطوير عند هذه النقطة وتقريبه
00:18:54من أي شيء يعجبنا هنا، حسنًا، هذا أسهل بكثير، أليس كذلك؟
00:18:57لأنه الآن ينظر أساسًا إلى نفس "كتاب الوصفات" الذي
00:19:01يعتمد عليه موقع Open Hands، ويمكننا القول: "حسناً، دعني أغير هذا."
00:19:04دعني أغير ذاك. أرى كيف فعلوا ذلك. إليك كيف يمكننا محاكاته. تمام؟
00:19:07ومرة أخرى، هنا يمكننا بدء تلك العملية التعليمية. على سبيل المثال،
00:19:10تلك الخلفية الرائعة، كيف كانت تعمل؟
00:19:12وأيضًا كيف يمكننا الحصول على نفس الشيء الموجود في Open Hands حيث يتحرك الماوس
00:19:17ويقوم، كما تعلم، بإخفاء جزء منها.
00:19:19كل ما عليك فعله هو سؤال Claude Code: "كيف تعمل الخلفية؟"
00:19:22كيف يمكننا مطابقة هذا التأثير؟ وفي كل مرة تفعل ذلك،
00:19:25فإنك تضيف أداة أخرى إلى صندوق أدواتك.
00:19:27وهكذا يشرح Claude Code كيف يعمل هذا التأثير، والأفضل من ذلك أنه ينفذه الآن
00:19:32بشكل صحيح على خلفيتنا الخاصة. رائع حقًا، أليس كذلك؟
00:19:35ولكن لأسباب بديهية، لا نريد البقاء في المستوى الرابع.
00:19:38لا نريد أن نكون مجرد مقلدين، صح؟ نريد أن نضع لمستنا الخاصة.
00:19:42نريد أن نبدأ بجعل هذا العمل ملكًا لنا. كيف نفعل ذلك؟
00:19:45كيف نبدأ بالانتقال إلى المستوى الخامس ووضع لمستنا الخاصة؟ حسنًا،
00:19:48هنا نبدأ بالاستمتاع بالمكونات (Components) وأيضًا تصاميم
00:19:53الأصول المخصصة لنا. هنا نحضر أشياءنا الخاصة. ولم نعد نكتفي فقط
00:19:56بنسخ ما يفعله موقع آخر بالضبط.
00:19:57الآن، إحدى أسهل الطرق للبدء في ذلك هي العثور على مكونات عالية الجودة
00:20:02على مواقع مثل 21st.dev. لذا، في كثير من النواحي،
00:20:04هذا يشبه الطريقة التي وجدنا بها الإلهام للمواقع وجلبنا تلك
00:20:08الأجزاء، ولكن على مستوى مصغر، على مستوى المكونات.
00:20:11ففي مكان مثل 21st.dev، على سبيل المثال،
00:20:14يمكنني النظر إلى أشياء مثل الأزرار هنا على اليسار.
00:20:17وما سأحصل عليه هو مجموعة من
00:20:21تصاميم الأزرار المختلفة أساسًا. وإذا وجدت تصميم زر أعجبني، لنقل،
00:20:26كما تعلم، شيئًا كهذا. حسنًا، يمكنني حينها نسخ هذا الأمر (Prompt)،
00:20:29ووضعه في Claude Code وقول: "مهلاً، دعنا ندمج تصميم هذا الزر".
00:20:33وهذا ينطبق على أي نوع من الأزرار، صح؟
00:20:36لدينا أشياء لعروض الصور (Carousels)، ومناطق التمرير، والخرائط،
00:20:40وقوائم التنقل، والصور، وكل شيء.
00:20:42والأمر لا يقتصر فقط على 21st.dev. لدينا مواقع أخرى مثل CodePen، صح؟
00:20:46يحتوي CodePen على الكثير من التصاميم الرائعة التي يمكننا جلبها أيضًا.
00:20:50وموقع Monet هو موقع رائع آخر أيضًا. في الواقع،
00:20:52هناك مجموعة من الأماكن حيث يمكنك العثور على هذه الأنواع من المكونات الرائعة
00:20:57والبدء في دمجها في صفحتك.
00:20:59لكن ماذا لو أردنا شيئًا أكثر تخصيصًا؟
00:21:01لا أريد مجرد نسخ مجموعة من المكونات العشوائية التي وجدتها في مكان آخر.
00:21:04كيف أجعلها أصلية حقًا؟ حسنًا، لديك خياران.
00:21:08الأول هو أنك لا تزال تستخدم هذه المكونات من 21st.dev،
00:21:11لكننا نطلب من Claude Code تغييرها، أليس كذلك؟ فالأمر مجرد كود.
00:21:14هذا الأمر يعطينا الكود الدقيق وبعد ذلك يمكننا تعديله كما
00:21:18تشتهي أنفسنا، أو يمكننا حرفيًا إنشاؤه بأنفسنا. أعني،
00:21:21إذا توجهنا إلى Pinterest ورأينا صفحات هبوط رائعة مثل هذه
00:21:25والتي هي فنية للغاية تقريبًا، حسنًا، لا يوجد ما يمنعنا من
00:21:29استخدام الذكاء الاصطناعي لإنشاء نوع من الصور مثل هذه لتكون بمثابة
00:21:34عنصر جذب مذهل للناس عندما يدخلون إلى صفحتنا.
00:21:36ولا يجب أن تقتصر هذه على الصور الثابتة فقط. أعني،
00:21:39لدينا تمامًا القدرة على إضافة مقاطع فيديو إلى خلفيتنا،
00:21:42وربطها برسوم متحركة معينة عند التمرير، لكي نقوم مرة أخرى،
00:21:45بأخذ الأفكار التي اكتشفناها في الخطوة الرابعة ونجعلها خاصة بنا.
00:21:49لذا لنفعل ذلك فعليًا. لنقم بإعادة تصميم صفحتنا بسرعة،
00:21:53ونبتعد عن استنساخ موقع Open Hands ونصمم شيئًا مثل
00:21:57عمل فني رائع بالذكاء الاصطناعي وليكن هذا هو ما يراه الزائر عند دخول موقعنا.
00:22:01وأنتم تعرفون الطريقة الآن،
00:22:02أولاً نحتاج للعثور على نوع من الإلهام وبعد التمرير في
00:22:06Pinterest لفترة من الوقت،
00:22:07بدأت أرى الكثير من المواقع مثل هذه حيث لدينا نوع من الصور الكرتونية
00:22:10أو الفنية لخلفية قسم الصدارة (Hero section).
00:22:14ثم سيكون لدينا بعض نصوصنا على اليسار.
00:22:16هنا يمكنك البدء في إبراز سردك القصصي البصري، صح؟
00:22:19ما هو التطبيق الذي ننشئه؟ التطبيق هو Argus، صح؟
00:22:22ونحتاج إلى ابتكار شعار (Tagline) يفضل أن يكون مرتبطًا
00:22:27بالصورة نفسها. مثل، ما الذي نحاول الوصول إليه مع Argus؟ حسنًا،
00:22:30Argus، كما تعلمون، شخصية أسطورية بـ 10,000 عين.
00:22:33نحن نتحدث عن وسائل التواصل الاجتماعي.
00:22:34نتحدث عن اكتشاف الأشياء قبل أن يفعلها الآخرون.
00:22:37لذا فالشعار الذي توصلت إليه كان "شاهد ما هو آتٍ" ببساطة.
00:22:41إنه شعار محكم. وأنتم تعرفون من ساعدني في الوصول لذلك.
00:22:44من الواضح أنه كان Claude Code. وبعد ذلك ما فعلته مع Claude Code هو،
00:22:47أنني قلت تقريبًا: "مهلاً، كما تعلم،"
00:22:49نحن نتحدث هنا عن السرد القصصي البصري.
00:22:51ما هي بعض الأفكار التي يمكننا الخروج بها للصور؟
00:22:54لأنني في هذه المرحلة لا أريد، نحن نقوم بعملنا الخاص، صح؟
00:22:57يمكنني استلهام المفاهيم العامة لما تراه هنا من ناحية الصور وكيفية
00:23:01إعدادهم للأمور، لكن الصورة يجب أن تكون من تصميمي. ومرة أخرى،
00:23:04وجود نوع من السرد القصصي البصري المرتبط بما يفعله تطبيقك
00:23:07فعليًا سيقطع بك شوطًا طويلاً جدًا.
00:23:10لذا ما انتهيت إلى فعله هو إنشاء صورة بناءً على بعض
00:23:15الأفكار التي أعطاني إياها Claude Code، واعتمدت فعليًا على Midjourney في هذه،
00:23:18الآن يمكنك استخدام أي نوع من مولدات الصور الذي تريده،
00:23:21سواء كان Nano Banana Pro أو Seed Dream، لا يهم حقًا.
00:23:24أنا أحب Midjourney حقًا لهذا النوع من القطع الفنية المفاهيمية
00:23:28لأن Midjourney، خاصة الإصدار السابع،
00:23:31لم أختبر الإصدار الثامن كثيرًا بعد.
00:23:33يمكنك إعطاؤه نوعًا من الأوامر الغريبة. مثل الأمر الذي أعطيته إياه كان،
00:23:38أحتاج إلى صورة خلفية ستكون صفحة الهبوط لموقع يسمى
00:23:41Argus. والشعار هو "شاهد ما هو آتٍ".
00:23:43فقط بمثل هذا الأمر الضعيف والغامض للغاية،
00:23:47حصلت على مجموعة من الأشياء الرائعة والمختلفة التي استطعت الاختيار من بينها.
00:23:50ورأيت هذا وقلت لنفسي: "هذا يبدو رائعًا حقًا، صح؟" ويمكنني فقط،
00:23:54يمكنني بالفعل أن أتخيل الآن،
00:23:55مثل وضع المعلومات هنا على اليسار،
00:23:59ويمكننا ربما وضع بعض الأشياء في الأعلى. يمكنني التلاعب بهذا. أعتقد أن
00:24:02هذا رائع جدًا. ربما نقوم حتى بنوع من الرسوم المتحركة في مرحلة ما.
00:24:06بمجرد حصولي على صورتي، يصبح الأمر سهلاً من هناك.
00:24:10سأقوم فقط بتحميل هذه الصورة، وإعطائها لـ Claude Code وقول: "مهلاً،"
00:24:13أريد إعادة تصور صفحة الصدارة باستخدام هذه الصورة كخلفية.
00:24:17وداخل Claude Code قلت،
00:24:19أريد فعليًا تغيير الواجهة الأمامية بالكامل.
00:24:21أريد استخدام الصورة التالية كخلفية لقسم الصدارة.
00:24:24دعنا نضع المعلومات حول تطبيق Argus على الجانب الأيسر،
00:24:27ونترك بعض المساحة الفارغة على اليمين لإظهار الصورة ونجعل الشعار
00:24:30"شاهد ما هو آتٍ". سنرى ما سيفعله عند هذه النقطة. ومرة أخرى،
00:24:34هذا هو المستوى الذي تحتاج فيه لبدء إطلاق العنان لملكاتك الإبداعية
00:24:37لأنك حتى هذه النقطة،
00:24:39كنت مطلعًا على الكثير من التصاميم الأمامية المختلفة والتي تختلف
00:24:43عن مجرد تلك الأشياء التقليدية للغاية التي تراها في كل قوالب الـ SAS.
00:24:46وهذا يعني بعض الفن الرائع، أو أي شيء، مرة أخرى،
00:24:48السرد القصصي البصري هو ما نسعى إليه هنا وسوف يرفع من
00:24:52مستوى أدائك حقًا.
00:24:52وها هو شكل قسم الصدارة المحدث لدينا مع تلك الخلفية
00:24:56الجديدة تمامًا. وقد جعلت هذا أصغر قليلاً،
00:24:58لكي تتمكن من رؤيته بالكامل وقد قام Claude Code أيضًا، كما تعلمون،
00:25:02بتحديث كافة الألوان. الآن، مرة أخرى، كانت هذه مجرد المحاولة الأولى.
00:25:06كل ما فعلناه هو إضافة هذه الخلفية، ولكن على الفور،
00:25:09تبدأ في الشعور بأن الأمر أصبح، لا أدري، أكثر أصالة،
00:25:12وأكثر إبداعًا وتميزًا، أليس كذلك؟
00:25:15والآن نبدأ في إضافة المزيد والمزيد من لمساتنا الخاصة إليه.
00:25:19وللبدء يمكن أن يكون ذلك ببساطة مجرد تحسين دقة (Upscaling) هذه الصورة.
00:25:21يمكنك القيام بذلك داخل Midjourney، لأننا كما نرى هنا،
00:25:24تبدو الصورة ممددة قليلاً وليست بالتفاصيل التي ترغب بها،
00:25:28أو يمكننا فعل شيء مثل إضافة حركة.
00:25:30لا يشترط أن تكون الخلفية ثابتة.
00:25:32يمكننا بالفعل وضع مقطع فيديو هناك في الخلف أيضًا.
00:25:34وتحويلها إلى فيديو هو أمر سهل حقًا.
00:25:36ستتوجه فقط إلى مكان مثل Kling 3.0 أو Veo 3.1،
00:25:40أو أي مكان يمكنك فيه تحديد إطار البداية.
00:25:41ومن الناحية المثالية يمكنك تحديد إطار النهاية أيضًا. كما ترى هنا على اليسار،
00:25:45بهذه الطريقة لن تظهر حركة عشوائية مجنونة لأن عليك أن تتذكر أنه،
00:25:49من الأفضل أن يكون مقطع الفيديو عبارة عن حلقة كاملة (Loop).
00:25:52أحيانًا قد يكون من الصعب جعل صور الذكاء الاصطناعي تتكرر في حلقة بشكل صحيح.
00:25:55لذا فإن الخيار الثاني الأفضل هو مجرد إنشاء فيديو طويل إلى حد ما لمدة 15 ثانية تقريبًا.
00:25:59وتريد أن تكون الحركة خفيفة. مثل ما تراه هنا، تمام؟
00:26:03إذا كان هذا خلفية لي، حتى مع ثبات الطيور تمامًا،
00:26:07وهو أمر لا بأس به تمامًا، فكأنك لديك نوع من تأثير الـ Parallax.
00:26:11وبما أنها صفحة الصدارة وهذا الفيديو مدته 15 ثانية،
00:26:14فإن فرصة أن يجلس شخص ما هناك لمدة 30 ثانية ويشاهد
00:26:18الأمر بالكامل هي فرصة ضئيلة. لذا إذا حدثت هزة في النهاية،
00:26:22ستظل الأمور بخير. ولكن لحسن الحظ في هذه الحالة،
00:26:24بما أن الحركة كانت خفيفة للغاية،
00:26:25فبالكاد يمكنك ملاحظة لحظة الانتقال من الثانية 15 إلى الثانية الأولى.
00:26:29لذا سنستخدم هذه. وربما تتساءل أيضًا،
00:26:31ماذا عن أمور الأداء؟ حسنًا، فيما يتعلق بالأداء على أجهزة الكمبيوتر،
00:26:35سيكون الأمر على ما يرام مع الفيديو، لكننا سنخبر Claude Code: "مهلاً،"
00:26:38إذا كان مستخدمًا عبر الجوال يدخل إلى صفحة الويب الخاصة بك،
00:26:42لن يقوم بتحميل الفيديو لهم، بل سيقوم بتحميل تلك الصورة الثابتة فقط.
00:26:45لذا أعطيته الصورة الجديدة المحسنة وقلت له: استخدم هذه للهواتف المحمولة.
00:26:50ثم أعطيته رابط الفيديو وقلت له: مهلاً،
00:26:52استبدل ذلك في القسم الرئيسي (Hero).
00:26:54وإليكم نظرة على الصفحة الآن مع الحركة،
00:26:58أليس كذلك؟ أعتقد أنها تبدو جيدة جداً. الأمر الآخر هو أنها هادئة، صح؟
00:27:02لا تريد وضع حركة صاخبة وكأن هناك لعبة فيديو كاملة تدور
00:27:06في الخلفية، إلا إذا كنت تعرف ما تفعله،
00:27:07لكن شيئاً كهذا مع حركة السحب الخفيفة،
00:27:11والمياه تتحرك في الأسفل، تماماً؟ مرة أخرى، هذا يمنح،
00:27:14هذا يمنح صفحة الويب الخاصة بك،
00:27:15بعض الشخصية، وإعطاء صفحتك طابعاً أصلياً خاصاً هو ما
00:27:19يدور حوله المستوى الخامس. كما أقول دائماً، في المستويات الأربعة الأولى،
00:27:22كنا نتعلم الأساسيات ونرى ما يفعله المحترفون؛ أما هنا في المستوى الخامس،
00:27:25فنحن نقوم بالتخصيص فعلياً. لذا تماماً كما فعلت مع القسم الرئيسي،
00:27:28هكذا يجب أن تبدأ في التعامل مع كل قسم آخر، حسناً؟
00:27:32مثل هذه البطاقات، هذه البطاقات بشعة. والخلفية هنا مملة نوعاً ما.
00:27:36إنها تتكرر بنفس الشكل تماماً كل مرة. فماذا سأفعل؟
00:27:38سأبحث عن الإلهام. سأذهب إلى "21st Thought Dev" أو إلى "Awwwards".
00:27:42سأحضر الأفكار إلى "Claude Code"، ثم سأقوم بالتعديل والتكرار،
00:27:45مراراً وتكراراً حتى أصل إلى نتيجة تعجبني حقاً. والآن في هذه المرحلة،
00:27:48وبينما تقوم بكل هذه التعديلات البصرية، ستشعر ببعض
00:27:51القيود أثناء العمل داخل "Claude Code". مجدداً،
00:27:54هناك دائماً هذا النوع من التوتر بين التواجد داخل واجهة الأوامر
00:27:58واستخدام النصوص وبين محاولة العبث بأشياء في وسيط بصري. لذا في الخطوة السادسة،
00:28:03سنبدأ بالخروج من "Claude Code" قليلاً، لأنه هنا
00:28:06في المستوى السادس، نبدأ في جلب بعض الأدوات الخارجية التي تتيح لنا
00:28:11الدقة التامة في كيفية تجميع هذه العناصر البصرية معاً.
00:28:14وهناك الكثير من الأدوات المتاحة تحت تصرفنا.
00:28:17لدينا أشياء مثل "Paper.design"، و"Stitched"، و"Figma"، صح؟
00:28:21ولدينا أيضاً "Pencil.dev".
00:28:22أنت الآن تمتلك البناء والمهارات اللازمة لاستخدام هذه
00:28:26البرامج الخارجية لإجراء مزيد من التجارب، وأداة رائعة للتجربة لأنها
00:28:29تعتمد بشكل كبير على الذكاء الاصطناعي وبسيطة الاستخدام هي "Stitched". كما أنها مجانية، صح؟
00:28:33هذه الأداة من جوجل وتمنحنا أساساً لوحة بصرية للعبث
00:28:37بأمور تصميم الواجهات الأمامية.
00:28:38لذا ما فعلته هنا هو أننا لا نبدأ أي شيء من الصفر.
00:28:42نحن نقوم بإعادة تصميم. لذا أعطيتها لقطات شاشة لموقعنا،
00:28:45سواء للقسم الرئيسي أو لبقية الأجزاء.
00:28:47وقلت لها: إليكِ نظرة على وضع صفحة الويب الحالي. يعجبني القسم الرئيسي حقاً.
00:28:51تعجبني الناحية الجمالية هناك والألوان،
00:28:53لكنني أريد تحديث النصف السفلي بالكامل من موقعنا، حسناً؟
00:28:57يبدو مسطحاً للغاية، أليس كذلك؟
00:28:59أريد جلب نوع الصور والألوان التي نستخدمها
00:29:03في الأعلى. دعونا نرى ما يمكنكِ ابتكاره.
00:29:05لذا دعونا نلقي نظرة على ما أنتجته لنا من إعادة تصميم.
00:29:08وهذا هو ما حصلنا عليه.
00:29:10والأمر الرائع في "Stitched" هو أنني أستطيع جعلها تعيد تصميم التصميم الجديد.
00:29:14فإذا قمت بتحديد هذا،
00:29:15يمكنك رؤية الخيارات في الأسفل ويمكنني توجيهها مثل أي روبوت دردشة.
00:29:18يمكنني أيضاً النقر بزر الماوس الأيمن والذهاب إلى "Variants" (الخيارات البديلة) ومرة أخرى،
00:29:22تغيير التخطيط ونظام الألوان والصور وما إلى ذلك.
00:29:24وبما أن هذا كان إعادة تصميم في "Stitched" ولم أكن أبني شيئاً من
00:29:28الصفر، فهذه مجرد صورة أنشأتها الأداة.
00:29:30لكن هذا شيء يمكنني تماماً النقر عليه بزر الماوس الأيمن ونسخه.
00:29:34ثم إعادته إلى "Claude Code" والقول: مهلاً،
00:29:37ما رأيك في هذا؟ صح؟ مجدداً،
00:29:38هذه الأدوات البصرية رائعة جداً لعملية توليد الأفكار.
00:29:43وهناك الكثير منها. "Pencil.dev" هي أداة أخرى،
00:29:46ستراها في كل مكان.
00:29:47وهي تعمل بشكل جيد جداً إذا كنت تستخدم "Cursor" أو "VS Code"،
00:29:50لأنك تستطيع فتح اللوحة وتعديل الأشياء في الوقت الفعلي.
00:29:54هناك مجموعة من الأدوات في هذا المجال والمزيد يدخل السوق
00:29:58كل أسبوع. لذا وضعت تلك الصورة مرة أخرى في "Claude Code" وقلت تقريباً: مهلاً، ما رأيك في هذا؟
00:30:01ما رأيك في تأثير "Glassmorphism" (التصميم الزجاجي) هذا الذي حصلنا عليه
00:30:03مع الصورة في الخلفية؟ دعونا نجرب ذلك.
00:30:06وهذا هو تقريباً ما ستفعله من الآن وحتى يصبح الموقع
00:30:08كما تريده تماماً،
00:30:12لأن هذه هي مرحلة تصميم الواجهات حيث تقوم الآن بالممارسة والتعديل المستمر.
00:30:12ستعدل وتعدل وتعدل.
00:30:15بحلول الآن، ستكون قد بنيت المهارات لتعرف ما تسعى إليه،
00:30:16لكن هذه عملية تكرارية للغاية ولا يوجد اختصار حقيقي هنا.
00:30:21لكن مرة أخرى، لديك كل الأدوات تحت تصرفك الآن،
00:30:25سواء لإيجاد الإلهام أو للتجربة الفعلية.
00:30:27لذا، بعد حوالي 20 دقيقة من التجارب الخاصة بي،
00:30:31هذا ما حصلت عليه مع "Argus". أولاً،
00:30:34ستلاحظون بعض التغييرات الصغيرة التي تمنح الموقع ثقلاً،
00:30:37وتعطيه طابعاً أكثر رقياً. أولاً قسم التحميل، صح؟
00:30:40عندما أقوم بتحديث الصفحة، ماذا ترون؟
00:30:43تلاحظون نوعاً من التردد قبل تحميل كل النص وهذا يمنحه
00:30:45بعض الثقل، صح؟ يجعله يبدو أكثر رصانة.
00:30:49تلاحظون أيضاً أنني غيرت الخطوط. الخطوط مهمة جداً. فن الخطوط ضخم.
00:30:52أين يمكنك الذهاب لرؤية خطوط مختلفة والحصول على بعض الإلهام؟
00:30:57حسناً، مكان رائع هو "Google Fonts".
00:31:00لديهم ملايين الخطوط، وكلها مجانية.
00:31:03وهي مقسمة حسب الأنواع المختلفة، ويمكن لـ "Claude Code" استخدامها جميعاً.
00:31:06لذا تأكد من مراجعة "Google Fonts" إذا كنت محتاراً
00:31:08ولا تعرف أي خط يجب استخدامه. لقد أضفنا قسم تمرير هنا في الأسفل.
00:31:11أضفنا هذا الشريط المتحرك في الأسفل الذي يعمل أيضاً كحدود
00:31:14بين الفيديو الخاص بنا وصورة الخلفية هنا بالأسفل. من قبل،
00:31:19كان الانتقال من قسم الفيديو الرئيسي إلى نفس الصورة كخلفية
00:31:25مزعجاً للغاية، لكن هذا يمنحه حدوداً طبيعية جميلة.
00:31:30ستلاحظون أيضاً التغييرات التي جلبناها من "Stitched".
00:31:35أصبح لدينا الآن هذا التأثير الزجاجي الذي لا نزال بحاجة لتعديله
00:31:38قليلاً. ستلاحظون أنه قد ينقطع قليلاً عندما يتحرك،
00:31:41لكنه يبرز مرة أخرى ذلك العمل الفني في الخلفية الذي يعطي لموقعنا
00:31:44طابعاً خاصاً. وبعد ذلك يمكنك أيضاً رؤية بعض الأشياء البسيطة، صح؟
00:31:48إذا قمت بالتحديث هنا،
00:31:52ستلاحظون العداد وهو يتصاعد من الصفر إلى 10 ملايين. أعني،
00:31:54هذه هي اللمسات الهامشية اللطيفة التي تظهر أنك اهتممت حقاً
00:31:59بالموقع ولديك مستوى معين من الفخر المهني،
00:32:03ستلاحظون حتى هذا التوهج الضوئي الذي يمر فوق أدوات الذكاء الاصطناعي
00:32:07واستراتيجية المحتوى. ومرة أخرى، إنها مجرد هذه الأشياء الصغيرة.
00:32:10إنها هذه التفاصيل الصغيرة التي، لصدق القول، لن يلاحظها
00:32:12معظم الناس على الإطلاق. ومع ذلك، عندما تجمعها جميعاً،
00:32:16ما تحصل عليه في النهاية هو شيء يبدو متماسكاً وشيء
00:32:20أنت اهتممت به وابتكرته، بغض النظر عما إذا كنت قد استخدمت الذكاء الاصطناعي كأداة أم لا.
00:32:24النقطة هي أنه تم صياغته بعناية، أليس كذلك؟ يحتوي على كل تلك التفاصيل الصغيرة.
00:32:27أعني، مثل شريط التمرير في الأعلى، صح؟ ترون كيف يتقدم.
00:32:31مرة أخرى، إنها مجرد كل هذه التفاصيل الصغيرة جداً. فكيف وجهت هذا الأوامر؟
00:32:34حسناً، بصراحة،
00:32:38كان الأمر مجرد مزيج من كل ما تحدثنا عنه حتى الآن. مثل،
00:32:40لقد رأيت أنواع الأشياء التي تعجبني.
00:32:42آخذ لقطات شاشة لها وأحضرها إلى "Claude Code"، ولكن الأكثر من ذلك،
00:32:45أنا لست خبيراً في تصميم الويب. لذا ما فعلته في بعض الأشياء،
00:32:48هو أنني عرفت على الفور، مهلاً،
00:32:52أعجبتني بطاقات التصميم الزجاجي التي رأيناها في "Stitched"، صح؟
00:32:53لأن "Stitched" هي التي أعطتنا هذه الفكرة أولاً.
00:32:57وعندما صنعها "Claude Code" في الأصل، كانت مسطحة نوعاً ما، صح؟
00:32:59لم تكن تبرز من الصفحة. فقلت: مهلاً،
00:33:03دعونا نعطيها بعض الثقل. دعونا نجعلها تبرز من الصفحة.
00:33:06لكن ما قلته أيضاً لـ "Claude Code" هو: مهلاً،
00:33:08ما أريدك أن تفعله هو إجراء بحث على الويب عن أفضل ممارسات
00:33:12تصميم الويب عندما يتعلق الأمر بالقيام بهذه الأنواع من الأشياء.
00:33:17وإلى جانب اكتشاف كيفية جعل هذه البطاقات تبرز وتعطيها بعض الثقل،
00:33:20اقترح بعض الأشياء الأخرى التي يمكن أن تجعل موقعنا يبدو أكثر رقياً
00:33:22ولكن بطريقة هادئة. وقد جاء بمجموعة من الأفكار المختلفة.
00:33:25جعلته يمر عبر جميع الأفكار؛ استبعدت بعضها وأبقيت البعض الآخر،
00:33:29لكن هذا هو الإيقاع العام للقيام بذلك، صح؟
00:33:32Hice que revisara todas las ideas. Algunas las descarté, otras las conservé,
00:33:36يمكن لـ "Claude" الخروج إلى الويب ورؤية أفضل الممارسات، ولكن تذكر،
00:33:40أنت دائماً من يسيطر.
00:33:41أنت في مقعد القيادة ولا تخف من الاستمتاع بهذا الأمر.
00:33:45كما قلت، كل هذه الأشياء الصغيرة هي ما يمنحه، مجدداً،
00:33:47الشخصية وهي ما يجعله ملكك، صح؟
00:33:50كلما استطعنا جعله ملكك وانعكاساً لروحك الإبداعية في هذا
00:33:53المجال، سيبدو أفضل. حقاً،
00:33:57لأنه إذا كان انعكاساً لك ولما تريده على الشاشة وما
00:34:02تحاول تصويره، فمن الصعب حقاً تسمية ذلك "حشو ذكاء اصطناعي".
00:34:04من الصعب تسميته قالب ذكاء اصطناعي لأنه ملكك.
00:34:08وهكذا بينما يبدو هذا المستوى سطحياً حول استخدام هذه الأدوات الخارجية مثل "Stitched"،
00:34:11أعتقد حقاً أن هذا المستوى السادس هو كل ما قلته للتو.
00:34:14استخدام هذه الأدوات الخارجية مثل "Stitched" للتكرار.
00:34:17ولكن في النهاية في هذا المستوى، هذا هو المكان الذي تصبح فيه قادراً أخيراً على التفكير بإبداع والتعبير عن نفسك
00:34:19في مجال تصميم الواجهات واستخدام "Claude Code" كأداة، بدلاً من
00:34:23المستويات القليلة الأولى حيث كنا نكتفي بمجرد المتابعة. وهذا يتركنا مع الطبقة الأخيرة، الطبقة السابعة، صح؟
00:34:25وماذا يحدث هناك؟ وما هو موضوع الـ 3D هذا؟
00:34:27حسناً، تنبيه بالحرق: هذا مكان ربما لن نلعب فيه على الإطلاق،
00:34:31صح؟ عندما نتحدث عن الحدود المتقدمة والمعماري وأشياء الـ 3D،
00:34:34فهنا يلعب الكبار.
00:34:37هذا ليس شيئاً سنتمكن من القيام به حقاً، كما أعتقد، اعتباراً من اليوم،
00:34:41أواخر مارس 2026. لا أعرف ما إذا كان هذا في متناول يدنا بعد،
00:34:45لأننا بدأنا نتحدث عن أشياء مثل "Web GL" المخصص والمظللات والتجارب ثلاثية الأبعاد.
00:34:51هذا ما نتحدث عنه؛ مواقع ويب تبدو كأنها لعبة فيديو.
00:34:55خذوا على سبيل المثال هذا الموقع هنا.
00:34:57هل تعتقدون أن هذا شيء يمكننا فيه فقط ضغط Control-U و Control-A،
00:35:02وإلقاء نظرة على كود HTML و CSS لنرى ما يحدث؟
00:35:05لا، لا، هذا كله... هذا بمثابة فن، صح؟
00:35:07هذا فريق من المصممين الذين قضوا وقتاً طويلاً جداً
00:35:12في تجميع كل هذا وهو رائع بكل المقاييس. الآن،
00:35:13من الناحية النظرية، هل يمكن للذكاء الاصطناعي فعل ذلك؟ ربما، لكن سأكون صادقاً. هذا
00:35:17أبعد بكثير عني وعنك.
00:35:20وبصراحة لقد وضعت هذا هنا فقط لأريكم ما هو ممكن.
00:35:25لأنك عندما ترى بعض المواقع مثل هذه، وإذا كنت تريد رؤية المزيد منها،
00:35:30توجه إلى موقع "Awwwards" الذي تحدثت عنه سابقاً، واذهب إلى
00:35:34اختياراتهم لـ "موقع اليوم" و"موقع الشهر"، فجميعها تشترك في
00:35:37نفس الشيء حيث أنها جميعاً أعمال مخصصة للغاية.
00:35:41وربما هذا شيء سيسمح لنا الذكاء الاصطناعي بالعمل فيه خلال بضع سنوات.
00:35:45لكنه أمر رائع حقاً.
00:35:47إن مجال تصميم المواقع بالكامل مثير للاهتمام للغاية.
00:35:50هذه الأشياء هي فن خالص. وكما قلت،
00:35:53عندما تبدأ لأول مرة في هذا المجال،
00:35:54ترى فقط نفس برمجيات الخدمات (SaaS) مراراً وتكراراً.
00:35:57ولكن عندما ترى أشياء كهذه، يندهش عقلك تماماً.
00:36:00وهذا هو بالضبط المستوى السابع.
00:36:03وإذا كنت تعرف كيف تفعل أشياء كهذه بالذكاء الاصطناعي،
00:36:07فيجب أن تكون أنت من يصنع الفيديوهات على يوتيوب،
00:36:09لأنني أود حقاً تعلم الطريقة. ولكنني أنشأت هذا المستوى فقط بصراحة
00:36:12لأعرض موقع "Igloo" هذا، لأنه رائع جداً.
00:36:16لذا، تأكد من إلقاء نظرة عليه ودع عقلك يندهش
00:36:17ويفكر فيما يمكنك فعله في المستقبل.
00:36:19وهنا سأترككم في نهاية مستوياتنا السبعة لتصميم الواجهات
00:36:22باستخدام "Claude Code". ما آمل أن تكونوا قد استفدتم منه أكثر من
00:36:24أي شيء هو فكرة التدرج في المهارات للوصول
00:36:27إلى شيء كهذا. لأنه أمر ممكن تماماً.
00:36:29والفكرة هي أننا نحتاج أولاً لرؤية أشياء تعجبنا،
00:36:30ثم نحتاج لتعلم كيفية تفكيكها.
00:36:34فكرة محاكاة المواقع أعتقد أنها مهمة جداً جداً، صح؟
00:36:38لأنك ستتعلم الكثير من خلال جعل "Claude Code" يشرح لك
00:36:42كيف قام شخص آخر بإنشاء موقع أحببته. ومن خلال تلك العملية،
00:36:43ستتثقف حول كل هذه التقنيات والتأثيرات المختلفة التي
00:36:46لم تكن تعرف حتى أنها ممكنة. ومن خلال تلك العملية،
00:36:51يمكنك بعد ذلك الذهاب لموقعك الخاص والبدء في تطبيقها
00:36:56بأسلوبك الإبداعي الخاص، صح؟ هذا هو المغزى الحقيقي.
00:36:58المغزى ليس: مهلاً، هناك هذه المهارة الواحدة المميزة جداً وتستخدمها
00:37:01في "Claude Code" وفجأة، انظر للموقع! صدقوني،
00:37:03لو كان الأمر بهذه السهولة لكانت جميع المواقع تبدو رائعة.
00:37:06ولكن ليست كل المواقع جميلة. لذا من الواضح أن الأمر ليس بتلك السهولة، صح؟
00:37:10هناك ما هو أكثر من ذلك. أعني، فكرة الذوق وأن الذكاء الاصطناعي لا يملك ذوقاً،
00:37:14أعتقد أن هذا صحيح نوعاً ما، ولكن الأدق هو فكرة أننا
00:37:18نواجه وقتاً صعباً للغاية في التعبير عن ذوقنا،
00:37:21ونواجه صعوبة في التعبير عن ذوقنا لأننا لا نعرف حتى الكلمات الصحيحة
00:37:26لاستخدامها لأننا لسنا مصممي ويب. نحن لا نعرف المصطلحات.
00:37:30ولا نعرف التسميات التقنية. وهذا أمر شائع جداً
00:37:33في كل ما يتعلق بالذكاء الاصطناعي بشكل عام، وليس فقط في تصميم الويب.
00:37:37وهذا ينطبق أيضاً على أي نوع من أمور البرمجة؛ فإذا لم تكن من أهل هذا المجال،
00:37:40فأنت ببساطة لا تعرف كيف تتحدث اللغة حرفياً. وهذا يخلق نوعاً من
00:37:44قصور في الترجمة والتواصل بينك وبين "Claude Code"
00:37:47والنتيجة النهائية تصبح شيئاً رديئاً وعادياً، ولكن نأمل من خلال
00:37:48اتباع خارطة الطريق هذه، أن ترى مساراً للأمام لتخفيف بعض تلك العوائق بمرور الوقت.
00:37:53آمل أن تكونوا قد استفدتم من ذلك. لقد استمتعت بالقيام بهذا العمل.
00:37:57أخبروني في التعليقات برأيكم، وكالعادة تأكدوا من مراجعة
00:38:02Chas AI Plus إذا كنتم ترغبون في الحصول على دورة "Claude Code" الاحترافية.
00:38:05يسعدنا انضمامكم إلينا هناك، وسأراكم لاحقاً.