Claude Design Skills: What Actually Works and How to Build Your Own in 2026
الذكاء الاصطناعي والتلقيم

مهارات تصميم «كلود»: ما الذي يعمل فعليًا وكيفية إنشاء مهاراتك الخاصة في عام 2026

أجرى باحثون مؤخرًا اختبارًا لـ 49 مهارة شائعة للوكلاء من خلال 565 مهمة هندسة برمجيات حقيقية. لم تؤثر 39 منها على معدل النجاح بأي شكل من الأشكال، في حين ارتفعت تكلفة الرموز الرقمية بنسبة تصل إلى 451%. هذه الدراسة هي نسخة مسبقة تحتوي على نتائج أولية، لكن النمط ثابت: فمعظم المهارات المثبتة تتحمل تكاليف إضافية مقابل نصائح يتبعها Claude بالفعل.

التصميم هو الاستثناء. فقد أحدثت مهارة الواجهة الأمامية الخاصة بـ Anthropic، المكونة من 400 رمز، تحولًا واضحًا في المطالبات المتطابقة، لأن نتاج التصميم يُحكم عليه بنظرة واحدة. كما أن الإعدادات الافتراضية لـ Claude (Inter، وتدرج لوني أرجواني، وثلاث بطاقات متطابقة) يمكن التعرف عليها في ثانية واحدة.

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

باختصار: قم أولاً بتثبيت مهارة تصميم الواجهة الأمامية (frontend-design) من Anthropic: يكفي أمر واحد في Claude Code لتحديد الاتجاه الجمالي قبل كتابة أي كود. أضف مهارة canvas-design للحصول على عناصر بصرية نهائية، ومهارة theme-factory أو brand-guidelines لضمان اتساق العروض التقديمية، ومهارات Figma إذا كان نظام التصميم الخاص بك يعتمد على Figma.

تمنع المهارات الرسمية النتائج من أن تبدو وكأنها من إنتاج الذكاء الاصطناعي؛ ولا يمكن أن تبدو النتائج وكأنها منتجك إلا من خلال ملف SKILL.md مخصص يحتوي على قيمك السداسية ومقياس النوع والأنماط المحظورة. اختبر كل مهارة بنفس الطريقة: باستخدام نفس المطالبة، مع المهارة وبدونها، واحذف أي شيء لا يغير النتيجة بشكل واضح. ثم قم بإنشاء إصدار للملف مع نظام التصميم الخاص بك، وإلا فسيستمر في تطبيق لون التمييز الخاص بالربع الأخير لفترة طويلة بعد تغيير العلامة التجارية.

ما هي مهارات تصميم كلود؟

مهارات تصميم Claude هي ملفات تعليمات قصيرة تُعلم Claude كيف يجب أن تبدو تصاميمك. يقرأ Claude الملف تلقائيًا كلما ظهرت مهمة تصميم، لذا لن تضطر إلى تكرار القواعد في كل موجه.

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

تم تصميم المهارات بحيث لا تعيق سير العمل. لا يرى Claude سوى اسم كل مهارة وملخصًا من سطر واحد عند بدء الجلسة. وتظهر التعليمات الكاملة عند ظهور مهمة مطابقة. وهذا يحافظ على سرعة الجلسات حتى مع تثبيت عشرات المهارات.

وهذا يعني أيضًا أن الملخص المكون من سطر واحد له أهمية أكبر من أي شيء آخر في الملف، لأنه يحدد ما إذا كان Claude سيفتح المهارة أم لا. وتسمي وثائق «مهارات الوكيل» (Agent Skills ) الصادرة عن شركة Anthropic هذا الأمر «الكشف التدريجي».

كيف تختلف مهارات التصميم في Claude عن Claude Design؟

Claude Design هو منتج مستقل من Anthropic يُنشئ التصميمات بطريقة حوارية على الموقع claude.ai/design. مهارات التصميم هي ملفات تعليمات تُشكّل المخرجات في كلود AI وكلود كود. كما تحدد المهارات ما ينتجه كلود ديزاين في حالة عدم وجود نظام تصميم مستورد. يتوفر كلود ديزاين في باقات Pro وMax وTeam وEnterprise.

مهارات Claude مقابل MCP: ما الفرق؟

تُحدد مهارة Claude طريقة عمل Claude. أما خادم MCP فيزود Claude بمهمة للعمل عليها، مثل اتصال مباشر بملف Figma الخاص بك. أما مشاريع Claude فهي عنصر ثالث يخلط بينه المستخدمون وبين الاثنين السابقين: وهي مساحة عمل محفوظة تجمع ملفات عميل واحد وسياقه معًا.

