بناء واجهات أمامية AI-Native باستخدام Claude Code وMCP: سير عمل 2026

قبل عامين، كانت أدوات الذكاء الاصطناعي للبرمجة إكمالًا تلقائيًا متغطرسًا. كانت تستطيع إنهاء سطر، وأحيانًا دالة، وكانت مفيدة أحيانًا للـ boilerplate. بدا المخرج معقولًا لكنه نادرًا ما كان يُشحن دون تحرير كبير، وكان سير العمل حولها 'الصق prompt، تمنّ الأفضل، وأصلح ما يعود.' في 2026، تغيّر ذلك بطريقة يصعب المبالغة فيها.

اليوم، عملاء البرمجة بالذكاء الاصطناعي مثل Claude Code هم مهندسون ثانيون موثوقون — شريطة أن تبني سير العمل حولهم. سير العمل نفسه، لا القدرة الخام للنموذج، هو المميّز الآن. المهندس الكفء مع شريك ذكاء اصطناعي مُجهَّز جيدًا يشحن الآن أكثر بكثير مما كان في 2024، والفجوة تتسع شهريًا. يستعرض هذا المقال سير العمل الذي أُدِيره في ديفيا سوليوشنز وفي مشاريع شخصية مثل eng-ahmed.com.

الرؤية البارزة: المكاسب تأتي من السياق، لا من الذكاء. عميل ذكاء اصطناعي مع قاعدة كودك ورموز نظام تصميمك وسجلات النشر وإشارات تتبع الأخطاء في النطاق يكتب كودًا يُشحن. عميل ذكاء اصطناعي دون أي من ذلك النطاق يكتب كودًا معقولًا لا يُشحن. كل مكسب إنتاجية نقيسه يعود إلى توفير سياق أفضل، لا إلى نماذج أكبر أو prompts أكثر فخامة.

الحزمة التي نشغّلها اليوم هي Claude Code في الـ terminal للعمل طويل الأفق متعدد الملفات — نوع الجلسة التي يحتاج فيها العميل قراءة خمسة عشر ملفًا واقتراح خطة وتحرير ثمانية منها وتشغيل مجموعة الاختبارات وعمل commit للنتيجة. النموذج لديه skills وsubagents ونظام أذونات يجعل العمل المستقل طويل المدى آمنًا. تتولى Cursor وVS Code التعديلات المضمّنة ونوع تعزيز الكتابة الذي كان قصة AI-coding بأكملها.

ما يجعل سير العمل الحديث قابلًا للتطبيق هو Model Context Protocol — MCP — الذي يوفّر طرقًا قياسية للذكاء الاصطناعي لقراءة السياق الحي من أي أداة. خادم Docs MCP يجلب توثيق المكتبة الحالي وقت الاستدعاء، حتى لا يهلوس النموذج بـ API Tailwind v3 في قاعدة كود v4. Browser MCP، مثل Claude-in-Chrome، يتيح للعميل فتح خادم التطوير الجاري وأخذ لقطة شاشة للصفحة والتحقق من أن تغيير الواجهة رُنْدِر فعلًا كما هو مقصود بدلًا من التخمين من الـ diff.

يجلب تكامل Vercel MCP سجلات النشر وأخطاء وقت التشغيل مباشرة، ليحلّ محل حلقة النسخ واللصق المؤلمة التي كانت تُعرّف تنقيح مشكلات الإنتاج. يحتفظ context-mode MCP بمسحات الملفات ونتائج البحث ومخرجات الأوامر في sandbox، فيُظهر فقط ما يخصّ المحادثة الحالية بدلًا من تضخيم نافذة السياق. الأثر التراكمي لهذه التكاملات هو أن العميل يعمل بالوعي السياقي نفسه لمهندس كبير قضى أسبوعًا في الـ onboarding على قاعدة كودك.

دعني أمشي عبر سير عمل حقيقي شحنته في وقت سابق من هذا الأسبوع — إعادة تصميم صفحة المدونة على معرض أعمالي الشخصي، من البداية للنهاية في نحو 45 دقيقة. الخطوة الأولى: اذكر الهدف في جملتين، لا في وثيقة مواصفات. لا يحتاج العميل 'ينبغي علينا تحسين تجربة المستخدم بجعل الواجهة أكثر بداهة مع الحفاظ على اللغة البصرية القائمة.' يحتاج 'اجعل صفحة المدونة صديقة للموبايل وطبّق السمة الفضية.' كن مباشرًا.

