أفضل خوادم MCP للتصميم لـ Claude Code وCursor

يتيح خادم MCP للتصميم لوكيل البرمجة قراءة التصاميم، أو البحث في مراجع واجهة المستخدم، أو إنشاء الشاشات عبر بروتوكول سياق النموذج (Model Context Protocol). بالنسبة لتصميم موجود على Figma، ابدؤوا بـ Figma. وللبحث في المراجع، استخدموا Mobbin. أما لإنشاء شاشات جديدة لتطبيقات الهاتف المحمول داخل مشروع قابل للتعديل، فإن Sleek خيار مصمم خصيصًا لهذه المهمة.

تغطي هذه المقارنة القدرات الموثقة ومسارات الإعداد لدى ثماني شركات لـ Claude Code وCursor، كما تم فحصها في 28 سبتمبر 2026. نحن نطور Sleek. وتستند التوصيات أدناه إلى ما يقدمه كل تكامل، وليست تقييمًا عمليًا لجودة المخرجات.

ما خادم MCP للتصميم؟

يعرض خادم MCP للتصميم أدوات منتج التصميم لعميل الذكاء الاصطناعي. يمكن للوكيل استدعاء هذه الأدوات واستلام البيانات أو الصور دون حاجتكم لنسخ كل التفاصيل يدويًا في المحادثة. يوفر البروتوكول الاتصال؛ بينما يحدد الخادم ما إذا كان بإمكان الوكيل قراءة ملف، أو البحث في فهرس، أو تعديل تصميم.

يتصل الخادم المستضاف عبر رابط URL، بينما يتصل التكامل المحلي بالبرنامج المثبت على جهازكم. لا يوضح أي من المسميين ما إذا كان الخادم قادرًا على إنشاء الشاشات. لذلك، تحققوا من العمليات المتاحة قبل اختيار الخادم.

ما أوجه الاختلاف بين خوادم MCP للتصميم؟

يكون Figma مفيدًا عندما تريدون العمل على التصميم داخل Figma. ويوفر Mobbin مراجع من منتجات حقيقية قائمة. أما Stitch وSleek فيقدمان مسارات عمل مستضافة لإنشاء الشاشات، بينما يربط Pencil وPaper الوكيل بلوحة تصميم محلية. تتداخل بعض الإمكانيات، لذا اختاروا المخرجات ومسار العمل اللذين تحتاجونهما بدلاً من الاكتفاء بمقارنة عدد الأدوات.

جميع تفاصيل الوصول أدناه محدثة اعتبارًا من سبتمبر 2026. وتتوفر المصادر الخاصة بالشركات وإرشادات إعداد التطبيقات بعد الجدول.

يفصل الجدول بين إنشاء الشاشات واسترجاع المراجع. إذ يمكن لنتيجة البحث أن تساعد الوكيل على فهم نمط عملية الدفع، لكنها ليست شاشة دفع جديدة لتطبيقكم.

ما الذي يقدمه خادم Figma MCP؟

يوفر خادم Figma MCP سياق التصميم المخصص للتنفيذ البرمجي، بما في ذلك التخطيط والمتغيرات والمكونات. كما يتيح الخادم البعيد للعملاء المدعومين إنشاء محتوى بصيغة Figma الأصلية وتعديله. استخدموه عندما تريدون اعتماد تصميم Figma أساسًا للعمل أو إضافة محتوى إليه. ويظل خادم سطح المكتب متاحًا لقراءة سياق التصميم المحلي.

يوضح مركز مساعدة Figma أن الوصول البعيد متاح لجميع الخطط والمقاعد، بينما يقتصر وصول سطح المكتب على المقاعد المدفوعة من نوع Dev أو Full، مع إتاحة الكتابة على لوحة التصميم مجانًا خلال المرحلة التجريبية. تخضع هذه الصلاحيات لحدود استخدام. توضح صفحة حدود الاستخدام لـ Figma أن خطة Starter تمنح ما يصل إلى 20 استدعاءً لأدوات القراءة شهريًا، مع حدود أعلى للمقاعد المدفوعة من نوع Dev وFull.

تم التحقق من الأوامر بتاريخ 2026-09-28.