الجانبمهارات Claudeخوادم MCPمشاريع Claude
ما هي؟مجلد يحتوي على تعليمات يقوم «كلود» بتحميله عندما تتطابق إحدى المهاماتصال مباشر بأداة خارجية مثل Figma أو GitHubمساحة عمل ذات سياق مثبت لمشروع واحد قيد التنفيذ
الأفضل لأعمال التصميمترميز نظام التصميم الخاص بك، والرموز (tokens)، والقواعد الجماليةاستخراج بيانات المكونات الفعلية من ملفات Figmaالحفاظ على سياق العلامة التجارية لعميل واحد في مسار عمل واحد
الإعداداكتب ملف SKILL.md، أو قم بتثبيت واحد في غضون دقائقتكوين الخادم والمصادقةأنشئ مشروعًا وأضف ملفات في Claude AI
تكلفة السياقالاسم والوصف فقط، حتى يتم تفعيلهايتم تحميل تعريفات الأدوات لكل جلسة وقد تكون ثقيلةيتم تحميل المعرفة المتعلقة بالمشروع في كل محادثة

تنتهي معظم فرق التصميم باستخدام مهارة وخادم MCP معًا. يُظهر اتصال Figma لـ Claude الأزرار والألوان والمكونات الحقيقية الموجودة بالفعل في ملفك، وتُخبره المهارة بكيفية استخدامها.

لماذا يُعد التصميم المجال الذي يحقق أكبر عائد من المهارات؟

يؤتي التصميم ثماره أسرع من أي نوع آخر من العمل، لأن النتيجة تُقيَّم بمجرد النظر إليها. فالفقرة أو الوظيفة المتواضعة يجب قراءتها قبل أن يلاحظ أي شخص أنها متواضعة، أما الصفحة المصممة باستخدام الخطوط الجاهزة وتخطيط القوالب، فتُرفض على الفور. وهذا يعني أيضًا أن المهارة التي تصحح هذه الاختيارات تثبت جدارتها على الفور.

قامت شركة Anthropic بقياس ذلك أثناء بناء مهارة الواجهة الأمامية الخاصة بها، حيث قامت بتشغيل مطالبات متطابقة مع المهارة وبدونها عبر صفحة هبوط لخدمة SaaS، وتصميم مدونة، ولوحة تحكم إدارية. وعند تحميل المهارة، استبدلت لوحة التحكم المكونات المسطحة بمظهر داكن متماسك مع خطوط عريضة وحركة مدروسة، واعتمد تصميم المدونة خطًا تحريريًا وتباعدًا مناسبًا بين الأحرف. ولم تتغير المطالبة مطلقًا.

تستهلك المهارة التي أنتجت تلك النتائج حوالي 400 توكن ولا تحتوي على أي أكواد سداسية أو قواعد تخطيط. إنها تحتوي فقط على الخطوط والأنماط التي يجب تجنبها والتوجيهات التي يجب اتباعها بدلاً من ذلك: خط مميز، ولون واحد سائد مع لمسات بارزة، ورسوم متحركة واحدة تُعرض في الوقت المناسب عند تحميل الصفحة، وخلفية متعددة الطبقات. بل ووجدت شركة Anthropic أن تعليمات الطباعة وحدها حسّنت أجزاءً من التصميم لم تذكرها مطلقًا. ذلك لأن النموذج كان يمتلك القدرة دائمًا، ولم يكن ينقصه سوى سبب يمنعه من الاستمرار في اختيار الخيار الآمن.

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

كانت المهارات الـ39 التي لم تغير شيئًا عامةً جدًّا بحيث لم تستطع تغيير قرار واحد. وأثرت ثلاث مهارات سلبًا على النتائج لأن توجيهاتها تعارضت مع المشروع الذي أُدرجت فيه. وقد اختبر المعيار مهام هندسة البرمجيات فقط، وليس التصميم، لكن الآلية قابلة للتطبيق: فالمهارة تحتاج إلى رأي محدد لتغيير أي شيء.

تساعد المهارات الرسمية من Anthropic في تحسين الخطوط والألوان والتخطيطات بشكل عام في Claude. أما المهارة التي تنشئها استنادًا إلى نظام التصميم الخاص بك، فهي تذهب إلى أبعد من ذلك وتتماشى مع علامتك التجارية. ويغطي الجزء المتبقي من هذا الدليل كلا الأمرين: المهارات الرسمية التي يجب تثبيتها، وكيفية إنشاء مهاراتك الخاصة.

ما هي مهارات Claude التي تستحق التثبيت في مجال التصميم؟

هناك ست مهارات رسمية تستحق التثبيت لأعمال التصميم: مهارات Anthropic التالية: frontend-design و canvas-design و theme-factory و brand-guidelines و web-artifacts-builder و webapp-testing، بالإضافة إلى مجموعة مهارات Figma إذا كان فريقك يستخدم Figma في التصميم. وتعد مهارة frontend-design هي المهارة الأولى التي يجب تثبيتها لكونها ذات التأثير الأكبر.

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

