نظام تصميم واجهات المستخدم العربية (mcp-arabic-ui-ux)

خادم MCP (Model Context Protocol) عالي الدقة متخصص في تصميم وبناء واجهات المستخدم باللغة العربية مع الدعم الكامل والفيزيائي للاتجاه من اليمين إلى اليسار (Native RTL)، بناءً على معايير Material 3 Expressive وجودة Google Stitch.

🌟 المميزات الرئيسية

• معمارية RTL أولاً (Logical Properties First): التحويل التلقائي لاستخدام الخصائص المنطقية (ms-*, pe-*, start-*, text-start) بدلاً من الخصائص الفيزياء الثابتة.

• جماليات Material 3 Expressive: حاويات بحواف دائرية تعبيرية (28px), تباينات ألوان مدروسة متوافقة مع معايير الوصول الشامل (WCAG AAA).

• محرك الخطوط العربية (Typography Engine): حماية المسافات العمودية للخطوط العربية (Descender Protection) بنسب ارتفاع أسطر تراوح بين 1.6 و 1.8 واستخدام خطوط Tajawal, Cairo, و Readex Pro.

• فحص الامتثال والتصحيح (RTL Audit & Fix): أداة تحليل ذكية لاكتشاف الأخطاء وتصحيح الاتجاهات الفيزيائية الخاطئة في الكود.

Related MCP server: Stitch MCP Auto

📦 التثبيت والاستخدام

التثبيت المباشر عبر npm

npm install -g mcp-arabic-ui-ux

أو تشغيله مباشرة عبر npx:

npx mcp-arabic-ui-ux

⚙️ التجميع والإعداد مع بيئات الذكاء الاصطناعي (AI Clients)

1. Claude Desktop

أضف الإعدادات التالية إلى ملف claude_desktop_config.json:

{
  "mcpServers": {
    "arabic-ui-ux": {
      "command": "npx",
      "args": ["-y", "mcp-arabic-ui-ux"]
    }
  }
}

2. Antigravity IDE / Cursor

أضف الإعدادات إلى ملف إعدادات MCP الخادمي:

{
  "mcpServers": {
    "arabic-ui-ux": {
      "command": "node",
      "args": ["/path/to/mcp-arabic-ui-ux/dist/index.js"]
    }
  }
}

🛠️ الأدوات المتاحة (Tools)

1. generate_arabic_design_tokens

توليد حزمة رموز تصميم (Tokens) متوافقة مع الأنماط العربية و Material 3.

• المعاملات:

  • theme: "material-3-expressive" | "minimalist-dark" | "warm-beige-dashboard"

  • primaryColor (اختياري): لون الأساس (مثال: #6750A4)

2. build_arabic_ui_component

بناء مكونات تفاعلية جاهزة باللغة العربية تدعم RTL كلياً.

• المعاملات:

  • componentType: "stat-card" | "navigation-bar" | "user-list-item" | "action-modal" | "dashboard-widget"

  • title: عنوان المكون

  • subtitle (اختياري): النص الفرعي

  • theme: نسق التصميم المطلوب

3. stitch_arabic_layout

تجميع صفحة كامة وتطبيق تنسيقات Google Stitch للواجهات العربية.

• المعاملات:

  • layoutName: اسم الصفحة أو اللوحة

  • sections: مصفوفة بأسماء الأقسام

  • theme: نسق التصميم

4. audit_rtl_ui_compliance

فحص كود الواجهات والتأكد من عدم وجود خصائص فيزيائية متعارضة مع الاتجاه العربي.

• المعاملات:

  • codeSnippet: كود HTML / Tailwind المراد فحصه

📚 المصادر والقوالب (Resources & Prompts)

• Resource: arabic-ui://design-systems/m3-expressive - مواصفات نظام تصميم Material 3 Expressive RTL.

• Prompt: design_arabic_dashboard - قالب توجيهي جاهز لإنشاء لوحة تحكم فاخرة.

📄 الترخيص (License)

هذا المشروع مرخص بموجب رخصة MIT.