Skip to main content
Glama

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

npm version License: MIT MCP Protocol

خادم 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.

Available Tools

4 tools
audit_rtl_ui_complianceC

فحص كود الواجهات والتحقق من الالتزام بقواعد RTL والاتجاهات المنطقية

ParametersJSON Schema
NameRequiredDescriptionDefault
codeSnippetYes

TDQS

C2.9/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It discloses the tool's auditing/verification nature but does not clarify side effects (e.g., read-only), permissions, rate limits, or the return format. The behavioral implications of 'audit' are left unstated.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single sentence, direct and without fluff, which earns its place. However, it is very brief and could have been structured to include key details like output expectations without becoming verbose.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given no output schema and no annotations, the description should explain what the audit returns (e.g., report, boolean, list) and what RTL rules are applied. The current description is insufficient for an agent to know how to interpret results or fully understand the tool's behavior.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema describes codeSnippet as a string with 0% coverage from the description, but the description's phrase 'كود الواجهات' (interface code) adds semantic meaning that the parameter refers to UI code. While this is a useful cue, it does not specify format, language, or other constraints.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool audits interface code for RTL and logical direction compliance, using a specific verb ('فحص'/'inspect') and resource ('كود الواجهات'/'interface code'). It distinguishes from sibling generation/build tools implicitly by being an audit/verification tool, though it doesn't explicitly name them.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

There is no guidance on when to use this tool versus alternatives. It only describes what it does, without scenarios, exclusions, or comparison to sibling tools, leaving the agent to infer appropriate usage.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

build_arabic_ui_componentC

توليد مكون UI تفاعلي يدعم العربية والاتدجاه RTL بجودة عالي جداً

ParametersJSON Schema
NameRequiredDescriptionDefault
themeYes
titleYes
subtitleNo
componentTypeYes

TDQS

C2.8/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It states the tool generates components with Arabic/RTL support and 'very high quality,' but does not explain what that entails behaviorally—whether it creates files, returns code, requires specific inputs, or how RTL is implemented. No side effects, limitations, or output format are disclosed.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, concise sentence that immediately communicates the core purpose. There is no fluff or repetition. However, its extreme brevity sacrifices useful detail—it is concise but under-specified for the complexity of the tool.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given 4 parameters, 2 enums, and no output schema or annotations, the description is incomplete. It fails to explain return values, how parameters influence output, or any behavioral expectations. The description provides only a high-level promise of quality without the operational context needed for reliable invocation.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters1/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema has 4 parameters with 0% description coverage. The description does not mention any parameter names, meanings, or relationships. It adds no semantic value beyond the raw schema, making it nearly impossible for an agent to understand how to fill parameters meaningfully.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool generates an interactive UI component supporting Arabic and RTL. The verb 'generate' is specific, and the resource is well-defined. It distinguishes itself from sibling tools (generate_arabic_design_tokens, stitch_arabic_layout, audit_rtl_ui_compliance) by focusing on component generation rather than tokens, layout, or compliance auditing.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus the alternatives. There is no mention of prerequisites, preferred use cases, or exclusions. Users must infer usage solely from the tool name and sibling context.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

generate_arabic_design_tokensB

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

ParametersJSON Schema
NameRequiredDescriptionDefault
themeYes
primaryColorNo

TDQS

