00:00:00لذا فإن التحديثات لا تتوقف أبدًا.
00:00:02أصدرت Anthropic للتو Claude Design،
00:00:05والذي يمنحنا الآن واجهة لإنشاء تطبيقات الويب،
00:00:09والمواقع الإلكترونية، وكل ما نريده تقريبًا
00:00:11عبر واجهة Claude.
00:00:13هذا هو إصدارهم من Google Stitch.
00:00:16وكما ترون من هذا الفيديو التجريبي،
00:00:18الأمر كله يتعلق بمنحك القدرة على تعديل كل شيء
00:00:21من المستويات الكلية إلى الدقيقة مع هذه التصاميم.
00:00:23ونحن لا نتحدث فقط عن تطبيقات الويب،
00:00:25بل نتحدث أيضًا عن تصاميم الجوال أيضًا.
00:00:27ومن المضحك نوعًا ما لأننا عندما نتحدث عن
00:00:28Anthropic و Claude Code،
00:00:30فإن إحدى أكبر نقاط ضعفه هي تصميم الواجهة الأمامية.
00:00:32لذا فإن رؤيتهم يطرحون الآن
00:00:34تطبيقًا متكاملاً
00:00:36يتعامل مع نقطة الضعف هذه هو أمر رائع حقًا.
00:00:39لذا في هذا الفيديو، سأريكم كيف يعمل.
00:00:41سنقوم بعرض تجريبي سريع
00:00:42حتى تتمكن من الدخول وتجربته بنفسك.
00:00:43الآن، تم إنشاء Claude Design مع وضع Opus 4.7 في الاعتبار
00:00:46وهو متاح إذا كنت تستخدم أي شيء
00:00:49من Pro Max إلى Enterprise.
00:00:51وهذا يقوم بكل شيء من النماذج الأولية إلى المخططات
00:00:53إلى عروض PowerPoint التقديمية.
00:00:54وهو شيء يمكننا تصديره إلى برامج
00:00:57مثل Microsoft PowerPoint أو إرساله إلى Canva.
00:00:59الآن، أحد الأشياء الرائعة في هذا هو تصميم العلامة التجارية.
00:01:01حيث يمكنك تزويده بقاعدة كود،
00:01:03لنقل قاعدة كود موقعك الإلكتروني،
00:01:05وسيقوم بسحب جميع أصول العلامة التجارية من الموقع
00:01:09حتى يتمكن من مطابقة أشياء مثل الألوان والخطوط
00:01:11مع التصميم الذي تعمل عليه.
00:01:12للبدء، ما عليك سوى التوجه إلى claud.ai/design
00:01:15وسيأخذك إلى صفحة ويب تبدو هكذا.
00:01:18الآن، مباشرة على اليسار، لدينا خيارات قليلة ومختلفة،
00:01:20نماذج أولية، عرض شرائح، يمكنك استخدام قالب أو غير ذلك.
00:01:23هنا في الأسفل، كما كنت أتحدث،
00:01:25لدينا القدرة على إنشاء نظام تصميم.
00:01:27لذا إذا ذهبت إلى إعداد نظام التصميم،
00:01:29يمكنني إعطاؤه شيئًا مثل اسم شركتي،
00:01:33وبعد ذلك يمكنني تقديم أمثلة لنظام التصميم الخاص بي.
00:01:36لست مضطرًا للقيام بذلك،
00:01:38ولكن هذا سيساعد إذا كان لديك بالفعل شيء
00:01:40تحاول مطابقته.
00:01:41لذا يمكنك إعطاؤه رابط GitHub الخاص بك.
00:01:43يمكنك في الواقع سحب المجلد.
00:01:45لذا إذا كان لديك قاعدة الكود على جهاز الكمبيوتر الفعلي،
00:01:48يمكنك سحبها هنا،
00:01:49أو يمكنك فقط إضافة الخطوط والشعارات والأصول،
00:01:51بالإضافة إلى أي ملاحظات أخرى.
00:01:52لذا ما فعلته هو أنني اخترت المجلد الموجود على جهاز الكمبيوتر الخاص بي
00:01:55والذي يحتوي على أصول موقعي الإلكتروني،
00:01:57ثم ضغطت ببساطة على الاستمرار في التوليد.
00:01:59عندما تفعل ذلك، خاصة إذا كانت قاعدة الكود كبيرة،
00:02:01أولاً، لن يقوم بتحميل قاعدة الكود بالكامل.
00:02:03بل سيكتشف أي الملفات هي المنطقية فعليًا.
00:02:05وثانيًا، ستظهر لك نافذة منبثقة تقول،
00:02:07"مهلاً، قد يستغرق هذا من 15 إلى 20 دقيقة،"
00:02:09بينما يراجع جميع ملفاتك.
00:02:11الآن، إذا كنت تريد القيام بشيء من الصفر،
00:02:12يمكنك القيام بذلك تمامًا أيضًا.
00:02:13لذا سنبدأ بنموذج أولي جديد.
00:02:16سنسميه "عرض تشيس".
00:02:17لدينا خياران.
00:02:18لديك مثل مجرد إطار سلكي تقريبي،
00:02:20أو يمكننا الانتقال مباشرة إلى مخطط عالي الدقة.
00:02:23لذا سنقوم بالمخطط.
00:02:25سيأخذك ذلك إلى هذه الصفحة.
00:02:26ومرة أخرى، أشعر بالتأكيد بلمسات برنامج Stitch هنا.
00:02:28لذا سأخبره،
00:02:29دعونا نصمم رسمًا تفاعليًا بمظهر داكن
00:02:31يوضح كيف تتدفق الثقافة بين المدن،
00:02:33كرة أرضية دوارة مع مدن متصلة بمسار متوهج.
00:02:35هذا هو نفس الشيء الذي فعلوه في العرض التجريبي،
00:02:37لكنني مهتم برؤية ما إذا كان ما سنحصل عليه هنا
00:02:40يطابق فعليًا الأصل الذي أظهروه لنا في الفيديو،
00:02:43وما هي أنواع الاختلافات التي سنراها.
00:02:45إلى أي مدى بالغوا في الإعلان؟
00:02:47لذا سنقوم بإرساله.
00:02:48وبالمناسبة، يمكنك أن ترى هنا،
00:02:50يمكننا أيضًا اختيار أشياء مثل النموذج.
00:02:52يمكنك إرفاق أشياء.
00:02:53يمكنك في الواقع استخدام الصوت هنا واستيراد ما تريد.
00:02:55لذا على الفور، يبدأ في طرح بعض الأسئلة علينا،
00:02:57وهو ما يعجبني حقًا.
00:02:58هذا مشابه تقريبًا لوضع التخطيط داخل Claude Code.
00:03:02لذا ما نوع الثقافة التي نفكر فيها؟
00:03:04لنقم فقط بعمل نمط كرة أرضية مختلط.
00:03:07لنقم بهذا، لنقم بمسار التدفق هذا.
00:03:13هذا يبدو رائعًا.
00:03:14ماذا نريد أن نفعل في لوحة الألوان؟
00:03:16لنقم بعمل ألوان متعددة.
00:03:18وعلى الفور، أحب حقيقة
00:03:20أننا نحصل الآن على هذه المطالبات.
00:03:21إذا ذهبت إلى Stitch، فلن أحصل على هذا حقًا.
00:03:24إذا ذهبت إلى أشياء أخرى، فلن أحصل على هذا حقًا.
00:03:26أحد أقوى الأشياء داخل Claude code،
00:03:29وقد تحدثنا عن هذا في دروس تصميم الويب الأخرى،
00:03:31هو وجود هذا الحوار المتبادل
00:03:33لاكتشاف هذه النقاط العمياء في خطتنا.
00:03:37وحقيقة أنه يطرح علي كل هذه الأسئلة هو أمر ضخم.
00:03:39إنه يطرح علي عددًا كبيرًا منها.
00:03:40حتى وضع التخطيط العادي في Claude code يطرح ثلاثة فقط.
00:03:43لذا سنسحب للتدوير.
00:03:45ما هي المدن التي يجب أن نميزها؟
00:03:47لنختر أفضل 10 مدن.
00:03:49كم مقدار واجهة المستخدم؟
00:03:50لنقم بعمل لوحة تحكم كاملة.
00:03:53المزاج العام.
00:03:54لنقم بالنمط الافتتاحي.
00:03:58سوف نلتزم بالنمط الافتتاحي.
00:04:00ما الذي يجب أن يكون قابلاً للتعديل؟
00:04:02أوه، سنقوم بعمل لوحة ألوان التدفق.
00:04:07سأجعله يقوم بثلاثة أشياء.
00:04:08دعونا نستمر.
00:04:09وبعد ذلك على اليسار، بمجرد أن نجيب على تلك الأسئلة،
00:04:11يقوم بإعداد تقدمه.
00:04:12مرة أخرى، مشابه لما نراه في Claude code
00:04:15إذا وضعناه على وضع التخطيط وجعلناه ينفذ الأشياء.
00:04:17وبالمناسبة، هذا بوضوح شيء
00:04:19يجب أن تكون على تطبيق الويب للقيام به.
00:04:22هذا ليس شيئًا متاحًا في سطر الأوامر (الترمينال)
00:04:24لأسباب واضحة تتعلق بطبيعة الرسوميات.
00:04:27ومما قرأته،
00:04:29لا أعتقد أنه سيتم تنفيذ هذا أبدًا
00:04:30في تطبيق سطح المكتب، أو ربما سيحدث ذلك في مرحلة ما.
00:04:33ولكن حتى الآن، يجب عليك القيام بذلك من خلال Claude.ai.
00:04:35الآن، وبينما يتم البناء،
00:04:36دعونا نتحدث عن بعض الأسئلة التي قد تدور بذهنك،
00:04:38وهي مثل، كيف يختلف هذا
00:04:39عن قيامي بإعطاء هذه المطالبة هنا
00:04:41في نافذة الدردشة أو تشغيل Claude code
00:04:43وقول: مهلاً، أريدك
00:04:45أن تبني هذا الشيء التفاعلي.
00:04:47حسنًا، وجعله فقط، كما تعلم،
00:04:48ينشئ نوعًا من تطبيقات الويب من ذلك.
00:04:50الإجابة هي، إذا كنا سنبسط الأمر بشدة، فلا يوجد فرق فعلي.
00:04:54ففي النهاية، هو مجرد كتابة كود.
00:04:55سيكون نفس الشيء.
00:04:56الفرق هو، ومرة أخرى،
00:04:58إذا قمت بأي نوع من أنواع تصميم الواجهة الأمامية بأي صفة،
00:05:00حتى لو كانت مجرد صفحة هبوط بسيطة،
00:05:02فأنت تدرك قوة القدرة
00:05:04على رؤية هذه الأشياء بصريًا ومقارنتها.
00:05:05لهذا السبب برنامج Google Stitch رائع جدًا
00:05:08لأن الشيء المذهل في Stitch
00:05:09ليس بالضرورة فلسفة التصميم فقط،
00:05:11رغم أنني أعتقد أنها جيدة جدًا.
00:05:12بل حقيقة أن لدي واجهة مستخدم
00:05:13حيث يمكنني رؤية مجموعة من الخيارات بصريًا
00:05:15وتعديلها بهذا الأسلوب.
00:05:17وعندما يعجبني، أسحبه إلى الكود.
00:05:18عندما أفعل كل شيء بالكود أولاً
00:05:20من منظور التصميم، يكون الأمر صعبًا.
00:05:22يكون نوعًا ما غير متقن.
00:05:23من الصعب نوعًا ما أخذ وسيط بصري
00:05:26ووضعه في لغة طبيعية،
00:05:28والتي تتحول إلى كود،
00:05:29والذي يتحول إلى شكل بصري وإتقانه حقًا،
00:05:32خاصة في البداية.
00:05:33يجب أن أرى الأشياء بصريًا.
00:05:34على الأقل بالنسبة لي، أحتاج إلى رؤية الخيارات.
00:05:36لذا فإن وجود هذا هو أمر رائع.
00:05:38هذه خطوة رائعة للأمام لشركة Anthropic و Claude code
00:05:41لأن هذه كانت نقطة ضعف حقيقية.
00:05:42لهذا السبب ترى تطبيقات مثل Pencil
00:05:45وأشياء من هذا القبيل تصبح مشهورة جدًا
00:05:46لأنها تمنحك ذلك الوسيط البصري
00:05:48للتعامل مع مثل هذه الأنواع من الأشياء.
00:05:49وأيضًا ملاحظة سريعة، كما ترون هنا في الأسفل،
00:05:51هذه تطبيقات متكاملة الأركان.
00:05:53إنها في الأساس نمذجة أولية.
00:05:55لذا يمكنك الحصول على هذه الأشياء التي تسمى واجهات برمجة التطبيقات (APIs).
00:05:58يجب أن تفكر في هذا أكثر،
00:06:00ليس فقط كشيء لتصميم Canva البصري.
00:06:03يجب أن تفكر في هذا أكثر
00:06:04من حيث Google Studio،
00:06:05مثل نوع من أنواع Google AI Studio.
00:06:07إليك ما عاد به.
00:06:08لقد اعتمد نوعًا ما النمط الافتتاحي.
00:06:10يمكننا رؤية الكرة الأرضية هنا.
00:06:12يمكنني سحبها بالماوس.
00:06:14يمكننا ضبط سرعة الدوران، وتغيير كثافة التوهج،
00:06:18وتغيير لوحة الألوان.
00:06:19هذا نوعًا ما رائع.
00:06:21وبعد ذلك يحتوي على كتابات صغيرة هنا.
00:06:25الآن دعونا نتحدث عن القدرة على تعديل هذا الشيء.
00:06:27أولاً وقبل كل شيء، لدينا هذا الشيء الصغير للتعديلات في الأعلى.
00:06:30تلك التعديلات تتعلق فقط بسرعة الدوران
00:06:33وكل ذلك.
00:06:34يمكنني ترك تعليقات، ويمكنني التحرير، ويمكنني الرسم.
00:06:37ويمكننا أيضًا القيام بأشياء مثل ملء الشاشة
00:06:39لرؤية كيف سيبدو هذا في الواقع.
00:06:41هذا مثير للاهتمام في وضع ملء الشاشة.
00:06:42هذا يبدو أفضل بكثير في الواقع.
00:06:44لكن لنفترض أنني أردت إجراء تعديل على هذا الشيء.
00:06:46بوضوح، يمكننا فقط العودة إلى نافذة المطالبة
00:06:49وإعطاؤه أمرًا.
00:06:50إذا ذهبت إلى تعديل، يمكنني الحصول على تفاصيل أكثر دقة.
00:06:55هذا يذكرني بنوع من محررات الأكواد
00:06:58أو حتى شيء مثل lovable.
00:06:59لذا يمكنني فعليًا تحديد المدن الفردية نفسها.
00:07:04إذا اخترت الكرة الأرضية ككل، فسيظهرها هنا.
00:07:07ويمكنني تغيير أشياء مثل اللون.
00:07:11هذا يبدو بشعًا، الارتفاع وكل ذلك.
00:07:14لذا لدي القدرة على أن أكون محددًا جدًا
00:07:16بما أريد تغييره، وهو أمر رائع مرة أخرى.
00:07:18أفضل من قولي نصيًا،
00:07:19"مهلاً، أريد تغيير حجم هذا."
00:07:21حسنًا، يمكنني فقط تحديده هنا وتعديله بهذه الطريقة.
00:07:24يمكننا أيضًا وضع تعليقات.
00:07:25لذا يمكنني النقر على أي شيء محدد.
00:07:27نفس الشيء مع التعديل، ولكن بدلاً من التغيير الفعلي،
00:07:29"مهلاً، هذه الأرقام المحددة."
00:07:31يمكنني النقر على الكرة الأرضية وترك تعليق مثل،
00:07:34"هل يمكننا جعل الكرة الأرضية أكبر؟"
00:07:37إرسال إلى Claude.
00:07:40ويقوم بإنشاء قائمة انتظار من التعليقات.
00:07:41إذا كنت لا تريد إرسالها إلى Claude على الفور،
00:07:43ولكن في أي وقت يمكنك إرسالها إلى Claude
00:07:45وسيبدأ في العمل.
00:07:46بالإضافة إلى ذلك، يمكننا أيضًا الرسم.
00:07:48لذا يمكنني أن أقول، "حسنًا،
00:07:50أريد فقط قمرًا هنا."
00:07:52لنضع قمرًا.
00:07:53أريد رؤية شيء مثل Artemis 2 يطير حوله هنا.
00:07:56أشياء من هذا القبيل.
00:07:56ثم هنا، لدينا أيضًا ملف التصميم.
00:07:58لذا يمكنك فعليًا إلقاء نظرة
00:08:00على الكود الموجود خلف الكواليس.
00:08:02وأخيرًا، لدينا القدرة على تصدير
00:08:04ومشاركة هذا الشيء.
00:08:05لذا إذا نقرت على تصدير، يمكنني تحميله كملف مضغوط zip.
00:08:07يمكنني تصديره كملف PDF، أو PowerPoint، أو إرساله إلى Canva.
00:08:11أو ما هو رائع حقًا أيضًا هو أنه يمكنني تسليم هذا
00:08:13إلى Claude code.
00:08:14ويعطيني الأمر لجلبه
00:08:15داخل Claude code، وهو أمر رائع.
00:08:17لذا هنا سأتوقف لليوم.
00:08:18أعلم أن هذا كان سريعًا ومختصرًا،
00:08:19لكنني أردت فقط أن أريكم
00:08:21كيفية التنقل في هذا الشيء وما هو ممكن.
00:08:23توقعوا بالتأكيد تعمقًا أكبر في اليوم التالي أو نحو ذلك،
00:08:26لأريكم كيف يمكنك تحقيق أقصى استفادة من هذا.
00:08:29كالعادة، أخبروني برأيكم.
00:08:31إذا كنتم ترغبون في الحصول على Chase AI Masterclass،
00:08:33فهو موجود في التعليقات المثبتة وسأراكم لاحقًا.