00:00:00هناك وحش يكمن داخل Claude Code، ويُدعى "AI Slop".
00:00:03تدرجات أرجوانية، وخط Inter لكل شيء، ونفس تصميم البطاقات في كل
00:00:09موقع إلكتروني. أنت تعرف نوع الـ AI Slop الذي أتحدث عنه،
00:00:12ولكن اليوم سأعطيك 10 أدوات مختلفة لمساعدتك في القضاء على هذا الوحش.
00:00:16لا، فليست أي منها مهارة تصميم الواجهات الأمامية. في الواقع،
00:00:20الكثير من هذه الأدوات جديد نسبياً.
00:00:22لذا حتى لو كنت في مجال تصميم Claude Code لفترة من الوقت،
00:00:26أعدك بأنك ستتعلم شيئاً جديداً اليوم.
00:00:28الآن، كل هذه الأدوات التي سنستعرضها اليوم تخدم الغرض نفسه أساساً،
00:00:31وهو منحك فرصة حقيقية لإنشاء تصميمات واجهة أمامية عالية الجودة
00:00:35باستخدام Claude Code، لأنه على الرغم من جودة Claude Code،
00:00:39إلا أن هذا المجال هو أحد المجالات التي يعاني فيها من قصور شديد.
00:00:42والأداة الأولى في القائمة هي Impeccable.
00:00:44هذه مهارة واحدة تتضمن 18 أمراً.
00:00:46وسأضع رابطها في الوصف بالإضافة إلى كل الأدوات الأخرى التي سنغطيها
00:00:50اليوم.
00:00:51ما يعجبني حقاً في Impeccable هو أن قدراتها واسعة النطاق للغاية.
00:00:55هي مهارة واحدة، لكنها تضم 18 أمراً.
00:00:58وإذا اتبعنا الرابط الموجود على GitHub إلى impeccable.style،
00:01:01يمكننا رؤية جميع أوامرهم قيد التنفيذ. والأفضل من ذلك،
00:01:05يمكننا رؤية مخرجات الذكاء الاصطناعي التقليدية، مثل خط Inter والتدرجات الأرجوانية،
00:01:09ثم صورة "ما بعد" باستخدام الأوامر المختلفة. فعلى سبيل المثال،
00:01:15لدينا شيء مثل "Clarify"،
00:01:16وهو مخصص بالكامل لأخطاء تجربة المستخدم ورسائل الخطأ.
00:01:19ويمكنك رؤية الفرق بين الاثنين هنا.
00:01:21كما أن لديه إضافة لمتصفح Chrome،
00:01:23والتي ستبرز جماليات الـ AI Slop مباشرة على صفحة الويب الخاصة بك،
00:01:28كما في هذا المثال. ويعجبني حقاً كيف تستخدم هذه المهارة مفهوم "النمط المضاد".
00:01:32فهي تعلم النماذج اللغوية الكبيرة أساساً
00:01:34كيف يبدو الـ AI Slop فعلياً؛ تلك الزخارف الحدودية،
00:01:38وحدود علامات التبويب الجانبية التي تراها في كل مكان،
00:01:42والمخططات البيانية المصغرة، وتأثير الزجاج الشفاف، أليس كذلك؟
00:01:45نحن نرى هذه الأشياء مراراً وتكراراً.
00:01:47فلماذا لا نستخدم مهارة تخبر النماذج اللغوية: "هذا هو الـ AI Slop بعينه"؟
00:01:52بدلاً من استخدام مهارة تصميم الواجهة الأمامية التي تكتفي بقول:
00:01:54"من فضلك لا تفعل AI Slop"؛ فهذا لا يفلح. وكما يمكنك أن تتخيل،
00:01:58هذه المهارة غنية جداً كما نرى هنا. وسأستمر في التمرير.
00:02:03وذلك لأنها تحتوي على مراجع متعددة لكل مجال تصميم
00:02:07محدد.
00:02:08يمكنك اعتبارها مهارات فرعية، بالإضافة إلى الـ 18 أمراً التي ذكرتها.
00:02:13الآن،
00:02:14أسهل طريقة لرؤية كل هذه الأوامر هي الذهاب إلى وثائق Impeccable.
00:02:17وكما رأيت في الصفحة الرئيسية،
00:02:21يمكنك رؤية أمثلة لما قبل وما بعد.
00:02:25رؤية كل هذه الأشياء بصرياً أفضل بكثير من مجرد
00:02:29قراءة الوصف والأمل في أن يستخدم Claude Code ما تتوقعه.
00:02:33والأمر لا يقتصر فقط على الجانب البصري البحت.
00:02:35فعندما تنظر إلى مهارات مثل "Adapt"،
00:02:37فهي تضمن عمل التصميم عبر منصات مختلفة مثل الهاتف والجهاز اللوحي
00:02:41مقابل سطح المكتب فقط. لذا أقترح بشدة أن تجرب هذه الأداة.
00:02:45لقد صدرت منذ حوالي شهر فقط. الآن، قبل أن ننتقل للأداة الثانية،
00:02:48إعلان سريع عن دورة Claude Code Masterclass التي أطلقتها الشهر الماضي.
00:02:52وقد وضعت بالفعل الكثير من التحديثات.
00:02:54إنها المكان الأول للانتقال من الصفر إلى مطور ذكاء اصطناعي.
00:02:57وسعر هذه الدورة سيزيد خلال أيام قليلة فقط.
00:03:01لذا إذا كنت ترغب في الحصول عليها، تأكد من مراجعتها.
00:03:04يوجد رابط في التعليق المثبت. الآن لنتحدث عن الأداة رقم 2،
00:03:06وهي Skill UI. لقد اكتشفت هذه الأداة صباح اليوم فقط.
00:03:12لم تمضِ على وجودها 24 ساعة، ولديها 7 نجوم.
00:03:15نحن في البداية تماماً. لم أصنعها ولا أعرف صاحبها،
00:03:18لقد رأيته بالصدفة ينشر عنها على تويتر.
00:03:21كنت أتصفح بلا هدف ورأيتها، وقلت: "هذه تبدو مهارة رائعة".
00:03:24وهي تتيح لنا الهندسة العكسية لأي نظام تصميم وتحويله لمهارة جاهزة لـ Claude.
00:03:29ماذا يعني ذلك؟ يعني أننا نأخذ هذه المهارة،
00:03:31ونوجهها نحو موقع إلكتروني موجود بالفعل.
00:03:34وهي تقوم أساساً بتحليل كيفية بناء هذا الموقع وتحويل ذلك
00:03:39إلى قالب، أو مهارة في الواقع. دعوني أريكم إياها عملياً.
00:03:45لدينا هنا موقع Stripe، وهو موقع رائع وفيه الكثير من التفاصيل.
00:03:49بالطبع يحتوي على الكثير من الرسومات المخصصة وأشياء من هذا القبيل.
00:03:52ومن المستحيل على Claude Code، بدون هذه الرسومات،
00:03:56أن يعيد إنتاجه بالضرورة. ليس بعد. لكن لنفترض أن التصميم العام أعجبني،
00:04:00مجرد طريقة إعداده من حيث البطاقات والتخطيطات.
00:04:03وأردت استخدامه كأساس لموقعي الخاص. حسناً،
00:04:06تحدثنا في فيديوهات سابقة عن طرق للقيام بذلك.
00:04:08مثل النظر إلى HTML وكل هذه الأمور، ولكن، كما تعلمون،
00:04:11ينتهي الأمر بحل بنسبة 60 أو 70%. لذا أخذت مهارة Skill UI،
00:04:15ووجهتها نحو Stripe ثم قلت: "هيا،
00:04:17اصنع لي موقع Stripe تجريبي بهذا النمط".
00:04:21وهذا ما نتج عن محاولة واحدة فقط. هذا كل ما قلته له.
00:04:25لم أعطه أي معلومات إضافية فأنشأ هذا.
00:04:27وبالفعل لديه طابع Stripe. مرة أخرى،
00:04:32هذه رسومات مخصصة في Stripe.
00:04:34لن يتمكن من إعادة إنتاجها من مجرد نص، ولكن،
00:04:39النتيجة جيدة جداً في الواقع، إذا سألتني،
00:04:44لا يزال يحتوي على بعض أشياء الذكاء الاصطناعي القياسية،
00:04:47في طريقة إعداد الأشياء والأيقونات،
00:04:50لكنه لم يكتفِ بمجرد تنسيق Bento التقليدي المكون من بطاقات.
00:04:55أعجبتني الألوان المستخدمة والرسوم. ولكن هنا،
00:04:59هذا حقاً جيد بالنسبة لي بمجرد قولي: "انظر لموقع Stripe،
00:05:03وابنِ لي أساساً". وبما أنه حوله إلى مهارة،
00:05:06أصبح لدي الآن مهارة تصميم Stripe على مستوى المشروع،
00:05:10ويمكنني استدعاؤها في أي وقت.
00:05:12لذا لنفترض أنني أردت إنشاء موقع آخر يستخدم أيضاً نمط Stripe.
00:05:16يمكنني فعل ذلك، ويمكنني توجيه Skill UI نحو أي شيء.
00:05:18ويمكنك رؤيته في الفيديو التجريبي لديه هنا على GitHub،
00:05:22حيث وجه الأداة نحو موقع Notion.
00:05:24ثم أخبر Claude Code: "اصنع لي نسخة طبق الأصل من Notion".
00:05:27وهذا ما تراه هناك. لاستخدام هذه المهارة،
00:05:30عليك فقط اتباع أوامر التثبيت الموجودة في صفحة GitHub.
00:05:33وهي تحتوي على وضعين مختلفين. فإذا كنت تريد شيئاً
00:05:38يأخذ كل شيء مثل لقطات شاشة مطولة وتفاعلات مختلفة،
00:05:41عندما يمر الماوس فوق الأشياء، فإنه يستخدم Playwright
00:05:45لفهم كل ذلك. فهو لا ينظر فقط إلى HTML،
00:05:48كما تفعل الأدوات العادية أو حتى مهارة تحليل المواقع المخصصة التي قدمتها سابقاً.
00:05:52إذا استخدمت وضع Ultra، فإنه يستعين بـ Playwright،
00:05:55لذا هناك مستوى معين من التطور هنا. في المجمل،
00:05:58مهارة ذكية جداً وأنت في بدايتها. إذا بدأت في استخدامها،
00:06:00فستكون من أوائل مستخدمي هذا المستودع على GitHub.
00:06:03وأقترح عليك بشدة القيام بذلك إذا كنت تبدأ موقعاً جديداً
00:06:07وليس لديك فكرة عن كيفية البدء من الصفر، لأن هذا أساس رائع.
00:06:10يمكنني تعديل أي شيء أريده من هنا.
00:06:13الأداة رقم 3 هي واحدة سأكون صادقاً بأنها خارج مجال خبرتي قليلاً،
00:06:17لكنني أجدها مثيرة للاهتمام للغاية.
00:06:19أحاول تعلم المزيد عنها واستخدامها بنفسي.
00:06:21وهي مهارة WebGPU.
00:06:23الـ WebGPUs هي أساساً مكونات لتصميم الويب حيث
00:06:28تتفاعل صفحة الويب مع بطاقة الرسوميات الخاصة بك.
00:06:30وهذا يسمح لنا بإنشاء رسوم متحركة رائعة جداً، كما ترى هنا،
00:06:34ومثل هذه الأشياء أيضاً.
00:06:36عندما نتحدث عن مستويات تصميم الويب في Claude Code،
00:06:40وحتى عندما نظرنا إلى أشياء مثل موقع Igloo في المستوى السابع،
00:06:44كانوا يستخدمون أشياء مثل WebGL والمظلات (shaders) المخصصة.
00:06:47هذا هو المجال الذي أتحدث عنه.
00:06:49وهذه المهارة تعلم Claude Code
00:06:52كيف يكتب الأكواد التي تفعل ذلك.
00:06:54فهي تخبره بكيفية إعداد الرندر، وكيفية عمل المظلات،
00:06:58وكيفية إنشاء المواد القائمة على العقد. وباستخدام هذه المهارة،
00:07:00أعطيته مجرد بضعة أوامر نصية وتمكن من إنشاء هذا.
00:07:06هل هذا بروعة هذا المثال؟ لا،
00:07:08ولكنني فعلته في دقيقتين؛ في الواقع استغرق الأمر حوالي 10 دقائق مع
00:07:13وحدة المعالجة الرسومية، لكن بضعة أوامر نصية ولم يكن لدي أي فكرة عما أفعله.
00:07:16لذا إذا كانت هذه الأمور تثير اهتمامك، ومن بين كل الأدوات التي أتحدث عنها
00:07:19هنا، هذه هي الأداة الأكثر تميزاً وربما غرابة،
00:07:22ولكنها أعجبتني. إذا كان هذا يثير اهتمامك،
00:07:26فهذه مهارة يجب أن تجربها لأنها تضعك على الطريق الصحيح.
00:07:28لكن من الواضح أن هذا شيء أكثر تقدماً بكثير من مجرد تغيير
00:07:29شكل البطاقات أو تغيير الخطوط في الموقع،
00:07:32ولكنه أمر يجب وضعه في الاعتبار.
00:07:35الأداة رقم 4 هي واحدة من أكثر مستودعات الذكاء الاصطناعي رواجاً في الشهر الماضي.
00:07:37وهي awesome-design.md. لقد تجاوزت 50,000 نجمة حتى الآن.
00:07:41لذا فهي تحقق انتشاراً هائلاً.
00:07:46وهي تشبه من بعض النواحي أداة Skill UI التي تحدثنا عنها
00:07:48لأنها مهارة تسمح لنا بالنظر إلى مواقع أخرى موجودة بالفعل
00:07:52واستخدامها كقالب للموقع الذي سنبنيه. الآن،
00:07:57awesome-design متأثرة بشدة بـ Stitched.
00:08:01وسنتحدث عن Stitched لاحقاً.
00:08:04وStitched لديها هذا المفهوم لملفات design.md، وهي ملفات ماركداون للتصميم،
00:08:06وهي مجرد مطالبات تصف كيف يجب أن تبني موقعك.
00:08:11الفرق هو أن جوجل قامت بعمل جيد جداً في صياغة هذه المطالبات،
00:08:14كما ترى هنا. وهي دقيقة جداً فيما يتعلق بنظرة عامة على المشروع،
00:08:18والهدف الأساسي، وكيفية اختيار الألوان؛ فهي تضيف هيكلية رائعة.
00:08:22بدلاً من مهارة تصميم الواجهة الأمامية في Claude Code،
00:08:26والتي تكون نوعاً ما عشوائية.
00:08:29هذه الطريقة أكثر واقعية بشأن ما يجب القيام به.
00:08:32وقد أخذت هذه الفكرة لمطالبات أنظمة التصميم المحددة جداً
00:08:34وأنشأت مطالبات لمجموعة من المواقع المختلفة عبر مجالات
00:08:39متنوعة. فمثلاً لشيء مثل Eleven Labs،
00:08:43سأضغط عليه هنا.
00:08:47يمكنني أن أرى بشكل أساسي فكرة تصميم Eleven Labs بالكامل
00:08:50مفككة إلى عناصر النماذج، وأمثلة البطاقات، والأزرار، والعناوين،
00:08:55والخطوط، والألوان، وكل ذلك. والأمر لا يقتصر على المعاينة المباشرة.
00:09:00فنحن نرى المطالبة الفعلية التي يمكننا تغذيتها لـ Claude Code. ومرة أخرى،
00:09:04لديهم الكثير من المواقع هنا، بما في ذلك أشياء غير نصية،
00:09:07مثل Bugatti، أليس كذلك؟ هذا يمنحك
00:09:10اللبنات الأساسية لبعض المواقع التي تعجبك لتتمكن من بناء
00:09:15موقعك الخاص باستخدام تلك اللبنات نفسها.
00:09:19فبينما أداة Skill UI التي رأيناها سابقاً تنظر إلى أي موقع تريده
00:09:21ثم تبنيه لك،
00:09:25فهذه الأداة تقوم فقط بتفكيك الأجزاء المكونة له،
00:09:26ثم يعود الأمر إلينا لبنائه بأنفسنا. الآن، بعد الإشادة بـ awesome-design،
00:09:29من العدل أن نتحدث في الأداة رقم 5
00:09:33عن التطبيق الذي ألهمها فعلياً.
00:09:35وهو Stitch من جوجل. أداة Stitch رائعة
00:09:38إذا كنت تريد البدء من منظور بصري قبل أن تخرج وتبدأ
00:09:41فعلياً في بناء صفحتك.
00:09:46ما تفعله هو الدخول إلى Stitch وإعطاؤه مطالبة عما
00:09:48تحاول بناءه. ويمكن أن يتضمن ذلك لقطات شاشة للإلهام.
00:09:50ما سيفعله هو إنشاء ملف design.md نفسه الذي رأيته سابقاً،
00:09:53ولكن في بيئته الطبيعية.
00:09:57فهو يعطينا توزيعاً للألوان، والخطوط، والعناوين،
00:09:59والأزرار، ثم يمكننا أن نرى هنا نظام التصميم بالكامل،
00:10:04نفس ملف design.md الذي رأيته من قبل،
00:10:08ولكنه الآن مخصص لأي شيء طلبته منه. وبمجرد القيام بذلك،
00:10:11يمنحك مجموعة من المتغيرات لنوع الموقع الذي ستنشئه.
00:10:14ولا يقتصر الأمر على قسم الـ Hero فقط، بل يشمل الموقع كله.
00:10:18وبمجرد إنشاء هذا النموذج، يمكنني تعديله كما أشاء؛ يمكنني الضغط عليه
00:10:20والنقر بالزر الأيمن للحصول على متغيرات محددة.
00:10:25يمكنني تخصيص المتغيرات المختلفة، وتغيير عددها من
00:10:28ثلاثة إلى خمسة، ويمكنني إعطاء نطاق إبداعي،
00:10:31وتعليمات، وإلى ما ذلك.
00:10:34لدي أساساً الكثير من الطرق لتوليد مجموعة من التصورات البصرية
00:10:35لموقعي المحتمل. وهذا رائع لأنه من الصعب
00:10:40عندما تكون داخل Claude Code، وفي كل مرة تريد إجراء تغيير بصري،
00:10:43يجب عليه كتابة الكود، وعليك تشغيل خادم التطوير،
00:10:46والتحقق منه على الصفحة. وغالباً عندما نقوم بهذه الأشياء،
00:10:48خاصة من منظور تصميم الواجهة الأمامية،
00:10:52أريد رؤية الخيارات أمامي مباشرة، أليس كذلك؟
00:10:56من الأسهل بكثير بالنسبة لي رؤية هذه الخيارات الثلاثة والقول: "أكره هذا،
00:10:58وأكره هذا، وربما أحب هذا" بدلاً من قول: "حاول مجدداً يا Claude Code".
00:11:02كلا، حاول مجدداً. كلا، حاول مجدداً. هذه الأداة أيضاً مجانية،
00:11:06لا. حاول مجددًا. لا. حاول مجددًا. لذا، هذا متاح مجانًا أيضًا،
00:11:11وهو أمر رائع. وأي شيء أقوم ببنائه هنا،
00:11:13من السهل جدًا نقله إلى Cloud Code لأنني إذا نقرت فقط على ما
00:11:16يعجبني، ثم ذهبت إلى "المزيد"، يمكنني عرض الكود.
00:11:19يمكنني بعد ذلك نسخ الكود وجلبه إلى Cloud Code.
00:11:23ويمكنك حتى القيام بأشياء مثل النسخ إلى Figma.
00:11:25يمكنك جلبه إلى AI Studio أيضًا،
00:11:27لكن المسار الأسهل لـ Cloud Code هو مجرد التصدير ثم النسخ إلى الحافظة.
00:11:31هناك بروتوكول MCP. لذا يمكنك القيام بكل هذا من خلال مبنى أوامر Cloud Code.
00:11:35لكن لكي أكون صريحًا، لا أفهم حقًا ما الذي يقدمه لك ذلك فعليًا.
00:11:39أشعر أن التعامل المباشر مع هذه الحواس البصرية يستحق العناء.
00:11:43الآن لدي بالفعل شرح متعمق كامل حول Stitched في Cloud Code وسأضع رابطًا
00:11:46لذلك في الأعلى إذا كنت تريد رؤية المزيد من هذا عمليًا. الآن،
00:11:49ترددت في وضع المهارة رقم ستة في هذا الفيديو لأنني أشعر أنها أصبحت
00:11:52منتشرة للغاية. الجميع تقريبًا يعرف بوجودها، ولكن لا تعلم أبدًا.
00:11:55قد تكون هذه هي المرة الأولى لشخص ما يراها. وهي مهارة UI UX Pro Max.
00:12:00أعتقد أن هذا هو الخلف الروحي أو ما
00:12:05يجب أن تكون عليه مهارة التصميم الأمامي من Anthropic. لذا تخيل مهارة تصميم
00:12:09واجهات من Anthropic مدربة بالفعل على أنواع مختلفة من، كما تعلم،
00:12:14الاتفاقيات لأنواع مختلفة من المواقع في مجالات مختلفة لأن
00:12:19ليس كل موقع يحتاج ليبدو كأنه برنامج خدمات (SAS) من الفئة الثانية.
00:12:23وهذا هو محور هذه المهارة.
00:12:25إنها مولد ذكي لأنظمة التصميم.
00:12:27لذا ستطرح عليك الأسئلة بالفعل.
00:12:29ستكتشف موضوع موقعك الإلكتروني،
00:12:31وما هي خدمتك، ثم تصممه بناءً على وظيفته.
00:12:35لذا فهي تمتلك 161 قاعدة استدلال خاصة بكل صناعة.
00:12:39لقد قاموا حقًا ببناء هذا الشيء.
00:12:43لن تحصل على ذلك النوع من الحشو العشوائي للذكاء الاصطناعي بدون مهارة،
00:12:47ولن تحصل على ما بدأ يصبح تدريجيًا نسخة Cloud Code من حشو
00:12:51الذكاء الاصطناعي مع مهارة تصميم الواجهات.
00:12:52لقد تم بناؤه أيضًا مع الكثير من التوجيهات الخاصة بالتقنيات المستخدمة.
00:12:55لذا لن يتم دفعك فقط نحو شيء مثل React، وفي النهاية إنها
00:13:00مهارة رائعة. إذا كنت لا تملك أي فكرة عن الاتجاه الذي تريد سلوكه.
00:13:04الكثير من الأشياء التي تحدثنا عنها تتطلب أن يكون لديك نوع من
00:13:09التصور عما تريده، خاصة إذا كان لديك موقع مثال، أليس كذلك؟
00:13:12عندما رأينا Skill UI، إذا كان لدي مثال،
00:13:15يمكنني تقريبًا نسخه، ونفس الشيء مع التصميم الرائع.
00:13:19مثلما أختار من هذه المواقع الموجودة.
00:13:21إذا كنت لا تريد اتباع هذا المسار،
00:13:22ولكنك لا تزال مشوشًا بشأن المكان الذي يجب أن تبدأ منه، استخدم هذه المهارة.
00:13:26نقطة انطلاق رائعة.
00:13:28الآن الأداة رقم سبعة تدور حول المكونات وإتقان تفاصيل
00:13:33صفحة الويب الخاصة بنا. وهنا نأتي بموقع 21st.dev،
00:13:36وهو موقع يحتوي على مليون مكون مختلف لنختار من بينها و
00:13:40ندمجها مباشرة في موقعنا. فمثلاً،
00:13:43لنفترض أنني كنت أحاول التوصل لشيء لصفحة الواجهة الرئيسية (Hero page). حسنًا،
00:13:46أذهب فقط إلى قسم "Heroes" في 21st.dev وأبحث عن واحد.
00:13:51أعجبني هذا مثلاً، صفحة الواجهة هذه التي تستخدم Spline.
00:13:56لديها هذا الروبوت الذي يتبع حركة الماوس الخاصة بي فعليًا. حسنًا،
00:14:00بدلاً من اكتشاف كيفية استخدام Spline وكتابة هذا الكود،
00:14:04أذهب فقط إلى 21st.dev.
00:14:06أقوم بنسخ الأمر بالضغط على زر "Copy prompt" الموجود بالأعلى.
00:14:09أذهب إلى Cloud Code وأقوم بلصقه. بوم! سيكون لدي هذا كقسم الواجهة الخاص بي.
00:14:14الآن،
00:14:15من الواضح أن أقسام الواجهة هي ربما أثقل شيء يمكننا استيراده
00:14:19إلى صفحة الويب الخاصة بنا، لأنه إذا كان لدينا صفحة بها روبوت ينظر في كل
00:14:22مكان، فيجب أن يتناسب موقعنا بالكامل مع تلك الجمالية. لحسن الحظ،
00:14:26أعتقد أنك تحصل على أكبر قيمة من شيء مثل 21st.dev عندما يتعلق الأمر
00:14:29بالمكونات الأصغر واللمسات البسيطة مثل الأزرار، أليس كذلك؟
00:14:33مجرد حقيقة أن هذا الزر يحتوي على هذا الضوء الصغير.
00:14:36عندما أحركه مقارنة بالزر العادي هو شيء سيجعل
00:14:39موقعك يبدو أفضل، أو البطاقات التي تحتوي على هذا، كما تعلم،
00:14:43النوع من رسوم الإضاءة التي تتبع الماوس أو أي شيء من هذا القبيل. مرة أخرى،
00:14:46إنها هذه التفاصيل البسيطة، تلك الظلال المتوهجة.
00:14:49هذه هي الأشياء التي ترفع من مستوى صفحة الويب الخاصة بك،
00:14:52وتجعلها تبدو أكثر تميزًا وتظهر أنك اهتممت بها.
00:14:56وأنك حاولت بالفعل. وإذا لم يكن هناك شيء آخر،
00:14:59فإن ما يجب أن يفعله هذا هو أن يعطيك الإلهام فحسب لأنه
00:15:03لا يوجد ما يمنعك من نسخ أمر لأي من هذه المكونات،
00:15:07سواء كانت حواف أو واجهات أو أي شيء آخر،
00:15:09ثم تعديله حسب رغبتك باستخدام Cloud Code.
00:15:12الأمر ليس "كل شيء أو لا شيء".
00:15:14وأعتقد خاصة لأولئك منا الذين لا يأتون من خلفية
00:15:17في تصميم الويب، وأنا بالتأكيد منهم، كما تعلمون،
00:15:19أنت فقط لا تعرف ما لا تعرفه، والتعرض لكل هذه الطرق
00:15:23المختلفة التي يمكننا من خلالها إنشاء زر يجعل عقلك يتحرك في
00:15:26اتجاهات مختلفة. ويساعدك ذلك بمرور الوقت.
00:15:29كلما تعرضت له أكثر، كلما طورت ذوقك الخاص واكتشفت
00:15:32ما تحبه. ولكن حتى ترى هذه الأشياء،
00:15:34أنت لا تعرف حتى ما الذي يعجبك.
00:15:36كل ما رأيته هو ما يقدمه لك Cloud Code.
00:15:39لذا أقترح بشدة أن تتحقق من هذا، فكل هذه الأشياء تقريبًا مجانية و
00:15:43يجب عليك دمج بعض الأشياء الصغيرة على الأقل،
00:15:46مثل الطرق التي يتعاملون بها مع الأزرار والبطاقات في صفحة الويب التالية.
00:15:49الآن العبارة التي تسمعها تتكرر مرارًا وتكرارًا هذه الأيام هي أن الذكاء الاصطناعي ليس لديه
00:15:53ذوق. حسنًا، ماذا لو منحناه الذوق كمهارة؟ حسنًا،
00:15:56هذا ما نحاول القيام به مع الأداة رقم ثمانية.
00:15:59وهو مستودع مهارة الذوق (Taste skill repo).
00:16:01وهذا عبارة عن مجموعة من المهارات التي تحاول منح Cloud
00:16:06Code قدرًا من الذوق، أي الابتعاد عن حشو الذكاء الاصطناعي،
00:16:11وهو السمة التي تراها تتكرر مرارًا وتكرارًا.
00:16:13الآن مهارة الذوق هذه تتضمن عددًا من المهارات الفرعية المختلفة كما ترون هنا،
00:16:17ولديها إعدادات مختلفة. لذا يمكنك ضبط مدى، كما تعلم،
00:16:21تجريدها مقارنة بتوليد الذكاء الاصطناعي العادي.
00:16:24وما تراه هنا هو مثال لبعض المواقع التي
00:16:28تم إنشاؤها باستخدام هذه المهارة. وعلى الفور،
00:16:31تلاحظ أنها مختلفة قليلاً، أليس كذلك؟ أعني، إنها ليست مذهلة،
00:16:36ولكنها مختلفة على الفور، والاختلاف أمر جيد.
00:16:38كلما قل شبهها بكل قالب SAS موجود، كان ذلك أفضل.
00:16:41والكثير من هذه تشمل أشياء مثل رسوم التمرير، و
00:16:46نحن لا نرى تخطيطات Bento مرارًا وتكرارًا.
00:16:47لذا فهذه مهارة رائعة على الهامش قد ترغب في
00:16:52تجربتها على الأقل ورؤية أدائها مقارنة بتوليدات Cloud Code
00:16:56العادية. الآن الأداة رقم تسعة ستبدو بسيطة جدًا للكثيرين منكم،
00:16:59ولكنكم ستندهشون من كمية الناس الذين لا يعرفون أن خطوط
00:17:03جوجل (Google Fonts) موجودة.
00:17:05خطوط جوجل هي مستودع مجاني ضخم يضم تريليون
00:17:10خط مختلف يمكنك استخدامه في جميع مشاريعك البرمجية حرفيًا.
00:17:14لست بحاجة لأن تكون مقيدًا بخط Inter أو أي من الخطوط الخمسة
00:17:18التي يستخدمها Cloud Code لكل شيء.
00:17:20يمكنك فقط الذهاب إلى خطوط جوجل وهي مقسمة حسب المظهر،
00:17:24وحسب الشعور، وحسب العائلة، وأخبر Cloud Code، استخدم هذا،
00:17:29أو استخدم ذاك، فلدى Cloud Code إمكانية الوصول لكل هذه الخطوط أيضًا.
00:17:31لأن فن الخطوط (Typography) جزء كبير
00:17:34جدًا من شكل تصميمك وإحساسه. وعلاوة على ذلك،
00:17:38يمكنك استخدام Cloud Code لمساعدتك في البحث عبر خطوط جوجل.
00:17:42ببساطة أخبر Cloud Code بنوع الموقع الذي تبنيه،
00:17:45ونوع الشعور الذي تسعى إليه.
00:17:47وسيعطيك مثالاً أو خمسة أنواع من الخطوط لتنظر إليها.
00:17:50يمكنك رؤية ذلك في الوقت الفعلي هنا بالفعل. مرة أخرى،
00:17:53لا تريد ترك كل شيء للصدفة ويعتمد الأمر فقط على كيف
00:17:57يشعر Cloud Code في ذلك اليوم بخصوص الخط الذي سيعطيك إياه لأنه
00:18:01سيعطيك دائمًا خط Inter. ودائمًا Inter. وأخيرًا وليس آخِرًا،
00:18:05الأداة رقم 10، واجهة أوامر Playwright (Playwright CLI).
00:18:06الآن Playwright CLI ليست أداة تصميم بحد ذاتها،
00:18:10رغم أنها شيء تحدثنا عنه بالفعل في الماضي مع Skill UI و
00:18:13قدرتها على الذهاب والتقاط صور لصفحات الويب.
00:18:15لذا يمكنك استخدامها كنوع من أدوات البحث وتوليد الأفكار.
00:18:19ما أريد التركيز عليه حقًا هو
00:18:21فكرة الشكل والوظيفة، وأنه عندما نبني أشياء في الواجهة الأمامية،
00:18:25فكر في شيء بسيط مثل صفحة إرسال النماذج،
00:18:27سيتعين علينا اختبارها.
00:18:29سيتعين علينا التأكد من أن هذه الأشياء تعمل بالفعل.
00:18:32وأسهل طريقة للقيام بذلك على نطاق واسع هي Playwright CLI، وليس Playwright MCP.
00:18:36واجهة الأوامر (CLI) أكثر فعالية بكثير.
00:18:38والطريقة التي نفعل بها ذلك هي بمجرد إنشاء تصميمات الواجهة الأمامية،
00:18:41كل ما عليك فعله بعد تثبيت أداة CLI هو إخبار Cloud Code،
00:18:44أريدك أن تختبر كل تفاعل على صفحة الويب هذه باستخدام Playwright CLI.
00:18:49سيقوم بإنشاء مجموعة من مثيلات متصفح Chrome المختلفة.
00:18:52يمكنك جعلها مرئية إذا كنت تريد رؤيتها بالفعل أو غير مرئية (Headless).
00:18:55لذا فهي غير مرئية وسوف يختبرها من تلقاء نفسه.
00:18:57هذا يجعل عملية تصميم الواجهة بالكامل تسير بشكل أسرع لأنني أعتقد
00:19:02أننا جميعًا مررنا بموقف أضفنا فيه شيئًا ثم أردنا رؤيته.
00:19:05ثم أردنا اختباره ويستغرق الأمر وقتًا طويلاً،
00:19:06خاصة أشياء مثل إرسال النماذج،
00:19:08حيث توجد أطنان من الحالات الاستثنائية مع كيفية قيام مستخدم غريب
00:19:13بالدخول ووضع معلوماته هناك.
00:19:15هذه هي مهاراتي العشر المفضلة المتعلقة بالتصميم في Cloud Code،
00:19:20والإضافات، وواجهات الأوامر. أتمنى أن تكون بعض هذه الأشياء جديدة بالنسبة لكم. أعني،
00:19:24من الأفضل أن يكون Skill UI جديدًا لأن حوالي ثلاثة أشخاص فقط يعرفون عنه. لذا،
00:19:29لكن نعم، مساحة تصميم الواجهات الأمامية،
00:19:31أجدها مثيرة للاهتمام للغاية مع Cloud Code لأنه سيئ للغاية فيها من
00:19:36وجهة نظر الذوق.
00:19:37رغم أنني أكره حتى قول كلمة "ذوق" هذه الأيام لأن هذا هو كل ما
00:19:40يتحدث عنه الجميع، ولكن بما أن Cloud Code سيئ في ذلك،
00:19:42فإن هذا يجب أن يكون نوعًا ما أمرًا جيدًا بالنسبة لك كفرد، أليس كذلك؟
00:19:46لأن هذه مساحة الآن حيث يمكنك تمييز نفسك عن الآخرين
00:19:50وفي أي وقت يمكنك فيه تمييز نفسك عن كل شخص آخر يقفز إلى
00:19:55Cloud Code هذه الأيام، فهذا أمر جيد.
00:19:57وهذه المهارات والأدوات يمكنها مساعدتك في فعل ذلك. وكما هو الحال دائمًا،
00:20:00أخبروني برأيكم.
00:20:01تأكدوا من التحقق من Chase AI Plus إذا كنتم تريدون الحصول على الدورة
00:20:04المتقدمة (Master class)، وسأراكم لاحقًا.