Claude Code और Cursor के लिए सबसे बेहतरीन डिज़ाइन MCP सर्वर्स

एक डिज़ाइन MCP सर्वर कोडिंग एजेंट को Model Context Protocol के ज़रिए डिज़ाइन पढ़ने, UI रेफरेंस खोजने या स्क्रीन जनरेट करने की सुविधा देता है। अगर आपके पास पहले से कोई 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 को जांचे गए थे।

Figma का रिमोट इंस्टॉलेशन गाइड इस Claude Code प्लगइन की सिफारिश करता है:

claude plugin install figma@claude-plugins-official

या सिर्फ सर्वर जोड़ें:

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

Claude Code में /mcp खोलें और ऑथेंटिकेट करें। Cursor के लिए, वही गाइड एजेंट चैट में इस कमांड को डॉक्युमेंट करता है:

/add-plugin figma

डेस्कटॉप रूट के लिए, Figma के Dev Mode इंसपेक्ट पैनल में MCP सर्वर को इनेबल करें। डेस्कटॉप गाइड यह 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, Stitch प्रोजेक्ट्स के साथ काम करने और टेक्स्ट से स्क्रीन जनरेट करने के लिए एक होस्टेड MCP कनेक्शन प्रदान करता है। परिणामी डिज़ाइन Stitch प्रोजेक्ट में ही रहता है। यह उन डेवलपर्स के लिए सही है जो अपने कोडिंग एजेंट से Google के डिज़ाइन जनरेटर का इस्तेमाल करना चाहते हैं और उसी वर्कफ़्लो के हिस्से के रूप में स्क्रीन डेटा प्राप्त करना चाहते हैं।

Stitch MCP सेटअप गाइड API कुंजी और OAuth ऑथेंटिकेशन को डॉक्युमेंट करता है। API कुंजी से कनेक्ट करने के लिए Stitch की सेटिंग्स से कुंजी लेनी होती है। आधिकारिक Stitch SDK रिमोट एंडपॉइंट, स्क्रीन जनरेशन और स्क्रीन के 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 का परिचय Pro, Team, और Enterprise प्लान पर OAuth और एक्सेस की पुष्टि करता है। इसकी टूल सूची स्क्रीन, फ़्लो और वेबसाइट सेक्शन्स को कवर करती है। हाई-रिज़ॉल्यूशन इमेज URL 30 दिनों के बाद एक्सपायर हो जाते हैं।

Mobbin की Claude Code गाइड पहले Claude Desktop या वेब पर वेरिफाइड कनेक्टर सेट करने का सुझाव देती है। यह केवल CLI वाले इस विकल्प को भी डॉक्युमेंट करती है:

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

फिर /mcp खोलें, Mobbin चुनें और ऑथेंटिकेट करें।

Cursor के लिए, वेंडर के सेटअप चरण JSON स्निपेट के बजाय इसके मार्केटप्लेस प्लगइन का उपयोग करते हैं:

1. Cursor Marketplace में Mobbin प्लगइन खोलें और Add to Cursor चुनें।
2. Add Plugin चुनें।
3. Cursor में, Customize खोलें, फिर Installed, फिर Mobbin चुनें।
4. Authenticate चुनें और साइन इन करें।

किसी ठोस रेफरेंस के लिए कहें, जैसे बैंकिंग ऐप्स से ऑनबोर्डिंग स्क्रीन। किसी जनरेटर या कोडिंग एजेंट से अपना खुद का फ़्लो इम्प्लीमेंट कराने से पहले उपयोगी पैटर्न चुनें।

Sleek MCP सर्वर क्या करता है?

Sleek MCP एजेंट को Sleek प्रोजेक्ट में एडिट करने योग्य iOS और Android ऐप स्क्रीन जनरेट करने की अनुमति देता है। एजेंट स्क्रीन HTML प्राप्त कर सकता है, इमेजेस रेंडर कर सकता है, और समीक्षा के लिए प्रोजेक्ट लिंक वापस ला सकता है। इसका उपयोग तब करें जब मोबाइल ऐप डिज़ाइन आपके ब्रीफ़ और उस कोड के बीच का अधूरा चरण हो जिसे आप एजेंट से लिखवाना चाहते हैं।

Sleek MCP README एक होस्टेड सर्वर, 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 कुंजी उन क्लाइंट्स के लिए एक फॉलबैक है जो इसे सपोर्ट नहीं कर सकते।

Free अकाउंट एक बार मिलने वाले 60 क्रेडिट से API आज़मा सकते हैं। पब्लिक सब्सक्रिप्शन प्लान्स में, लगातार API और एजेंट एक्सेस के लिए Pro या Team की आवश्यकता होती है, Starter की नहीं। सितंबर 2026 के अनुसार, Pro की कीमत $69 प्रति माह या $360 प्रति वर्ष है और इसमें हर महीने 20,000 क्रेडिट मिलते हैं। Figma और कोड एक्सपोर्ट हर प्लान में शामिल हैं। Free प्लान में एक्सपोर्ट केवल अनलॉक की गई स्क्रीन तक सीमित हैं।

