스크립트
00:00:00هناك الكثير من المهارات المتاحة التي تتيح لك تصميم مواقع ويب جميلة باستخدام الذكاء الاصطناعي، وكل واحدة منها
00:00:04مختلفة، ولكن لا يعمل جميعها. فبعضها يمتلك سير عمل مكثف يبدو مثيرًا للإعجاب
00:00:09وفي نهايته يظل يولد موقعًا يبدو مثل أي موقع آخر. وحدها القليلة
00:00:13منها هي التي تحقق نتائج فعلية. الآن قد تتساءل عن سبب احتجاحك لهذه المهارات في المقام الأول
00:00:17نظرًا لأن النماذج قوية بما يكفي بالفعل وهي تصمم بشكل جيد حقًا الآن. ولكن بغض النظر عن مدى
00:00:22قوة النموذج، يتبع كل نموذج نمطه الخاص عند التصميم، وهذا النمط يسهل
00:00:26اكتشافه. ولهذا السبب تحتاج إلى شيء لإبعادها عن هذا النمط وجعل موقع الويب الخاص بك
00:00:30يبرز حقًا. تُطوَّر هذه المهارات بواسطة أشخاص لديهم خبرة واسعة في التصميم
00:00:36وقد أعادوا حزم سير العمل الذي جربوه والذي نجح معهم في شكل قابل لإعادة الاستخدام لكي
00:00:41تستخدمه أنت أيضًا. إذا كنت جديدًا هنا فأهلاً بك. نحن شركة برمجيات وهذا هو قسم (AI Labs)، وفي
00:00:46هذا الفيديو سنستعرض المهارات التي جربناها والتي منحتنا نتائج فعلية. وهناك شيء واحد
00:00:51يجدر معرفته قبل أن نبدأ وهو أنك لست بحاجة إلى إضافة مهارات إلى تصميم (Claude) نفسه. فالمهارات
00:00:55التي تضيفها في إعدادات (Claude) الخاص بك هي نفسها التي يمكنك استخدامها في تصميم (Claude). لذا يمكنك ببساطة إضافة المهارة
00:01:00من إعدادات (Claude). وعلى الرغم من أننا نستخدم هذه المهارات في تصميم (Claude)، إلا أنها تعمل مع (Claude
00:01:05Code) أو (Codex) أو أي وكيل آخر تستخدمه وستعطي نفس النتيجة. أول مهارة سنتحدث عنها
00:01:10هي مهارات إميل كوفالسكي (Emil Kowalski). في هذه المجموعة توجد ليس مهارة واحدة بل تسع مهارات، وكل واحدة منها
00:01:15تغير جزءًا مختلفًا من التصميم. هذه هي المهارات التي نستخدمها نحن أنفسنا أيضًا عندما نعمل على
00:01:20التصاميم، سواء كنا نستخدم (Claude code) أو تصميم (Claude). وهناك العديد من المهارات هناك،
00:01:25تستهدف كل منها مجالًا مختلفًا في التصميم. ومن بينها تصميم أبل (Apple design)، والذي يحتوي على جميع
00:01:30مبادئ التصميم التي تستخدمها أبل في منتجاتها الخاصة ويجعلها متاحة للاستخدام في مواقع الويب الأخرى.
00:01:35وهناك أيضًا مهارة مفردات الرسوم المتحركة (animation vocabulary)، والتي تحول أساسًا وصف الرسوم المتحركة المبهم الخاص بك
00:01:40إلى كلمات دقيقة يمكن للنموذج فهمها. يمكنك إضافة عدد ما تشاء من المهارات، ولكن هناك مهارتان
00:01:45منهما نستخدمهما أكثر من غيرهما نظرًا لمدى تحسينهما لقدرات تصميم (Claude).
00:01:50إحداهما هي مهارة هندسة تصميم واجهات البريد الإلكتروني (email design engineering skill)، والتي تحتوي على إرشادات حول كيفية بناء مكونات واجهة مستخدم جميلة
00:01:55وإضافة الرسوم المتحركة إليها، مما يجعلها أفضل مهارة تبدأ بها تصميمك.
00:02:00والأخرى التي نستخدمها هي (animate) وهي تحتوي على سير عمل كامل لإضافة الرسوم المتحركة إلى
00:02:05موقع ويب مصمم مسبقًا مع عملية مفصلة خطوة بخطوة. لاستخدامها، تحتاج إلى إضافتها إلى (Claude)
00:02:10وبمجرد إضافتها يمكنك استخدامها داخل تصميم (Claude). ومن هناك تكتب علامة الشرطة المائلة (slash) واسم المهارة
00:02:15وتخبره في موجه الأوامر بالموقع الذي تريده. بما أننا لم نبنِ التصميم بعد فقد استخدمنا
00:02:20مهارة هندسة تصميم إميل أولاً. ثم يقوم بسحب المهارة ولكن قبل أن يبني أي شيء يطرح عليك
00:02:25أسئلة حول التطبيق بنفس الطريقة التي يفعله بها تصميم (Claude) بمفرده. عندما تجيب على تلك الأسئلة فإنه يبني
00:02:30التصميم. الإصدار الأول الذي يصنعه تصميم (Claude) يبدو بحد أدنى وبأسلوب أحادي اللون ولكن الرسوم المتحركة التي
00:02:35ظهرت لم تكن تبدو مصقولة بدرجة كافية وكانت غير متزامنة في بعض الأماكن. وهنا يأتي دور مهارة التحريك (animate)
00:02:40لأنها تقوم بالفعل بتحسين الرسوم المتحركة على مواقع الويب المصممة مسبقًا. هذه المهارة تفهم كيف
00:02:46يعمل الموقع وتحدد ما يحتاج إلى حركة وما لا يحتاج إليها. بمجرد أن ينتهي (Claude) من إجراء التغييرات
00:02:51تحسنت رسوم متحركة الموقع بشكل كبير. كانت الحركة متزامنة مع التمرير وبدا
00:02:56الكل أكثر مقصودًا مقارنة بما كان لدينا من قبل. الآن قد تعتقد أن هذا ليس مختلفًا تمامًا
00:03:01عما ينتجه (Claude) عادةً ولكن هذا لأن هذه كانت صفحة هبوط. وفي حين أنها
00:03:06حسنت الرسوم المتحركة الصغيرة جدًا والدقيقة هنا، فإن نمط الرسوم المتحركة الرئيسي الذي يبدو جيدًا على صفحات الهبوط
00:03:11هو تلك الرسوم المتحركة القائمة على التمرير، وقد غطينا الكثير من المهارات حول ذلك في الفيديوهات
00:03:16السابقة. ولكن المكان الذي تعمل فيه المهارة بشكل جيد حقًا هو في العناصر الصغيرة للجانب الوظيفي
00:03:21للتطبيقات. على سبيل المثال، كنا نعمل على موقع لمطعم واستخدمنا مهارة التحريك لإضافة
00:03:26رسوم متحركة عليه وأضافت رسومًا متحركة صغيرة حسنت كيف كان استخدام هذا الموقع يبدو، مثل إضافة رسوم متحركة
00:03:32عندما نرسل النموذج والرسومات التي تظهر عند التمرير. كل هذه التفاصيل مجتمعة جعلت
00:03:37الموقع يبدو أكثر تفاعلية بكثير وجعلت تجربة استخدامه أفضل. ويمكنك إضافة
00:03:42عدد ما تشاء من مهارات إميل لأن كل منها سيكون إضافة مهمة لأدوات تصميمك.
00:03:47والآن المهارة التالية التي سنناقشها هي مهارة حديقة كونارد لي (Conard Lee's garden) وهذه أيضًا
00:03:52مجموعة وليست مهارة واحدة. توجد خمس مهارات فيها تغطي أشياء مثل عروض الفيديو
00:03:57والصور ولكن الأهم من بينها هو مهارة مهندس تصميم الويب
00:04:02وذلك لأن هذه المهارة تحتوي بالفعل على إرشادات حول كيفية التصميم مثل مهندس تصميم من الطراز الأول.
00:04:07مهندس التصميم. هذه المهارة تركز بالكامل على جعل التصاميم مذهلة وليست وظيفية.
00:04:12طريقة عمل هذه المهارة هي أنها تأخذ متطلباتك وتناقشها معك حتى تتضح
00:04:17الرؤية تماماً، ثم تبحث عن تصاميم حقيقية لتستلهم منها. مبدؤها هو أن التصميم الجيد لا يبدأ
00:04:22من العدم، تماماً مثل كل تصميم موجود والذي استوحى أفكاره مما سبقه.
00:04:27كما أنها تستند إلى التصاميم التي اثبتت نجاحها سابقاً. وتحتوي هذه المهارة أيضاً على مجموعة من
00:04:32المراجع التي تغطي مجالات متعددة تتعلق بالتصميم. فهي تغطي كيفية تقييم التصميم، والأخطاء الشائعة
00:04:38في التصاميم، ووصفات الأنماط لمواقع شهيرة مثل آبل ولينيار لكي تتمكن من معرفة كيفية عمل تلك المواقع
00:04:44فعلياً أثناء بناء موقعك. لذا، بمجرد إضافتها إلى كلود ديزاين، يمكنك استخدامها من خلال إعطائها توجيهاً
00:04:49يصف ما تريد بناءه. الموقع الذي حصلنا عليه منها كان أكثر إثارة للاهتمام بكثير مما يقدمه كلود ديزاين
00:04:55بمفرده. لقد كان أكثر شمولاً وأفضل من منظور التصميم مقارنة بالنسخة التي كان سيصنعها كلود ديزاين بنفسه.
00:05:01وإذا كان لديك تصميم بالفعل ثم قمت بتشغيل المهارة، فإنها تراجع هذا التصميم وتقيمه في مجالات مختلفة.
00:05:08يمكنك الاستمرار في تحسين التصميم وتشغيله مراراً وتكراراً حتى يصل إلى درجة مثالية ويطابق
00:05:13التصميم الذي تريده بالفعل. ولكن قبل أن نستكشف مهارات أخرى، سيكون من الرائع لو اشتركت في القناة
00:05:18وضغطت على زر الإعجاب. هذا اللفتة البسيطة من الدعم تعني لنا الكثير.
00:05:22المهارة التالية التي سنتحدث عنها هي مهارة تصميم الذكاء الاصطناعي بواسطة إيليا ديزاين، وهذه المرة هي مهارة واحدة فقط مخصصة للصفحات المقصودة.
00:05:30كل ما تقوم به يقع في ملف واحد، ومهمتها هي أخذ فكرتك وتحويلها إلى نظام بصري، والذي يتكون أساساً من مجموعة قواعد
00:05:37تتبعها كل عناصر الصفحة، ويشمل ذلك الألوان والخطوط والمسافات.
00:05:41هذه المهارة هي نظام متخصص ومتكامل لتصميم صفحات مقصودة تستحق الجهد فعلاً.
00:05:46المنطق وراء ذلك هو أن الصفحة المقصودة ليست صفحة رئيسية. الصفحة الرئيسية تحاول خدمة الكثير من المختلفين دفعة واحدة.
00:05:53ولكن الصفحة المقصودة لها مهمة واحدة وهي دفع الناس لاتخاذ إجراء فعلي.
00:05:57تميل النماذج إلى توليد صفحات رئيسية تعمل بشكل جيد ولكنها ليست متخصصة في تصميم الصفحات المقصودة بالطريقة التي تفعلها هذه المهارة.
00:06:03لذا فهي تبني الصفحة حول ذلك الإجراء الوحيد الذي تريد من زائر موقعك اتخذه، بحيث تسلط الضوء على هذا الإجراء عبر هيكلة موقعك حوله.
00:06:12كما أنها تحافظ على نمط بصري متناسق للتصميم وتتناول أيضاً جوانب أخرى من تصميم الويب يتجاهلها معظم النماذج، بما في ذلك ضمان إمكانية العثور على الموقع بسهولة عبر محركات البحث.
00:06:22لذا بمجرد تثبيتها في مهارات كلود، فإنك تشغلها بتوجيه (برومبت) كلما احتجت إلى تصميم.
00:06:27كما أنها تطرح عليك أسئلة أولاً بمجرد أن تجيب عليها تبدأ في التصميم.
00:06:31الموقع الذي أنشأته بدا وكأنه علامة تجارية حقيقية ووافق الأجواء التي كنا نستهدفها بدقة.
00:06:36وطريقة هيكلة كل عنصر جعلت من المرجح جداً أن يقوم أي شخص يدخل الموقع بإتمام عملية شراء فعلياً.
00:06:43ولكن أولاً، لنستمع إلى كلمة من الراعي.
00:06:45ميك (Make). أنت تعرف بالفعل ميك للأتمتة المرئية، لكنهم أطلقوا للتو أداة مايا (Maya).
00:06:49إنها زميلة عمل تعتمد على الذكاء الاصطناعي وتعيش داخل أداة البناء في ميك.
00:06:52معظم أدوات البناء بالذكاء الاصطناعي تعطيك صندوقاً أسود وعليك فقط أن تأمل أن يعمل.
00:06:56مايا مختلفة. تخبرها بما تريد بلغة إنجليزية بسيطة وهي تبنيه أمام عينيك مباشرة.
00:07:00لذا جربناها. طلبنا من مايا إرسال ملخص لفريقنا على سلاك كلما وصل عميل محتمل جديد إلى سالسفورس، وظهر ذلك مباشرة على اللوحة.
00:07:07حللت مايا الطلب، واختارت الأدوات المناسبة، وربطت كل وحدة وجمعت الأتمتة بالكامل على اللوحة بينما كنا نراقب.
00:07:15ترى كل قرار لكي تتمكن من التدخل وتعديل أي شيء في أي وقت.
00:07:19على طول الطريق، لا تحصل فقط على أتمتة جاهزة، بل تتعلم كيف يعمل ميك فعلياً.
00:07:23إنها مجانية التجربة في النسخة التجريبية الآن. الرابط في الوصف.
00:07:26المهارات التالية التي سنتحدث عنها هي من تصميم مينغ تو.
00:07:29إنه في الواقع مصمم يعمل في هذا المجال منذ فترة طويلة ومعروف بتصميماته القصصية الغامرة القائمة على التمرير.
00:07:36وقد أخذ كل ما توصل إليه ووضعه في حزمة من مهارات التصميم لكي تتمكن أنت أيضاً من استخدامها.
00:07:41تحتوي هذه الحزمة على العديد من المهارات التي تغطي مجالات مختلفة.
00:07:44جميعها تركز على توليد تصميمات عالية الجودة تحكي قصة حقاً بدلاً من مجرد تبدو جيدة بصرياً.
00:07:51إحداها هي مهارة تحويل الفيديو إلى توجيه فائق (Video to Super Prompt)، والتي تعمل عن طريق أخذ تسجيل شاشة أو جولة تفقدية لموقع ويب واستخدام أدوات على جهازك لتحويل هذا التسجيل إلى توجيه لوكيلك.
00:08:01ولكن المهارة التي نريد حقاً التحدث عنها هي مواقع بحجم جودة الجوائز (Awards Quality Sites).
00:08:05أوردز (Awwwards) هو موقع يقيم مسابقات للتصميم المذهل، والمواقع التي تفوز هناك تُعرف بأنها الأفضل تصميماً على الويب.
00:08:12هذه المهارة تسرد بالفعل المبادئ وتفاصيل التصميم التي تحتوي عليها المواقع الحائزة على الجوائز.
00:08:17وهذا مهم لأن كلود لا يبني تصميماً بهذا المستوى بمفرده.
00:08:21لذا تضع هذه المهارة تلك المبادئ في العملية وتوجه مسار التصميم.
00:08:25وما يميز هذه الحزمة هو أنه إلى جانب المبادئ، فإنها تحمل التقنيات الفعلية والتأثيرات المحددة التي تجعل الموقع يبدو باهظ الثمن وراقيًا، وهو الجزء الذي لن ينتجه النموذج بمفرده.
00:08:35بمجرد إضافة مهارة الجوائز، تمنحها توجيهًا يصف الموقع الذي تريده.
00:08:40وما يعود إلينا هو موقع مصمم ومنظم نفس المواقع الفائزة.
00:08:45هناك خلفية متحركة خفيفة، لكن أكثر ما لفت الانتباه هو التمرير.
00:08:49لقد استعمل نهج سرد القصص القائم على التمرير، تماماً مثل مواقع الويب التي تراها في أوردز.
00:08:54مجموعة المهارات التالية مقدمة من ياكوب كريجيل.
00:08:57وعلى عكس البقية، حيث تتعامل مهارة واحدة مع كل جزء في الموقع دفعة واحدة، فهذه تقسمه لعدة مهارات لكي تحظى كل منطقة بمهارتها الخاصة.
00:09:05كل العناصر المشتركة في التصميم، وتشمل الخطوط، والألوان، وإمكانية الوصول وغيرها، تحظى بمهارة مستقلة بدل الاعتماد على مهارة واحدة لكل شيء.
00:09:13يمكنك إضافة أي من تلك المهارات إلى كلود ديزاين، لكن المهارة التي نستخدمها هي مهارة المراجعة.
00:09:18نحن نستخدمها لأنها تراجع بشمولية كل جوانب التصميم لكي نتمكن من التحسين بناءً على النقاط التي تمنحها.
00:09:24هذه المهارة تعمل بشكل أفضل إذا ربطتها بجيت هب لأنها تفحص شكل التصميم قبل وبعد التعديلات التي أجريتها.
00:09:31إذا كان شيئاً ما يعمل قبل تعديلك الأخير وتوقف عن العمل، فإنها تشير إلى ذلك وتخبرك بسبب توقفه نتيجة تغيير معين قمت به.
00:09:40فهي تنظر في أمور مثل الحركات، وإمكانية الوصول، وكيف يبدو الموقع على مقاسات الشاشات المختلفة ثم تسرد كل ما وجدته لكي تتمكن من إصلاحه.
00:09:48نستخدم أيضاً مهارة تخطيط أفضل لأن هذا هو الجانب الذي يعاني فيه كلود ديزاين فعلياً.
00:09:52هذه تتعامل مع المسافات، والمواضع، وكيف تترتب الأشياء عبر التصميم وتتعمق بمعالجة التصميم.
00:09:58على سبيل المثال، لاحظت أن تاريخاً في الصفحة يحتاج مساحة أكبر من المتاحة وأخبرتنا حتى بعدد البكسلات الإضافية المطلوبة.
00:10:04لذا عليك فقط أن تطلب منها إصلاح كل ما أشارت إليه.
00:10:06لن تجعل شكل الموقع يبدو مختلفاً كلياً، لكنها ستجعله متوافقاً بدقة مع مبادئ التصميم التي يعمل بها المحترفون.
00:10:14المهارة التالية في القائمة هي تيستميكر.
00:10:16هدفها الأساسي هو تجنب القوالب الافتراضية التقليدية التي تنتجها النماذج وما يميزها هو الطريقة التي تحقق بها ذلك.
00:10:22فهي تعمل مباشرة من بكسلات مرجع حقيقي، بحيث لا يضيع شيء عند تحويل المظهر إلى كلمات أولاً.
00:10:28عندما تعطي النموذج صوتاً أو صورة مرجعية، فإنه عادة يحولها إلى ملخص نصي يمكنه استخدامه كمرجع لاحقاً.
00:10:34لكن هذه المهارة تستخدم نصوص برمجية لاستخراج تفاصيل التصميم بدقة وتحفظها بتنسيق منظم يمكن للوكلاء استخدامه لاحقاً.
00:10:42هذا يحافظ على تفاصيل التصميم التي كانت ستضيع لولا ذلك في الملخص النصي.
00:10:46وهي تعتمد على البرامج النصية أولاً للتعامل مع الكثير من الأمور التي يمكن إنجازها دون اضطرار الوكيل للقيام بها بنفسه.
00:10:52على سبيل المثال، قامت بدفعها في اتجاهات مختلفة وتجربة عدة تنويعات.
00:10:55القرارات التي تتخذها تنسحب على كامل المشروع بدلاً من التوقف عند شاشة واحدة.
00:10:59هذه المهارة تمنح النماذج ذوقاً للتصميم لكي لا تقع تلقائياً في نفس الأنماط المعتادة.
00:11:05إذن بمجرد إضافتها، تشغلها بنفس الطريقة عبر أمر الشرطة المائلة ومعه وصف نصي.
00:11:09لقد زودناها بالموقع الذي نريد، إضافة إلى متطلبات النمط السابقة ودعناها تعمل عليها.
00:11:14وما نتج كان موقعاً يبدو مذهلاً حقاً بلا أي نمط تقليدي، وموافقاً لشكل وطابع الموقع الذي طلبنا بناءه.
00:11:22المجموعة الأخيرة هي مجموعة شائعة أخرى، وما يميز هذه هو أنها مبنية على أبحاث فعلية،
00:11:28على القوانين المسماة التي يعمل المصممون وفقاً لها مع وجود مهارة مستقلة لكل قانون.
00:11:33بعض هذه المهارات تغطي أسباب مغادرة المستخدمين لموقعك في المنتصف وكيف يظهر السلوك أثناء تنقل الشخص عبر الموقع.
00:11:39ولست مضطراً لتثبيت كل المهارات.
00:11:41عليك فقط تثبيت المهارات التي تتناسب مع أسلوب عملك.
00:11:44بالنسبة لإعداداتنا، أضفنا اثنتين.
00:11:45الأولى هي نقد الشاشة، والتي تأخذ الشاشة وتراجعها من زوايا عديدة مختلفة،
00:11:50ثم تخبرك بالأخطاء الموجودة في تلك الشاشة معتمدة على إرشادات صحيحة لتقييم جودة التصميم.
00:11:56والثانية هي قوانين الإدراك، والتي تحتوي أساساً على تعليمات حول كيف ترى العين البشرية وتستوعب التصميم ذاته.
00:12:03لذا بمجرد حصولك على التصميم، تقوم بتشغيل المراجعة لتظهر لك الأخطاء في أمور مثل ما يبرز أولاً،
00:12:09ونوع الخط والمسافات وتُسرد كلها لكي تتمكن من إصلاحها.
00:12:12وبمجرد تطبيق قوانين الإدراك على الموقع، يبدو العمل ككل أكثر إتقاناً.
00:12:17كانت تلك هي المهارات المتاحة على جيت هب لتستخدموها جميعاً.
00:12:20لكننا نستخدم مهارات أخرى بنيناها وطورناها بأنفسنا عبر التجربة ونستعملها عند بناء المنتجات فعلياً.
00:12:26لذا إن أردت الوصول إليها، يمكنك الحصول عليها في إيه آي لابز برو، وهو مجتمعنا الخاص.
00:12:31هذه هي المهارات التي تتضمن بعض ما بنيناه بأنفسنا والبعض الآخر كمصادر مفتوحة.
00:12:36فإن وجدتم قيمة فيما نقوم به وأردتم دعم القناة، فهذه هي الطريقة الأفضل لفعل ذلك.
00:12:41الرابط موجود في الوصف.
00:12:42وهذا يأخذنا إلى نهاية هذا الفيديو.
00:12:44إذا كنتم ترغبون في دعم القناة ومساعدتنا في الاستمرار بتقديم فيديوهات كهذه، فيمكنكم فعل ذلك عبر استخدام زر الشكر المتوفر أدناه.
00:12:50وكالعادة، شكراً لمتابعتكم وأراكم في الفيديو القادم.