يوصي دليل التثبيت عن بُعد باستخدام هذا الملحق لـ Claude Code:

claude plugin install figma@claude-plugins-official

أو أضيفوا الخادم فقط:

claude mcp add --transport http figma https://mcp.figma.com/mcp

افتحوا /mcp في Claude Code وأكملوا المصادقة. بالنسبة لـ Cursor، يوثق الدليل نفسه هذا الأمر داخل محادثة الوكيل:

/add-plugin figma

بالنسبة لمسار سطح المكتب، فعلوا خادم MCP في لوحة الفحص لوضع التطوير في Figma. يقدم دليل سطح المكتب هذا الأمر لـ Claude Code:

claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp

تكوين سطح المكتب لـ Cursor هو:

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

الصقوا رابط الإطار واطلبوا من الوكيل تنفيذه برمجيًا. هذه أوضح نقطة بداية عندما يكون التخطيط قد تحدد بالفعل. كما تجعل أدوات الكتابة في الخادم البعيد منه خيارًا مناسبًا عندما تحتاجون إلى إنشاء محتوى مباشرة داخل Figma.

ما الذي يقدمه خادم Google Stitch MCP؟

يوفر Google Stitch اتصال MCP مستضافًا للعمل مع مشاريع Stitch وإنشاء الشاشات من النصوص. يظل التصميم الناتج داخل مشروع Stitch. ويناسب هذا المطورين الذين يرغبون في استخدام أداة إنشاء التصاميم من Google عبر وكيل البرمجة واسترجاع بيانات الشاشات كجزء من مسار العمل نفسه.

يوثق دليل إعداد Stitch MCP المصادقة باستخدام مفتاح API أو OAuth. ويستخدم مسار مفتاح API مفتاحًا من إعدادات Stitch. كما توثق حزمة SDK الرسمية لـ Stitch نقطة النهاية البعيدة، وإنشاء الشاشات واسترجاع كود HTML وصورها.

بالنسبة لـ Claude Code، باستخدام تكوين مفتاح API الموجود في دليل الإعداد:

claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY" -s user

بالنسبة لـ Cursor، في ملف .cursor/mcp.json:

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "X-Goog-Api-Key": "YOUR-API-KEY"
      }
    }
  }
}

استبدلوا النص المؤقت بمفتاحكم واحتفظوا بهذا الملف بعيدًا عن نظام تتبع النسخ. تحققوا من الحدود الحالية في حساب Stitch الخاص بكم قبل التخطيط لعملية إنشاء مجمعة. صفحة الإعداد هي دليل اتصال.

ما الذي يقدمه خادم Mobbin MCP؟

يتيح Mobbin MCP للوكيل البحث في واجهات المنتجات الحقيقية والحصول على صور الشاشات. وهو مفيد قبل تصميم تدفق مستخدم أو تنفيذ نمط لم تستقروا عليه بعد. تبحث الأدوات الموثقة في المواد الموجودة بالفعل، ولا تنشئ تصميم تطبيق جديدًا. تظل المخرجات عبارة عن مواد مرجعية للقرار التالي.

تؤكد مقدمة Mobbin دعم OAuth والوصول عبر خطط Pro وTeam وEnterprise. وتغطي قائمة الأدوات الشاشات، والمسارات، وأقسام المواقع الإلكترونية. وتنتهي صلاحية روابط الصور عالية الدقة بعد 30 يومًا.

يفضل دليل Mobbin لـ Claude Code إعداد الموصل المعتمد في تطبيق Claude Desktop أو على الويب أولاً. كما يوثق هذا الخيار البديل عبر سطر الأوامر فقط:

claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp

ثم افتحوا /mcp واختاروا Mobbin وأكملوا عملية المصادقة.

بالنسبة لـ Cursor، تستخدم خطوات إعداد الشركة ملحق المتجر بدلاً من تعليمات JSON:

1. افتحوا ملحق Mobbin في متجر Cursor واختاروا Add to Cursor.
2. اختاروا Add Plugin.
3. في Cursor، افتحوا Customize، ثم Installed، ثم Mobbin.
4. اختاروا Authenticate وسجلوا الدخول.