MCP README हर नई स्क्रीन के लिए लगभग 30 क्रेडिट और प्रति एडिट 5 से 30 क्रेडिट का अनुमान लगाता है। प्रति प्रोजेक्ट केवल एक डिज़ाइन रन एक्टिव हो सकता है। design कॉल 270 सेकंड तक इंतज़ार करती है, फिर ज़रूरत पड़ने पर बताती है कि रन अभी जारी है; एजेंट को फिर से ब्रीफ़ सबमिट करने के बजाय get_design_run से बार-बार स्टेटस जाँचना चाहिए।

Sleek डिज़ाइन और एक्सपोर्ट करने योग्य UI कोड बनाता है। आपके कोडिंग एजेंट को अभी भी ऐप के डेटा और बिहेवियर को कनेक्ट करना होगा, और अगर आप React Native या SwiftUI में ऐप बना रहे हैं तो स्क्रीन कोड को अडैप्ट करना होगा। यदि आप REST API वर्कफ़्लो पसंद करते हैं, तो Claude Code UI डिज़ाइन स्किल्स गाइड Sleek के अलग स्किल इंस्टॉलेशन के बारे में बताता है।

ScreensDesign MCP सर्वर क्या करता है?

ScreensDesign MCP, iOS ऐप रिसर्च को स्क्रीन जनरेशन के साथ जोड़ता है। इसका MCP पेज सितंबर 2026 तक 2,715+ टॉप-ग्रॉसिंग ऐप्स, पूरे UX फ़्लो, रेवेन्यू सिग्नल्स और इन रेफ़रेंसेस से स्क्रीन जनरेट करने वाले टूल की लाइब्रेरी सूचीबद्ध करता है। यह ऐसे ब्रीफ़ के लिए उपयुक्त है जिसकी शुरुआत मौजूदा मोबाइल पैटर्न को समझने से होती है।

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 मोबाइल या डेस्कटॉप व्यूपोर्ट के लिए Tailwind के साथ HTML/CSS डिज़ाइन जनरेट और रिफ़ाइन करता है। यह रिपॉजिटरी कॉन्टेक्स्ट का उपयोग कर सकता है और परिणामों को अपने कैनवास के साथ साझा कर सकता है। इसे तब चुनें जब आप चाहते हैं कि जनरेट किया गया इंटरफ़ेस कोड आपके मौजूदा प्रोजेक्ट के अनुसार आकार ले, फिर इसे एक इंप्लीमेंटेशन मानने से पहले आउटपुट का निरीक्षण करें।

आधिकारिक सेटअप गाइड एक CLI प्रदान करती है जो सर्वर और एजेंट निर्देशों को कॉन्फ़िगर करती है। Claude Code के लिए इसे अपने प्रोजेक्ट रूट पर चलाएं:

npx -y @aidesigner/agent-skills init

Cursor के लिए, स्पष्ट रूप से होस्ट चुनें:

npx -y @aidesigner/agent-skills init cursor

दोनों https://api.aidesigner.ai/api/v1/mcp से कनेक्ट होते हैं। क्लाइंट के MCP पैनल से OAuth साइन-इन पूरा करें। जनरेशन के लिए अकाउंट क्रेडिट का उपयोग होता है; कई वैरिएशन जनरेट करने से पहले अपने बचे हुए क्रेडिट देख लें। डॉक्यूमेंटेड आउटपुट इंटरफ़ेस HTML है, कोई पूरा नेटिव मोबाइल ऐप नहीं।

Pencil MCP सर्वर क्या करता है?

Pencil, जिसे अब pen.dev कहा जाता है, एजेंट को उसके डेस्कटॉप ऐप या IDE एक्सटेंशन में खुले .pen डॉक्युमेंट से जोड़ता है। जब आप उसी फाइल में काम करते हैं, तो एजेंट उस कैनवास का निरीक्षण कर सकता है और उसमें बदलाव कर सकता है। यह उन डेवलपर्स के लिए उपयुक्त है जो अपनी रिपॉजिटरी के साथ एक डिज़ाइन डॉक्युमेंट और एक इंटरैक्टिव लोकल एडिटिंग वर्कफ़्लो चाहते हैं।

एआई इंटीग्रेशन के दस्तावेज़ ऐप से लोकल stdio कनेक्शन का वर्णन करते हैं। इंस्टॉलेशन गाइड अलग-अलग कंप्यूटरों पर इस्तेमाल किए जा सकने वाले URL के बजाय ये Claude Code स्टेप्स प्रदान करती है:

