أخيرًا.. لغة تصميم قاهرية: كيف نحوّل نظام التصميم (Design System) إلى لغة تفهمها أدوات الذكاء الاصطناعي وتلتزم بها؟

أخيرًا.. أصبح لدينا لغة تصميم قاهرية أصيلة

كل من جرّب استخدام نماذج الذكاء الاصطناعي الحديثة (مثل Antigravity، Claude Code، أو Cursor) في هندسة وتصميم واجهات الويب والتطبيقات يعرف هذه المعاناة جيداً: في كل مرة تطلب فيها من النموذج تصميم شاشة جديدة أو تعديل مكون قائم، يخرج التصميم مختلفاً في تدرجاته، متفاوتاً في هوامشه، ومكتظاً بالتدرجات البنفسجية المكررة (ما يُعرف برمجياً بـ AI Slop). مهما بلغت صرامة تعليماتك في الـ Prompt، يظل النموذج يخمّن ويبتكر عشوائياً بدلاً من الانضباط.

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

السؤال الجوهري: كيف نحول الـ Components إلى لغة تفهمها الآلة؟

أي مكتبة واجهات تقليدية هي مجرد تجميعة مكونات (Components Kit) موجهة للمطور البشري. يرى المطور الزر فينسخ الكود ويعدل عليه. لكن نموذج الذكاء الاصطناعي يحتاج إلى ما هو أبعد من مجرد كود مقصوص:

• عقود صريحة (Contracts): تعريف دقيق لخصائص المكون، وحالاته التفاعلية، ومدخلاته بصيغة YAML واضحة وصارمة.
• وصفات تركيب منضبطة (Recipes): تحديد كيفية ربط التوكنز بالمكون دون كتابة ألوان أو مسافات عشوائية بالبكسل.
• أنماط مركبة (Patterns): تركيبات جاهزة للشاشات المعقدة (لوحات الإحصاءات، جداول البيانات، ونماذج الدفع).

هذا الهيكل ينتج ما نطلق عليه طبقة قرار الذكاء الاصطناعي (AI Decision Layer - CDL)؛ طبقة تسمح للنموذج باتخاذ قرارات التصميم بسرعة وانضباط ميكانيكي كامل، وتخفض استهلاك سياق التوكنز في المحادثات بنسبة تتجاوز 40%، مع ضمان اتساق كافة شاشات موقعك أو تطبيقك للأبد.

الهوية ليست مجرد انعكاس أفقي للإنجليزية (Beyond Mirrored RTL)

لسنوات طويلة، تعاملت الصناعة مع دعم اللغة العربية كعملية ميكانيكية بحتة: أضف dir="rtl" واعكس الواجهة الإنجليزية أفقياً (Mirrored UI). هذا الأسلوب يتجاهل أن التصميم لغة تعبر عن ثقافة بصرية وحضارية لها مفرداتها من خطوط وألوان وتفاصيل وموتيفات.

في مشروع قاهرة، استلهمنا 1056 عاماً من تاريخ العاصمة المصرية وعمارتها التليدة، وترجمناها إلى 12 ستايل لوني أساسي يعبر عن أشهر أحياء القاهرة:

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

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

معمارية متعددة المنصات (Universal Multi-Stack Parity)

لم نرد لقاهرة أن تكون حبيسة إطار عمل واحد، بل هندسناها لتعمل بتكافؤ دلالي كامل عبر 6 بيئات عمل رئيسية:

1. React Server Components (RSC): تطبيقات Next.js الحديثة بدون جسور إضافية.
2. PHP Plates / Modular Monolith: تطبيقات الويب المخدمية الحديثة (FlightPHP / Medoo).
3. Pure Web Components: مكونات قياسية مدعومة أصلياً في كافة المتصفحات دون مكتبات خارجية.
4. Server-Driven HTMX: تفاعلية سريعة وتحديث جزئي سلس.
5. HTML Native: مواقع ثابتة نقية بدون خطوات بناء.
6. HTML Tailwind: لمحبي فئات الـ Utility المنظمة.

سطر أوامر فوري وحزمة NPM رسمية

المشروع متاح بالكامل كحزمة مفتوحة المصدر (MIT) عبر NPM ويمكن تجربته فوراً بأمر واحد:

# 1. تهيئة المشروع وتثبيت التوكنز ومهارة الـ AI
npx qahera-ui init --target=react

# 2. إضافة المكونات مباشرة لشجرة كودك
npx qahera-ui add button modal card --target=react

# 3. دعم مشاريع PHP Plates
npx qahera-ui add button alert navbar --target=php --dest=./views/qahera

# 4. إضافة الأنماط الإدارية المعقدة
npx qahera-ui add pattern:dashboard-stat template:admin --target=react

# 5. استعراض ترسانة الـ 42 مكوناً و20 نمطاً و18 قالباً
npx qahera-ui list

الخلاصة: استثمار مستدام في هوية المستقبل

مشروع Qahera UI Kit يثبت أن الهوية العربية والتراث البصري يمكن تحويلهما إلى معمارية كود رصينة تفهمها أحدث نماذج الذكاء الاصطناعي. ندعو كل المطورين والمصممين لتجربة الحزمة، واستكشاف التوثيق الحي على alwkala.com/qahera، والمساهمة في تطوير هذا المشروع الحر لخدمة مجتمع الويب العربي بأكمله.