كلود كود يحصل للتو على أكبر تحديث تصميمي لهذا العام (وإليك كيفية إتقانه)
CChase AI
Computing/SoftwareInternet Technology
Transcript
00:00:00تلقى Claude Code للتو أكبر ترقية لقدرات تصميم الواجهات الأمامية منذ فترة طويلة مع مهارة تصميم الشرطة المائلة الجديدة كلياً.
00:00:07الآن، تؤخذ مهارة Slash Design بشكل أساسي أفضل ما في تطبيق الويب المستقل Claude Design، الذي تراه هنا، وتدمجه في Claude Code نفسه.
00:00:16بدلاً من الاضطرار إلى التبديل بين تطبيقين منفصلين أو نقل تصميماتك بشكل محرج من Claude Design إلى Claude Code، أصبح لدينا الآن أفضل ما في العالمين.
00:00:25بالإضافة إلى ذلك، نحصل على الوظائف الإضافية لجميع مهاراتنا التي نستخدمها بالفعل داخل Claude Code.
00:00:30لذا، يمكننا دمج ميزة Slash Design الجديدة هذه مع أشياء مثل Impeccable أو مهارة Taste، مما يمنحنا نتائج أفضل بكثير.
00:00:36لذا، اليوم، لن أكتفي بوضح كيف تعمل Slash Design، بل سأقدم لك أفضل سير عمل لتحقيق أقصى استفادة منه.
00:00:42لذا، إذا كنت تقوم بأي عمل تصميم واجهة أمامية باستخدام Claude Code على الإطلاق، فسوف ترغب في البقاء لهذه الحزينة.
00:00:46الآن، ميزة البيع لمهارة Ford Slash Design هي ما تراه هنا مباشرة.
00:00:49الآن، أنا داخل تطبيق سطح المكتب Claude، ولكن ينطبق الشيء نفسه إذا كنت تستخدم الطرفية.
00:00:53وهي الفكرة القائلة بأنه عندما أقوم بـ Ford Slash Design وأطلب منه إنشاء شيء لي، فسيقوم بتوليد لوحة فنية مشابهة جداً لتطبيق الويب Claude Design.
00:01:02لدى خيارات متعددة يمكنني الاختيار من بينها، وعندما ألقي نظرة على هذه الخيارات، يمكنني أن أكون دقيقاً للغاية مع ما يتغير.
00:01:09كما ترون على الجانب الأيمن، بينما أضغط على مكونات مختلفة من تصميم الواجهة الأمامية الذي أنشأته، يمكنني تغيير كل شيء تقريباً.
00:01:17علاوة على ذلك، يمكنني بسهولة طلب إصدارات متعددة من نفس النوع من المخرجات، بمجرد أن يعجبني إصدار معين، يمكنني جعل Claude Code يعمل حقاً وبرمجة هذا الشيء.
00:01:27هذا يوفر علي الكثير من الوقت مقارنة بالتواجد داخل تطبيق الويب Claude Design، والقيام بالعملية برمتها، والقول أريد نقله، ووضعه في ملف مضغوط، وإسقاطه في المجلد، والإشارة في Claude Code، والقيام بكل هذه الأشياء المزعجة.
00:01:38وأكثر من مجرد كونها مريحة، مثلما ألمحت سابقاً، يمكننا الآن تكديس المهارات.
00:01:43عندما أكون داخل تطبيق الويب Claude Design، لا يمكنني بالضرورة استخدام أو استدعاء شيء مثل مهارة Impeccable أو مهارة Tay.
00:01:49يمكنني فعل ذلك هنا.
00:01:50لذا في النهاية، ستكون مخرجاتي أفضل بكثير، فضلاً عن كونها أكثر ملاءمة.
00:01:54الآن، استخدام مهارة التصميم أمر سهل للغاية.
00:01:56كل ما سأفعله هو كتابة design مسبوقة بشرطة مائلة، ثم سأطلب منه ما أ محاولة إنشائه.
00:02:01لذا لنفترض أنني أردت إنشاء منشور على وسائل التواصل الاجتماعي، أو التفكير في شيء مثل منشور على إنستغرام، يوضح ما تفعله مهارة تصميم الشرطة المائلة الجديدة.
00:02:10ولنفترض أنني أردت إنشاء ثلاثة تنويعات من هذا بثلاثة أنماط تصميم منفصلة للغاية، وأردت استخدام مهارة Impeccable.
00:02:19سأقوم فقط بفتح الميكروفون الخاص بي وأقول شيئاً مشابهآً تماماً لذلك.
00:02:22إذن هل يمكننا إنشاء نموذج محاكاة لمنشور على وسائل التواصل الاجتماعي؟
00:02:27فكر في هذا على أنه نوع من منشورات إنستغرام التي تفصل ما تنفذه مهارة تصميم الشرطة المائلة الجديدة في Claude Code.
00:02:34أريد ثلاثة تنويعات مختلفة للغاية، لذا أنماط تصميم مختلفة للغاية، وأنماط جمالية مختلفة للغاية.
00:02:41وعندما تفعل هذا، أريدك أن تستدعي مهارة Impeccable لمساعدتك في إنشاء هذا.
00:02:45الآن، إذا كان عليّ القيام بنفس المهارة تماماً داخل تطبيق سطح المكتب Claude، فستظهر داخل هذا النوع من اللوحة الجانبية، وهو نوع من السبب وراء رغبتي في القيام بذلك داخل تطبيق سطح المكتب، لأن كل شيء في مكان واحد.
00:02:57داخل المحطة الطرفية، ما ستراه هو أنه سيقوم بإنشاء عنصر اصطناعي، لذلك سيفتح في الغالب في متصفحي.
00:03:02لذا، على الرغم من أنه ليس بمثل ملائمة تطبيق سطح المكتب، إلا أنه لا يزال من السهل نوعاً ما القيام بالأشياء.
00:03:06الآن، قبل أن ننظر إلى العنصر الاصطناعي، كلمة سريعة من راعي اليوم، أنا.
00:03:10لذا لقد أصدرت للتو نسخة محدثة من دورة Claude Code Masterclass الخاصة بي، وهي الطريقة الأولى للانتقال من الصفر إلى مطور ذكاء اصطناعي، خاصة إذا لم تكن قادماً من خلفية تقنية.
00:03:19نحن نركز على حالات الاستخدام الحقيقية، وحالات الاستخدام العملية، وأنا أقوم بتحديث هذا كل أسبوع.
00:03:24لذا إذا كنت شخصاً يحاول معرفة كيفية استخدام هذه الأداة المجنونة بالفعل، فهذا مناسب لك.
00:03:32يمكنك العثور عليها داخل Chase AI+.
00:03:33هناك رابط في التعليق المثبت.
00:03:35وهذه نظرة على العنصر الاصطناعي الذي أنشأه.
00:03:37لدينا ثلاثة أنماط تصميم مختلفة لمنشوراتنا على إنستغرام، تماماً كما رأينا داخل تطبيق سطح المكتب.
00:03:44لدينا شريط الخصائص هذا هنا على اليمين.
00:03:46يمكنني التكبير، ويمكنني النقر فوق شيء ما، ويمكنني البدء في الحصول على مزيد من التفاصيل حول ما أقوم بضبطه بالضبط.
00:03:52ستلاحظ أيضاً هنا في الأعلى إلى اليمين، لدينا قسم التعديلات، وهو فارغ حالياً.
00:03:57في أي وقت، يمكنني مطالبة Claude Code بمنحي لوحة تعديلات، تماماً كما تتوقع أن تراها داخل تطبيق الويب Claude Design.
00:04:03ويمكنني تعديل أشياء أكثر مما أراه هنا مباشرة.
00:04:07إذن من حيث استخدام هذا الشيء بالفعل، فهو بسيط نسبياً.
00:04:10فقط اكتب تصميم بشرطة مائلة واسأل عما تريده.
00:04:12الآن، كيف يجب أن تبدو سير عملنا بالفعل؟
00:04:14كيف نحقق أقصى استفادة من هذا؟
00:04:16حسنًا، هناك سير عمل بسيط من ثلاث خطوات يجب عليك استخدامه في كل مرة تقوم فيها بأي نوع من تصميم الواجهة الأمامية باستخدام Claude Code.
00:04:22والخطوة الأولى ستكون الإلهام لأن ما أريد إعطاءه لـ Claude ليس مجرد موجه يقول، مرحباً، أود ثلاثة أشياء مختلفة.
00:04:30ما أود إعطاؤه لـ Claude Code بشكل مثالي هو بعض الأمثلة.
00:04:33أريد التقاط لقطات شاشة للملصقات التي تعجبني.
00:04:35أريد التقاط لقطات شاشة لأنماط التصميم التي استمتع بها.
00:04:39قم بتغذيتها لـ Claude Code وقل، مرحباً، هل يمكنك إنشاء شيء في نفس سياق هذا؟
00:04:43الآن، نحن نعمل فقط على ملصق، ولكن هذا ينطبق أيضاً إذا كنت تنشئ صفحة هبوط أو قسماً رئيسياً أو أي شيء من هذا القبيل.
00:04:50الآن، يجب أن يكون سؤالك التالي، أين يمكنني العثور على الإلهام؟
00:04:52ولحسن الحظ، هناك الكثير من الأماكن للحصول على الأفكار.
00:04:55أحد المواقع الجيدة هو Pinterest.
00:04:57لقد أدخلت للتو رسماً بيانياً على إنستغرام ورأيت كل هذه التصميمات المحتملة.
00:05:01موقع آخر جيد هو Landbook، وهو جيد حقاً لتصميم الويب والأقسام الرئيسية.
00:05:06ولدينا أيضاً أشياء مثل Dribbble، وهذا Dribbble بثلاثة حروف B.
00:05:11الفكرة هي أنك تحتاج فقط إلى الخروج إلى هناك حقاً، ويجب أن تبدأ في إنشاء نوع من مكتبة التصميمات التي يمكنك الرجوع إليها دائماً وإحضارها إلى Claude Code عندما تريد تصميم شيء ما.
00:05:21لذا لا يتعين عليك تكرار عملية الإلهام هذه في كل مرة.
00:05:24لذا سأخذ بعض لقطات الشاشة لبعض الأشياء التي تعجبني نوعاً ما.
00:05:27يعجبني هذا واحد.
00:05:29أعتقد أن هذا يبدو مثيراً للاهتمام للغاية.
00:05:31وتذكر، أنت تسعى فقط للحصول على مظهر جمالي عام تريد أن يستمده Claude.
00:05:36وأعتقد أن هذا يبدو مثيراً للاهتمام للغاية أيضاً.
00:05:39لذا الآن سأقوم بإفلات لقطات الشاشة الثلاث هذه في نافذة التوجيه.
00:05:43والآن سأقدم له نفس الموجه الذي قدمناه من قبل، مثل، مرحباً، أريد هذا النوع من منشورات إنستغرام.
00:05:48أريد ثلاثة إصدارات مختلفة.
00:05:49باستثناء هذه المرة، سأقول، ارجع إلى لقطات الشاشة هذه.
00:05:52أريد استخدام هذه كإلهام.
00:05:54يمكن أن يكون لديك نوع مختلف من التصميم لكل نوع من لقطات الشاشة.
00:05:59وسأقول أيضاً، مرحباً، تأكد من استخدام مهارة Impeccable.
00:06:02وسأخبره أيضاً، إذا كان يريد إنشاء أصول خارجية، لاستخدام شيء مثل حقل Higgs MCP الذي أمتلكه.
00:06:09يمكنك استخدام أشياء أخرى، مثل إذا كان لديك file.ai لأنواع أخرى من مولدات الصور.
00:06:14الفكرة هي، نظراً لأننا داخل Claude code الآن، يمكننا سحب أي شيء نريد إلى عملية التصميم هذه.
00:06:19ومرة أخرى، لا يتعين عليك استخدام صور خارجية إذا كنت لا تريد ذلك.
00:06:23ولكن هذا هو ما سيطرحه موجهي.
00:06:25لذا دعونا في الواقع إعادة إنشاء هذه المشاركات الثلاث التي قمنا بها.
00:06:29مرة أخرى، نحن نستخدم مهارة تصميم الشرطة المائلة.
00:06:31ولكنني أسقطت ثلاث لقطات شاشة هنا.
00:06:33وأود استخدامها كإلهام لعملية التصميم الخاصة بنا.
00:06:37لذا أود ثلاثة أجيال جديدة.
00:06:39قم بإنشاء جيل واحد يسحب من كل من لقطات الشاشة المناسبة هذه.
00:06:43مرة أخرى، استخدم مهارة تصميم Impeccable.
00:06:45وتذكر، لديك إمكانية الوصول إلى Higgs field MCP.
00:06:48لذا إذا كنت تشعر أنك بحاجة إلى إنشاء أصول خارجية يمكننا استخدامها للملصقات، فقم بذلك أيضاً.
00:06:55أترك ذلك لتقديرك.
00:06:56وهذه حقاً الخطوة الأولى والثانية من هذه العملية.
00:06:59الخطوة الأولى هي العثور على الإلهام.
00:07:00والخطوة الثانية هي استخدام تلك المهارات الإضافية حقاً والتي لا يمكننا استخدامها داخل تطبيق الويب Claude design.
00:07:08وإذا كنت تقول، مرحباً، أنت تواصل ذكر Impeccable، ليس لدي أي فكرة عما هذا.
00:07:11هذه مجرد مهارة مفتوحة المصدر مجانية يمكنك إضافتها إلى Claude code.
00:07:16وهي تدور حول تصميم الواجهة الأمامية.
00:07:18في الأساس، حيلتها بأكملها هي أنها تتعرف على شكل تفاهات الذكاء الاصطناعي، وتتخلص منها، وتضيف مبادئ تصميم أفضل لكل ما تقوم بإنشائه.
00:07:26وإذا كنت تريد الغوص بشكل أعمق في ذلك، لدي مقاطع فيديو تتعمق كثيراً في كيفية استخدام Impeccable بشكل أفضل.
00:07:31والآن إليك نظرة على الملصقات الجديدة التي أنشأها Claude باستخدام Slash design.
00:07:35ويمكنك أن ترى أنها تستمد بالتأكيد من هذا الإلهام الذي قدمناه له.
00:07:39وفي أي وقت، تماماً مثل ذي قبل، يمكنني التكبير هنا.
00:07:43يمكنني إلقاء نظرة على الخصائص ويمكنني البدء في تعديل الأشياء.
00:07:46الآن، دعونا نتحدث عن التعديلات.
00:07:49لذلك لا يحتوي هذا التصميم على أي ضوابط قابلة للتعديل حتى الآن.
00:07:50قم بتوصيف ما تريد ضبطه في Claude وسيضيف لوحة تعديلات له.
00:07:53حسنًا، دعونا نفعل ذلك لأننا الآن نوعاً ما في الخطوة الثالثة من العملية حيث نريد البدء في تعديل الأشياء حتى تعجبنا.
00:08:00لذا ما سأفعل ه هو فتح المحطة الطرفية، أين أنت، وأقول، مرحباً، هل يمكننا الآن إضافة بعض ضوابط قابلة للتعديل هنا؟
00:08:10أود أن تكون التعديلات عدوانية للغاية.
00:08:12لذا أريد أن أكون قادراً على تعديل أي شيء تقريبا قدر الإمكان مثل قدر الإمكان باستخدام لوحة التعديلات داخل Claude design.
00:08:21لذا يمكنك الآن رؤية جزء التعديلات هذا هنا على اليمين.
00:08:24لذا نحن ننظر إلى هذا في المنتصف.
00:08:25لذا يمكنني تغيير لون الورق، أليس كذلك؟
00:08:29ماذا نريد أن نفعل هنا؟
00:08:30وتذكر أيضاً، أن هذه التعديلات يمكن أن تمنحك أفكاراً فحسب.
00:08:33لذا في أي وقت تراه مناسباً، يمكنك العودة إلى Claude code وتوجيه هذه التغييرات المختلفة.
00:08:39مرة أخرى، الأمر الهام في رؤية كل هذا بشكل مرئي هو حقيقة أن بإمكاني التكرار بسرعة كبيرة بدلاً من الاضطرار إلى توجيه Claude code، والانتظار حتى يتم التوليد، ومعرفة ما إذا كان يعجبني أم لا.
00:08:52هذا يجعل العملية برمتها أسرع بكثير.
00:08:55لذا يمكننا تغيير شكل النص.
00:08:58ويمكنه تغيير الحجم الفعلي، والوزن، والخطوط، وما إلى ذلك.
00:09:03إذن كل ما تراه هنا يمكن تعديله.
00:09:06ولكن تذكر أيضاً، يمكننا إجراء تغييرات كبيرة أيضاً.
00:09:08لذا فأنا لا أعجبني المظهر العام، كما تعلمون، للثاني.
00:09:12يمكننا القيام بذلك أيضاً.
00:09:13مثل أن أعطيه توجيهاً آخر يقول، مهلاً، لا يعجبني المحتوى الفعلي لهذا.
00:09:17أريده أن يكون أكثر عمقاً من حيث شرحه الفعلي للناس بما تفعله ميزة slash design.
00:09:21لذا يمكنني أن أقول شيئاً مثل التصميم الثنائي، الثاني، أريد نوعاً ما الذهاب مع ذلك.
00:09:26ولكن لكي أكون صادقاً، أود نوعاً ما تغيير المحتوى.
00:09:29مرة أخرى، نحن نتجه نحو شيء يشبه الانفوجرافيك الذي يوضح ما تقدمه ميزة slash design حقاً.
00:09:34لذا عندما تعيد إنشاءه، يمكنك تجاهل الاثنين الآخرين.
00:09:36أريد فقط التركيز على ذلك الواحد الآن.
00:09:38امض قدماً وانتقل إلى بحث الويب وتأكد من أنك تفهم ما تقدمه ميزة slash design بالفعل وضع ذلك في الإصدار الجديد من هذا الانفوجرافيك.
00:09:48وهذا هو الإصدار المحدث من هذا الملصق.
00:09:49وكما ترون، هناك الكثير من المعلومات حول ما تفعله ميزة slash design الجديدة حقاً.
00:09:53ومرة أخرى، لأننا نستخدم ميزة slash design الجديدة هذه، فمن السهل جداً تعديلها.
00:09:56أه، لا يعجبني النص هنا.
00:09:59يمكنني تحريكه أينما أردت.
00:10:00يمكنني تعديل النص الفعلي نفسه، وما إلى ذلك، وما إلى ذلك، وما إلى ذلك.
00:10:03ومن هنا، يمكنك حقاً الاستمرار في تلك العملية المكونة من ثلاث خطوات من الإلهام، باستخدام المهارات المناسبة والتكرار على أي تصميم تعارضه.
00:10:11لذا إذا كنا نريد حقاً الذهاب مع هذا الأوسط، فنحن سنخبر فقط Claude code، مهلاً، أنا أتريد فقط العمل مع هذا الأوسط.
00:10:16وستستمر في التكرار والتكرار والتكرار حتى يعجبك ما أنشأته.
00:10:20وبعد ذلك يمكنك فعل ما تريده به.
00:10:22الصورة الكبيرة، ميزة slash design هذه تجعل تصميم الواجهة الأمامية أسهل بكثير داخل Claude code نفسه.
00:10:28في كثير من الأحيان، كان علينا الاعتماد على أشياء خارجية مثل Impeccable للقيام بهذا النوع من التصميم المباشر على الويب.
00:10:34لذا تأكد بالتأكيد من أخذ الوقت لتجربة هذه الميزة الجديدة.
00:10:36أعتقد أنها مثالية لأي شخص يعد شخصاً في Claude code ولكنه أحب تطبيق الويب الخاص بـ cloud design وشعر أنه من المزعج التبديل بين الاثنين.
00:10:45هذه هي الفئة المستهدفة.
00:10:46هذا هو الجمهور الذي تخاطبه.
00:10:48لذا كما هو دائم، أخبرني برأيك في هذا.
00:10:51تأكد من التحقق من Chase AI Plus إذا كنت تريد الحصول على دورة Claude code الرئيسية الخاصة بي.
00:10:55وبصرف النظر عن ذلك، أراكم لاحقاً.