إن كنت قد طلبت من الذكاء الاصطناعي بناء صفحة ويب، فربما لاحظت: النتيجة تعمل لكنها تبدو مألوفة من مكان ما. التدرجات البنفسجية نفسها، والعنوان المتوسط نفسه، وترتيب البطاقات نفسه. ومعظم مهارات التصميم تعالج هذه المشكلة بالذات: أن تجعل النموذج يتخذ قرار تصميم واعيًا لا أن يكتفي بـ"الافتراضي".
ذكرنا مصدر كل مهارة في هذا المقال. المستودع الرسمي لـ Anthropic هو anthropics/skills، أما مستودعات المجتمع والشركات فقد وُسمت على حدة.
frontend-design: الهروب من الافتراضي
وصف مهارة frontend-design في المستودع الرسمي واضح: إرشاد من أجل "تصميم بصري واعٍ ومميز" عند بناء واجهة جديدة أو إعادة تشكيل واجهة قائمة. وهي تساعد في اختيار الاتجاه الجمالي والطباعة والخيارات التي "لا تُقرأ كقالب".
ويضع متن المهارة النموذج في دور قائد التصميم في استوديو تصميم، ويبدأ العمل على افتراض أن العميل يرفض أصلًا الاقتراحات المبتذلة. وهذا مثال على تقنية جيدة في كتابة المهارات: بدلًا من تكديس المعلومات، تعطي النموذج وجهة نظر واضحة.
مخرجات الويب: web-artifacts-builder وwebapp-testing
- web-artifacts-builder (رسمية): مجموعة أدوات لإنتاج مخرجات HTML معقدة متعددة المكونات في claude.ai، تحتاج إلى إدارة حالة أو توجيه، بتقنيات واجهة أمامية حديثة مثل React وTailwind CSS وshadcn/ui. ويقول وصفها أيضًا إنها لا تُستخدم لأعمال HTML البسيطة في ملف واحد. وفي المجلد سكربتات تبدأ المشروع وتحزمه في ملف واحد.
- webapp-testing (رسمية): مجموعة أدوات لاختبار تطبيقات الويب المحلية بـ Playwright. تفيد في التحقق من وظائف الواجهة الأمامية وتصحيح أخطاء الواجهة والتقاط لقطات الشاشة وقراءة سجلات المتصفح. إنها الجواب عن سؤال "هل يعمل فعلًا؟" بعد إنجاز التصميم.
الفن البصري: canvas-design وalgorithmic-art وslack-gif-creator
في مستودع Anthropic ثلاث مهارات أخرى تمثل الجانب "الإبداعي":
- canvas-design: تستخدم مقاربة "فلسفة التصميم" لإنتاج الملصقات والأعمال الفنية والتصاميم الثابتة بصيغتي .png و.pdf. وفي المجلد أكثر من 80 ملف خط. وينص وصفها صراحةً على شرط عدم نسخ أعمال الفنانين الموجودين.
- algorithmic-art: تصنع فنًا توليديًا بـ p5.js مع العشوائية ذات البذرة (seeded randomness) ومعاملات تفاعلية. وهي مصممة لطلبات مثل حقول التدفق وأنظمة الجسيمات.
- slack-gif-creator: تقدم قيودًا وأدوات تحقق وأفكار تحريك لإنتاج صور GIF متحركة مُحسَّنة لـ Slack. وهي لطلبات من نوع "اصنع لي GIF لـ Slack يفعل فيه X كذا".
من المجتمع: مهارات الواجهات وReact من Vercel
من أشهر الحزم المهتمة بالتصميم خارج المستودع الرسمي مستودع Vercel المسمى vercel-labs/agent-skills. وفيه حتى أكتوبر 2026:
| المهارة | ماذا تفعل؟ |
|---|---|
| web-design-guidelines | تدقق شيفرة الواجهة وفق أكثر من 100 قاعدة تشمل إمكانية الوصول والأداء وتجربة المستخدم |
| vercel-react-best-practices | قواعد أداء React وNext.js من هندسة Vercel (أكثر من 40 قاعدة في 8 فئات) |
| vercel-composition-patterns | أنماط تركيب مكونات React القابلة للتوسع |
| vercel-react-view-transitions | حركات انتقال سلسة عبر View Transition API في React |
| vercel-react-native-skills | قواعد الأداء والبنية لـ React Native وExpo |
هذه المهارات غير مرتبطة بأداة واحدة. يوصي مستودع Vercel بالتثبيت بالأمر npx skills add vercel-labs/agent-skills، ويمكن استخدام المهارات في وكلاء مختلفين يدعمون معيار Agent Skills.
أيها تستخدم ومتى؟
ترتيب عملي محتمل: حدّد اتجاه التصميم بـ frontend-design، وثبّت اللون والخط بـ theme-factory أو بمهارة علامتك الخاصة، وأنتج المخرج بـ web-artifacts-builder، ثم دقّقه بـ web-design-guidelines وجرّبه في المتصفح بـ webapp-testing. لكل منها اختصاص مستقل، وبفضل التحميل التدريجي لا يؤدي إبقاؤها كلها مثبتة معًا إلى تضخم السياق.
تحذير: بعض هذه المهارات (مثل web-artifacts-builder) تشغّل سكربتات. وتوصي وثائق Claude بالتعامل مع المهارات كأنك تثبّت برنامجًا وبتثبيتها من مصادر تثق بها فقط. ومن العادات الجيدة أن تلقي نظرة على SKILL.md وسكربتات أي حزمة قادمة من خارج المستودع الرسمي قبل تثبيتها.
برأيك، هل ستتنوع التصاميم المصنوعة بالذكاء الاصطناعي مع الوقت، أم سيولد "نمط موحد" جديد كلما استخدم الجميع المهارات نفسها؟