في Claude Code، قم بتسجيل مستودع المهارات الخاص بـ Anthropic باستخدام الأمر /plugin marketplace add anthropics/skills، ثم قم بتثبيت المجموعة ذات الصلة بالتصميم باستخدام الأمر /plugin install example-skills@anthropic-agent-skills.

المهارة هي مجموعة من التعليمات التي سيتبعها وكيلك، لذا اقرأ ملف SKILL.md الخاص بطرف ثالث بنفس الدقة التي تقرأ بها الكود قبل دمجه.

المهارةالمصدرالأفضل لـتخطى هذه الخطوة إذا
تصميم الواجهة الأماميةAnthropicواجهات المستخدم والصفحات المقصودة التي لا تبدو وكأنها من إنتاج الذكاء الاصطناعيهناك مهارة صارمة في نظام التصميم تحكم بالفعل ما تنتجه
canvas-designAnthropicيتم تسليم الملصقات والعناصر المرئية الخاصة بوسائل التواصل الاجتماعي بتنسيقات PNG أو PDFأنت بحاجة إلى ملفات مصدر قابلة للتعديل، وليس أعمالًا فنية نهائية
theme-factoryAnthropicاختيار سمة جاهزة للألوان والخطوط لاستخدامها في العروض التقديمية والصفحاتتحدد علامتك التجارية بالفعل الألوان وأنماط الخطوط
إرشادات العلامة التجاريةAnthropicمثال عملي على مهارة علامة تجارية كاملة، مبنية على هوية شركة Anthropic الخاصةأنت تتوقع منه أن يكون على دراية بعلامتك التجارية؛ فهو يأتي مزودًا بـ Anthropic’s
web-artifacts-builderAnthropicنماذج أولية تفاعلية باستخدام React وTailwind في Claude AIيحتاج نموذجك الأولي إلى مكونات الإنتاج الخاصة بك
اختبار التطبيقات الويبAnthropicتحقق من الصفحة التي تم إنشاؤها في متصفح حقيقي قبل تسليمهاأنت لا تنتج سوى عناصر تصميم ثابتة
مهارات FigmaFigmaنقل العمل بين Figma والكود في كلا الاتجاهينفريقك لا يستخدم Figma في التصميم
مهارة نظام التصميم الخاص بكأنتناتج يتوافق مع اللغة البصرية لمنتجكليس لديك حتى الآن قواعد تصميم قابلة للتكرار

تصميم الواجهة الأمامية

تعد «frontend-design» المكون الأكثر تأثيرًا في أعمال واجهة المستخدم. قبل أن يكتب Claude أي كود لواجهة المستخدم، تجعله هذه المهارة يلتزم باتجاه جمالي معين وتبعده عن الخطوط والتدرجات اللونية والتخطيطات التي تدل على أن الصفحة من صنع الآلة.

ما الذي يعمل بشكل جيد

  • توجيه قبل كتابة أي سطر من التعليمات البرمجية: تتطلب المهارة من «كلود» اختيار هوية بصرية محددة للموجز، بما في ذلك مخاطرة جمالية واحدة متعمدة، بدلاً من تصميم العناصر أثناء العمل
  • القيم الافتراضية المسماة التي يجب تجنبها: تم استبعاد خطوط Inter وRoboto والتدرجات اللونية الأرجوانية على خلفية بيضاء والمكونات النمطية بشكل صريح، ولهذا السبب لا يبدو المخرجات مثل أي صفحة أخرى تعتمد على الذكاء الاصطناعي
  • حجم صغير جدًا: يبلغ حجم الإرشادات حوالي 400 رمز، لذا فإن تكلفة الاحتفاظ بها مثبتة تكاد تكون معدومة

القيود

  • الذوق العام، وليس ذوقك: تعرف المهارة الشكل النمطي وتتجنبه، لكنها لا تملك أي فكرة عن الشكل الذي ينبغي أن يكون عليه منتجك
  • تعمل على واجهة المستخدم فقط: يتم تشغيلها عند مهام واجهة المستخدم على الويب؛ أما الملصقات والعناصر المرئية الثابتة فتنتمي إلى تصميم اللوحة (canvas-design)

تخطى هذه الخطوة إذا: كنت تدير بالفعل مهارة نظام تصميم ذات قواعد أكثر صرامة. تتنافس رأيان جماليان في نفس الجلسة، ويجب أن يفوز رأيك. على سبيل المثال، في Claude Code، تتفوق المهارات الشخصية ومهارات المشاريع على عمليات تثبيت المكونات الإضافية مثل هذه، لذا فإن مهاراتك هي التي تفوز افتراضيًا.