اطلبوا مرجعًا محددًا، مثل شاشات تهيئة المستخدم الجديد في التطبيقات المصرفية. اختاروا الأنماط المفيدة قبل طلب إنشاء مساركم الخاص من أداة توليد أو وكيل برمجة.

ما الذي يقدمه خادم Sleek MCP؟

يتيح خادم Sleek MCP للوكيل إنشاء شاشات قابلة للتعديل لتطبيقات iOS وAndroid داخل مشروع Sleek. يمكن للوكيل استرجاع كود HTML للشاشات، وعرض الصور، وإعادة رابط المشروع للمراجعة. استخدموه عندما يكون تصميم تطبيق الهاتف المحمول هو الخطوة المفقودة بين موجز المتطلبات والكود الذي تريدون من الوكيل كتابته.

يوثق ملف README لـ Sleek MCP خادمًا مستضافًا، وتسجيل الدخول عبر OAuth، والتصدير إلى Figma وتصدير الكود. قدموا للوكيل موجز التطبيق كاملاً في رسالة واحدة حتى يتمكن Sleek من التخطيط لمجموعة الشاشات معًا. يستهلك إنشاء الشاشات رصيد مساحة العمل، بينما لا تستهلك القراءة والعرض أي رصيد.

بالنسبة لـ Claude Code:

claude mcp add --transport http sleek https://sleek.design/api/mcp

افتحوا /mcp واختاروا Sleek وأكملوا المصادقة عبر المتصفح. بالنسبة لـ Cursor، أضيفوا التكوين التالي إلى .cursor/mcp.json لمشروع واحد أو ~/.cursor/mcp.json لجميع المشاريع:

{
  "mcpServers": {
    "sleek": {
      "url": "https://sleek.design/api/mcp"
    }
  }
}

فعلوا الخادم وسجلوا الدخول. يوصي ملف README باستخدام OAuth؛ بينما تُعد مفاتيح API خيارًا احتياطيًا للعملاء الذين لا يدعمون ذلك.

يمكن للحسابات المجانية تجربة الـ API باستخدام رصيد من 60 وحدة يُمنح مرة واحدة. ومن بين خطط الاشتراك العامة، يتطلب استمرار استخدام API والوصول عبر الوكلاء خطة Pro أو Team، ولا تشمل ذلك خطة Starter. تبلغ تكلفة خطة Pro $69 شهريًا أو $360 سنوياً مع 20,000 وحدة رصيد شهريًا اعتبارًا من سبتمبر 2026. تشمل جميع الخطط التصدير إلى Figma وتصدير الكود، مع اقتصار التصدير في الخطة المجانية على الشاشات التي فُتح قفلها.

يقدر ملف README لـ MCP استهلاك نحو 30 وحدة رصيد لكل شاشة جديدة ومن 5 إلى 30 وحدة رصيد لكل تعديل. يمكن تشغيل عملية تصميم واحدة فقط في كل مشروع في الوقت نفسه. ينتظر استدعاء design حتى 270 ثانية، ثم يُرجع حالة قيد التشغيل إذا لزم الأمر؛ ويجب على الوكيل الاستعلام دوريًا عبر get_design_run بدلاً من إعادة إرسال الموجز.

ينتج Sleek تصاميم وكود واجهة مستخدم قابلًا للتصدير. لكن لا يزال يتعين على وكيل البرمجة ربط بيانات التطبيق وسلوكه، وتكييف كود الشاشات إذا كنتم تطورون باستخدام React Native أو SwiftUI. إذا كنتم تفضلون مسار عمل قائمًا على REST API، فإن دليل مهارات تصميم واجهة المستخدم لـ Claude Code يوضح طريقة تثبيت مهارة Sleek المنفصلة.

ماذا يقدم خادم ScreensDesign MCP؟

يجمع ScreensDesign MCP بين البحث في تطبيقات iOS وتوليد الشاشات. وتضم صفحة MCP الخاصة به مكتبة تحتوي على أكثر من 2,715 تطبيقًا من التطبيقات الأعلى إيرادًا، وتدفقات UX كاملة، ومؤشرات إيرادات، وأدوات لتوليد الشاشات بناءً على تلك المراجع حتى سبتمبر 2026. وهو يناسب ملخصات المشاريع التي تبدأ بفحص أنماط الهاتف المحمول الحالية.

