تخيّل إن كلود ما عاد يصمّم لحاله! حكاية فريق اسمه Skills

حكاية من ورشة التصميم • Claude Skills

في ليلة هادئة، فتحت نورة جهازها وكتبت لكلود: «صمّم لي موقع حلو».

وبعد قليل، ظهر الموقع. الأزرار بمكانها، الألوان متناسقة، والصفحة تشتغل. قرّبت نورة الشاشة، ثم مالت برأسها وقالت: «حلو… بس فيه شيء ناقص!»

ما كان التصميم سيئًا. لكنه ما أعطاها إحساس أن مصممًا محترفًا جلس يتأمل تفاصيله: ليش هذا العنوان هنا؟ هل المسافة مريحة؟ وليش الزر يحسّسك أنه ثقيل؟

بداية الحكاية: موقع يعمل… وخبرة متخصصة تمنحه اتجاهًا.

الفصل الأول
دخل الورشة فريق اسمه Skills

تخيّلت نورة أن كلود موظف ذكي جدًا، يعرف يسوي أشياء كثيرة. لكن كل مشروع يبدأ بنفس الحوار: انتبه للمسافات، اضبط الخط، لا تكثر الحركة، ولا تنسَ الجوال.

فقالت: «طيب، ليش أعيد دليل العمل كل مرة؟ ليش ما أعطيه الدليل من البداية؟»

هنا تبدأ فكرة المهارات — Skills: حزمة إرشادات ومعرفة متخصصة، وقد تضم ملفات وأدوات مساعدة، يرجع لها Claude عندما تناسب المهمة. فيها طريقة عمل، معايير، أمثلة وخطوات؛ مو مجرد عبارة تقول له: «خلّ النتيجة جميلة».

بدل ما تشرح كل التفاصيل من الصفر، تعطي المساعد دليلًا يرجع له وقت الحاجة.

و«الفريق» هنا تشبيه لتقريب الفكرة؛ المهارات ليست أشخاصًا مستقلين، ولا تعني تدريب النموذج من جديد. هي سياق وإرشادات تساعده يستخدم قدراته بطريقة محددة. يشرح دليل Claude الرسمي للمهارات كيف يحمّل المعلومات المناسبة للمهمة عند الحاجة.

الفصل الثاني
Impeccable… عين مصمم داخل الورشة

دخل أول أفراد الفريق المتخيَّل، يحمل مسطرة وبطاقات ألوان. نظر إلى الصفحة وقال: «قبل ما نزيّنها، خلونا نفهم وش ناقصها».

هذا أقرب وصف لفكرة Impeccable. في الملف المرفق، تمتد توجيهاته من نقد تجربة الاستخدام إلى فحص الجودة وصقل الواجهة. ما يحتاج كل تحسين إلى هدم الموقع والبدء من الصفر؛ أحيانًا المشكلة في ترتيب المعلومات، أو تباين النص، أو حجم عنوان ضائع وسط الصفحة.

Impeccable: فهم المشكلة أولًا، ثم تحسين التفاصيل التي تصنع الفرق.

سألته نورة: «ولو التصميم هادئ أكثر من اللازم؟» فأشار إلى bolder لإعطائه جرأة أوضح. «ولو صار مزعجًا؟» هنا يأتي quieter لتهدئته.

للخطوط وتسلسل العناوين هناك typeset، وللمسافات وتوزيع العناصر layout، وللتكيّف مع الشاشات adapt. ويشمل الملف أيضًا توجيهات للألوان والحركة والنصوص داخل الواجهة وإمكانية الوصول والأداء وحالات الخطأ.

أدركت نورة أن السؤال تغير من «كيف أجمّل الصفحة؟» إلى «كيف أفحصها وأعرف ما الذي يمنعها من أن تكون أفضل؟»

جرّب هذا الطلب:
استخدم Impeccable لمراجعة هذه الواجهة. حدّد أهم مشكلات التسلسل البصري والمسافات والتباين على الجوال، ثم حسّنها مع الحفاظ على هوية الموقع.

تنزيل مهارة Impeccable — ZIP ↗

هذا هو الملف المرفق مع الموضوع. أسماء الأوامر الواردة مأخوذة من محتواه، وقد تختلف طريقة تشغيلها بحسب بيئة الاستخدام.

الفصل الثالث
emil-design-eng… لماذا هذا الزر مريح؟

صارت الصفحة أجمل، لكن نورة ضغطت زرًا ورفعت حاجبها: «ليش أحسّه يتأخر، مع أنه يشتغل؟»

دخل مساعد آخر يحمل ساعة صغيرة. لم يبدأ بالألوان؛ سألها: «كم مرة بيضغط المستخدم هذا الزر في اليوم؟»

هنا تظهر زاوية emil-design-eng. الملف يجمع إرشادات مستلهمة من فلسفة Emil Kowalski في هندسة التصميم: التفاصيل الصغيرة التي تجعل الواجهة تستجيب بطريقة طبيعية ومريحة.