الأفضل للاستخدام في: الصفحات المقصودة، ولوحات التحكم، والمكونات التي يُعد فيها «عدم الظهور وكأنه من إنتاج الذكاء الاصطناعي» هو المعيار المطلوب، ولا يوجد أسلوب تصميم داخلي محدد بعد.

canvas-design

تنتج canvas-design أعمالًا فنية مرئية نهائية، مثل الملصقات والرسومات المخصصة لمواقع التواصل الاجتماعي، كملفات PNG أو PDF. وتعمل على مرحلتين، على غرار طريقة عمل المصمم. أولًا، تكتب فلسفة تصميم موجزة للعمل الفني. ثم تنشئ العنصر المرئي انطلاقًا من تلك الفلسفة، مع الحفاظ على الحد الأدنى من النص ومعاملة الخط كجزء من التكوين.

ما الذي يعمل بشكل جيد

  • المفهوم قبل البكسلات: تفرض مرحلة «الفلسفة» وجود فكرة بصرية متماسكة، بحيث يكون للنتيجة النهائية وجهة نظر واحدة بدلاً من أن تكون مجرد فراغ مزخرف
  • أصلي وفقًا للتعليمات: توجه المهارة كلود صراحةً إلى إنشاء تصميمات أصلية بدلاً من تقليد الفنانين الحاليين

القيود

  • الملفات النهائية فقط: ستحصل على ملف PNG أو PDF مُعالج ووثيقة الفلسفة، ولا يوجد ملف مصدر متعدد الطبقات لتحريره لاحقًا

تخطّ هذه الخطوة إذا: كان المنتج النهائي بحاجة إلى العودة إلى Figma أو Illustrator لإجراء تعديلات عليه. إعادة الإنشاء هي الطريقة الوحيدة للتعديل في هذه الحالة.

الأفضل لـ: العناصر المرئية التي تُصمم لمرة واحدة ولها موعد نهائي، حيث يكون التكوين النهائي القوي أفضل من الملف القابل للتعديل.

theme-factory و brand-guidelines

هذان النموذجان يعالجان مسألة الاتساق من طرفين متعاكسين. يقدم theme-factory عشرة ثيمات جاهزة، كل منها عبارة عن لوحة ألوان مع أزواج خطوط متناسقة. ويمكنه إنشاء ثيم جديد عند الطلب، ثم تطبيق الثيم المختار على مجموعة أو مستند أو صفحة. أما brand-guidelines فيوضح شكل مهارة العلامة التجارية المحددة بالكامل، مع تضمين لوحة الألوان وأزواج الخطوط الخاصة بشركة معينة بالضبط. لكن هناك مشكلة: تلك الشركة هي Anthropic، لذا تعامل معها كإطار عمل يمكنك تكييفه وفقًا لقيمك الخاصة، وليس كميزة تعرف علامتك التجارية.

ما الذي يعمل بشكل جيد

  • قرار واحد، يُطبق في كل مكان: اختر مظهرًا مرة واحدة، وستتبعه كل شريحة أو صفحة في العمل النهائي، مما يزيل التباين بين الشريحة 3 والشريحة 14
  • حل بديل في حالة عدم وجود علامة تجارية: بالنسبة للأعمال الداخلية أو المفاهيم الأولية التي لا تتمتع بهوية بصرية بعد، فإن استخدام سمة محددة مسبقًا أفضل من التصميم المرتجل

القيود

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

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

الأفضل لـ: الفرق التي تنتج عروضًا تقديمية ووثائق موجهة للعملاء بكميات كبيرة، حيث يُعد الاتساق أكثر أهمية من الابتكار.

web-artifacts-builder و webapp-testing

هذان العنصران يشكلان طرفي نموذج أولي. يتيح web-artifacts-builder لـ Claude إنشاء «Claude Artifacts» باستخدام React وTailwind وshadcn/ui عبر ملفات متعددة، ثم يجمع كل شيء في ملف واحد هو artifacts. وبالتالي، تأتي النماذج الأولية بنماذج قابلة للتشغيل ومكونات حقيقية بدلاً من صفحة HTML فارغة واحدة.

ثم يقوم webapp-testing بفتح النتيجة في متصفح حقيقي، ويتنقل خلالها، ويلتقط لقطات شاشة وسجلات وحدة التحكم. وبذلك يتم الكشف عن أي تفاعل معطل قبل أن يكتشفه أحد أصحاب المصلحة.