1. pen.dev में एक .pen डॉक्युमेंट खोलें।
2. Settings खोलें, फिर MCP में जाकर Claude Code CLI को इनेबल करें।
3. Claude Code को शुरू या रीस्टार्ट करें।
4. /mcp चलाएं और पुष्टि करें कि pencil कनेक्टेड है।

Cursor के लिए, डॉक्युमेंट किए गए IDE एक्सटेंशन पाथ का उपयोग करें:

1. Extensions खोलें और pen.dev खोजें।
2. एक्सटेंशन इंस्टॉल करें।
3. एक .pen फाइल बनाएं या खोलें।

प्राइसिंग पेज के अनुसार, सितंबर 2026 में pen.dev फ़िलहाल मुफ़्त है। इसमें आपका अलग कोडिंग-एजेंट सब्सक्रिप्शन शामिल नहीं है। इस MCP वर्कफ़्लो के लिए डॉक्युमेंट को खुला रखें; किसी अनुमानित होस्टेड एंडपॉइंट या किसी अन्य व्यक्ति की मशीन से कॉपी किए गए बाइनरी पाथ का इस्तेमाल न करें।

Paper MCP सर्वर क्या करता है?

Paper MCP किसी एजेंट को HTML और CSS से निर्मित Paper डिज़ाइन डॉक्युमेंट को पढ़ने और एडिट करने की अनुमति देता है। यह एक ही कैनवास पर साथ काम करने देता है: एजेंट डिज़ाइन बदलता है, आप उसका निरीक्षण करते हैं, और एजेंट इम्प्लीमेंटेशन के दौरान परिणाम का उपयोग कर सकता है। इन डॉक्युमेंट ऑपरेशन्स के लिए 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 को फिर से लोड करें। Paper का पुराना localhost HTTP कॉन्फ़िगरेशन अभी भी काम करता है, लेकिन वर्तमान प्लगइन्स Paper CLI का उपयोग करते हैं। Desktop बंद होने पर भी CLI टूल्स उपलब्ध करा सकता है; लेकिन डॉक्युमेंट पढ़ने और लिखने के लिए अभी भी ऐप की आवश्यकता होती है।

Paper का प्राइसिंग पेज सितंबर 2026 तक मुफ़्त प्लान पर प्रति सप्ताह 100 MCP कॉल और Pro पर प्रति सप्ताह 1,000,000 कॉल बताता है। Pro की कीमत $20 प्रति एडिटर प्रति माह या सालाना बिल करने पर $16 प्रति एडिटर प्रति माह है। टूल कॉल की सीमा स्क्रीन की संख्या नहीं बताती। एक डिज़ाइन कार्य में कई कॉल शामिल हो सकते हैं।

आपको किस डिज़ाइन MCP सर्वर का उपयोग करना चाहिए?

किसी मौजूदा Figma डिज़ाइन को इम्प्लीमेंट करने के लिए Figma का, रेफरेंस खोजने के लिए Mobbin का, और किसी ऐसे प्रोजेक्ट में मोबाइल स्क्रीन जनरेट करने के लिए Sleek का इस्तेमाल करें जिसे आप रिव्यू और एक्सपोर्ट कर सकते हैं। Stitch एक और होस्टेड जनरेशन विकल्प है। जब आप एजेंट के साथ लोकल कैनवास पर एक ही डिज़ाइन डॉक्युमेंट में काम करना चाहते हों, तो Pencil या Paper को चुनें।

सामने मौजूद काम से शुरुआत करें। अगर आपके सहकर्मी ने आपको पहले ही एक Figma फ़्रेम दे दिया है, तो दूसरा जनरेटर एक ऐसा डिज़ाइन डिसीजन जोड़ता है जिसकी आपको शायद ज़रूरत न हो। अगर आपके पास लेआउट नहीं है, तो रेफरेंस आपको जनरेशन से पहले यह तय करने में मदद कर सकते हैं कि स्क्रीन पर क्या होना चाहिए। नए मोबाइल ऐप ब्रीफ़ के लिए, अपने एजेंट को Sleek से कनेक्ट करें और उन्हें इम्प्लीमेंट करने से पहले परिणामी स्क्रीन का निरीक्षण करें। मुफ़्त ट्रायल लगभग एक डिज़ाइन रन को कवर करता है; Pro लगातार इस्तेमाल का समर्थन करता है।

ब्रीफ़ के हिस्से के रूप में एजेंट को कोई भी मौजूदा ब्रांड नियम दें। DESIGN.md लाइब्रेरी लिखित डिज़ाइन निर्देश प्रदान करती है जिनका उपयोग आप इन टूल्स के साथ कर सकते हैं; यह MCP कनेक्शन से एक अलग इनपुट है।

एजेंट इंटीग्रेशन के अलावा अन्य विकल्पों के लिए, एआई मोबाइल ऐप डिज़ाइन टूल्स की रैंकिंग और Claude Design विकल्प देखें।

अक्सर पूछे जाने वाले सवाल