التصميم في حضور وكلاء يراقبون

لم يعد المستخدم وحيدًا خلف الشاشة. بينما يقرأ الإنسان العنوان، يقوم وكيل ذكاء اصطناعي بتحليل الـ DOM، وتسمية الأزرار، والحكم على المحددات (selectors)، والبت في ما إذا كان منتجك شيئًا يمكنه قيادته نيابةً عن شخص آخر. التصميم لمستخدم واحد كان رفاهية من 2024.

التحول بنيوي لا شكلي. Cursor يستدعي أزرارك. Claude يقرأ لقطات الشاشة الخاصة بك. Computer Use من Anthropic ينقر عبر نماذجك. OpenAI Operator يشتري أشياء من صفحة الدفع عندك. كل واجهة يلمسها إنسان يلمسها الآن وكيل أيضًا، بمعايير مختلفة لما يعنيه الجيد.

جمهوران، شاشة واحدة

كل واجهة منتج في 2026 لها مستوى بشري ومستوى آلي مكدسان في الـ DOM نفسه.

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

الخطأ الذي ترتكبه معظم الفرق هو افتراض أن المستويين هما المستوى نفسه بأولويات مختلفة. ليسا كذلك. قد يبدو الزر مثاليًا للإنسان وغير مرئي للوكيل إذا كان اسمه المتاح "click here" أو كانت عقدته في الـ DOM عنصر div مع معالج نقر.

خمس طبقات يظهر فيها حضور الوكيل

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

الطبقة 1: واجهات الأدوات هي الأزرار المسماة التي يستدعيها الوكلاء

واجهة الأداة هي أي قدرة في المنتج يمكن للوكيل استدعاؤها بالاسم. استدعاءات الأدوات في Cursor، واستخدام الأدوات في Claude، وإجراءات الشاشة في Anthropic Computer Use، وأوامر التشغيل في Vercel Sandbox. الوكيل لا يفكر بالبكسلات، بل بأفعال مسماة.

كل إجراء رئيسي في منتجك مرشح ليكون واجهة أداة. Stripe هو المعيار الذهبي، وأقدم بعقود من لحظة الوكلاء: كل إجراء له إمكانية مسماة وموثقة ويمكن التنبؤ بها. customers.create يفعل ما يقوله اسمه. المنتج الذي تُدفن إجراءاته الرئيسية داخل أزرار بلا تسميات هو منتج لا يستطيع الوكيل قيادته دون تخمين.

الخطوة التصميمية هي معاملة كل إجراء مهم كأداة مسماة. التسمية، ووصف ARIA، والمسار، ونقطة نهاية الـ API، ومعالج Model Context Protocol، يجب أن تحمل جميعها الفعل نفسه. عندها يصل الوكلاء والبشر إلى الإمكانية نفسها عبر أبواب مختلفة.

الطبقة 2: ثبات المحددات هو عقد المصمم مع الوكيل

في 2024 كان بإمكان المصمم أن يشحن <div onClick={handle}> ويعتبر الأمر منتهيًا. في 2026 هذا الـ div نفسه يكسر كل تكامل مع وكيل في اليوم الذي يعيد فيه أحدهم هيكلة الغلاف.

ثبات المحددات يعني التأكد من أن الإمكانات التي تعلمها الوكيل أمس ما زالت تعمل غدًا. ثلاثة قرارات. استخدم HTML الدلالي حيث يوجد، <button> لا <div>. أضف data-testid إلى أي شيء يحتاج وكيل أو منفذ اختبارات إلى العثور عليه. أبقِ الأسماء المتاحة (accessible names) مستقرة عبر الإصدارات، كما تبقي أسماء حقول الـ API مستقرة.

Linear بارع بشكل غير عادي في هذا لأنه بُني بمنهج API أولًا، وواجهته إحدى واجهات كثيرة. كل إجراء رئيسي له محدد مستقر واسم مستقر. معظم تطبيقات SaaS المؤسسية تغيّر اسم class في عملية إعادة هيكلة فتكسر بصمت كل تكامل لمسه. الوكيل لا يتلقى إشعار إيقاف. هو فقط يتوقف عن العمل.

الطبقة 3: البنية المقروءة آليًا هي القطعة التصميمية التي كنت تتجاهلها

الوكيل الذي يقرأ منتجك يقرأ أيضًا وسوم Open Graph، وJSON-LD، وخريطة الموقع، وبشكل متزايد ملفات llms.txt وAGENTS.md. كل واحدة من هذه قطعة تصميمية في 2026، وليست مهمة مطورين مزعجة.