ما الذي يعمل بشكل جيد

  • نماذج أولية أكثر ثراءً جاهزة للاستخدام: يتضمن تطبيق المهام الذي تم إنشاؤه باستخدام المهارة نموذجًا فعالًا لإنشاء المهام مع فئات وتواريخ استحقاق، بينما تظل النسخة التي لا تستخدم المهارة بسيطة للغاية
  • التحقق قبل التسليم: لقطة شاشة من متصفح حقيقي تثبت «ما إذا كان يعمل بالفعل» بشكل أفضل بكثير من الكود المُولَّد

القيود

  • مكتبة المكونات العامة: يتم إنشاء النماذج الأولية من أجزاء shadcn/ui، وليس من مكونات الإنتاج الخاصة بك، لذا فإن دقة التوافق مع منتجك لها حدود
  • يتطلب الاختبار وجود تطبيق محلي: يقوم webapp-testing بتشغيل تطبيقات الويب المحلية، مما يجعله أداة لدعم سير عمل المطورين وليس أداة تصميم

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

الأفضل لـ: مهندسي التصميم الذين يطرحون نماذج أولية تفاعلية للمراجعة ويريدونها أن تكون وظيفية، وليس مجرد نماذج جميلة المظهر.

المهارات الرسمية لـ Figma

تحتفظ Figma بمجموعة مهاراتها الخاصة على GitHub، والتي تم إنشاؤها لتعمل جنبًا إلى جنب مع خادم بروتوكول سياق نموذج Figma (MCP). تعمل هذه المجموعة في كلا الاتجاهين. تقوم مهارة figma-design-to-code بتحويل عقدة Figma إلى كود في بيئتك الحقيقية. بينما تقوم مهارة figma-generate-design بإنشاء شاشات في Figma من المكونات والرموز التي نشرتها. وتقوم مهارة figma-generate-library بإنشاء مكتبة مكونات من قاعدة كود. ويقوم figma-code-connect بربط التصميمات بتنفيذاتها البرمجية، بحيث يعرض «Dev Mode» كود المكونات الحقيقي بدلاً من التقديرات المُولَّدة.

ما الذي يعمل بشكل جيد

  • مكونات حقيقية بدلاً من التخمينات: نظرًا لأن المهارات تعتمد على اتصال MCP، يعمل Claude انطلاقًا من المتغيرات والأنماط والمكونات المنشورة الفعلية الخاصة بك
  • الانضباط الصارم: تتطلب المهارات وجود سياق تصميمي قبل كتابة الكود، واستخدام رموز نظام التصميم بدلاً من القيم المبرمجة بشكل ثابت، وهذا هو بالضبط الخطأ الذي ترتكبه الجلسات التي تعتمد على الإرشادات اليدوية

القيود

  • مصممة خصيصًا لـ Figma بحكم تعريفها: تفترض كل مهارة أن تصميماتك مخزنة في ملفات Figma متصلة بخادم MCP، وأن عملية الإعداد أكثر تعقيدًا من التثبيت الذي يتم بأمر واحد

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

الأفضل لـ: فرق المنتجات التي لديها نظام تصميم منشور على Figma وترغب في التخلص من الحاجة إلى الترجمة اليدوية بين التصميم والرمز والعكس.

كيفية إنشاء مهارة Claude لنظام التصميم الخاص بك

يتطلب إنشاء مهارة لنظام التصميم ست خطوات: اختر سير عمل متكررًا واحدًا، وقم بصياغة ملف SKILL.md بمساعدة Claude، واكتب وصفًا يمكن لـ Claude مطابقته مع المهام الفعلية، واملأ التعليمات برموز التصميم الفعلية الخاصة بك، وقارن النتائج مع وجود المهارة وبدونها، ثم قم بتثبيت المجلد في المكان الذي يعمل فيه فريقك.

الخطوة 1: اختر سير عمل تصميمي متكررًا واحدًا

اكتب المهارة لمهمة تقوم بتكليف Claude بها عدة مرات أسبوعيًا. التكرار هو ما يبرر وجود الملف: فالمهارة توفر عليك عناء لصق القواعد نفسها في كل جلسة، لذا فإن المهمة التي تقوم بها مرة واحدة لا تحتاج إلى مهارة.

الخيارات الشائعة:

  • واجهة مستخدم المنتج: الشاشات والمكونات في اللغة البصرية لمنتجك
  • عروض العملاء: شرائح تتبع الأسلوب المعمول به في الاستوديو الخاص بك
  • مواصفات Handoff: وثائق المطورين بالصيغة التي يتوقعها مهندسوك

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

الخطوة 2: دع Claude يقوم بصياغة ملف SKILL.md

صف سير العمل لـ Claude واجعله يكتب المسودة الأولى. سيسألك عن طبيعة المهمة، ومتى يجب تفعيل المهارة، وكيف يبدو الناتج النهائي، ثم يقوم بإنشاء الملف. هذه هي الأسئلة التي ينسى معظم الناس الإجابة عليها عند كتابة الملف يدويًّا.

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

