00:00:00يعد تصميم Claude أفضل شيء حدث
00:00:01لعملك في الواجهة الأمامية منذ ظهور المهارات.
00:00:05لكن إذا كنت لا تعرف ما تفعله،
00:00:06فسوف تستهلك حصة الاستخدام الخاصة بك بالكامل
00:00:09قبل أن تتمكن من إنشاء صفحة هبوط واحدة.
00:00:11لكن هذه الدورة المتقدمة لتصميم Claude
00:00:12ستساعد في حل تلك المشكلة
00:00:14حيث سأوضح لك الميزات التي تستحق وقتك فعلاً.
00:00:17علاوة على ذلك، سنقوم باختبار مباشر
00:00:19بين كود Claude العادي وتصميم Claude.
00:00:22وسنتحدث عن بعض حالات الاستخدام المثيرة للاهتمام
00:00:25التي تتجاوز مجرد العمل على صفحات الهبوط البسيطة.
00:00:27هذه أداة رائعة ولدينا الكثير لنغطيه.
00:00:30لذا دعونا نبدأ.
00:00:31تصميم Claude هو رد Anthropic على أداة Stitch من Google.
00:00:35وهي غير متوفرة في كود كلود (Claude code).
00:00:37فهو يمنحنا القدرة على إنشاء مجموعة من النماذج المرئية
00:00:40لتطبيقات الويب وتطبيقات الهاتف وحتى عروض الشرائح.
00:00:43للوصول إلى تصميم Claude، يجب أن تستخدم تطبيق الويب.
00:00:45أي من خلال الرابط claud.ai/design.
00:00:47فهو غير متاح في كود Claude
00:00:48وهو غير متاح في تطبيق سطح المكتب.
00:00:51وبالحديث عن القيود،
00:00:52هناك قيد كبير يجب أن نشير إليه فوراً
00:00:54وهو حدود الاستخدام.
00:00:56لديه حد أسبوعي خاص به، وهو نفس الحد
00:00:59سواء كنت مشتركاً في Pro أو Max 5 أو 20X.
00:01:02وهذا الشيء يستهلك الموارد بشراهة،
00:01:05خاصة إذا كنت تستخدم أداة معينة
00:01:08سنتحدث عنها لاحقاً في هذا الفيديو.
00:01:10ولكن حتى مع وجود تلك القيود،
00:01:11يعد تصميم Claude قفزة كبيرة إلى الأمام
00:01:14فيما يتعلق بأعمال تصميم الواجهة الأمامية باستخدام Claude.
00:01:17فأشياء مثل نظام التعديل "tweak" تجعل من السهل جداً رؤية
00:01:20كيف يمكن للتغييرات المختلفة أن تؤثر على المظهر العام
00:01:23لتطبيق الويب الخاص بك.
00:01:23وأشياء مثل التحرير "edit" تتيح لك التعمق بسرعة كبيرة
00:01:28وتغيير الأشياء على مستوى دقيق
00:01:30دون الاعتماد على مطالبات نصية.
00:01:31ولكن إذا كنت تريد الالتزام بنظام التعليقات،
00:01:33فيمكننا القيام بذلك.
00:01:34لديهم زر تعليق فعلي
00:01:35حيث يمكنني تحديد أجزاء فردية من تطبيق الويب
00:01:39وترك تعليقات تذهب مباشرة إلى كود Claude
00:01:42أو تضاف إلى قائمة تعليقات لأعضاء فريقي الآخرين
00:01:46ليضيفوا أفكارهم، لأن هذا العمل تعاوني للغاية.
00:01:48يمكنك مشاركة هذه التصاميم مع أشخاص آخرين
00:01:50ويمكنكم جميعاً العمل على نفس الشيء من أماكن مختلفة.
00:01:53يمكنني الرسم على التطبيق لتوضيح ما أريد تغييره.
00:01:56ويمكنني رؤية العرض بملء الشاشة بسهولة شديدة.
00:02:00والأهم من ذلك،
00:02:02يمكنني تصدير هذا بسهولة تامة إلى كود Claude.
00:02:05وهذا الإعداد المعتمد على التصميم المرئي يجعل الحصول
00:02:09على مخرجات الواجهة الأمامية التي تريدها أسهل بكثير
00:02:11بدلاً من أن تظل محصوراً داخل كود Claude
00:02:13والاضطرار إلى القيام بديناميكية خادم تطوير الكود وتحديثه
00:02:18التي اعتدنا عليها لفترة طويلة.
00:02:19ولكن لتحقيق أقصى استفادة من هذه الأداة،
00:02:21هناك بعض الأشياء التي يجب أن تعرفها.
00:02:22لذا سنبدأ أولاً بأعمال تصميم الواجهة الأمامية
00:02:25لتطبيق ويب، وهو ما يبحث عنه معظم الناس.
00:02:29وسنوضح أيضاً ما كان سيقدمه لنا كود Claude
00:02:33مقابل تصميم Claude.
00:02:34حتى تتمكن من رؤية ما نحصل عليه هنا
00:02:37وما إذا كان هذا يستحق العناء.
00:02:38ولكن قبل أن نفعل ذلك، كلمة سريعة من الراعي، وهو أنا.
00:02:42لقد أصدرنا للتو دورة كود Claude المتقدمة
00:02:44بدلاً من Chase AI Plus.
00:02:45وهي الطريقة الأولى للانتقال من الصفر إلى مطور ذكاء اصطناعي،
00:02:48خاصة إذا لم تكن قادماً من خلفية تقنية.
00:02:51وقد ركزنا مؤخراً على نظام نظام التشغيل الوكيل الخاص بنا
00:02:54داخل الدورة المتقدمة،
00:02:55حيث نستخدم كود Claude كمحرك
00:02:58ونكمله ببرنامج Obsidian للذاكرة،
00:03:00وباستخدام GWS لربط مجموعة Google بأكملها.
00:03:03ثم مع هذا الأساس،
00:03:05يمكننا إرفاق أي وكل حزم المهارات المخصصة
00:03:09التي نبتكرها وتكون منطقية لحالات استخدامنا.
00:03:12حتى أننا نتحدث عن كيفية تغليف كل ذلك
00:03:14وبيعها للعملاء.
00:03:15لذا إذا كان هذا شيئاً تهتم به،
00:03:17تحقق منه بالتأكيد.
00:03:18إنه داخل Chase AI Plus،
00:03:19سيكون هناك رابط في التعليق المثبت.
00:03:21لذا دعونا نتحدث عن تصميم Claude وتطبيق الويب الخاص بك،
00:03:24لأن هناك بضعة قرارات نحتاج إلى اتخاذها
00:03:26قبل أن نبدأ حتى في توجيه هذا الشيء.
00:03:28والآن سأتحرك في جميع أنحاء الشاشة
00:03:31خلال هذا الفيديو، لذا تحملوني.
00:03:32الآن، أول سؤال سنطرحه على أنفسنا هو،
00:03:35هل سنستخدم نظام تصميم؟
00:03:38إذن هنا بالنسبة لي، ترى "لا شيء"
00:03:40وترى نظام تصميم لنظام التشغيل الوكيل.
00:03:42بالنسبة لك، سنقول لا شيء في البداية.
00:03:44إذا أردنا إنشاء نظام تصميم،
00:03:47سنأتي إلى هنا
00:03:48وننتقل إلى أنظمة التصميم.
00:03:50من المحتمل ألا يكون لديك أي شيء هنا
00:03:52وستضغط على إنشاء.
00:03:53الآن، ما هو نظام التصميم؟
00:03:56حسناً، هو في الأساس قالب مرئي
00:04:00يمكنك تطبيقه على أي مشروع تنشئه لاحقاً.
00:04:03لذا إذا كان لديك خطوط معينة، وتستخدم شعارات معينة،
00:04:07أي شيء محدد، حتى لو كان مجرد طابع عام،
00:04:10يمكنك القيام بذلك هنا.
00:04:11هذا هو المكان الذي تقوم فيه بإعداده.
00:04:12حتى لا تضطر إلى تكرار نفسك
00:04:13لكل مشروع على حدة.
00:04:15إذا كان لديك نوع من الخط المتصل
00:04:17من وجهة نظر مرئية للتصميم.
00:04:20لذا تدخل اسم شركتك
00:04:21ثم تقدم أمثلة.
00:04:23الآن، يمكن أن تكون هذه الأمثلة عبارة عن كود.
00:04:25لذا يمكنني ربط مستودع GitHub.
00:04:27يمكنني سحب مجلد إلى هنا.
00:04:29يمكنني تحميل ملفات.
00:04:30يمكنني إضافة خطوط، أصول، أو أي شيء.
00:04:33هذا هو المكان الذي تحدد فيه علامتك التجارية.
00:04:36الآن، تحذير.
00:04:39هذا ما كنت أتحدث عنه عندما كنت أقول يستهلك الرموز بشراهة.
00:04:42وبقولي يستهلك الرموز بشراهة، أعني أن تشغيل نظام تصميم
00:04:45سيستغرق ما بين خمس و15 دقيقة
00:04:47لأنه يستوعب كل شيء، وهذا يعتمد نوعاً ما على الحجم.
00:04:50وب، سيستهلك هذا حوالي 20 إلى 25% من استخدامك
00:04:55مباشرة في البداية.
00:04:56لذا افهم ذلك، لا تأت إلى هنا وتعتقد،
00:04:57أوه، أول شيء سأفعله
00:04:58هو استنساخ خمسة أنظمة تصميم.
00:05:00مستحيل تماماً، مستحيل تماماً.
00:05:02افعل واحداً إذا كنت تعرف ما تريد القيام به
00:05:05وسأوضح لك كيف يبدو الأمر نوعاً ما
00:05:07أثناء إعدادنا لذلك.
00:05:08لكن لا تفعل أكثر من ذلك.
00:05:09ليس الآن على الأقل حتى يقوموا برفع الحدود
00:05:11وهو ما سيفعلونه على الأرجح في المستقبل.
00:05:12لذا فهو يستهلك الموارد بشراهة، بشراهة، بشراهة،
00:05:16لا تدع هذا يفسد عليك عملك.
00:05:17الآن، إذا كنت تريد القيام بذلك فعلاً،
00:05:19فستقوم بملء كل هذا
00:05:20ثم تضغط على متابعة الإنشاء
00:05:21وسيظهر مربع منبثق يقول شيئاً مثل،
00:05:24مرحباً، سيستغرق هذا من خمس إلى 15 دقيقة.
00:05:26بمجرد أن يكمل استيعاب جميع تلك الأصول،
00:05:29ستحصل على شيء كهذا
00:05:30حيث يطلب منك مراجعة مسودة نظام التصميم
00:05:33التي توصل إليها.
00:05:34ما قدمته له هو كود لوحة معلومات نظام التشغيل الوكيل الخاصة بي
00:05:38التي عرضتها لك قبل قليل.
00:05:40لديه نوع من سمة ألوان Claude هذه.
00:05:43لديه خط نصي محدد، وكل ذلك.
00:05:45لذا هذا ما قدمته له،
00:05:46كان في الأساس هذا النوع من المرئيات.
00:05:48وقد عاد بكل هذا.
00:05:49لذا، مرحباً، هذا يبدو جيداً.
00:05:53هذا يبدو جيداً.
00:05:53مهلاً، انظر إلى ذلك التميمة.
00:05:54تبدو مألوفة نوعاً ما.
00:05:55هذا يبدو جيداً.
00:05:57الصوت يمر عبر جميع الألوان.
00:05:59لذا فهو يتعمق في تفاصيل دقيقة جداً
00:06:03مثل، حسناً، ماذا تريد أن تكون هذه الألوان؟
00:06:06ماذا تريد أن تبدو عليه البطاقات؟
00:06:07إنه محدد للغاية.
00:06:08إنه لطيف حقاً.
00:06:09ومرة أخرى، يذكرنا كثيراً بـ Stitch.
00:06:11يذكرنا كثيراً بهذا النوع من الأشياء.
00:06:14لذا فقد قمت بالمضي قدماً ووافقت على كل شيء.
00:06:16إنه يقول إنه يفتقد خط العلامة التجارية.
00:06:17لذا إذا كانت لدي خطوط محددة أريد دائماً استخدامها،
00:06:20يمكنني تحميلها أيضاً.
00:06:21وفي أي وقت يمكنني العودة إلى هنا
00:06:23لأنه قام بتفكيك جميع مكونات الأشياء،
00:06:26والنقر عليها، ثم إلقاء نظرة وتعديلها حسب الحاجة.
00:06:30ومثل ما ستراه لاحقاً
00:06:31مع صفحات الهبوط الفعلية وعروض الشرائح
00:06:33وكل ذلك، يمكننا مشاركة هذا، أليس كذلك،
00:06:36مع فريق أو أي شيء، أو يمكنني تصديره.
00:06:39مثل PowerPoint أو PDF، يمكننا إرساله إلى Canva، HTML،
00:06:42كود Claude، حقاً، حقاً سهل، فقط نقرة واحدة بعيداً.
00:06:44أيضاً، لدينا ملفات التصميم الفعلية.
00:06:46لذا يمكنني النظر داخل هنا ورؤية كل ما يحدث،
00:06:50ملفات HTML الفعلية وكل ذلك بأنفسهم.
00:06:52لذا هناك الكثير الذي يمكنك تخصيصه واللعب به هنا.
00:06:55إنه ليس صندوقاً أسود على الإطلاق حيث يكون الأمر
00:06:57حسناً، آمل أن يكون تصميم Claude قد توصل إلى شيء جيد.
00:06:59من يدري ما الذي يحدث تحت السطح؟
00:07:01لا، لديك نظرة ثاقبة.
00:07:03مثل هذا كله كود.
00:07:04هذه طريقة رائعة له لإنشاء الكود
00:07:06ويمكننا أخذ ذلك الكود إلى جهازنا المحلي
00:07:09في أي لحظة.
00:07:10نحن لسنا عالقين هنا.
00:07:11ولذا للعودة إلى تصميم Claude وتطبيقات الويب،
00:07:13هذا هو السؤال الأول الذي نجيب عليه.
00:07:15هل سنستخدم نظام تصميم؟
00:07:16هل هذا شيء في نفس السياق بصرياً
00:07:18لما قمنا به في الماضي؟
00:07:19والأهم من ذلك،
00:07:20هل قمت حتى بإنشاء نظام تصميم على الإطلاق؟
00:07:22هل تخليت عن 20% من رموزك الأسبوعية
00:07:25هل تنازلت بالفعل عن 20% من رموزك الأسبوعية
00:07:28لآلهة "أنثروبيك" (Anthropic) وهل لديك هذا الخيار حتى؟
00:07:30الآن بالنسبة لهذا العرض التوضيحي، سنكتفي بـ "لا شيء".
00:07:32لذا فنحن جميعاً نعمل على نفس الوتيرة.
00:07:33السؤال التالي يصبح، مهلاً،
00:07:37هل أريد عمل إطار سلكي (wireframe) أم أريد دقة عالية؟
00:07:39من المرجح أنك سترغب في عمل دقة عالية.
00:07:41حتى تتمكن من رؤية كيف سيبدو الأمر في الواقع.
00:07:43ولكن مجدداً، مهلاً، إذا كنت ترغب في عمل إطار سلكي،
00:07:44يمكنك دائماً التنقل ذهاباً وإياباً.
00:07:45أنت لست مقيداً بأحدهما دون الآخر.
00:07:47لكن لهذا الغرض، سنقوم بعمل دقة عالية.
00:07:50لذا سنسمي هذا "عرض CD التوضيحي" وسنقوم بإنشائه.
00:07:53ثم سيجلبنا إلى هنا ويطلب منا السياق.
00:07:56هل لديك نظام تصميم (design system) أم مجرد لقطة شاشة
00:07:58أم قاعدة بيانات برمجية أم ملف Figma؟
00:08:01بغض النظر، إذا كنت تبدأ من الصفر في الخطوة صفر،
00:08:03أو إذا كان لديك قاعدة بيانات برمجية،
00:08:05فمن الأفضل تزويده بشيء ما.
00:08:07إذا كان لديك قاعدة بيانات برمجية، كما تحدثنا،
00:08:09لقد كنت تعمل بالفعل على تطبيق، أعطه لهذا النظام.
00:08:10أعطه لـ "تصميم كلود" (Claude Design).
00:08:12سيعمل بشكل أفضل.
00:08:14ولكن حتى لو لم تكن كذلك وبدأت من الصفر،
00:08:16أقترح بشدة كحد أدنى،
00:08:18أن تخرج إلى العالم
00:08:20وتجد نوعاً من الإلهام الذي يعجبك،
00:08:23سواء كان ذلك من Dribbble أو Awwwards أو مواقع Godly،
00:08:25أي شيء، أليس كذلك؟
00:08:27البدء من صفحة فارغة وتوقع أن يقوم "تصميم كلود"
00:08:28بكل العمل الشاق،
00:08:30لأنني أراهن أن طلبك (prompt) سيكون سيئاً.
00:08:33فقط افهم أنك كلما أعطيته سياقاً أقل،
00:08:35زادت فرصة تراجعك نحو المتوسط.
00:08:36لذا فقط افهم ذلك مسبقاً.
00:08:38لدينا القدرة على القيام بالرسومات التخطيطية.
00:08:40لذا، كما تعلم، يمكننا الرسم هنا بالفعل
00:08:44ونقول، حسناً، ها هي صورتنا.
00:08:48أريد النص هنا.
00:08:53وبعد ذلك أريد صورة البطل (hero image).
00:08:59صورة البطل هنا.
00:09:10وبعد ذلك لنقم بعمل لافتة تمرير.
00:09:12سنعطيه شيئاً ما،
00:09:15حتى لو كانت قطعة فنية رائعة مثل هذه.
00:09:16ويمكنك فعل أكثر من ذلك بكثير.
00:09:18يمكننا تبديل القلم، أليس كذلك؟
00:09:19يمكننا إدخال نص.
00:09:21يمكنني إضافة ملاحظات لاصقة.
00:09:25لذا هناك الكثير للقيام به هنا.
00:09:28ومن هنا، عليك فقط توجيه الطلب.
00:09:30لديك أيضاً القدرة على تغيير النموذج.
00:09:33نموذج "أوبوس 4.7" (Opus 4.7) هو ما أقترحه،
00:09:35لأنه خاصة إذا كنت تضيف أشياء مثل لقطات الشاشة،
00:09:37يتمتع "أوبوس 4.7" بأعلى دقة
00:09:40وأعلى درجات الوضوح لقطات الشاشة.
00:09:423 أضعاف ما تحصل عليه مع "أوبوس 4.6".
00:09:44والآن دعنا نعطيه طلباً.
00:09:46أنا أقول بناء صفحة هبوط لـ "أرجوس" (Argus)،
00:09:48وهي منصة استخبارات لوسائل التواصل الاجتماعي
00:09:49تساعد صناع المحتوى على اكتشاف الموضوعات الرائجة
00:09:51في تخصصهم قبل أن تنتشر.
00:09:53هذا تخطيط، كما تعلم،
00:09:55يعكس تقريباً ما كتبته هنا.
00:09:58لذا فهذا طلب ضعيف بقدر ما يمكننا تقديمه.
00:10:00شيء أساسي من نوع SaaS.
00:10:02لذا دعنا نرى ما سيخرج به.
00:10:03وهذا ما توصل إليه "تصميم كلود"،
00:10:06مع طلب بسيط للغاية وبدون سياق خارج عن مجرد
00:10:08خربشتنا على الصفحة.
00:10:13وهذا هو، والذي أعتقد أنه جيد للمرور الأول.
00:10:16فيما يتعلق بالاستخدام، تنبيه الاستخدام، 4%.
00:10:18استغرق 4% من إجمالي استخدامنا الأسبوعي
00:10:20لتوليد صفحة الهبوط هذه.
00:10:21وهذا ما قدمه لنا "كلود كود" (Claude Code)
00:10:22مع نفس الطلب تماماً،
00:10:25باستخدام مهارة تصميم الواجهة الأمامية أيضاً.
00:10:26ليس سيئاً.
00:10:28أعني، بعض الأشياء البسيطة التي يمكننا انتقادها على الفور،
00:10:32مثل، مهلاً، النص مقطوع هنا وهنا.
00:10:35لا يوجد الكثير من الخطأ في هذا.
00:10:39النص يتداخل نوعاً ما هنا.
00:10:41يُظهر "الصعود الآن" في الأسفل هنا،
00:10:45والذي يتداخل أيضاً نوعاً ما، لكنه قريب جداً.
00:10:46أعني، لأكون صادقاً،
00:10:47أحب التصميم الأول أكثر قليلاً،
00:10:49لكن يمكنني أن أرى شخصاً يحب هذا التصميم
00:10:50أكثر قليلاً أيضاً.
00:10:52لذا في المرة الأولى، ليس هناك فرق كبير.
00:10:54فلماذا نستخدم "تصميم كلود"؟
00:10:55أين يبدأ في التفوق؟
00:10:56حسناً، يبدأ في التفوق
00:10:59عندما نبدأ الحديث عن الاختلافات
00:11:00والقدرة على التكرار.
00:11:03ويمكنك رؤية ذلك فوراً من خلال التعديلات (tweaks).
00:11:07لذا فإن قدرتي على القيام بذلك هي شيء كبير.
00:11:10قدرتي على تغيير العنوان بسرعة كبيرة
00:11:13أو رؤية المؤشر.
00:11:16ويمكننا التوسع في هذا أيضاً.
00:11:18لذا كتبت: "زيادة عدد التعديلات بقوة".
00:11:20أريد أن أكون قادراً على اللعب بهذا قدر الإمكان.
00:11:22لذا دعنا نرى ما سيعود به.
00:11:26حسناً، الآن يمكننا أن نرى أنه أضاف المزيد من التعديلات
00:11:27لنتلاعب بها.
00:11:30وما هو معدل الاستخدام؟
00:11:32إضافة كل هذه التعديلات أضاف 7%.
00:11:36لذا يمكنك أن ترى أنه بمجرد إضافة صفحة هبوط
00:11:39وحوالي 14 تعديلاً، فقد استخدمنا بالفعل، ما هذا؟
00:11:40حوالي 11% من إجمالي استخدامنا.
00:11:43الآن، أعتقد أن التعديلات مهمة.
00:11:44تحدثت في وقت سابق في المقدمة،
00:11:47ما هي الميزات التي نريد التركيز عليها فعلياً
00:11:48عندما يتعلق الأمر بـ "تصميم كلود"؟
00:11:49لأننا عندما قمنا بالتجربة لمرة واحدة فقط،
00:11:51لم يكن الأمر مختلفاً بجنون عما حصلت عليه
00:11:52باستخدام مهارة تصميم الواجهة الأمامية.
00:11:55حسناً، هذه التعديلات والقدرة على العبث
00:11:59بكل هذه الأشياء وهذه التغييرات الدقيقة بسرعة،
00:12:02صحيح، هذه هي حقاً قوة "تصميم كلود".
00:12:03لذا سأقوم بالتصغير قليلاً
00:12:05حتى نتمكن من رؤية التعديلات قيد التنفيذ بشكل أفضل قليلاً،
00:12:10لكن يمكنني فعل كل شيء الآن من اللوحة إلى اللمسات،
00:12:14نصف قطر الزاوية، شبكة الخلفية، لا توجد شبكة خلفية،
00:12:19الخطوط، التأكيد، اختلافات العناوين الرئيسية، تبديلات التخطيط، صحيح؟
00:12:21هذه هي القوة هنا.
00:12:23القوة ليست مثل، أوه، يمكنه القيام بتصميم واجهة المستخدم
00:12:25وتصميم واجهة المستخدم منذ البداية جيد جداً.
00:12:29لا، إنها حقيقة أنني أستطيع التكرار بسرعة كبيرة،
00:12:33بسرعة كبيرة، هذا هو، فكر في مدى سرعة قيامي بذلك
00:12:34وفكر في مدى السرعة التي سيستغرقها
00:12:36لتنفيذ كل هذا داخل "كلود كود" (Claude Code).
00:12:39أعني، يمكننا حتى تغيير التخصص
00:12:41الذي يبحث فيه شيء وسائل التواصل الاجتماعي
00:12:46في هذه الصورة من الذكاء الاصطناعي والتكنولوجيا إلى الألعاب، إلى التمويل.
00:12:47شكراً لله أنني أستطيع ضبط سرعة المؤشر
00:12:52لأن هذا الشيء كان يطير، ولكن نعم، هذا رائع.
00:12:54هذا هو الجزء الأول وأعتقد أن هناك شيئين.
00:12:56حسناً، في الواقع هناك أكثر من ذلك بقليل،
00:12:59لكن التعديلات أعتقد أنها القيمة المضافة الأولى من التصميم
00:13:01لأن الأمر كله يتعلق بالتكرار البصري.
00:13:04وفي رأيي، الميزة الثانية الأكثر تأثيراً
00:13:07في "تصميم كلود" هي تباين صفحات الويب.
00:13:09لذا التعديلات صغيرة جداً، أليس كذلك؟
00:13:11مثل أننا نتحدث عن الألوان، نتحدث عن اللمسات،
00:13:14نتحدث عن الخطوط، ولكن ماذا لو أردت اختلافات
00:13:18لصفحة الهبوط ككل، مثل الذهاب بجنون معها.
00:13:19أنا لا أتحدث عن خط مختلف،
00:13:21أنا أتحدث عن تصميم مختلف تماماً
00:13:23وأريد أن أكون قادراً على رؤيتها مكدسة.
00:13:25مرة أخرى، تماماً كما يمكنني القيام به مع "غرزة" (Stitch).
00:13:26أريد أن أكون قادراً على القيام بذلك.
00:13:28حسناً، يمكننا فعل ذلك داخل "تصميم كلود"
00:13:29وهو سهل حقاً.
00:13:32سنقوم فقط بتوجيهه للقيام بذلك بالضبط.
00:13:33لذا قمت بتوجيه التصميم وقلت،
00:13:36هل يمكنك الآن إنشاء متغيرين آخرين لصفحة الهبوط هذه
00:13:39التي يمكنني النقر بينها والتي تكون أنماطاً مختلفة جداً،
00:13:42اقترح عليّ أنماطاً مختلفة أولاً.
00:13:44لذا عاد بستة خيارات مختلفة لي.
00:13:48يمكننا القيام بنمط المحطة الطرفية (terminal) لبلومبرج،
00:13:53تحريري أقصى، وحشي، سينثويف، باستيل ناعم،
00:13:56أو صحيفة مطبوعة.
00:13:59لنذهب، نعم، نوعاً ما مثل واحد واثنين.
00:14:03لذا سأقول، لنفعل واحد واثنين
00:14:08وبالطبع حافظ على التخطيط الحالي أيضاً.
00:14:10لذا انتهى "تصميم كلود" بمتغير.
00:14:13لذا ها هو الخيار التحريري، الذي بدأنا به.
00:14:18لدينا الآن خيار المحطة الطرفية.
00:14:21بالإضافة إلى خيار التحرير الأقصى،
00:14:24الذي نوعاً ما مثير للاهتمام، شيء مختلف.
00:14:25الآن، إذا لم تخبره بذلك،
00:14:28فإنه سيقوم فقط بالتعديلات للأصل.
00:14:30لذا عندما تقوم بهذه المتغيرات،
00:14:33أعتقد أن سير العمل العام يجب أن يكون،
00:14:35هو أن تبدأ أولاً بالمتغيرات.
00:14:37لذا على مستوى الماكرو، أنت تفكر، حسناً،
00:14:39أريد نوعاً ما الذهاب في هذا الاتجاه.
00:14:42ثم بمجرد اختيار واحد من هذه الماكرو،
00:14:44قل إننا قررنا الالتزام بما نحب،
00:14:47ثم ستنتقل إلى مرحلة التعديل العدوانية جداً.
00:14:49لذا يمكنك نوعاً ما رؤية كل شيء
00:14:51والتعمق في ما تريده.
00:14:54لأنه مع الطريقة التي تم بها إعداد الاستخدام الآن،
00:14:56إذا ذهبت إلى الماكرو وقلت،
00:14:57لا أريد ثلاثة خيارات فقط.
00:15:00أريد أربعة، خمسة متغيرات وأريد تعديلات على كل منها.
00:15:02أنت فقط ستحرق استخدامك.
00:15:04لأن إضافة هذين المتغيرين، الأقصى والمحطة الطرفية،
00:15:05كان ذلك 5% إضافية.
00:15:07لذا يصل هذا إلى حوالي،
00:15:11أعتقد أننا عند 17% الآن لصفحة الهبوط،
00:15:13نسختان من صفحة الهبوط بالإضافة إلى التعديلات.
00:15:14وأعلم أنني أستمر في الحديث عن الاستخدام،
00:15:16ولكن بالنسبة للكثير من الناس، هذه صفقة كبيرة
00:15:17ويجب أن تكون كذلك.
00:15:18أعتقد أنه في المستقبل،
00:15:19ربما سيغير هذا الأمر برمته،
00:15:20ولكن فقط ضع ذلك في الاعتبار.
00:15:23وهكذا مع هذين الشيئين معاً،
00:15:26هذا التباين في التعديلات،
00:15:31هو ما يسمح لنا بالوصول إلى حل بنسبة 80%، حل بنسبة 90%.
00:15:35يمكننا العودة إلى هنا كما أريتكم في البداية.
00:15:37يمكننا إجراء تعديلات.
00:15:39لذا يمكنني النقر على هذا العنوان العلوي.
00:15:42يمكنني تغيير درجة الشفافية.
00:15:43يمكنني تغيير العرض، واللون، وكل تلك الأمور.
00:15:45لذا يمكننا أن نكون محددين للغاية إذا أردنا،
00:15:47لكن القوة الحقيقية تأتي من الوصول إلى حل بنسبة 90%،
00:15:50وأن تقول، حسناً، أنا أحب التعديل الأول.
00:15:54أحب التركيز الذي يقع على العلامة،
00:15:55تلك الحلقة تبدو فظيعة، أقصد العلامة.
00:15:59أحب هذا العنوان الفرعي المحدد، وهذا العنوان الرئيسي، أو أياً كان.
00:16:04وبعد ذلك تقول، حسناً، سنعتمد ذلك.
00:16:05أعجبتنا التعديلات.
00:16:06الآن دعونا ننتهي من بقية الصفحة المقصودة،
00:16:09لأن هذا مجرد قسم رئيسي.
00:16:11وبعد ذلك ما تفعله هو تصدير هذا إلى Claude Code.
00:16:14أنت تسلم هذا إلى Claude Code.
00:16:15عندما أنقر على هذا، لديك بضعة خيارات.
00:16:17يمكنك تنزيل الملف المضغوط أو مجرد نسخ هذا الأمر
00:16:20وتحضيره داخل Claude Code.
00:16:22وأعتقد أن هذا النوع من سير العمل أسرع بآلاف المرات
00:16:25من البقاء هنا، وهو ما قدمه لنا Claude Code
00:16:28بنفس الطلب تماماً.
00:16:29أعني، حسناً، Claude Code،
00:16:32دعنا نعبث باللون الآن.
00:16:35دعنا نقوم ببعض التغييرات.
00:16:36دعنا نعبث بالعنوان الرئيسي الآن ونقوم ببعض التغييرات.
00:16:39هذا قد يستغرق ساعات مقابل أن هذا استغرق دقائق.
00:16:44وبالنسبة لي على الأقل، أحتاج إلى رؤية الأشياء
00:16:47وأحتاج إلى رؤية مجموعة من الخيارات
00:16:48قبل أن أرى حقاً ما يعجبني.
00:16:50والأفضل من ذلك، من المحتمل أنني بمجرد رؤية شيء ما،
00:16:53قد أقوم بتغييره.
00:16:54لأنه لكي أكون صادقاً، إذا كانوا يرون هذا،
00:16:54فأنا معجب نوعاً ما بالنسخة العمودية الفائقة.
00:16:56ربما نضع بعض الأيقونات هنا أو أياً كان.
00:16:58أنا فقط أريد التكرار.
00:17:00أنا فقط أريد رؤية أشياء مختلفة.
00:17:02إذن هذه هي أكبر وأفضل ممارستين يمكنني تقديمهما لك
00:17:05عندما يتعلق الأمر بجزء تطبيق الويب من هذا.
00:17:08على المستوى الكلي، اطلب تغييرات.
00:17:11ثم على المستوى الدقيق، اطلب المزيد من التعديلات.
00:17:13الشيء الوحيد الذي لم نفعله هنا،
00:17:15وسنوضح ذلك في أشياء مثل عرض الشرائح
00:17:18وأشياء من هذا القبيل،
00:17:19هو الطلب منه أن يقوم أساساً بتشغيل وضع التخطيط الخاص به.
00:17:22لذا أعطيناه الطلب وعلى الفور،
00:17:24أخرج لنا هذا.
00:17:25ما كان بإمكاننا فعله بدلاً من ذلك هو القول،
00:17:26مهلاً، أريد نوعاً ما القيام بوضع التخطيط معك.
00:17:28أريدك أن تطرح عليَّ مجموعة من الأسئلة.
00:17:30وسيقوم بدلاً من ذلك بتشغيلك من خلال
00:17:32عدد كبير من الأسئلة،
00:17:33مثل خمسة، ثمانية، 10 أسئلة حول،
00:17:35حسناً، ماذا تريد هنا؟
00:17:36ماذا تريد هناك؟
00:17:37ماذا تريد هناك؟
00:17:38بهذه الطريقة لا يتعين عليك القيام بالعديد من التكرارات
00:17:40وفي النهاية يوفر عليك الاستخدام.
00:17:42وقد مررت بنفس هذا النوع من المسار
00:17:44عندما كنت أنشئ الواجهة الأمامية
00:17:46للتحكم في نظام التشغيل الخاص بوكيلي.
00:17:47يمكنك أن ترى هنا،
00:17:48هذا ما بدأت به في الأصل.
00:17:51ثم تمكنت من المضي قدماً نوعاً ما
00:17:52خلال كل هذه الخيارات المختلفة.
00:17:53انتهى بي المطاف بهذا، قمرة القيادة،
00:17:56على الرغم من أنني فكرت في القيام بهذا مع الرمز الرائع.
00:17:58ثم جلبت هذا الإصدار مرة أخرى إلى Claude Code
00:18:01ثم أجريت تعديلات طفيفة على الهوامش
00:18:03وفعلته بالفعل.
00:18:04لذا كان تطبيق ويب مناسباً.
00:18:06الآن لنقم بتصميم Claude وعرض الشرائح.
00:18:08سنسير خلال هذا بشكل أسرع قليلاً
00:18:09لأن الكثير من الأساسيات التي مررنا بها
00:18:13عندما يتعلق الأمر بتطبيقات الويب، تنطبق أيضاً على عروض الشرائح.
00:18:16لذا لن أطيل في هذه النقاط.
00:18:17وهذه المرة سنستعرض نظام التصميم أثناء العمل.
00:18:21وتذكر أن هذا النظام يعتمد على المرئيات
00:18:24من نظام التشغيل الوكيل الخاص بنا.
00:18:26لذا سنمضي قدماً ونضغط على إنشاء.
00:18:27وماذا نرى؟
00:18:28نفس الإعداد كما في السابق.
00:18:30وشيء يطلب منك تقديم سياق،
00:18:32سواء كان ذلك لقطات شاشة، أو قواعد بيانات برمجية، أو ملفات Figma.
00:18:35الآن، السياق الوحيد الذي سنعطيه إياه
00:18:37هو نظام التصميم الموجود بالفعل هناك.
00:18:39بالإضافة إلى طلب يقول،
00:18:41نريد عرض شرائح يتحدث عن الاختلافات
00:18:45بين تصميم Claude و Google Stitch.
00:18:48وقد كان لدي Opus 4.7 في نافذة أخرى مع Claude Code،
00:18:53للتوصل إلى الطلب.
00:18:54لذا اضطررت للقيام ببحث على الويب.
00:18:55حسناً، هنا نوعاً ما الاختلافات بين الاثنين.
00:18:57الآن في النهاية، كتبت قبل أن تبني أي شيء،
00:19:01اسألني أي أسئلة لديك.
00:19:02لذا نحن على نفس الصفحة.
00:19:05لذا بمعنى ما، نحن نجبره تقريباً على القيام
00:19:07بنوع من وضع التخطيط.
00:19:08وهكذا ترى هذا يتجمع هنا.
00:19:10مرة أخرى، يمكنك الحصول على وضع التخطيط القسري هذا
00:19:12يحدث تماماً عند القيام بتطبيقات الويب أيضاً.
00:19:14فقط تأكد من وضعه في الطلب الأولي.
00:19:16إذن لمن هذا العرض؟
00:19:18لنقل إنه لمحاضرة عامة.
00:19:20سنقول، سنبقيه قصيراً ولطيفاً.
00:19:24ضعه عند ستة، سنقوم بخمس دقائق.
00:19:28سنقوم بخمس شرائح.
00:19:30سنقوم بنمط عنوان رأي، قطعة مركزية.
00:19:34سنقول خريطة تحديد موقع 2 في 2 فقط.
00:19:37استدعاء السعر، نعم.
00:19:39ثم سنقوم فقط بالمرور على بقية هؤلاء.
00:19:43لا ملاحظات.
00:19:44وهكذا بشكل عام، يسألنا واحد، اثنان، ثلاثة، أربعة، خمسة،
00:19:47ستة، سبعة، ثمانية، تسعة، 10، 11، 12، 13، 14، 14 سؤالاً.
00:19:52بالإضافة إلى، كما تعلم، القليل من الالتقاط للكل هنا أدناه،
00:19:56وهو ما يعجبني حقاً.
00:19:58مرة أخرى، وضع التخطيط في Claude Code أحياناً سيفعل،
00:20:00أشعر أنه في الغالب، كما تعلم، القليل،
00:20:03مثل تكرارين من أربعة أسئلة لكل منهما.
00:20:05لذا هذا رائع.
00:20:06وهنا نظرة على عرض الشرائح.
00:20:07وضعتها في ملء الشاشة وكمرجع،
00:20:10هذا استغرق 5% من استخدامنا.
00:20:12لذا حوالي 1% لكل شريحة.
00:20:15لذا حصلنا على صفحة العنوان، حاشية صغيرة حول العرض
00:20:19الذي تم إنشاؤه بواسطة تصميم Claude.
00:20:22حصلنا على الأرقام، كما تعلم، حيث تهبط.
00:20:26حسناً، حصلنا على نوع من الرسم البياني الذي يوضح حيث تهبط
00:20:30من حيث التكلفة.
00:20:31من الواضح أن تصميم Claude أكثر تكلفة بكثير.
00:20:34تقرير ميداني.
00:20:37ثم يعطينا نوعاً ما،
00:20:38مهلاً، إليك مخططاً صغيراً يوضح
00:20:40ما الذي يجب استخدامه لأي حالة استخدام.
00:20:43لذا أعتقد أن عرض الشرائح يبدو رائعاً جداً،
00:20:45لكي أكون صادقاً معك.
00:20:46ولكن الأهم من ذلك،
00:20:48لقد التزم بنظام التصميم.
00:20:49هذا نظام التشغيل الوكيل الذي بُني عليه نظام التصميم بالكامل
00:20:53ينعكس بالتأكيد في العرض.
00:20:55يبدو أن هذين الشيئين جاءا من نفس المكان.
00:20:59وكما هو الحال مع تطبيق الويب،
00:21:00يمكننا المرور عبر نفس سير العمل.
00:21:03هذا كان الأصل الذي أعطانا إياه.
00:21:05الآن يمكننا طلب تغييرات كلية والقول،
00:21:07حسناً، هل أردنا فعلياً الالتزام، كما تعلم،
00:21:09بنظام التصميم الخاص بنا؟
00:21:11أم نريد الذهاب في اتجاه مختلف تماماً؟
00:21:13حسناً، نرى، كما تعلم، متغيرين، ثلاثة، أربعة مختلفين.
00:21:16حسناً، دعنا نركز على واحد.
00:21:17والآن دعنا نجلب التعديلات
00:21:19ونضبط هذا الشيء بدقة.
00:21:20وهذا هو نوعاً ما كيف أعتقد
00:21:22أنه يجب عليك التعامل مع عرض الشرائح.
00:21:23بنفس الطريقة التي نتعامل بها مع تطبيقات الويب.
00:21:24الآن كمرجع، هنا عرض الشرائح
00:21:27الذي أنتجه لنا Claude Code.
00:21:29أعطيته نفس الطلب تماماً
00:21:31وأنا أنشأت هذا من نفس الدليل،
00:21:34نظام التشغيل الوكيل مباشرة.
00:21:36لذا كان لديه وصول كامل لنفس نظام التصميم،
00:21:38إذا جاز التعبير.
00:21:39علاوة على ذلك، طلبت منه أيضاً أن يسألني أسئلة.
00:21:42سألني فقط سبعة.
00:21:43والأسئلة، لكي أكون صادقاً، لم تكن جيدة.
00:21:46كانت أكثر سطحية نوعاً ما
00:21:47من حيث، حسناً، عدد الشرائح.
00:21:49وماذا تريد أن تكون نسبة العرض إلى الارتفاع
00:21:51مقابل ما رأيناه في التصميم؟
00:21:52وأعتقد أن ذلك ينعكس في المجمل،
00:21:55مخرجات أكثر رتابة بكثير.
00:21:57وأنا متفاجئ نوعاً ما بأنه لم يكن أقرب
00:22:00من حيث النمط البصري مقارنة بما قدمه لنا التصميم.
00:22:02أعني، ليس سيئاً.
00:22:05أعني، الألوان متقاربة، النص متقارب،
00:22:07لكن أعني، لنكن جادين.
00:22:10هذا النوع يطغى عليه تماماً
00:22:12إذا كنا سنكون صادقين.
00:22:13أخيراً، دعونا نتحدث عن تصميم تطبيقات الجوال.
00:22:15ولديك خياران هنا.
00:22:17الأول، أنت تذهب مباشرة للجوال.
00:22:19أنت لا تقوم بأي أشياء متعلقة بتطبيقات الويب.
00:22:21وهو بسيط جداً.
00:22:22أنت ستفعل فقط ما فعلناه مع جزء تطبيق الويب
00:22:25في بداية هذا الفيديو.
00:22:26وأنت ستكتفي بالقول في البداية،
00:22:28هذا مخصص لتطبيق جوال.
00:22:29تأكد من أن المرئيات تعكس ذلك.
00:22:32ولكن إذا كنت تأخذ تطبيق ويب
00:22:33وتريد بعد ذلك ترجمة ذلك إلى منصة جوال،
00:22:35الأمر بسيط جداً.
00:22:36بينما يمكننا البقاء هنا في نافذة الطلب التي نحن فيها،
00:22:40في الواقع، حسناً، الآن أرني إياه في الجوال.
00:22:42ربما يكون من المنطقي أكثر وجود مشروع منفصل
00:22:45مع نفس الأشياء التي تحدث بالضبط.
00:22:46ولكن الآن لدينا تحديد واضح
00:22:48بين تطبيق الويب الذي نعمل عليه مقابل الجوال.
00:22:51وهكذا للقيام بذلك، أنت ستكتفي بالذهاب إلى أعلى اليمين
00:22:53حيث يقول مشاركة.
00:22:54وبعد ذلك ستضغط على تكرار المشروع.
00:22:57بمجرد قيامك بذلك، سيأخذك إلى صفحة مثل هذه.
00:23:00ولكن إذا عدت إلى الصفحة الرئيسية،
00:23:02يمكننا الآن أن نرى أن هناك ريمكس تجريبي لـ CD.
00:23:05وهذا الريمكس هو المشروع المكرر.
00:23:08والآن سأقوم فقط بطلبه والقول،
00:23:10هل يمكنك أن تريني نفس التصميم بتنسيق جوال؟
00:23:13وهنا إصدارات الجوال التي قدمها لنا.
00:23:15لقد مضى قدماً وأنشأ متغيرات لكل الثلاثة.
00:23:18لم أحدد ذلك، لكنه فعلها.
00:23:19لذا أعطانا تسعة نماذج أولية بشكل أساسي
00:23:21وكانت التكلفة الإجمالية 5% من الاستخدام.
00:23:25لذا نفس المسار كالمعتاد.
00:23:27لقد أعطانا الكلي هنا.
00:23:29لذا كنا سنختار أياً منها أعجبنا،
00:23:30من الواضح أنه سيكون أياً كان الذي قررته لتطبيق الويب الخاص بك.
00:23:32ومن هناك، كنا سنقول،
00:23:34مهلاً، أنا أحب التحرير.
00:23:36الآن اجلب الكثير من التعديلات حتى أتمكن حقاً من ضبط هذا.
00:23:38لكن لقول الحقيقة،
00:23:39إذا كان لديك كل شيء جاهزاً في نسخة تطبيق الويب،
00:23:42فمن المحتمل أنك قمت بالفعل بالتعديلات.
00:23:44لذا لا ينبغي أن يكون هناك الكثير
00:23:47مما تحتاج إلى تغييره في هذه المرحلة.
00:23:48ولكن دائماً ما يكون هناك القليل،
00:23:51دائماً ما تواجه مشكلات عندما تنتقل من تطبيق ويب قياسي
00:23:53إلى تصميم جوال.
00:23:55ولكن كما ترى هنا، من السهل جداً القيام بذلك،
00:23:57مجرد طلب واحد.
00:23:58لذا هذا حيث سأترككم يا رفاق اليوم.
00:23:59آمل أنني كنت قادراً على توضيح الاختلافات
00:24:02يمكنني تجربة الكثير من الإصدارات المختلفة
00:24:04لأي شيء أحاول إنشاءه
00:24:06حتى أصل في النهاية إلى شيء يعجبني.
00:24:09وهي التعديلات وهي المتغيرات.
00:24:11وما تشتريه لنا حقاً هو سرعة التكرار.
00:24:15يمكنني المرور عبر الكثير من الإصدارات المختلفة
00:24:17لأي شيء أحاول إنشاءه
00:24:19حتى أتمكن أخيراً من الوصول إلى شيء يعجبني.
00:24:21وبمجرد قيامي بذلك،
00:24:22ثم أسحبه إلى نظام Claude Code البيئي.
00:24:25وآمل أنني كنت قادراً على جعل تكاليف الاستخدام
00:24:27أكثر وضوحاً قليلاً من خلال ذكر النسب المئوية التي فقدناها
00:24:31بعد كل تكرار وإنشاء.
00:24:33لذا كما هو الحال دائماً، أخبروني برأيكم.
00:24:38لأنني أعتقد أن هذه أداة رائعة جداً.
00:24:40تأكدوا من التحقق من Chase AI+
00:24:42إذا كنتم تريدون وضع أيديكم على Claude Code Masterclass،
00:24:45وسأراكم لاحقاً.