00:00:00سأقدم لكم، ومعكم المئات من المصممين الآخرين، تجربة رائعة حقًا.
00:00:06أريد أن أرى إلى أي مدى يمكننا دفع حدود التصميم بالذكاء الاصطناعي، وهذه المرة الأمر مخصص لـ Claude Code،
00:00:13لإنتاج قسم رئيسي (Hero Section) لفكرة عمل خيالية موحدة.
00:00:19حاليًا، هناك تحدي تصميم واجهة مستخدم (UI) مستمر لمدة 30 يومًا على designcourse.com.
00:00:24وهو مجاني بنسبة 100%.
00:00:25لقد خضنا تحديًا واحدًا بالفعل، وتلقينا أكثر من 200 مشاركة، وهذا هو
00:00:30التحدي الثاني.
00:00:31سأوضح لكم كيفية استخدام Claude Code وتزويده بمهارة تصميم خاصة
00:00:37من أجل إنتاج بعض التصاميم الجيدة حقًا.
00:00:40والهدف من هذا التحدي هو أنني سأعطيكم جميعًا نفس فكرة العمل
00:00:44الخيالية، لكننا سنرى مدى جودة مهاراتكم في كتابة الأوامر (Prompting) لإنشاء أفضل واجهة مستخدم
00:00:50ممكنة لهذه المهمة.
00:00:52لذا، سأريكم بعد قليل كيف تشاركون في هذا التحدي اليوم.
00:00:56بغض النظر عن الوقت الذي تشاهد فيه هذا، حتى لو بعد أشهر من الآن.
00:00:58يمكنكم دائمًا المشاركة في هذا التحدي لرؤية ما ينجزه الآخرون.
00:01:01لكن أولاً، سأريكم كيفية إعداد كل ما تحتاجون إليه.
00:01:04أولاً، ستحتاجون بالتأكيد إلى Claude Code، حسنًا؟
00:01:07هذه هي الصفحة الخاصة بإعداده.
00:01:10هناك بيئات عمل مختلفة.
00:01:11لن أخوض في كل التفاصيل، لذا سأضع رابط صفحة الإعداد فقط.
00:01:15يمكنكم معرفة كيفية تثبيته إذا لم تفعلوا ذلك بعد.
00:01:17بمجرد أن يصبح جاهزًا، كل ما عليكم فعله هو كتابة Claude وسوف يتم تحميله
00:01:22هنا مباشرة.
00:01:23حسنًا.
00:01:24الخطوة التالية هي التأكد من تزويده بمهارة خاصة.
00:01:26المهارة هي ببساطة مجموعة من التعليمات التي يتم تغذيتها في سياق
00:01:30الذكاء الاصطناعي.
00:01:31وهناك الكثير من المهارات المختلفة.
00:01:32قبل أن أعرض لكم المهارة، هذه هي طريقة تثبيت المهارات على نظامكم.
00:01:37يجب أن تجدوا مجلد Claude Code بناءً على نظام التشغيل وبيئة العمل
00:01:43التي تستخدمونها.
00:01:44ثم ستقومون ببساطة بأخذ ملف الماركدوان (Markdown) هذا، والذي يمثل المهارة، ووضعه في
00:01:49ذلك المجلد.
00:01:50المهارة المحددة التي أتحدث عنها تسمى “تنسيق الواجهات الأمامية” (Front End Design) هنا.
00:01:55سأضع رابطها في الوصف لتتمكنوا من الوصول إليها.
00:01:58ما عليكم فعله هو الضغط على Skills، ثم Front End Skills، ثم Skill.md، ومن ثم
00:02:03هنا، تحميل الملف الخام (Download Raw File)، تمام؟
00:02:06بمجرد حصولكم على ملف المهارة، خذوه وابحثوا عن مجلد Claude Code في
00:02:12المسار الذي أريتكم إياه للتو.
00:02:14مجلدي هنا على ويندوز 11 هو C، ثم Users، ثم Gary، ثم claud.
00:02:21داخل هذا المسار، قد لا تجدون مجلد باسم skills.
00:02:24إذا لم يكن موجودًا، قوموا بإنشائه.
00:02:25هو موجود لدي بالفعل.
00:02:26اضغطوا عليه مرتين، ثم أنشئوا مجلدًا باسم Designer.
00:02:31وداخله، ستقومون بلصق ملف المهارة Skill.md.
00:02:35إذا كان Claude قيد التشغيل بالفعل، فتأكدوا من إغلاقه أولاً بالضغط على
00:02:39Control C لعدة مرات.
00:02:41اكتبوا Claude مرة أخرى، ثم اكتبوا skills/ لسرد جميع المهارات المتاحة.
00:02:47لدي حاليًا ثلاث مهارات فقط.
00:02:48نرى هنا مهارة Front End Design.
00:02:51وطريقة الوصول إليها ستكون عبر كتابة frontend-design/.
00:02:56ثم تقومون بلصق أمركم (Prompt).
00:02:58الآن دعوني أريكم هذا عمليًا.
00:03:00إذا كتبت frontenddesigner/، صمم قسمًا رئيسيًا لصفحة هبوط لخدمة
00:03:06التحقق من الهوية بالذكاء الاصطناعي.
00:03:07يجب أن تكون الخلفية باللون البيج الفاتح مع عمودين، وعنوان قوي، ونصوص
00:03:11على اليسار مع زر اتخاذ إجراء (CTA).
00:03:13وعلى اليمين يجب أن يكون هناك رسم متحرك بسيط لواجهة مستخدم خيالية توضح
00:03:16فكرة الهوية، أو التحقق من الهوية، عذرًا.
00:03:20ضع هذا في ملف HTML مع CSS واستخدم المتغيرات.
00:03:23هذا كل ما تضمنه أمري، وهذا ما أنتجه في النهاية.
00:03:28لا أعرف ما رأيكم، لكن هذا العمل قوي حقًا، وقد أنجزه من محاولة واحدة.
00:03:33وقد رأيتم الأمر الذي كتبته.
00:03:35لقد كان بسيطًا جدًا.
00:03:36لذا سأعرض لكم التحدي وفكرة العمل للأمر الذي أريدكم
00:03:41أن تستخدموه للشركة الخيالية، وأريد أن أرى ما يمكنكم إنتاجه.
00:03:46الفكرة هي تعزيزه بتفضيلات التصميم الخاصة بكم لإنشاء شيء
00:03:51فريد وحتى متحرك إذا أردتم.
00:03:53الخطوة الأولى هي الذهاب إلى رابط التحدي [designcourse.com/foundations](https://www.google.com/search?q=https://designcourse.com/foundations).
00:03:58الرابط موجود في الأسفل في مكان ما.
00:04:00عندما تفتحون الرابط، سترون هذه الصفحة، 613 طالبًا مسجلين و197 مشاركة
00:04:06للتحدي الأول الذي خضناه بالفعل.
00:04:08هذا مخصص للتحدي الثاني.
00:04:09كل ما عليكم فعله هو الضغط هنا، وسترون: احصل على قالب Figma لتصميم UI/UX لعام 2026.
00:04:16وفي داخله يوجد التحدي رقم اثنين، وهذا ما أريدكم أن تستخدموه.
00:04:20إليكم كيف يبدو ذلك.
00:04:23هذا هو التحدي الثاني، وهنا توجد التعليمات.
00:04:27هذا جزء من الأمر الذي أريدكم أن تدرجوه.
00:04:29هذه هي فكرة العمل الخيالية.
00:04:31لا أريدكم أن تستخدموا أي فكرة أخرى.
00:04:32أريدنا جميعًا أن نستخدم نفس الفكرة، وهي عمل فحص للمنازل بالذكاء الاصطناعي.
00:04:37تستخدم الرؤية الحاسوبية لتحليل مساحات الزحف والأسقف والأساسات بحثًا عن العيوب الشائعة
00:04:42وإنشاء تقارير فحص معيارية تلقائيًا.
00:04:45هدفنا هو توجيه الذكاء الاصطناعي بهذا الأمر الأولي هنا، من أجل إنشاء
00:04:50قسم رئيسي بمستوى متطور باستخدام مهارة المصمم في Claude Code.
00:04:56وهنا توجد التعليمات.
00:04:58استخدموا Claude Code لإنشاء قسم رئيسي لفكرة العمل الخيالية الموضحة
00:05:03على يمين هذا الإطار هنا.
00:05:05تأكدوا من لصق ذلك كجزء من أمركم.
00:05:08قوموا بتضمين فكرة العمل، ولكن أضيفوا أيضًا تفضيلات التصميم والتنسيق الخاصة بكم.
00:05:13هذا هو الأسلوب الذي اتبعته لمحاولة إنشاء تلك البطاقة المتحركة الصغيرة التي
00:05:17رأيناها للتو.
00:05:18يمكنكم استخدام أي عدد من الأوامر لتحسين النتيجة النهائية.
00:05:22يمكنكم دمج الرسوم المتحركة إذا رغبتم في ذلك.
00:05:24وعند التقديم، اذكروا أولاً عدد الأوامر التي استغرقها الوصول للنتيجة النهائية،
00:05:29لأنني أريدكم أن تقوموا بتحسين النتيجة إذا رغبتم.
00:05:32وقوموا أيضًا بتضمين الأمر نفسه في التعليق، حيث يمكنكم ترك تعليق.
00:05:36يمكنكم أيضًا استخدام إضافة Claude code to Figma لمشاركة نموذج Figma للتصميم
00:05:42في مشاركتكم، ولكن هذا ليس ضروريًا.
00:05:44لقطة شاشة ستكون كافية تمامًا.
00:05:47تسمح لكم إضافة Claude code to Figma بأخذ النتيجة النهائية لواجهتكم
00:05:53وإرسالها إلى Figma.
00:05:54لن أشرح كيفية القيام بذلك هنا لأنني رفعت فيديو بالأمس
00:05:58يوضح تلك الطريقة بالتفصيل.
00:06:00مرة أخرى، لستم ملزمين بفعل ذلك.
00:06:01لقطة شاشة ستفي بالغرض لمشاركتكم.
00:06:04بعد ذلك، بالنسبة لطريقة تقديم مشاركتكم، تظهر التعليمات هنا.
00:06:09على سبيل المثال، إذا قررتم مشاركة مستند Figma لما تقومون به،
00:06:14مما سيسمح لي بإجراء تعديلات إذا قمت بمراجعة عملكم، فعليكم الضغط على
00:06:18مشاركة (Share) هنا.
00:06:20ثم اضغطوا على نسخ رابط النموذج الأولي، وتأكدوا أن الرابط متاح للجميع، ثم قدموه
00:06:25مع مشاركتكم.
00:06:26سيكون هذا تحديًا رائعًا حقًا لأننا سنرى، هل ستكون النتائج
00:06:30متشابهة جدًا؟
00:06:32ستكون كذلك إذا لم تقدموا الكثير من التوجيه، ولم تضعوا اهتمامكم الإبداعي الخاص
00:06:37في التنسيقات وكيفية صب أفكاركم الإبداعية.
00:06:40وإذا فعلتم ذلك، فأعتقد أننا سنرى الكثير من الاختلافات والمفاهيم
00:06:47المثيرة للاهتمام التي سيتم إنتاجها.
00:06:48مرة أخرى، حددوا نظام الألوان الذي تريدونه، وأي نوع من الرسوم التوضيحية
00:06:53أو المتحركة التي ترغبون بها.
00:06:55الهدف هو محاولة الاستفادة القصوى مما يمكن للذكاء الاصطناعي إنتاجه.
00:06:58حسنًا، أتمنى رؤية الجميع يشاركون في هذا التحدي.
00:07:01إنه تحدٍ رائع حقًا.