الخطوة 3: اكتب وصفًا يؤدي فعليًّا إلى تشغيل المهارة

يحدد سطر الوصف الموجود في مقدمة ملف YAML ما إذا كانت مهارتك ستُشغَّل أم لا. لا يقرأ Claude سوى هذا السطر عند فحص المهارات المثبتة بحثًا عن تطابق، لذا فإن عبارة «helps with design» لا تتطابق مع أي شيء، ولا يتم تحميل التعليمات الموجودة أسفلها أبدًا.

يحدد الوصف الذي يُطلق الإجراء ثلاثة عناصر في الكلمات التي ستكتبها في حقل الإدخال:

  • المهام: «إنشاء واجهة المستخدم، أو الصفحات المقصودة، أو المكونات»
  • النطاق: المنتج أو العلامة التجارية التي تنطبق عليها المهارة
  • القواعد التي تنطبق عليها: «رموز التصميم الخاصة بنا، ومقياس الخطوط، وقواعد التباعد»

تفرض Claude AI حدًا أقصى أقصر يبلغ 200 حرف على المهارات التي يتم تحميلها، لذا اكتب ما لا يتجاوز 200 حرفًا واترك الـ 1,024 حرفًا المتبقية في المواصفات كهامش احتياطي لـ Claude Code.

الخطوة 4: قم بترميز نظام التصميم، وليس الصفات

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

  • اللون: القيم السداسية الدقيقة، وليس أسماء الألوان
  • النوع: المقياس الكامل، مع أسماء الخطوط وسمكها
  • المسافة: وحدات التباعد ونصف قطر الحدود
  • الحركة: المدد الزمنية وتدرج الحركة، إذا كان نظامك يحددها
  • قائمة المحظورات: شبكات البطاقات الافتراضية، والأبطال ذوو التدرجات اللونية، وأسلوب الرسوم التوضيحية الجاهزة، وأي شيء آخر يحظره نظامك بالاسم

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

الخطوة 5: اختبر مقابل خط الأساس الخاص بـ Claude

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

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

نصيحة للمحترفين: استخدم مكونًا قمت بإصداره مؤخرًا كمهمة اختبار. فالنتائج التي يمكنك مقارنتها بالعمل الفعلي في بيئة الإنتاج تكشف عن الإرشادات غير الصريحة بشكل أسرع من المطالبات المختلقة.

الخطوة 6: قم بتثبيتها في بيئة عملك، وقم بتحديد إصدارها

في Claude AI، قم بتحميل مجلد المهارة من خلال «الإعدادات»، ثم «تخصيص»، ثم «المهارات». في Claude Code، قم بتسجيل التغييرات في مجلد claude/skills/ الخاص بمشروعك، وسيحصل عليها كل من يقوم بنسخ المستودع.

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

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

خمسة أخطاء شائعة في المهارات قد لا تلاحظها للوهلة الأولى

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

مجموعة المهارات التي لا تفعل شيئًا. يحتوي مجلد المهارات الخاص بك على خمسة عشر ملفًا تم تنزيله، وتُحمَّل الجلسات بشكل جيد، ويبدو الناتج تمامًا كما كان قبل وصول أي منها. لا توجد أخطاء، لذا لا يُشكَّ في أي شيء. فكل مهارة إما لا يتم تفعيلها أبدًا أو تكرر النصائح التي يتبعها «كلود» بالفعل، وأنت تدفع تكلفة رمزية مقابل تغيير معدوم.

الحل: قم بإخضاع كل مهارة مثبتة لنفس اختبار «قبل/بعد» الذي كنت ستجريه بنفسك. احتفظ بالمهارات التي تغير الناتج بشكل ملحوظ، وهي اثنتان أو ثلاث مهارات، واحذف الباقي دون تردد.

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

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

المهارة التي لا تُستدعى أبدًا. يظل الملف مثبتًا لأسابيع، ولا يذكر Claude أبدًا أنه تم تحميله. ولا يلاحظ أحد ذلك، لأن الجلسات لا تزال تنتج مخرجات، وإن كانت مخرجات غير ماهرة. يختار Claude المهارات من خلال مطابقة طلبك مع الوصف المكون من سطر واحد في مقدمة الملف، والوصف الغامض لا يطابق أي شيء.

الحل: أعد كتابة الوصف باستخدام الكلمات نفسها التي تكتبها عند تعيين المهمة. إذا قلت «إنشاء صفحة الأسعار»، فيجب أن يشير الوصف إلى «الصفحات»، وليس «المساعدة في الجودة البصرية».

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

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

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