B3.1/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden of behavioral disclosure. It only states the high-level purpose and fails to mention any side effects, input requirements, output format, permissions, or post-conditions. This is a significant transparency gap for a tool that generates a package.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single concise sentence that front-loads the core purpose with no superfluous content. It is appropriately sized for the information it conveys, though that information is limited.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With no output schema and no annotations, the description alone must explain the return value and parameter effects. It fails to describe the expected output format, how theme and primaryColor influence the design tokens, or any constraints. The result is incomplete for a tool with two parameters and no schema descriptions.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters1/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 2 parameters with 0% description coverage, and the description does not mention either parameter. It provides no explanation of what 'theme' or 'primaryColor' control, how the enum values differ, or how they affect the generated tokens, leaving the agent completely reliant on the schema's bare names.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses a specific verb ('generate') and clearly identifies the resource ('Arabic design tokens') with a clear compatibility target ('Material 3 and RTL'). It distinguishes itself from sibling tools that build components or layouts, so the purpose is unambiguous.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies the tool is for generating Arabic design tokens but does not explicitly state when to use it versus alternatives like build_arabic_ui_component. No exclusions or alternative tool references are given, so the guidance is only implied.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

stitch_arabic_layoutC

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

ParametersJSON Schema
NameRequiredDescriptionDefault
themeYes
sectionsYes
layoutNameYes

TDQS

C2.6/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are present, so the description carries full responsibility for behavioral disclosure. It only states a high-level action without revealing side effects, permissions, return values, or what 'stitch' actually entails beyond applying formats.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single concise sentence that gets to the point quickly with no unnecessary verbosity. However, its brevity comes at the cost of clarity, so while structurally efficient, it could benefit from more explicit organization of information.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

With three parameters, one enum, no output schema, and no annotations, the description is insufficient. It fails to explain what 'stitch' means, how sections are processed, what output the agent can expect, or any constraints on input combinations.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters1/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 0%, and the description does not explain any of the three parameters (layoutName, sections, theme). The vague mention of 'full page' and 'formats' does not map meaningfully to the parameters, leaving the agent to guess their semantics.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description gives a clear verb (assemble/compile) and resource (full page) with a specific formatting style (Google Stitch) for Arabic interfaces. It implies a page-level operation distinct from component-level tools, but does not explicitly name sibling tools for differentiation.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

No guidance is provided on when to use this tool versus alternatives like build_arabic_ui_component or audit_rtl_ui_compliance. There is no mention of scenarios, prerequisites, or when not to use it.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 4 tool updatesv1.0.0
    • First observedaudit_rtl_ui_compliance
    • First observedbuild_arabic_ui_component
    • First observedgenerate_arabic_design_tokens
    • First observedstitch_arabic_layout

TDQS

A3.5/5.0

Scored across 4 tools

Disambiguation5/5

Each tool targets a distinct phase of the Arabic UI/UX workflow: design tokens, component building, layout stitching, and RTL compliance auditing. There is no overlap in their purposes, making selection unambiguous.

Naming Consistency5/5

All tool names follow a consistent verb_noun pattern in snake_case (generate_, build_, stitch_, audit_). While the fourth uses 'rtl' instead of 'arabic', it remains within the same naming style and is intuitive.

Tool Count5/5

4 tools is well-scoped for the server's purpose, covering the core stages of Arabic UI creation and validation without unnecessary redundancy or missing essentials.

Completeness5/5

The tool set forms a complete pipeline: design tokens (generate), individual components (build), full layout (stitch), and compliance verification (audit). This covers the full lifecycle of Arabic UI/UX development from foundation to validation.

Maintenance

ActivityMaintained
ResponsivenessSyncing

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    Not graded
    maintenance
    An automated MCP server for Google Stitch that enables AI-driven UI design generation, screen management, and design system extraction. It provides 19 professional tools for creating consistent web interfaces, conducting accessibility audits, and exporting design tokens.
    -
  • A
    license
    Not graded
    quality
    F
    maintenance
    An automated MCP server for Google Stitch that enables AI-driven UI design generation, accessibility audits, and design system management. It streamlines workflows for creating responsive screens, extracting design tokens, and maintaining visual consistency across professional web projects.
    58 npm
    31
    Apache 2.0
  • A
    license
    B
    quality
    D
    maintenance
    Comprehensive MCP server for Google Stitch with 36 tools covering design-to-code workflows, including screen generation, code extraction, design analysis, and project management.
    44
    86 npm
    5
    MIT