mcp-claude-designer-arabic

Claude-level Arabic & RTL UI/UX design suite Arabic typography hardening · BiDi logical CSS engine · Cultural palettes · Anti-AI-slop auditor · MCP server tools

What This Is

mcp-claude-designer-arabic is a production-ready Arabic UI/UX design system built around two layers:

1. SDK (npm install mcp-claude-designer-arabic) — TypeScript library with Arabic font stacks, curated palettes, RTL logical CSS converter, and typography validator.

2. MCP Server (npm install mcp-claude-designer-arabic-server) — Model Context Protocol server with 7 tools for AI-assisted Arabic design workflows.

Built to Open Design standards with an active craft/ layer and 4 Arabic design-systems/.

Related MCP server: arabicfmt-mcp

MCP Tools (7 total)

Craft Rules

Six authoritative rule files in craft/:

• arabic-rtl-and-bidi.md — Full Unicode UAX #9 BiDi spec, logical CSS table, mirror rules, forms in RTL

• arabic-typography.md — Rule Zero (letter-spacing prohibition), harakat line-height, font stack system

• arabic-anti-ai-slop.md — 7 cardinal sins, soft tells, soul-without-slop guidance

• arabic-color.md — 4 cultural palettes, WCAG contrast, glassmorphism rules, dark theme

• arabic-animation.md — RTL-aware slide directions, duration thresholds, prefers-reduced-motion

• arabic-accessibility.md — WCAG 2.2 AA, Arabic screen reader support, RTL keyboard navigation

Design Systems

Four production Arabic design systems in design-systems/, each with a full DESIGN.md:

Quick Start

SDK

npm install mcp-claude-designer-arabic

import {
  ARABIC_FONT_STACKS,
  ARABIC_COLOR_PALETTES,
  validateArabicCss,
  convertCssToRtlLogical,
  getArabicFontSnippet,
  getPaletteCssVariables
} from 'mcp-claude-designer-arabic';

// Validate Arabic CSS
const result = validateArabicCss(`
  body { letter-spacing: 2px; line-height: 1.2; text-align: left; }
`);
console.log(result.score); // 35 — multiple violations flagged

// Convert LTR to RTL logical properties
const converted = convertCssToRtlLogical(`
  .box { margin-left: 20px; padding-right: 10px; }
`);
// → .box { margin-inline-start: 20px; padding-inline-end: 10px; }

// Get CSS variables for a palette
console.log(getPaletteCssVariables('oasisEmerald'));

MCP Server

npm install -g mcp-claude-designer-arabic-server

Claude Desktop / Cursor / Windsurf mcp.json:

{
  "mcpServers": {
    "claude-designer-arabic": {
      "command": "mcp-claude-designer-arabic"
    }
  }
}

Or run directly:

npx mcp-claude-designer-arabic-server

Agentic Skill

This package ships a ready-to-use agentic skill at .agents/skills/claude-designer-arabic/SKILL.md.

Auto-triggers on:

• "arabic design", "rtl design", "arabic ui"

• "واجهة عربية", "تصميم عربي"

• "arabic typography", "convert ltr to rtl", "arabic dashboard"

Craft rules injected automatically: arabic-rtl-and-bidi, arabic-typography, arabic-anti-ai-slop, arabic-color, arabic-animation, arabic-accessibility

Arabic Typography — Rule Zero

Never apply positive letter-spacing to Arabic text. Arabic is cursive — positive tracking physically severs the joining strokes (kashida) between glyphs.

/* ✓ Correct */
[lang="ar"] { letter-spacing: 0; }

/* ✗ Fatal — destroys Arabic rendering */
[lang="ar"] { letter-spacing: 1px; }

Line-height for harakat:

Anti-AI-Slop Auditor

The audit_arabic_anti_slop tool checks for 7 cardinal sins:

1. Default Tailwind indigo (#6366f1) as accent

2. Purple-to-blue hero gradient

3. Emoji as feature icons in Arabic headings

4. Missing dir="rtl" on the root element

5. Positive letter-spacing on Arabic text

6. Latin Lorem ipsum as Arabic placeholder

7. text-align: justify on Arabic paragraphs

Examples

• examples/rtl-dashboard.html — Full Arabic SaaS dashboard (Readex Pro + Oasis Emerald)

• examples/arabic-landing-page.html — Modern Arabic landing page (Kufam + Royal Obsidian)

Open Design Integration

Registered in the Open Design plugin ecosystem via glama.json and plugins/open-design/arabic-designer/.

Compatible with Open Design's craft.requires injection protocol — add to any Open Design skill:

od:
  craft:
    requires:
      - arabic-rtl-and-bidi
      - arabic-typography
      - arabic-anti-ai-slop

License

MIT © MarwanDevSpace