# MCP Claude Design Arabic 🎨🇸🇦

[![npm version](https://img.shields.io/badge/npm-v2.0.0-blue.svg)](https://www.npmjs.com/package/mcp-claude-design-arabic)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Node.js Version](https://img.shields.io/badge/node-%3E%3D20.0.0-brightgreen.svg)](https://nodejs.org)
[![MCP Protocol](https://img.shields.io/badge/MCP-v1.6.0-purple.svg)](https://modelcontextprotocol.io)
[![Author](https://img.shields.io/badge/Author-MarwanDevSpace-orange.svg)](https://github.com/MarwanDevSpace)

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)
- [🇸🇦 الوثائق باللغة العربية](#-الوثائق-باللغة-العربية)

---

# 🇬🇧 English Documentation

## 🚀 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

| Primary Tool | Short Alias | Parameters | Description |
| :--- | :--- | :--- | :--- |
| `pipeline_design` | `run_full_design_pipeline` | `componentCode`, `brandName`, `primaryColor`, `accentColor`, `arabicFont`, `targetFormat` | Executes full multi-agent design thinking pipeline and returns refactored UI code |
| `anti_slop_audit` | — | `codeSnippet` | Audits UI code for anti-AI-slop violations, em-dash bans, rounded left-border cards, and fake metrics |
| `design_tokens` | `generate_claude_design_tokens` | `brandName`, `primaryColor`, `accentColor`, `themeMode`, `format` | Generates OKLCH color palettes, glassmorphism tokens, semantic layer variables, and motion curves |
| `rtl_layout_matrix` | `generate_rtl_ltr_layout_matrix` | `componentSnippet`, `targetFormat`, `flipDirectionalIcons` | Converts physical layout properties to logical RTL/LTR properties, flips directional icons, and applies form BiDi rules |
| `arabic_typography` | `analyze_arabic_typography` | `textSnippet`, `currentFont`, `fontSizePx`, `hasDiacritics`, `targetPlatform` | Audits Arabic font metrics, line-height compensation, baseline shifts, and Latin font pairings |
| `accessibility_audit` | `audit_bilingual_accessibility` | `markup`, `checkContrast`, `checkBidiSemantics` | Audits markup for `dir="rtl"`, `lang="ar"`, `<bdi>` isolation, Touch Targets (24/44px), and ARIA landmarks |
| `evaluate_benchmark` | — | `codeOrMarkup`, `context`, `strictMode` | Scores UI code against Level-5 Claude Design standards (0-100) with detailed subscores and anti-slop violations |
| `invoke_design_agent` | `invoke_interactive_design_agent` | `agentRole`, `prompt`, `projectContext`, `codeSnippet` | Consults individual AI agent personas for domain-specific design critique and code overlays |

---

## 💬 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:

```json
{
  "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`:

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

### 3. OpenCode / Codex / Windsurf / VS Code

```json
{
  "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`.

---

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

| الأداة الأساسية | اسم الاستدعاء المختصر | الوصف |
| :--- | :--- | :--- |
| `pipeline_design` | `run_full_design_pipeline` | تشغيل خط تصميم الوكلاء التسلسلي الموحد وإرجاع الكود المحسن بالكامل |
| `anti_slop_audit` | — | كشف وتدقيق الواجهة ضد مؤشرات الذكاء الاصطناعي السطحي وشرطة Em-Dash |
| `design_tokens` | `generate_claude_design_tokens` | توليد توكنات تصميم متكاملة (ألوان OKLCH، أسطح شفافة، توكنات دلالية) |
| `rtl_layout_matrix` | `generate_rtl_ltr_layout_matrix` | تحويل التنسيق الفيزيائي إلى كلاسات منطقية وعكس الأيقونات وتطبيق قواعد BiDi للحقول |
| `arabic_typography` | `analyze_arabic_typography` | تحليل الخط العربي وارتفاع السطر وتطبيق أوزان القراءة والدعوة للإجراء |
| `accessibility_audit` | `audit_bilingual_accessibility` | تدقيق سهولة الوصول، تباين WCAG 2.2 AA، وأهداف اللمس (24/44px) وعزل `<bdi>` |
| `evaluate_benchmark` | — | تقييم كود الواجهة وفق معايير التصميم الفاخرة وكشف مؤشرات التصميم السطحي |
| `invoke_design_agent` | `invoke_interactive_design_agent` | استشارة أحد وكلاء التصميم التفاعليين للحصول على توجيهات وتراكيب كود مخصصة |

---

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

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

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

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

---

## 📄 License

MIT © [MarwanDevSpace](https://github.com/MarwanDevSpace)