الحل: اربط ملف المهارات بنفس عملية الإصدار التي يتبعها نظام التصميم، حتى لا ينفصل الاثنان عن بعضهما البعض بين المراجعات

كيفية تشغيل سير عمل تصميم يعتمد على المهارات في ClickUp

أنشئ عرضًا تقديميًا يحمل علامتك التجارية كأداة ClickUp قابلة للمشاركة

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

ما الذي ينجح بشكل خاص في التصميم القائم على المهارات:

  • الوصول إلى Claude ونماذج اللغة الكبيرة (LLMs) الأخرى بشكل مدمج: انتقل إلى Claude أثناء المحادثة في ClickUp Brain دون مغادرة مساحة العمل الخاصة بك. اسأل عن مهمة التصميم التي أمامك، وسيقوم Brain باستدعاء المعلومات التي لا يمكن لجلسة Claude المستقلة رؤيتها، مثل آخر جولة من ملاحظات العميل أو الملخص الخاص بالمهمتين السابقتين في سلسلة المحادثة
  • حوّل قواعد التصميم الخاصة بفريقك إلى أدلة إرشادية قابلة لإعادة الاستخدام: يمتلك ClickUp مهارات الذكاء الاصطناعي الخاصة به: وهي مجموعات تعليمات محفوظة يطبقها Brain كلما ظهرت مهمة مطابقة. قم بإنشاء مهارة تنص على «عند مراجعة صفحة الهبوط، قم بالتحقق من مقياس الأنماط الخاص بنا، والأنماط المحظورة، ورموز التباعد»، وستُنفذ كل عملية مراجعة نفس قائمة المراجعة. يمكن أن توجد وثائق نظام التصميم التي تستمد منها هذه المهارة بجانبها كويكي ClickUp Docs يتم تتبع إصداراته، ويمكن للفريق بأكمله العثور عليه
أنشئ مهارات مخصصة باستخدام الذكاء الاصطناعي في ClickUp
أنشئ مهارات مخصصة باستخدام الذكاء الاصطناعي من ClickUp

شاهد كيف تعمل مهارات ClickUp AI عمليًا، بدءًا من إنشاء دليل إرشادي قابل لإعادة الاستخدام وصولاً إلى تحميل التعليمات الصحيحة تلقائيًا عبر ميزة Brain:

  • أغلق حلقة التغذية الراجعة بشأن أصول التصميم التي أنشأها Claude: أرفق النموذج الأولي أو لقطة شاشة الصفحة المقصودة التي أنتجها Claude بالمهمة الخاصة بها، ويمكن لأصحاب المصلحة التعليق عليها مباشرةً باستخدام ميزة ClickUp Proofing. فعبارة مثل «المسافات تبدو غير مناسبة في منطقة العنصر الرئيسي» تصبح تعليقًا توضيحيًا عند إحداثيات دقيقة، ويتم تخصيصها لمصمم ما وتظهر في صفحته الرئيسية
  • قم بنشر معاينة تفاعلية بدلاً من لقطة شاشة: اطلب من Brain إنشاء صفحة هبوط أو عرض تقديمي أو لوحة تحكم، وسيقوم بإنشاء عنصر ClickUp حي: صفحة HTML عاملة مبنية بناءً على الملخص ووثائق العلامة التجارية وبيانات المهام المرفقة بالفعل بالمشروع. الصق عنوان URL في أي مكان في مساحة العمل الخاصة بك، وسيتم عرضه ليتمكن أصحاب المصلحة من النقر عليه

القيود:

  • ClickUp ليس المكان الذي تقوم فيه بإنشاء مهارات Claude أو تشغيلها: توجد مهارات Claude في Claude AI وClaude Code. ClickUp هو نظام التسجيل الخاص بها، وليس طبقة الإنتاج
  • هناك منحنى تعلم في مرحلة الإعداد. يتعين على الفرق التي تأتي من أداة أبسط أو التي لا تستخدم أي أداة لإدارة المشاريع أن تفكر مسبقًا في التسلسل الهرمي والحالات. أما المصمم المستقل الذي يعمل مع ثلاثة عملاء، فينجز العمل بشكل أسرع باستخدام أداة أبسط

تخطى هذه الخطوة إذا: كنت تحتاج إلى Claude فقط لإنشاء عناصر مرئية لمرة واحدة ولا توجد عملية مراجعة من قبل الفريق بشأنها.

الأفضل لـ: فرق التصميم التي يتولى فيها Claude مهام الإنتاج، بينما يتولى فريق من البشر مهام إعداد الملخصات والتعليقات والموافقة، وتحتاج عمليات التسليم هذه إلى التخلص من التشتت في سلاسل المحادثات المتفرقة.

