makedream
9:07AI LABS
Log in to leave a comment
No posts yet
تكتب في نافذة دردشة واحدة للذكاء الاصطناعي "أنشئ لي صفحة هبوط أنيقة" ثم تضغط على Enter. النتيجة متوقعة: تصميم يبدو مألوفاً وكأنه منسوخ من مكان ما، مع الكثير من الكود المعقد (Spaghetti Code). في عام 2026، لم يعد مجرد الدردشة مع الذاء الاصطناعي كافياً لتحقيق واجهة مستخدم وتجربة مستخدم (UI/UX) بمستوى احترافي.
نحن الآن في عصر يحدد فيه مزيج الأدوات، أو ما يسمى بـ تنسيق الوكلاء (Agent Orchestration)، جودة التصميم. سنستعرض استراتيجية شاملة تربط بين Stitch MCP من Google، و Claude Code، و Vercel Agent Browser لإنهاء المهام من التخطيط وحتى التحقق التلقائي.
الخطأ الذي يقع فيه الكثير من المطورين هو البدء في توليد الكود مباشرة دون تخطيط. هذا يكشف عن انحيازات التصميم لدى الذكاء الاصطناعي ويقلل من جودة النتيجة. يجب علينا منع ذلك باستخدام Plan Mode في Claude Code كمهندس معماري.
الدخول إلى Plan Mode عبر الاختصار Shift + Tab + Tab ليس مجرد وضع للقراءة فقط، بل هو برج مراقبة لتحليل المشروع وإتمام التصميم المنطقي. في العمل الفعلي، يجب اتباع التسلسل التالي:
يصبح ملف CLAUDE.md الذي يتم إنشاؤه في هذه المرحلة هو المرجع الذي يعود إليه الوكيل في كل لحظة. حتى مجرد كتابة قواعد التسمية مثل Kebab-case بشكل صحيح تمنع أكثر من 80% من الحوادث التي يكتب فيها الذكاء الاصطناعي الكود بشكل عشوائي.
بعد انتهاء التخطيط، حان الوقت لرسم واجهة المستخدم الفعلية. المحرك الأساسي هنا هو Stitch MCP المستند إلى Gemini 3 Flash.
وفقاً لبيانات SWE-bench Verified الأخيرة (وهو معيار لهندسة البرمجيات)، سجل Gemini 3 Flash دقة بنسبة 78%، متفوقاً على طراز Pro (76.2%). وهو مُحسَّن بشكل خاص لتصميم التخطيطات (Layouts) التي تتطلب تفكيراً عالي الكثافة بفضل دعمه لمعاملات Thinking Level، وليس مجرد توليد كود بسيط.
في مرحلة التنفيذ، يجب الحذر من ظاهرة تضخم الأكواد (Snippet Bloat). لضمان عدم قيام Stitch MCP بإخراج ملف واحد يحتوي على آلاف الأسطر، استخدم استراتيجية Janitor Prompt. من خلال توجيهه لفصل المكونات في مجلدات بناءً على مبدأ فصل الاهتمامات (Separation of Concerns) وإبقاء كل ملف ضمن 100 سطر، سيقوم الذكاء الاصطناعي بإعادة الهيكلة (Refactoring) تلقائياً وفقاً لمعايير Next.js.
بمجرد الانتهاء من التصميم، يجب التأكد من أنه يعمل بشكل جيد في الواقع. بينما كانت الأدوات السابقة تقارن الشاشات على مستوى البكسل، يستخدم Vercel Agent Browser ما يسمى بـ شجرة إمكانية الوصول (Accessibility Tree).
هذه الطريقة أسرع بـ 5 مرات من الطرق التقليدية لأنها لا تعالج بيانات البكسل مباشرة. هذا هو السر في قدرة وكلاء الذكاء الاصطناعي على تحديد العناصر داخل المتصفح بدقة أكبر بكثير.
| المؤشر | Vercel Agent Browser | Playwright / Puppeteer |
|---|---|---|
| تقنية التعرف | لقطة شجرة إمكانية الوصول | خرائط البكسل و DOM |
| متوسط وقت الاختبار | حوالي 4 دقائق | حوالي 15~20 دقيقة |
| استهلاك الرموز (Tokens) | حوالي 1,400 tokens | حوالي 7,800 tokens أو أكثر |
| القدرة على التكيف مع التغيير | ممتازة (تعتمد على الهيكل) | منخفضة (تعتمد على التخطيط) |
على سبيل المثال، إذا تم اكتشاف خلل حيث لا يمكن النقر على قائمة الهامبرغر في وضع الاستجابة، يقوم الوكيل بتحليل شجرة إمكانية الوصول ليدرك فوراً أنه خطأ في z-index ويقوم بتصحيح الكود بنفسه.
بما أنها أدوات متطورة، فقد تواجه بعض العقبات في الإعداد الأولي. خاصة لمستخدمي Windows، يرجى التحقق من أمرين:
أولاً، خطأ سوكيت ويندوز (EACCES): إذا ظهر خطأ "Daemon failed to start"، قم بتشغيل الطرفية (Terminal) كطريفة مسؤول أو اتصل يدوياً باستخدام الأمر agent-browser connect <port>.
ثانياً، مشكلة المصادقة والحصص (Quota): يجب ضبط gcloud auth application-default set-quota-project في Google Cloud SDK لتجنب أخطاء الحصة التي تحدث عند استدعاء Stitch MCP API.
الآن، لم يعد الذكاء الاصطناعي مجرد أداة مساعدة لكتابة الكود، بل هو زميل عمل (Co-worker) يفهم سياق المشروع بالكامل وينفذه.
قم ببناء الهيكل باستخدام Claude Code، وأضف التفاصيل باستخدام Stitch MCP، وتحقق من الجودة باستخدام Vercel Agent Browser. هذا التنسيق سيرفع إنتاجيتك بأكثر من 10 أضعاف. الكود النظيف الخالي من الديون التقنية والتصميم الأنيق لم يعودا حكراً على العمل اليدوي فقط.