يتطلب الوصول إلى MCP اشتراك ScreensDesign Pro. ويدعم الخادم المستضاف بروتوكول OAuth أو مفاتيح API محدودة النطاق. بالنسبة إلى Claude Code، أضيفوا نقطة نهاية HTTP وأتموا المصادقة عبر /mcp:

claude mcp add --transport http screensdesign https://api.screensdesign.com/v1/mcp

بالنسبة إلى Cursor، أضيفوا هذا إلى .cursor/mcp.json، ثم اتصلوا بالخادم:

{
  "mcpServers": {
    "screensdesign": {
      "url": "https://api.screensdesign.com/v1/mcp"
    }
  }
}

استخدموا دليل الإعداد الخاص بالمزود للتهيئة الخاصة بحسابكم. تصف مؤشرات الإيرادات التطبيقات المرجعية؛ ولكنها لا تضمن أن نسخ أي شاشة سيؤدي إلى تحسين معدل التحويل في تطبيقكم.

ماذا يقدم خادم AIDesigner MCP؟

يقوم AIDesigner MCP بتوليد وتعديل تصاميم HTML/CSS باستخدام Tailwind لشاشات العرض على الأجهزة المحمولة أو أجهزة سطح المكتب. ويمكنه استخدام سياق المستودع ومشاركة النتائج مع لوحة الرسم الخاصة به. اختاروا هذا الخادم عندما ترغبون في الحصول على كود واجهة مُولَّد ومصمم بناءً على مشروعكم الحالي، ثم افحصوا المخرجات قبل اعتمادها ككود تنفيذي.

يوفر دليل الإعداد الرسمي أداة CLI تقوم بتهيئة الخادم وتعليمات الوكيل. شغّلوا هذا الأمر في المجلد الرئيسي لمشروعكم بالنسبة إلى Claude Code:

npx -y @aidesigner/agent-skills init

بالنسبة إلى Cursor، حددوا المضيف بشكل صريح:

npx -y @aidesigner/agent-skills init cursor

يتصل كلاهما بـ https://api.aidesigner.ai/api/v1/mcp. أكملوا تسجيل الدخول عبر OAuth من لوحة MCP في العميل. يعتمد التوليد على رصيد الحساب؛ تحققوا من رصيدكم المتاح قبل تشغيل عدة تنويعات متكررة. المخرجات الموثقة هي كود HTML للواجهة، وليست تطبيق هاتف محمول أصلي مكتمل.

ما الذي يقدمه خادم Pencil MCP؟

يربط Pencil (المعروف حاليًا بـ pen.dev) الوكيل بمستند .pen المفتوح في تطبيق سطح المكتب أو إضافة IDE. يمكن للوكيل فحص تلك المساحة وتعديلها أثناء عملكم في الملف نفسه. يناسب هذا المطورين الذين يرغبون في مستند تصميم إلى جانب مستودع الكود ومسار عمل محلي وتفاعلي للتعديل.

تصف وثائق التكامل مع الذكاء الاصطناعي اتصال stdio محليًا بالتطبيق. بينما يقدم دليل التثبيت هذه الخطوات لـ Claude Code بدلاً من رابط URL يمكن استخدامه في بيئات مختلفة:

1. افتحوا مستند .pen في pen.dev.
2. افتحوا Settings ثم MCP، وفعلوا Claude Code CLI.
3. ابدؤوا أو أعيدوا تشغيل Claude Code.
4. شغلوا /mcp وتأكدوا من اتصال pencil.

بالنسبة لـ Cursor، استخدموا مسار إضافة IDE الموثق:

1. افتحوا الإضافات وابحثوا عن pen.dev.
2. ثبتوا الإضافة.
3. أنشئوا ملف .pen أو افتحوه.