الخطوة الثانية: دع العميل يستكشف. بحث Claude Code عن 'blog' و'zinc' و'silver' عبر قاعدة الكود، وقرأ ثلاثة ملفات ذات صلة، واقترح خطة. شملت الخطة تبديل لمسات zinc بـ silver، وإضافة backdrop blur لفلتر sticky، وإعادة كتابة معالج التمرير الذي كان يسبب عدم إعادة ظهور عناصر التحكم على التمرير لأعلى. لم أكتب أيًا من هذا — حدّده النموذج من قراءة الكود.

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

الخطوة الرابعة: commit وdouble. اختصار 'cm' واحد يُشغّل بناء الإنتاج، ويعمل commit للتغيير برسالة وصفية، ويدفع إلى الـ remote. تنشر Vercel عند الدفع. من لقطة الشاشة إلى الموقع الحي، تعمل الحلقة في أقل من 90 ثانية لتغييرات كانت تأخذ مساء كاملًا.

ما لا يزال العميل سيئًا فيه يستحق أن نكون صريحين بشأنه. الذوق الشامل هو الفجوة الأكبر — يقلّد العميل أقرب مثال في قاعدة كودك، فإذا كان ذلك المثال متوسطًا، ستكون الميزة الجديدة متوسطة. معرفة المجال هي الفجوة الثانية — لا يعرف العميل أن منطق الفواتير لديك له فترة سماح 30 يومًا ما لم تكتب ذلك في مكان يستطيع إيجاده. معرفة متى تردّ هي الفجوة الثالثة — ينفّذ العميل الأفكار السيئة بكفاءة. وظيفة إدارة المنتج بقول 'لا، المستخدم يحتاج فعلًا X' لا تزال لك بالكامل.

أكبر مضاعِف جودة فردي قسناه هو انضباط نظام التصميم. نظام تصميم صارم وموثَّق — كل رمز Tailwind، وكل اسم مكون، وكل مقياس تباعد، وكل منحنى حركة مكتوب — يضاعف قيمة كل سطر يكتبه العميل. يُنتج العميل كودًا أفضل بكثير مقابل نظام واضح من مقابل تشتت أنماط مرة واحدة. للفرق التي تفكر في استثمار في نظام تصميمها، حالة التطوير المدعوم بالذكاء الاصطناعي وحدها أصبحت كافية لتبريره.

الأمان والثقة مهمان وينبغي تصميمهما عمدًا. لا ندع العميل أبدًا يدفع للإنتاج دون مراجعة بشرية، ونحدّد أذوناته بإحكام. الـ terminal لديه ماسح أسرار قبل الـ commit؛ المحرر يفرض الـ lint؛ خوادم MCP لديها نطاقات قراءة فقط حيث أمكن. الذكاء الاصطناعي يُسرّع أي انضباط لديك بالفعل — بما في ذلك الانضباط السيئ. الفرق التي تشحن كودًا فوضويًا ستشحن كودًا فوضويًا أكثر؛ الفرق التي لديها صرامة ستشحن كودًا أكثر صرامة، أسرع.

كليشيه 'المهندس 10x' لديه أخيرًا تفسير حرفي في 2026. المهندس الكفء مع شريك ذكاء اصطناعي مُجهَّز جيدًا يُنتج كودًا مشحونًا في اليوم أكثر بكثير مما كان قبل عامين، وجودة ذلك الكود — حين يكون سير العمل صحيحًا — أعلى لا أقل. المميّز لم يعد سرعة الكتابة أو معرفة API محفوظة. إنه جودة سير العمل الذي تبنيه حول النموذج.

في ديفيا سوليوشنز، نساعد الفرق على تصميم وتبنّي هذه سير العمل لمنظماتهم الهندسية الخاصة — من تكاملات MCP إلى صرامة نظام التصميم إلى انضباط قبل الـ commit والمراجعة الذي يحوّل سرعة الذكاء الاصطناعي إلى جودة مشحونة. إذا كنت تقوم بتوسيع فريق هندسي وتريد التقاط هذا المضاعِف دون أنماط الفشل، يسعدنا أن نتحدث.

نُشر هذا المقال أصلًا على معرض أعمالي الشخصي على eng-ahmed.com/blog/building-ai-native-frontends-claude-code-mcp ومنشور بشكل متقاطع على Dev.to (dev.to/ahmedmahmoudabouraia/building-ai-native-frontends-with-claude-code-and-mcp-n1m) وHashnode (engahmed.hashnode.dev) وMedium. لمزيد عن سير عمل الهندسة المعزَّز بالذكاء الاصطناعي، تابعني على eng-ahmed.com أو تواصل عبر devya.dev.