AGENTS.md هو الـ README الجديد، إلا أن جمهوره نموذج. يخبر الوكيل ماذا يفعل منتجك، وأي الواجهات آمنة، وأي الاصطلاحات مهمة. JSON-LD يخبر الوكيل ما هي كل صفحة. ونقطة نهاية Model Context Protocol تخبر الوكيل بالأدوات التي يعرضها منتجك وكيف تُستدعى.

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

الطبقة 4: وضوح الحالة يعني أن الآلة تستطيع معرفة ما حدث للتو

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

وضوح الحالة يجعل كل حالة قابلة للاكتشاف من قبل آلة. واجهة Linear البرمجية تعيد كائن استجابة مستقرًا لكل إجراء. آلة حالات النشر في Vercel لها حالات مسماة، READY وBUILDING وERROR، مع حمولة منظمة عند كل انتقال. Claude Code يبث كل استدعاء أداة ونتيجته كنص منظم يستطيع الوكيل تحليله.

الخطوة التصميمية هي طبقة حالة يقرؤها الوكيل بجانب الطبقة البصرية. منطقة ARIA حية تعلن الحالة الجديدة. إشعار toast بـ role="status" منظم. كائن استجابة يعود إلى الوكيل عندما استدعى الأداة. يحتفظ الإنسان بمؤشر التحميل، ويحصل الوكيل على الحدث المنظم. هذا هو الموقف نفسه في التصميم لزمن استجابة الذكاء الاصطناعي، الذي يجب أن يُقرأ في المستويين معًا.

الطبقة 5: إشارات الثقة تغلق الحلقة بعد أن يتصرف الوكيل

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

موافقة الـ diff في Cursor هي المثال المرجعي. الوكيل يعدل الملفات، ويظهر الـ diff داخل السطر، ويقبل المستخدم أو يرفض لكل مقطع. artifacts في Claude تشحن النمط نفسه بشكل مختلف. أما GitHub Copilot Workspace فهو واجهة مزدوجة اللوحتين للتخطيط والتنفيذ مع قبول ورفض عند كل خطوة.

إشارة الثقة ليست زينة. إنها الواجهة الحاملة للحمل التي تجعل استقلالية الوكيل قابلة للنجاة. منتج يتصرف فيه الوكيل ولا يرى الإنسان فيه إلا الحالة النهائية يفقد الثقة أول مرة يسوء فيها شيء.

ما تشحنه المنتجات التي تفعل ذلك جيدًا فعلًا

إطار المستخدم المزدوج أسهل رؤية في المنتجات المشحونة. تفكيكات قصيرة، كل منها محدد.

Cursor. موافقة الـ diff من الوكيل هي حلقة الثقة بأكملها. قبول ورفض داخل السطر لكل مقطع، وdiff الملف الكامل مرئي، والوكيل لا يلتزم بشيء دون موافقة.

Claude artifacts. لوحة معاينة الـ artifact هي العقد بين الوكيل والإنسان. الوكيل ينتج، والإنسان يراجع، وللـ artifact عنوان URL مستقر ومخرجات منظمة يستطيع الوكيل التالي التقاطها.

Anthropic Computer Use. لقطات الشاشة هي العقد بين الوكيل والمنتج. كل قرار يخص التسلسل البصري والتسميات صار الآن قرارًا يخص قابلية القراءة للوكيل. زر أيقونة بلا اسم متاح هو زر على الوكيل أن يخمّن فيه.

Vercel v0. عقد الأمر النصي البشري وعرض الوكيل هو الواجهة كلها. المستخدم يصف، والوكيل يعرض، وكل عرض قطعة قابلة للمراجعة.

Linear وStripe. كلاهما أصيل الذكاء الاصطناعي في الموقف، وAPI أولًا في العمارة. كل إجراء رئيسي مسمى ومستقر وقابل للاستدعاء. كلاهما شحن هذا الانضباط قبل وصول لحظة الوكلاء، ولهذا يتكامل معهما كل منتج وكلاء بسلاسة.

Replit Agent وRaycast وGitHub Copilot Workspace تكمل القائمة. Replit يعرض عمل الوكيل كمساحة عمل حية قابلة للتحرير. ولوحة الأوامر في Raycast واجهة يتشاركها البشر والوكلاء بشكل أصيل. ونمط اللوحتين للتخطيط والتنفيذ في Copilot Workspace يثبّت الخطة كتابةً قبل الفعل، مما يجعل التصحيح أثناء التشغيل ممكنًا.

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

أنماط مضادة تكسر تكاملات الوكلاء

خمسة أنماط فشل تتكرر مرارًا. كل منها قرار تصميمي، لا سهو هندسي.

حساء الـ div. كل شيء قابل للنقر ملفوف في <div> لأن التنسيق أسهل. كل إعادة هيكلة تكسر كل محدد. الحل: HTML دلالي افتراضيًا مع data-testid على كل ما يجب أن ينجو من تغيير اسم class.

