بعد أن يكتب وكيل الذكاء الاصطناعي الكود، مهمة الإنسان هي التصوّر البصري

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

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

تحويل ASCII الطرفية إلى صفحة HTML تفاعلية يكشف الصورة الكاملة

حين تطلب من وكيل رسم بنية النظام، تحصل على مربعات بخط ثابت العرض متصلة بشرطات. يعمل هذا الأسلوب مع ثلاث عقد. بعد خمس عقد، تبدأ العين بالانزلاق عن الشاشة. أداة visual-explainer تأخذ نفس الطلب وتنتج صفحة HTML تحتوي مخططات Mermaid مدمجة. الوضع الداكن وخاصية التكبير والتحريك مدمجة مباشرة، ولا حاجة لخطوة بناء أو اعتمادية خارجية. متصفح فقط.

• /diff-review: يعرض تغييرات الكود ومقارنات البنية جنباً إلى جنب في عرض واحد
• /project-recap: يولّد لقطة لاستعادة السياق حين تعود لمشروع بعد غياب أيام
• /generate-slides: يحوّل نفس المخرجات إلى عرض تقديمي
• التبديل التلقائي للعرض: حين يتجاوز الجدول أربعة صفوف، تنتقل الأداة تلقائياً من عرض ASCII في الطرفية إلى عرض HTML

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

رسوم بيانية تتشكّل آنياً داخل المحادثة

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

• دعم بيئات متعددة: يعمل في كل من Claude Desktop وVS Code
• ضبط الإطار تلقائياً: تتكيّف نافذة العرض تلقائياً مع إضافة الأشكال، مع وضع تحرير بملء الشاشة
• تحرير تفاعلي: مبني على إضافة MCP Apps، فيمكنك تعديل المخططات مباشرة داخل نافذة المحادثة

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

إنقاذ مخططات Mermaid من مظهرها الافتراضي

صياغة Mermaid ممتازة. عرضها الافتراضي ليس كذلك. تغيير لون واحد يعني الغوص في فئات CSS، ولوحة الألوان المبدئية تبدو وكأن مولّد أرقام عشوائي اختارها. أداة beautiful-mermaid تحل هذا بمدخلين لونيين فقط: حدّد لون الخلفية ولون المقدمة، وتشتق المكتبة كل درجة أخرى وسطوع النص باستخدام color-mix(). تأتي مع خمسة عشر قالباً جاهزاً، كل منها يُطبّق بسطر واحد.

• بلا وميض: العرض بصيغة SVG متزامن، فيعمل داخل React useMemo() بلا الومضة التي تحصل مع العارضات غير المتزامنة
• قابلية التضمين في CLI: يدعم مخرجات ASCII وUnicode في الطرفية، مما يتيح تضمين المخططات مباشرة في أدوات سطر الأوامر
• متوافق مع جانب الخادم: لا يعتمد على DOM، فيعمل في بيئات Node.js بلا متصفح بلا واجهة
• مزامنة قالب المحرر: تكامل Shiki يتيح تطبيق قالب VS Code مباشرة على تنسيق المخطط

إن كنت تولّد Mermaid من مخرجات الوكيل بالفعل (وغالباً يجب أن تفعل)، هذه المكتبة تحوّل تلك المخططات من “قابلة للقراءة تقنياً” إلى شيء تضعه فعلاً في وثيقة تصميم.

جعل الوكيل يكتب شرحه بنفسه

شاركت Zara Zhang نمط prompt تسمّيه “Claude Teacher”. الإعداد فقرة واحدة تضاف إلى ملف CLAUDE.md. تطلب من الوكيل إنتاج ملف FOR[name].md في نهاية كل مشروع، مكتوب كشرح بلغة واضحة لقاعدة الكود بالكامل.

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

• خارطة البنية: كيف تتصل البنية التقنية بهيكل قاعدة الكود
• منطق القرارات: أي تقنيات اختيرت ولماذا رُفضت البدائل
• دروس من الميدان: الأخطاء التي ظهرت، كيف حُلّت، والمزالق التي يجب تجنبها
• العقلية الهندسية: كيف يفكر مهندس جيد في المشكلات، مكتوبة كسرد لا كنقاط مختصرة

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

لا تكتفِ بتوليد الكود، اجعله يشرح نفسه

هذه النقطة من Boris Cherny، مبتكر Claude Code، الذي شاركها مباشرة. في /config يوجد إعداد لنمط المخرجات يسمى Explanatory. فعّله وكل تغيير في الكود يأتي مع شرح مضمّن لسبب اختيار الوكيل هذا المسار. نمط Learning يذهب أبعد: يتوقف عند نقاط معينة ويطلب منك كتابة الكود بنفسك قبل أن يكشف أسلوبه.

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

• قبل: الكود يُولّد، الاختبارات تنجح، البنية تبقى معتمة
• بعد: الكود يُولّد، يُطلب التصوّر والشرح، البنية تُستوعب، والأنماط تُنقل للمشروع التالي

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