Context Engineering for UI: Eliminating AI Slop, Enforcing Direction-Agnostic RTL, and Mastering In-Place Refactoring with TidyFactor Styler

1. التشريح الهندسي لظاهرة مبتذلات الذكاء الاصطناعي (The Anatomy of AI Slop)

في مشهد تطوير الويب المعاصر لعام 2026، بات من السهل للغاية التعرّف على واجهة المستخدم التي صممها مساعد ذكاء اصطناعي بنظرة واحدة خاطفة. تكاد تكون النماذج اللغوية الكبرى (LLMs) مبرمجة إحصائياً على تكرار نمط بصري واحد ممل ومستهلك:

• التدرجات اللونية الفاقعة بلا هوية: خلط عشوائي بين البنفسجي الفوسفوري والوردي الفاقع (Cyberpunk/Neon Gradients) دون أي مبرر يرتبط بالهوية التجارية أو سياق المستخدم.
• الإفراط في تدوير الحواف والظلال الضبابية: بطاقات ذات حواف بالغة الاستدارة (rounded-3xl في كل مكان) وظلال ناعمة بلا عمق تفتقر إلى الانضباط المعماري.
• غياب التباين الهرمي للمعلومات: النصوص متساوية في الأوزان البصرية، والعناوين تفشل في توجيه عين القارئ نحو الإجراء الأساسي (Primary Action).
• انهيار اتجاهات النصوص واللغة العربية (Broken RTL): عند طلب دعم العربية، تلجأ النماذج إلى حلول ميكانيكية مشوهة (مثل إضافة كلاسات rtl:text-right متضاربة أو عكس الهوامش عشوائياً)، مما يسبب قفزات بصرية مزعجة عند تبديل اللغة.

السؤال الهندسي الجوهري هو: لماذا يحدث هذا؟
السبب لا يعود إلى نقص قدرة النماذج على كتابة كود CSS سليم، بل إلى ما نسميه في الوكالة بـ «فقر الذاكرة التشغيلية وهندسة السياق (Context Deficiency)». عندما تخاطب النموذج بأمر عام مثل «صمم لي واجهة هبوط عصرية وجذابة»، فإن النموذج يلجأ إلى المتوسط الإحصائي لآلاف المواقع المكررة على الإنترنت، وهو ما ينتج الـ Slop البصري المحتوم.

2. البرومبت العابر مقابل هندسة السياق المعيارية (Prompting vs Context Engineering)

يكمن الفرق بين الهواية والاحتراف الهندسي في تجاوز مرحلة "كتابة البرومبتات الطويلة" إلى بناء «هندسة سياق تشغيلية متكاملة (Operational Context Layer)». في منظومة TidyFactor، لا نطلب من الذكاء الاصطناعي أن "يكون مبدعاً"، بل نضع أمامه قيوداً معمارية حاسمة (Hard Constraints) ومصفوفات عمل موثقة.

تعتمد مهارة tidyfactor-styler على ثلاث طبقات سياقية يتم حقنها في عقل الوكيل البرمجي قبل أن يكتب حرفاً واحداً:

3. هندسة الـ RTL عبر خصائص Logical CSS: إنهاء معضلة الاتجاه للأبد

أحد أكبر التحديات في تصميم الواجهات العربية وثنائية اللغة هو التعامل مع الـ RTL. الطريقة القديمة المتبعة في معظم المشاريع هي كتابة ملفات CSS منفصلة (style.css و style-rtl.css) أو إغراق ملفات Tailwind بكلاسات مشروطة مثل ltr:ml-4 rtl:mr-4.

هذه الطريقة تضاعف حجم الكود بنسبة 40%، وتخلق كوابيس صيانة عند تعديل أي مسافة مستقبلاً. الحل المعماري الذي تفرضه مهارة tidyfactor-styler هو الاعتماد الحصري على الخصائص المنطقية (CSS Logical Properties):

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

4. مبدأ التعديل في المكان (In-Place Refactoring) وتجنب فخ إعادة الكتابة

أكبر خطأ ترتكبه وكلاء الذكاء الاصطناعي غير المنضبطة عند تكليفها بمهمة "إعادة تصميم واجهة" هو محاولة إعادة كتابة كل شيء من الصفر (The Rewrite Trap). يقوم الوكيل بحذف المكون القديم واستبداله بكود خارجي يكسر التفاعل مع الـ API، أو يلغي التحقق من صحة النماذج (Validation)، أو يحذف إدارة الحالة (State Management).

تضع tidyfactor-styler قاعدة حديدية لا يمكن كسرها:

«قاعدة الانضباط: التعديل يتم داخل بنية الكود القائم فقط. لا تقم بتغيير أسماء الـ Props، لا تمس عقود الـ Backend، ولا تستبدل مكتبات المشروع بنظام styling موازٍ.»

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

5. شجرة الأوامر المتخصصة في TidyFactor Styler

بدلاً من البرومبتات النصية الفضفاضة، تستخدم المهارة أوامر Slash Commands حادة تحدد النطاق والمخرج الهندسي بدقة:

• /component [name]: لتصميم أو تحسين مكون معزول (زر، بطاقة، نافذة منبثقة) وتغطية كافة حالاته (Hover, Active, Focus, Disabled, Loading).
• /section [name]: لبناء أو إعادة تصميم قسم كامل (Hero, Features, Pricing) مع احترام التسلسل الهرمي للمعلومات والمسافات.
• /rtl: لفحص وتدقيق الواجهة الحالية واستبدال كافة كلاسات الـ Physical CSS بـ Logical CSS تلقائياً.
• /typography: لتطبيق مصفوفة الخطوط العربية المعتمدة وضبط أحجام الحروف والمسافات البينية للأوزان المختلفة.

6. الخلاصة: الذكاء الاصطناعي مرآة لهندسة السياق

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