إمكانات مخفية تتطلب التمرير بالمؤشر. زر "تعديل" الذي لا يظهر إلا عند تمرير الفأرة. الوكلاء لا يمررون المؤشر. الحل: إمكانات يمكن الوصول إليها بلوحة المفاتيح وتظهر في الـ DOM بغض النظر عن حالة المؤشر.

روابط "click here". خمسة روابط "click here" في الصفحة نفسها هي خمس إمكانات متطابقة لأي شيء يقرأ الـ DOM. الحل: نص رابط يسمّي الوجهة.

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

نوافذ منبثقة بلا إغلاق يمكن العثور عليه. الـ "X" الذي هو <svg> بلا تسمية. الحل: زر إغلاق باسم متاح على كل نافذة وسلوك هروب موثق.

النمط الجامع للخمسة: أي شيء يعتمد على عين بشرية أو مؤشر غير مرئي لنصف مستخدميك.

تدقيق المستخدم المزدوج

شغّل هذا على أي واجهة قبل شحنها. سبعة أسئلة، ثلاث دقائق.

1. إجراء مسمى. كل إجراء رئيسي له اسم متاح مستقر ومحدد مستقر.
2. حالة آلية. كل تغيير حالة يصدر حدثًا منظمًا.
3. فرق مرئي. كل تغيير يقوده وكيل يظهر كقطعة قابلة للمراجعة قبل الالتزام.
4. مسار لوحة المفاتيح. كل إمكانية تعتمد على التمرير يمكن الوصول إليها أيضًا دون مؤشر.
5. محدد مستقر. كل عنصر تفاعلي له data-testid أو معادل دلالي ينجو من إعادة الهيكلة.
6. إنسان في الحلقة. الإجراءات المدمرة تُقفل، والكارثية تُقفل مرتين، والقابلة للعكس تعمل مع تراجع.
7. واجهة موثقة. المنتج يشحن AGENTS.md أو ما يعادله يخبر الوكيل بما هو موجود، وما هو آمن، وأي الاصطلاحات مهمة.

واجهة تنجح في سبعة من سبعة هي مكتملة للمستخدم المزدوج. وواجهة تخفق في ثلاثة أو أكثر تُشحن والوكيل مقفل خارجها، مهما بدا المستوى البشري رائعًا.

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

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

الأسئلة الشائعة

ماذا يعني التصميم لوكلاء الذكاء الاصطناعي فعلًا في 2026؟

معاملة الوكيل كمستخدم من الدرجة الأولى لمنتجك، لا كبوت يجب الدفاع ضده. الوكيل يقرأ الـ DOM عندك، ويستدعي أزرارك، ويحكم على واجهتك بمعايير لن يراها الإنسان أبدًا. كل واجهة تحتاج إلى مستوى بشري ومستوى آلي يتشاركان الإمكانات والحالة والمفردات نفسها.

كيف يختلف هذا عن تصميم إمكانية الوصول؟

معظمه يتداخل. أسماء متاحة مستقرة، وHTML دلالي، وإمكانية الوصول بلوحة المفاتيح، وحالة منظمة، كل ذلك هو انضباط إمكانية الوصول مطبقًا على مستخدم جديد. الطبقة الجديدة هي واجهات الأدوات والبنية المقروءة آليًا، بما فيها نقاط نهاية MCP وملفات AGENTS.md وJSON-LD. اعتبر إمكانية الوصول الأساس، وقابلية القراءة للوكلاء الطابق التالي فوقه.

هل أحتاج إلى خادم MCP لأكون جاهزًا للوكلاء؟

ليس في اليوم الأول. منتج بـ DOM نظيف وإجراءات مسماة ومحددات مستقرة وحالة منظمة وقطع قابلة للمراجعة هو جاهز للوكلاء بنسبة 80 بالمئة أصلًا. خادم MCP يجعل عمل الوكيل أسرع وأكثر موثوقية، لكن اشحن البنية أولًا، والبروتوكول ثانيًا.

مستخدمان، شاشة واحدة، مهمة واحدة

الوكيل ليس تهديدًا للتصميم. إنه مستخدم ثانٍ باحتياجات مختلفة، والمنتجات التي تعامله على هذا الأساس تبتعد بالفعل عن التي لم تفعل.

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

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

إذا أردت فريقًا يشحن هوية العلامة وواجهة المنتج بمستويين مصممين في الوقت نفسه بدل أن يُخاطا معًا لاحقًا، وظّف Brainy. نصمم المستوى البشري كما اعتدنا دائمًا، والمستوى الآلي كالمستخدم الثاني الذي هو عليه فعلًا.