١٢ مهارة مجانية تعالج تصميم AI Slop

خط Inter. تدرج بنفسجي. بطاقات مستديرة بظلال منسدلة. حين بدأت البرمجة بأسلوب vibe coding لأول مرة، لم تكن العقبة الحقيقية في الكود أبدًا، بل كانت في التصميم. كل واجهة يولّدها الذكاء الاصطناعي بدت وكأنها خرجت من مصنع قوالب واحد.

ملف SKILL.md واحد يغيّر طريقة تفكير الوكيل في التصميم. ثبّتُّ واختبرتُ عشرات مهارات التصميم خلال الأشهر الماضية. أغلبها أزلته خلال أسبوع لأنها إما تعارضت مع بعضها أو أنتجت تحسينات هامشية. المهارات الاثنتا عشرة أدناه هي ما بقي فعلًا.

من أين تبدأ

إضافة frontend-design الرسمية من Anthropic هي خط الأساس. تأتي مدمجة مع Claude Code وتضع قواعد تأسيسية للتخطيط والطباعة واختيار الألوان. بدونها، يعود الوكيل إلى تركيبة Inter + التدرج البنفسجي ذاتها في كل مرة. اعتبرها الحد الأدنى لا السقف.

Impeccable تبني فوق الإضافة الرسمية بـ ٢٠ أمرًا مائلًا: /polish و/audit و/distill و/bolder و/quieter وغيرها. كل أمر يستهدف جانبًا تصميميًا محددًا. أمر /audit يُجري فحصًا شاملًا للجودة يغطي سهولة الوصول والسمات ونقاط التجاوب. أمر /distill يجرّد المكوّن حتى أساسياته. أستخدم /polish قبل كل نشر كمراجعة نهائية.

التحكم في حدة التصميم

Taste Skill يتبع نهجًا مختلفًا. بدلًا من الأوامر المائلة، يستخدم ثلاثة متغيرات رقمية مثل DESIGN_VARIANCE للتحكم في مدى انحراف الوكيل عن الإعدادات الافتراضية. اضبطه على قيمة منخفضة للواجهات المؤسسية المحافظة. ارفعه لصفحات الهبوط التجريبية. الدقة في الضبط مفيدة، لكنني وجدت أن النقطة المثالية تحتاج بعض التجربة والخطأ. محاولتي الأولى بقيمة عالية أنتجت شيئًا يشبه صفحة MySpace من عام ٢٠٠٦.

الأيقونات والعناصر المرئية

Better Icons يربط أكثر من ١٥٠ مجموعة أيقونات تحتوي على أكثر من ٢٠٠٬٠٠٠ أيقونة. تبحث بالكلمة المفتاحية، فيُزامن ملف SVG مباشرة في مشروعك. قبل هذه الأداة، كنت أحمّل الأيقونات يدويًا من خمسة مواقع مختلفة. جودة البحث تتفاوت حسب المجموعة، لكن لأيقونات واجهة المستخدم الشائعة، يجد التطابق الصحيح بسرعة.

ذكاء التصميم على مستوى المكوّنات

UI Design Brain يحتوي على مبادئ تصميمية لأكثر من ٦٠ مكوّنًا عبر خمسة أنماط تصميم. يخبر الوكيل كيف يجب أن يتصرف modal في نظام minimalist مقابل نظام glassmorphic. هذا المستوى من التحديد مهم لأن التعليمات العامة من نوع “اجعلها تبدو جيدة” تنتج نتائج عامة.

UI UX Pro Max يذهب أبعد: أكثر من ٥٠ نمط تصميم، و٩٧ تركيبة لوحة ألوان، و٥٧ تزاوجًا للخطوط، ومنطق مخصص لأكثر من ١٦٠ نوع منتج حسب المجال. النطاق طموح. بصراحة، العدد الكبير من الخيارات قد يبطئ التوليد إن لم تقيّد السياق. عادةً أحدد النمط ولوحة الألوان صراحةً بدلًا من ترك الوكيل يختار.

المراجعة وبوابات الجودة

agent-skills من Vercel تتضمن مجموعة قواعد لمراجعة واجهة المستخدم بأكثر من ١٠٠ نقطة فحص. تقيّم اتساق المسافات وتباين الألوان وحالات التفاعل والسلوك التجاوبي. تشغيلها بعد مرحلة التصميم يكشف مشكلات تبدو جيدة على الحاسوب المحمول لكنها تنكسر على الهاتف.

UI Skills تضيف فحوصات جودة مخصصة لـ Tailwind. أوامر مثل /baseline-ui تفرض استخدامًا متسقًا لفئات utility، وأمر /fixing-accessibility يُجري تدقيقًا مركّزًا لسهولة الوصول. إن كان مشروعك مبنيًا على Tailwind، فهذه الأداة تسد فجوة تفوتها مهارات التصميم العامة.

تغطية سير العمل الكامل

Designer Skills Collection هي الحزمة الأشمل هنا: ٦٣ مهارة و٢٧ أمرًا تغطي سير عمل التصميم بالكامل من الإطار الشبكي حتى الإنتاج. الحزمة ذات رأي واضح، مما يعني أنها تتعارض أحيانًا مع مهارات أخرى. اضطررت لتعطيل بعض القواعد المتداخلة لتجنب وصول تعليمات متناقضة للوكيل.

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

المظهر الفاخر

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

Make Interfaces Feel Better مخصصة للتفاعلات الدقيقة تحديدًا. حالات التمرير، وانتقالات التحميل، وسلوكيات التمرير، وردود فعل الأزرار. هذه التفاصيل الصغيرة هي ما يفصل بين “يبدو جيدًا” و”يشعرك بالراحة”. لاحظت أكبر تحسّن محسوس في الجودة من هذه المهارة مقارنة بأي مهارة أخرى في هذه القائمة.

ما لم ينجح

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

وجدت أيضًا أن المهارات التي تستهدف الطبقة نفسها (مثل نظامين متنافسين للوحات الألوان) تُلغي بعضها البعض. اختر مهارة واحدة لكل جانب والتزم بها.

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