MCP Claude Design Arabic 🎨🇸🇦

An elite, production-ready Model Context Protocol (MCP) server engineered specifically for modern Arabic and bilingual (RTL/LTR) UI/UX design, interactive agent cognition, anti-AI-slop detection, and Level-5 Claude visual design engineering.

🌍 Language Navigation / التنقل حسب اللغة

• 🇬🇧 English Documentation

• 🇸🇦 الوثائق باللغة العربية

🇬🇧 English Documentation

Related MCP server: Font MCP

🚀 Overview

MCP Claude Design Arabic (v2.0.0) by MarwanDevSpace bridges the gap between AI code generation and authentic, ultra-polished Arabic/Bilingual UI/UX design. Inspired by production design workspaces like open-design, it combines interactive design agent personas (ArabicArtDirector, RTLArchitect, MicroInteractionEngineer, BilingualDesignStrategist, CognitiveUXAuditor), dynamic RTL/LTR logical property conversion, 3-dial aesthetic configuration (VARIANCE, MOTION, DENSITY), anti-AI-slop audit checks, optical typography alignment, and Claude Level-5 visual design benchmarks into a single high-performance MCP server.

🌟 Key Capabilities

• Intuitive Tool Calling (pipeline_design): Sequentially orchestrates Brief Inference (Design Read), Art Direction, RTL property & BiDi form mapping, typography metric analysis, micro-animation curves, ARIA accessibility, Anti-Slop auditing, and pre-flight checklist evaluation in a single tool call.

• Design Taste Dials & Brief Inference: Automatically infers 3 aesthetic dials (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) from prompt context to customize grid asymmetry, motion physics, and visual density.

• Anti-AI-Slop Auditor & Pre-Flight Matrix (anti_slop_audit): Detects and flags 7 cardinal sins (default indigo hexes #6366f1, two-stop trust gradients, raw emoji feature icons, positive Arabic tracking, rounded cards with left borders, fake metrics, filler copy) and strictly enforces the Em-Dash Ban (—).

• Bi-Directional RTL/LTR & Form BiDi Engine (rtl_layout_matrix): Automatically refactors physical CSS/Tailwind/Flutter properties (ml-*, pr-*) to logical properties (ms-*, pe-*), applies 180° rotation (rtl:rotate-180) to directional icons, and enforces dir="auto" for free text and forced dir="ltr" for email/phone/url inputs.

• Arabic Typography & Metric Compensator (arabic_typography): Enforces CJK/Arabic display line-height rules (1.35x - 1.45x), body line-height (1.65x - 1.85x), baseline shifts, 65ch line length, and the Three-Weight System (400 Read, 550 Emphasize, 600 Announce).

• Claude Level-5 Benchmark Scoring (evaluate_benchmark): Evaluates UI code against 6 quality axes: Typography, Glassmorphic Depth, RTL Fluidity, Micro-Animations, Accessibility, and Anti-Slop Discipline.

🛠️ Tool Invocation Reference

💬 MCP Prompts & Shortcuts

Invoke prompt templates directly in your AI editor:

• /pipeline_design or /arabic_ui_masterpiece: System prompt guiding AI to craft luxury Level-5 Arabic UI components.

• /creative_direction_brief: Generates a Creative Director Brief (Step 0) defining Design Read, taste dials, and anti-patterns.

• /anti_slop_audit: Generates an Anti-AI-Slop audit prompt checking code against the 7 cardinal sins & em-dash ban.

• /pre_flight_checklist: Generates a 20-point mechanical pre-flight audit checklist before publishing.

• /rtl_layout_conversion: Refactoring instructions for converting legacy LTR code to logical RTL/LTR.

⚙️ Environment Setup Guide

1. Cursor / Antigravity Setup

Add mcp-claude-design-arabic to your mcp.json configuration file:

{
  "mcpServers": {
    "claude-design-arabic": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "mcp-claude-design-arabic@latest"
      ]
    }
  }
}

2. Claude Code & Claude Desktop

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "claude-design-arabic": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "mcp-claude-design-arabic@latest"
      ]
    }
  }
}

3. OpenCode / Codex / Windsurf / VS Code

{
  "mcpServers": {
    "claude-design-arabic": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "mcp-claude-design-arabic@latest"
      ]
    }
  }
}

🇸🇦 الوثائق باللغة العربية

🚀 نظرة عامة

يقدم MCP Claude Design Arabic (الإصدار v2.0.0) المطور بواسطة MarwanDevSpace خوارزمية ذكية وشاملة مخصصة لتصميم وتطوير الواجهات وتطبيقات الويب العربية وثنائية الاتجاه (RTL/LTR) بمستوى جودة Claude Level-5 Design Standards.

يستغل السيرفر قوة المعرفة المكتسبة من مكتبة التصميم المحترفة open-design ويجمع بين 5 وكلاء تصميم تفاعليين (ArabicArtDirector, RTLArchitect, MicroInteractionEngineer, BilingualDesignStrategist, CognitiveUXAuditor) مع محرك تحويل الاتجاهات اللوجستية، كاشف التصميم السطحي (Anti-AI-Slop)، ومحرك الذوق البصري الثلاثي.

🌟 الميزات الأساسية

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

• معدّلات الذوق البصري وتدقيق AI السطحي (anti_slop_audit): تحديد تلقائي لمقاييس التباين والتفاعلات، وكشف الذنوب السبعة المرفوضة (التدرجات الأرجوانية السطحية #6366f1، الإيموجي في الأيقونات، وحظر شرطة Em-Dash — تماماً).

• محرك التحويل ثنائي الاتجاه وحقول BiDi (rtl_layout_matrix): استبدال تلقائي للهوامش والمحاذاة الفيزيائية بالخصائص المنطقية (ms-*, pe-*, start-*) وعكس الأيقونات الاتجاهية تلقائياً (rtl:rotate-180) وفرض dir="auto" و dir="ltr" على حقول النموذج.

• محرك طباعة الخطوط العربية (arabic_typography): ضبط ارتفاع السطر (1.65x - 1.85x للنصوص، 1.35x - 1.45x للعناوين) وتطبيق نظام الأوزان الثلاثي وقاعدة طول السطر 65ch.

🛠️ جدول الأدوات وأوامر المناداة المباشرة

⚙️ دليل التثبيت والربط في المحررات والبيئات

التثبيت الموحد عبر mcp.json أو claude_desktop_config.json

أضف السيرفر مباشرة في محررك المفضل (Cursor / Antigravity / Claude Code / Windsurf / VS Code / Codex):

{
  "mcpServers": {
    "claude-design-arabic": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "mcp-claude-design-arabic@latest"
      ]
    }
  }
}

📄 License

MIT © MarwanDevSpace