Diagram Design: مهارة وكيل بنظام تصميم حقيقي

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

Diagram Design، وهي مهارة وكيل من إعداد Cathryn Lavery، تهاجم ذلك المظهر مباشرة. شعارها صريح بشكل غير معتاد في ملف README: ملف HTML واحد مكتفٍ بذاته مع SVG، بهوية علامتك، و45 نوعًا من المخططات، بلا ظلال، وبلا ركاكة Mermaid.

هذه العبارة الأخيرة هي الأطروحة. المشروع لا يحاول جعل توليد المخططات أذكى. إنه يحاول جعل الناتج يبدو كعمل شخص يملك ذوقًا.

ما الذي ينتجه فعلًا

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

تغطي المكتبة نطاقًا واسعًا حقًا: مخططات المعمارية ومخططات تغيّر المعمارية، والنشر، ورسوم الاعتماديات، وأصناف UML، ومخططات قواعد البيانات، والخرائط الانسيابية، ومخططات التتابع، وآلات الحالة، ومسارات السباحة، وتدفق البيانات، إضافة إلى مجموعة كاملة من الرسوم البيانية (الأعمدة، والخطوط، والانتشار، وخريطة الشجرة، والرادار، والقطبية، والشلال، والخريطة الحرارية، وسانكي)، وأشكال بنيوية (الأشجار، والهياكل التنظيمية، وطبقات التراكب، ومخططات فِن، والأهرامات، والميداليات). أما الاستراتيجية والتخطيط فلها مخططات الربع، وخرائط Wardley، وغانت، والخطوط الزمنية، وكانبان، وخرائط القصص، ورحلات المستخدم. بل يوجد حتى مخطط أكسونومتري متفجّر للأعمال المكانية.

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

الجزء الذي يجعله ناجحًا: القواعد

الجهد كله ذهب إلى نظام التصميم، وهو مُعلن بالأرقام لا بالصفات.

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

ثلاثة خطوط، ولكل منها وظيفة. خط Instrument Serif للعناوين والتعليقات المائلة. وخط Geist sans لأسماء العُقد. وخط Geist Mono للتسميات الفرعية التقنية — المنافذ وعناوين URL وأنواع الحقول. تخصيص الخط أحادي العرض للتفاصيل التقنية هو ما يفعله المصمم المحترف بغريزته، وما لا يفعله المولّد الآلي أبدًا.

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

خطوط رفيعة، بلا ظلال، ونصف قطر لا يتجاوز 10px. الحدود تؤدي العمل الذي تؤديه الظلال عادةً، وتؤديه دون أن تتظاهر بأن المخطط جسم مادي موضوع على سطح.

كثافة المعلومات المستهدفة: 4 من 10. هذه هي القاعدة التي ستقاومها معظم الفرق، والتي سيشكرها معظم القرّاء عليها. المبدأ المعلن: أعلى الحركات جودةً هو الحذف عادةً.

إمكانية الوصول ليست فكرة لاحقة أيضًا. فمخرجات SVG تحمل role="img" وaria-labelledby وعنصري title/description؛ وتُحترم تفضيلات تقليل الحركة؛ ويُفرض تباين WCAG AA (نسبة 4.5:1 للنص، و3:1 للعلامات الأساسية) في خط التكامل المستمر. اللوحة الافتراضية أسود حالك ولون يوسفي على ورق أبيض دخاني.

دمج الهوية البصرية هو الميزة الخفية

تعطيه رابط موقعك. فيستخرج الألوان والخطوط ويوزّعها على أدوار دلالية: paper وink وmuted وaccent وlink. ثم يسلّمك «إيصال دقة» يخبرك بما استنتجه وبأين خمّن.

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

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

أين يناسب، وأين لا يناسب

التثبيت ممل عن قصد. الأمر npx skills add cathrynlavery/diagram-design لكل ما يقرأ Agent Skills؛ وأوامر سوق الإضافات لـ Claude Code وCodex وGitHub Copilot وFactory Droid؛ وروابط رمزية أو استيراد من مجلد فرعي لـ Cursor وCline وGemini CLI وWindsurf وAmp وZed وKiro وOpenCode. وهناك أوامر مائلة للتصدير والاستيراد والتحليل وفحص doctor.

المؤلفة واضحة بشكل منعش بشأن الحدود، وهي الحدود الصحيحة.

الجودة تعتمد على النموذج. قد يُنتج الطلب نفسه تخطيطين مختلفين، لأن ما تحصل عليه هو هندسة مولّدة لا قالبًا يُملأ. لا يوجد مصدر قابل للتحرير: لا لوحة تُسحب، ولا نص يمكن مقارنته في pull request. وللتوثيق الذي يتغير أسبوعيًا توصي بـ Mermaid — فهو يقبل المقارنة، ويعرضه GitHub أصلًا، وهذا أغلى من الجمال.

وهي تطرح سؤالًا يجدر بمزيد من مؤلفي الأدوات طرحه: هل سيحصل القارئ من هذا المخطط على أكثر مما يحصل عليه من فقرة؟ إن كان «المخطط» مجرد صندوق واحد عليه تسمية، فاكتب الجملة. وإن كنت تقارن قائمتين، فاستخدم جدولًا. وإن كنت تريد فنًا نصيًا لطرفية، فهذه ليست الأداة.

الناتج ملف، لا خدمة

هناك قرار تصميمي واحد سيبدو أذكى عامًا بعد عام: المُسلَّم هو ملف HTML واحد يحتوي SVG مضمّنًا، ويُفتح دون اتصال. لا حساب، ولا سكربت مضمّن، ولا اعتماد على مورّد قد يرفع سعر واجهته البرمجية في الربع القادم. ضعه في مستودع، أو أرفقه بتذكرة، أو اطبعه، أو أرسله بالبريد إلى عميل يستخدم حاسوبًا محميًا بالكامل.

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

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

كيف تحكم على مهارة مخططات في عشر دقائق

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

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

وأخيرًا، انظر إلى الأرقام. عُدّ الفراغات. إن لم تكن من مضاعفات أربعة، فالقواعد تُتجاهل، وعلى الأرجح يُتجاهل بقية نظام التصميم أيضًا.

الحجة الحقيقية

هناك نسخة من هذا المشروع كانت ستكون مجرد طلب نمط. «اجعله تحريريًا، بلا ظلال، وبسيطًا». تلك النسخة كانت ستنتج فوضى غير متسقة، لأن الطلبات النصية لا تصمد أمام مخطط معمارية من أربعين عقدة.

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

وهي فكرة أوسع قابلية للنقل من المهارة نفسها. فمهما كان ما تستخدمه لتوليد المرئيات — مخططات أو شرائح أو أغلفة أو صور مصغّرة — فإن الفرق بين ناتج يُقرأ كأنه مصمَّم وناتج يُقرأ كأنه مولَّد هو عادةً قائمة قصيرة من القواعد تكبّد أحدهم عناء كتابتها.