تستطيع اليوم بناء واجهة كاملة في وقت قصير باستخدام وكيل برمجي. لكن السرعة لا تمنع النتيجة من أن تبدو مثل عشرات المنتجات الأخرى: تدرج بنفسجي، عنوان لامع، ثلاث بطاقات متماثلة، نص تسويقي عام، وحركات لا تساعد المستخدم على إكمال مهمته.
هذه ليست مشكلة «جمال» فقط. الواجهة المتشابهة قد تضعف وضوح العلامة، وتخفي أولوية المعلومات، وتسبب تبايناً ضعيفاً أو حالات تفاعل غير مكتملة. لذلك بنيت مهارة مفتوحة باسم Anti-Vibecoded UI لتحويل الملاحظة الساخرة إلى طريقة مراجعة قابلة للتكرار.
المهارة متاحة على GitHub بترخيص MIT، وتتبع صيغة Agent Skills المفتوحة. يمكن تثبيتها في Codex وClaude Code وCursor وOpenCode ووكلاء متوافقين آخرين من المصدر نفسه.
ما معنى أن تبدو الواجهة Vibecoded؟
المقصود ليس أن استخدام الذكاء الاصطناعي خطأ، ولا أن كل تدرج أو بطاقة أو حركة سيئة. المشكلة تظهر عندما يختار الوكيل الأدوات البصرية الأكثر شيوعاً بلا سبب مستمد من المنتج، فيصبح التصميم قابلاً للنقل إلى تطبيق مختلف من دون أن يتغير شيء مهم.
السؤال المفيد ليس: «هل يوجد تدرج؟» بل:
- هل يخدم التدرج هوية موجودة أو معنى واضحاً؟
- هل يستطيع المستخدم تمييز الإجراء الأساسي بسرعة؟
- هل جاءت البطاقات من بنية المحتوى، أم لأن القالب اعتاد ثلاثة أعمدة؟
- هل يعمل التباين والتركيز بلوحة المفاتيح والحركة المخفّضة؟
- هل اختُبرت النتيجة في الواجهة الفعلية أم بدت جيدة في لقطة واحدة فقط؟
العلامات العشرون
تطلب المهارة من الوكيل فحص اعتماد الواجهة على الأنماط الآتية بوصفها إعدادات افتراضية:
- تدرج بنفسجي إلى أزرق بلا سبب مرتبط بالعلامة أو المحتوى.
- نص متدرج في العنوان الرئيسي بدلاً من بناء تسلسل بصري واضح.
- رموز تعبيرية في العناوين لا تناسب صوت المنتج.
- استخدام خط Inter في كل مكان من دون مراعاة العلامة أو اللغة أو سياق القراءة.
- حدود ملونة لتمييز بطاقات متطابقة في الأصل.
- بطاقات زجاجية تقلل الوضوح أو المقروئية.
- وضع داكن منخفض التباين.
- صف إلزامي من ثلاث بطاقات مزايا بأيقونات عامة.
- شارة زخرفية فوق كل عنوان.
- أيقونات Lucide في كل موضع، حتى عندما يكون النص أو الرمز الخاص بالمنتج أوضح.
- مكونات shadcn UI أو مكتبة أخرى كما هي، بالتكوين والرموز الافتراضية.
- حركة ظهور متكررة عند التمرير.
- شعاع أو ضوء يتبع المؤشر من دون صلة بالمهمة.
- أزرار تفقد التباين أو الوضوح عند التحويم.
- مسافات غير متسقة ولا تستند إلى مقياس مقصود.
- إفراط في الشرطة الطويلة حتى يصبح إيقاع النص مصطنعاً.
- عبارات تسويقية عامة يمكن وضعها في أي منتج.
- لمسات بخط serif مائل لمجرد أنها رائجة.
- اختيار Space Grotesk مع Instrument Serif كتركيبة جاهزة.
- طبقة حبيبات فوق تدرج بلا غرض بصري أو سردي.
القائمة لا تصدر حكماً آلياً. قد يكون بعض هذه الخيارات صحيحاً تماماً في منتج محدد. دورها أن تجبر المراجع على السؤال عن السبب والنتيجة.
كيف تتعامل المهارة مع كل ملاحظة؟
لا يكفي أن يقول الوكيل «هذا يبدو مولّداً». لكل علامة فعلية، تطلب المهارة أربع خطوات:
- تحديد الشاشة أو المكوّن أو المحدد أو منطقة الصورة بدقة.
- شرح أثر الاختيار على المستخدم أو العلامة، لا إدانته لأنه موجود في القائمة.
- الإبقاء عليه إذا كان مقصوداً وفعالاً، أو استبداله بحل مشتق من محتوى المنتج ونظام تصميمه.
- فحص التغيير داخل السياق الكامل حتى لا يؤدي إصلاح الزخرفة إلى تسلسل أضعف أو وصول أسوأ.
هذا يغيّر المخرجات من رأي ذوقي عام إلى مراجعة يستطيع المصمم أو المطور تنفيذها والتحقق منها.
ثبّت المهارة في كل وكلائك
يتطلب الأمر Node.js وnpx. لتثبيت المهارة عالمياً في جميع الوكلاء الذين تتعرف إليهم أداة skills:
npx skills add yasircs4/anti-vibecoded-ui -g -a '*' -s anti-vibecoded-ui -yلـCodex فقط:
npx skills add yasircs4/anti-vibecoded-ui -g -a codex -s anti-vibecoded-ui -yولـClaude Code فقط:
npx skills add yasircs4/anti-vibecoded-ui -g -a claude-code -s anti-vibecoded-ui -yتشرح وثائق skills الرسمية التثبيت من GitHub، والتثبيت العام، واختيار وكيل أو مهارة بعينها. يبقى ملف SKILL.md نفسه قصيراً ومحمولاً، فلا يحتاج كل وكيل إلى نسخة مكتوبة خصيصاً له.
مثال لمراجعة بلا تعديل
استخدم طلباً يحدد النطاق وحد التوقف:
استخدم anti-vibecoded-ui لتدقيق لقطات الشاشة والواجهة الحالية.
حدّد كل ملاحظة في الشاشة والمكوّن، واشرح أثرها، وميّز بين
اختيار العلامة المقصود والإعداد العام. توقف بعد النتائج ولا تعدّل المشروع.هذا مناسب عندما تريد تقريراً أولاً. أما إذا أردت التنفيذ، فأضف المنصات والأحجام والحالات المطلوبة:
استخدم anti-vibecoded-ui أثناء إعادة بناء صفحة الدفع.
حافظ على نظام التصميم والوصول، ثم تحقق من النتيجة الفعلية على
الهاتف وسطح المكتب، مع حالات التحميل والخطأ والتعطيل والتركيز.معيار الإكمال أهم من القائمة
لا تصبح الواجهة جيدة بمجرد حذف التدرجات. تعتبر المهارة العمل مكتملاً عندما تكون هناك أولوية واضحة للمهمة، وعبارات مرتبطة بالمنتج، ورموز تصميم متسقة، وتباين وحالات تفاعل قابلة للوصول، واستجابة سليمة للأحجام المختلفة.
ثم يأتي شرط الدليل: لا يوصف العمل بأنه متحقق حتى تُفحص أقرب نسخة تشغيل فعلية في أحجام ممثلة. إذا لم يحدث ذلك، يجب القول إن التحقق ما زال معلقاً.
لماذا نشرتها كمهارة مفتوحة؟
التوجيه المدفون في محادثة واحدة يختفي. أما المهارة فنسخة قابلة للمراجعة والتحديث والتثبيت في أدوات متعددة. يستطيع أي شخص قراءة التعليمات قبل تشغيلها، أو فتح issue لحالة إيجابية كاذبة، أو اقتراح تحسين مع مثال حقيقي.
المستودع العام يحتوي على ملف المهارة، وبيانات Codex، وأمثلة عربية وRTL، وأمثلة للتدقيق وإعادة التصميم ومراجعة pull request. ابدأ من صفحة المشروع على GitHub، وثبّتها، ثم استخدمها على واجهة حقيقية. أفضل مساهمة ليست إضافة موضة جديدة إلى قائمة المنع، بل توضيح كيف يقود السياق والدليل إلى قرار تصميم أفضل.