Log in to leave a comment
No posts yet
إذا سبق لك وأن وكلت مهمة تنفيذ واجهة مستخدم (UI) معقدة لوكيل ذكاء اصطناعي مثل Claude أو Cursor، فأنت تعرف جيداً ذلك الشعور بالإحباط. تلك اللحظة التي تصدق فيها رسالة "اكتملت المهمة" لتفتح المتصفح وتجد مشهداً كارثياً: تخطيط (Layout) منهار تماماً أو قوائم منسدلة تختفي خلف النوافذ المنبثقة (Modals).
في عام 2026 الحالي، أدوات مثل Claude Code يمكنها تصفح أنظمة الملفات وكتابة الكود بمفردها، لكنها لا تزال تعاني من مشكلات مزمنة مثل التوقف في المنتصف و الإكمال الزائف. خاصة عند التعامل مع مكونات دقيقة مثل ShadCN UI، يميل الذكاء الاصطناعي للهوس بسلامة القواعد البرمجية (Syntax) بينما يتجاهل تماماً كيف سيبدو الشكل النهائي للمستخدم. سنستعرض هنا استراتيجيات عملية لحظر أكاذيب الذكاء الاصطناعي وبناء واجهات مستخدم خالية من العيوب.
تعتمد حلقة RALPH (Repeated Agent Loop for Prompt Heuristics) على مبدأ تقني بسيط ولكنه قوي يُعرف بـ "الإصرار الساذج" (Naive Persistence). الجوهر يكمن في حقن المطالبة الأولية (Initial Prompt) بشكل متكرر حتى يقوم وكيل الذكاء الاصطناعي بطباعة عبارة وعد الإكمال (Completion Promise) المتفق عليها مسبقاً.
الذكاء الاصطناعي التقليدي يحاول إنهاء المهمة في استدعاء واحد، لكن حلقة RALPH تجبره على تقسيم العمل إلى عدة مراحل تكرارية. عندما يحاول الوكيل إنهاء الجلسة، يقوم النظام باعتراضه والتحقق من وجود كلمات مفتاحية محددة مثل <promise>COMPLETE</promise> داخل النص المخرج. إذا لم تكن موجودة، يتم إرسال المطالبة الأولية مرة أخرى مع تضمين سجل Git وحالة الحلقة السابقة.
القيمة الحقيقية لهذا الأسلوب تكمن في السياق المتجدد (Fresh Context). فهو يمنع ظاهرة "تعفن السياق" التي تحدث كلما طال الحوار، ويجبر الوكيل على استئناف العمل بناءً على الأدلة الموضوعية في نظام الملفات فقط. تشير بيانات الاختبارات المرجعية إلى أن تطبيق هذه الحلقة التكرارية رفع نسبة النجاح في إصلاح أخطاء واجهة المستخدم المعقدة بأكثر من 65% مقارنة بالمطالبات الفردية.
يعتقد الذكاء الاصطناعي أنه إذا كان الكود نظيفاً، فإن الواجهة ستكون مثالية. لكن الوكلاء الذين يفتقرون لفهم السياق البصري يكررون الأخطاء التالية:
z-index: 9999. إذا كان العنصر الأب قد شكل بالفعل سياق تكديس (Stacking Context)، فسيؤدي ذلك إلى اختفاء بصري أو فقدان أحداث النقر.data-scroll-locked مما يسبب قفز الشاشة يميناً ويساراً، وهو أمر لا يستطيع الذكاء الاصطناعي رصده عبر سجلات النصوص فقط.pointer-events-none يترك الأزرار مرئية ولكن غير قابلة للنقر.لمنع هذه البرمجة القائمة على التخمين، يجب إدخال خادم ShadCN UI MCP. تزويد الوكيل بوثائق API الأحدث والأنماط القياسية في الوقت الفعلي يقلل من أخطاء استخدام خصائص غير موجودة بنسبة تتجاوز 80%.
إذا كان اختبار الوظائف (Functional Testing) يسأل عما إذا كان الزر يعمل، فإن التحقق البصري يتأكد مما إذا كان الزر يظهر بشكل صحيح. باستخدام وكيل Playwright نسخة 2026، يمكن أتمتة هذه العملية.
أولاً، قم بتفعيل اتصال MCP عبر npx playwright init-agents --loop=claude. عند التحقق، قم بتعطيل الرسوم المتحركة لتقليل أخطاء البكسل، وقم بتغطية (Masking) المناطق الديناميكية مثل التواريخ أو أسماء المستخدمين لاستبعادها من الفحص. النقطة الجوهرية هي ضبط الوكيل ليدخل تلقائياً في حلقة تصحيح إذا تجاوز فرق البكسل بين الصورة الحالية والأصلية حداً معيناً.
لضمان عدم تجاوز الوكيل لعملية المراجعة باستخفاف، يجب إجباره على إثبات المراجعة عبر فعل قابل للتسجيل.
بمجرد انتهاء الوكيل من التنفيذ، نجعله يلتقط لقطات شاشة (Screenshots) لجميع المكونات باستخدام Playwright. يجب على الوكيل فتح كل ملف بنفسه، وفقط عندما يقرر أنه مثالي، يقوم بتغيير اسم الملف بإضافة البادئة verified_. هذا الإجراء يجبره على القيام بـ عملية كتابة، مما يجعل من المستحيل المضي قدماً في الحلقة دون تحليل الصور فعلياً.
يقوم النظام في التكرار التالي بفحص شامل للتأكد من أن جميع لقطات الشاشة تحمل بادئة verified_. إذا نقص ولو ملف واحد، يتم إعادة تشغيل الحلقة مع ملاحظة "تم العثور على عناصر غير محقق منها".
مثال على تعليمات ضمان السلامة البصرية
verified_.الحلقات الذاتية قوية، لكن سوء تصميمها قد يؤدي إلى انفجار في تكاليف الـ API. لمنع ذلك، يجب استخدام علم --max-iterations لتحديد عدد التكرارات بين 10 إلى 20 لكل ميزة.
إذا تم اكتشاف حالة جمود (Deadlock) بتكرار نفس الخطأ أكثر من 3 مرات، وجه الوكيل للتخلي عن استراتيجية التنفيذ الحالية وتجربة بنية (Architecture) جديدة. كما يتطلب الذكاء استخدام نماذج عالية الأداء مثل Claude 4.5 لتصميم الواجهات المعقدة، وتوجيه المهام البسيطة مثل إصلاح الـ Lint أو ترتيب الملفات إلى نماذج فئة Haiku لتقليل التكاليف.
المهندس المعاصر لم يعد مجرد "جليس أطفال" يصحح الكود سطراً بسطر. بل يجب أن يصبح مصمم أنظمة تحقق تضغط على الذكاء الاصطناعي ليجد الإجابة الصحيحة بنفسه. ستكون حلقة RALPH وبروتوكول التحقق البصري هما الحصن الأخير لضمان سلامة تجربة المستخدم التي لم يغزُها الذكاء الاصطناعي بالكامل بعد. قم بتثبيت إضافات حلقة RALPH في مشروعك الآن، واختبر معنى "الإكمال الحقيقي" المدعوم بلقطات شاشة موثقة.