توضح صفحة الأسعار أن pen.dev مجاني حاليًا اعتبارًا من سبتمبر 2026. ولا يشمل ذلك اشتراك وكيل البرمجة المنفصل الخاص بكم. احتفظوا بالمستند مفتوحًا لمسار عمل MCP هذا؛ ولا تستبدلوه بنقطة نهاية مستضافة مخمنة أو بمسار تنفيذي مأخوذ من جهاز شخص آخر.

ما الذي يقدمه خادم Paper MCP؟

يتيح خادم Paper MCP للوكيل قراءة وتعديل مستند تصميم Paper المبني باستخدام HTML وCSS. وهو يدعم مسار عمل بلوحة تصميم مشتركة: يغير الوكيل التصميم، وتتفحصونه، ويمكن للوكيل استخدام النتيجة أثناء التنفيذ البرمجي. يجب أن يكون تطبيق Paper Desktop قيد التشغيل مع فتح ملف لتنفيذ عمليات المستند هذه.

يوثق دليل Paper MCP تثبيت الملحقات التالية. أولاً، ثبتوا تطبيق Paper Desktop وافتحوه. بالنسبة لـ Claude Code، شغّلوا:

claude plugin marketplace add paper-design/agent-plugins && claude plugin install paper-desktop@paper

ثم افتحوا Claude Code وتحققوا من /mcp. بالنسبة لـ Cursor، شغلوا هذا الأمر في لوحة الوكيل:

/add-plugin paper-desktop

أعيدوا تحميل Cursor إذا لم يظهر الخادم. التكوين القديم عبر localhost HTTP لـ Paper ما زال يعمل، لكن الملحقات الحالية تستخدم واجهة سطر الأوامر Paper CLI. يمكن لـ CLI عرض الأدوات أثناء إغلاق تطبيق Desktop؛ لكن قراءة المستندات والكتابة عليها تتطلبان تشغيل التطبيق.

توضح صفحة الأسعار لـ Paper إتاحة 100 استدعاء MCP أسبوعيًا في الخطة المجانية ومليون استدعاء أسبوعيًا في خطة Pro اعتبارًا من سبتمبر 2026. تبلغ تكلفة خطة Pro $20 لكل محرر شهريًا، أو $16 لكل محرر شهريًا عند دفع الفاتورة سنويًا. مع العلم أن حصة استدعاء الأدوات ليست عددًا للشاشات: إذ قد تتطلب مهمة التصميم الواحدة عدة استدعاءات.

ما خادم MCP للتصميم الذي يجب عليكم استخدامه؟

استخدموا Figma لتنفيذ تصميم موجود على Figma، وMobbin للعثور على المراجع، وSleek لإنشاء شاشات الهاتف المحمول داخل مشروع يمكنكم مراجعته وتصديره. ويُعد Stitch خيار إنشاء آخر مستضافًا. اختاروا Pencil أو Paper عندما تريدون تحرير مستند التصميم نفسه مع الوكيل باستخدام لوحة تصميم محلية.

ابدؤوا بالمهمة الحالية المباشرة. فإذا سلمكم زميلكم بالفعل إطارًا على Figma، فإن أداة إنشاء ثانية ستضيف قرارات تصميم قد لا تحتاجون إليها. وإذا لم يكن لديكم تخطيط، يمكن للمراجع مساعدتكم في تحديد ما ينبغي أن تتضمنه الشاشة قبل البدء في الإنشاء. أما بالنسبة لموجز تطبيق هاتف محمول جديد، اربطوا وكيلكم بـ Sleek وافحصوا الشاشات الناتجة قبل تنفيذها برمجيًا. تغطي التجربة المجانية عملية تصميم واحدة تقريبًا؛ وتدعم خطة Pro الاستخدام المستمر.

زودوا الوكيل بأي قواعد حالية للهوية التجارية كجزء من الموجز. وتوفر مكتبة DESIGN.md توجيهات تصميمية مكتوبة يمكنكم استخدامها إلى جانب هذه الأدوات؛ وهي مدخل منفصل عن اتصال MCP.

للاختيارات التي تتجاوز تكاملات الوكلاء، راجعوا ترتيب أدوات تصميم تطبيقات الهاتف المحمول بالذكاء الاصطناعي وبدائل Claude Design.

الأسئلة الشائعة