أنشئ المهارة مرة واحدة، واستمتع بنتائجها إلى الأبد

النمط المتكرر في كل الاختبارات الموثوقة هو نفسه: المهارات التي تنطلق من وجهة نظر محددة تغير نتائج التصميم، أما المهارات العامة فلا تحدث أي فرق. قم بتثبيت مهارة تصميم الواجهة الأمامية من Anthropic اليوم؛ فهي أسرع ترقية ملحوظة. ثم اقضِ بعد الظهر في ترميز نظام التصميم الخاص بك في ملف SKILL.md.

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

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

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

جرب ClickUp مجانًا وامنح سير عمل التصميم الخاص بك نفس النظام الذي منحته مهارتك للتو لمخرجاتك.

الأسئلة الشائعة حول مهارات تصميم كلود (FAQs)

ما مقدار السياق الذي تستخدمه المهارة المثبتة؟

يستهلك كل مهارة حوالي 100 رمز حتى يتم تفعيلها. لا يقوم Claude بتحميل سوى اسم كل مهارة ووصفها عند بدء التشغيل؛ ولا يدخل نص ملف SKILL.md الكامل (توصي Anthropic بألا يتجاوز عدد الرموز 5,000 وعدد الأسطر 500) إلى السياق إلا عند وجود مطابقة مع مهمة ما، ولا يتم تحميل الملفات المرجعية المجمعة إلا عند قراءتها. تستهلك اثنتا عشرة مهارة مثبتة ما يقارب 1,200 رمز من التكاليف الثابتة.

هل يمكن أن تتضمن مهارة Claude كودًا قابلاً للتنفيذ؟

نعم. يمكن للمهارات تجميع نصوص برمجية بلغة Python أو JavaScript أو Bash في دليل scripts/، مع تعريفها كمتطلبات في مقدمة ملف YAML. يمكن لـ Claude و Claude Code تثبيت الحزم من PyPI و npm عند تحميل المهارة؛ أما مهارات واجهة برمجة التطبيقات (API) فتتطلب تثبيت جميع المتطلبات مسبقًا في الحاوية. تستخدم مهارات الوثائق الخاصة بشركة Anthropic لبرامج Excel و Word و PDF هذا النمط.

أي مهارة تفوز في حالة تعارض مهارتين؟

في Claude Code، تتبع المهارات ترتيب أولوية ثابتًا عند تضارب الأسماء: المهارات التي تديرها المؤسسة أولاً، ثم المهارات الشخصية في ~/.claude/skills، ثم مهارات المشروع في .claude/skills، وأخيرًا المهارات المثبتة عبر المكونات الإضافية. يمكن للمؤسسات فرض المعايير من خلال المهارات المؤسسية، بينما يحتفظ الأفراد بإمكانية التجاوز الشخصي. ويؤدي استخدام أسماء وصفية مثل frontend-review بدلاً من review إلى تجنب معظم حالات التضارب.

ما الفرق بين مهارة Claude والمكوّن الإضافي؟

المهارة هي مجلد واحد يحتوي على ملف تعليمات SKILL.md؛ أما المكون الإضافي فهو حزمة توزيع يمكنها تجميع عدة مهارات مع موصلات وأوامر لـ Claude Code. توفر شركة Anthropic تصميم الواجهة الأمامية (frontend-design) كمكون إضافي يحتوي على المهارة ويتم تثبيته بأمر واحد من السوق. إذا كنت تقوم بكتابة قواعد التصميم الخاصة بك، فأنت تكتب مهارة؛ أما المكونات الإضافية فهي الطريقة التي تشارك بها مجموعات من هذه القواعد.

هل مهارات Claude مجانية الاستخدام؟

تتوفر المهارات الجاهزة في جميع باقات Claude، بما في ذلك الباقة المجانية، شريطة تمكين تنفيذ التعليمات البرمجية في الإعدادات. يتطلب تحميل المهارات المخصصة الاشتراك في باقة Pro أو Max أو Team أو Enterprise. يتم تفعيل المهارات الجاهزة من Anthropic تلقائيًا لجميع المستخدمين، ويمكنك تحميل المهارات المخصصة من خلال قسم «التخصيص»، ثم «المهارات».

لا. المهارة هي مجلد يحتوي على ملف SKILL.md: مقدمة YAML تتضمن الاسم والوصف، تليها تعليمات مكتوبة بلغة Markdown البسيطة. أما البرامج النصية القابلة للتنفيذ بلغة Python أو JavaScript أو Bash فهي إضافات اختيارية مخصصة لسير العمل المتقدم. توصي وثائق المهارات المخصصة من Anthropic بالبدء بالتعليمات فقط وإضافة البرامج النصية لاحقًا إذا تطلبت المهمة ذلك.