ليست كل حركة إضافة مفيدة؛ أحيانًا الاستجابة الفورية هي أجمل قرار.

قالت نورة: «أنا أحسب كثرة الحركات تعني تصميمًا أفخم». فأجابها المساعد: «الحركة الجميلة أول مرة قد تصبح مزعجة إذا تكررت مئة مرة».

بحسب منهج الملف، التفاعلات شديدة التكرار قد تستفيد من إزالة الحركة أو تقليلها كثيرًا. أما نافذة تظهر أحيانًا، أو تجربة ترحيب تظهر لأول مرة، فقد تناسبها لمسة أكثر تعبيرًا. هذه اختيارات تصميمية يوجّه بها الملف، وليست قانونًا يصلح لكل منتج دون اختبار.

ثم راجعا استجابة الزر عند الضغط، واتجاه ظهور القائمة، ومدة الانتقال، وإمكانية مقاطعة الحركة. كل قرار له سؤال: هل يساعد المستخدم على فهم ما حدث، أم يجعله ينتظر؟

جرّب هذا الطلب:
استخدم emil-design-eng لمراجعة تفاعل الأزرار والقوائم. برّر الحركات الضرورية، وقلّل ما يبطئ المهام المتكررة، وراعِ تفضيل تقليل الحركة.

تنزيل مهارة emil-design-eng — ZIP ↗

الفصل الرابع
Tajawal… صوت عربي للواجهة

بقيت لمسة على الطاولة. فتحت نورة صندوقًا صغيرًا مكتوبًا عليه Tajawal، وقالت: «الموقع عربي… ويحتاج خطًا يخدم قراءته وهويته».

هنا من المهم نفرّق: Tajawal خط، وليس Skill. المهارة تعطي منهجًا لاتخاذ القرارات، والخط مورد بصري تستخدمه عند تنفيذ التصميم.

الملف المرفق يحتوي أوزان Light وRegular وMedium وBold وExtraBold، ومعه ترخيص SIL Open Font License. اختيار الوزن، وحجم النص، وتباعد السطور، وتسلسل العناوين هو ما يجعل الخط يخدم المحتوى فعلًا.

المهارة تساعدك تقرّر كيف تصمّم، والخط يعطي الحروف شكلها داخل هذا القرار.

تنزيل خط Tajawal وأوزانه — ZIP ↗

الفصل الخامس
من طلب طويل… إلى طريقة عمل

رجعت نورة إلى أول جملة كتبتها: «صمّم لي موقع حلو». ضحكت. كلمة «حلو» كانت تخفي وراءها عشرات القرارات: هادئ أم جريء؟ سريع أم مليء بالمؤثرات؟ ماذا يحصل عندما تصغر الشاشة؟ وما الذي يراه القارئ أولًا؟

كانت كل مرة تضيف سطرًا إلى الطلب، ثم سطرين، ثم عشر تعليمات. الآن صار عندها مرجع لجودة الواجهة، ومرجع للتفاعل، وموارد تخدم الهوية العربية.

هذا لا يلغي أهمية الطلب الواضح. ما زالت تحتاج تحدد الجمهور، والهدف، والمحتوى، والقيود. لكنه يقلّل تكرار شرح المعايير نفسها في كل مشروع، ويجعل طريقة العمل أسهل في المراجعة والتحسين.

إذا ودّك تبدأ:

1. نزّل ملف المهارة المناسب وافحص محتواه.
2. اتبع طريقة إضافة المهارات في البيئة التي تستخدمها؛ رفع ZIP في Claude يختلف عن إعداد ملفات المشروع في Claude Code.
3. اطلب مهمة محددة، واذكر المهارة التي تريد الاستفادة منها.
4. راجع النتيجة على الجوال والكمبيوتر؛ وجود المهارة لا يغني عن التجربة.

دليل استخدام المهارات في Claude ↗

أغلقت نورة الجهاز… واحتفظت بالخبرة

في نهاية الليلة، لم تكن الفكرة أنها وجدت جملة سحرية تجعل كل تصميم ممتازًا. كانت قد بنت طريقة عمل ترجع لها: مهارة للمراجعة، وأخرى للتفاعل، وموارد للهوية.

ومع الوقت، يمكن أن تضيف دليلًا لأسلوب الكتابة، وآخر لمهمة تتكرر عندها دائمًا. فيصير كل مشروع جديد يبدأ من خبرة متراكمة، بدل إعادة كل التعليمات من البداية.

الذكاء الاصطناعي يعرف أشياء كثيرة… لكن كيف نخليه يستخدم اللي يعرفه بالطريقة اللي نبيها؟
هنا تبدأ فائدة الـSkills فعلًا.

نورة وحوارات الورشة قصة توضيحية متخيّلة، والرسوم مولّدة بالذكاء الاصطناعي. وصف المهارتين مستند إلى ملفاتهما المرفقة، وروابط التنزيل تتضمن النسخ المرفقة بهذا الموضوع.