AIDesigner MCP Server

अवलोकन

AIDesigner MCP सर्वर एक हल्का-फुल्का मॉडल कॉन्टेक्स्ट प्रोटोकॉल (MCP) सर्वर है जो शक्तिशाली AI कोडिंग असिस्टेंट और पेशेवर UI/UX डिज़ाइन के बीच की खाई को पाटता है। यह क्लॉड कोड जैसे टूल्स की सबसे बड़ी कमजोरी — खराब मूल UI डिज़ाइन क्षमताएँ — को संबोधित करता है, उन्हें एडिटर के अंदर ही बुद्धिमान डिज़ाइन टूल्स तक पहुँच प्रदान करके।

यह सर्वर आपके प्रोजेक्ट के फ्रेमवर्क, कंपोनेंट लाइब्रेरी, CSS/टेलविंड टोकन्स, और डिज़ाइन सिस्टम को पढ़ता है, फिर उत्पादन-तैयार UI कोड जनरेट करता है जो आपके मौजूदा स्टैक में बिना रुकावट फिट हो जाता है। अब फिग्मा और आपके कोड एडिटर के बीच स्विच करने या AI-जनरेटेड डिज़ाइन्स को मैन्युअली ठीक करने की ज़रूरत नहीं।

प्रमुख विशेषताएँ

• कोडबेस-अवेयर डिज़ाइन जनरेशन: UI बनाने से पहले आपके प्रोजेक्ट को समझने के लिए फ्रेमवर्क्स, कंपोनेंट्स, और टोकन्स का विश्लेषण करता है।
• generate_design टूल: प्राकृतिक भाषा के प्रॉम्प्ट्स को उत्पादन-तैयार UI कंपोनेंट्स और पेजेज में बदल देता है।
• refine_design टूल: संवादात्मक निर्देशों का उपयोग करके लेआउट, रंगों, स्पेसिंग, और स्टाइल्स को पुनरावृत्त रूप से सुधारता है।
• डायरेक्ट कोड इंटीग्रेशन: ऐसा कोड आउटपुट करता है जो मैन्युअल एडाप्टेशन के बिना सीधे आपके कोडबेस में ड्रॉप हो जाता है।
• OAuth प्रमाणीकरण: सुरक्षित साइन;इन फ्लो जिसमें टोकन रिफ्रेश MCP होस्ट द्वारा स्वचालित रूप से हैंडल किया जाता है।
• व्यापक संगतता: क्लॉड कोड, कोडेक्स, कर्सर, VS कोड (कोपायलट एजेंट मोड), और विंडसर्फ के साथ काम करता है।
• ज़ीरो-फ्रिक्शन सेटअप: एक ही npx कमांड के माध्यम से इंस्टॉल और कॉन्फ़िगर करें।

समर्थित AI कोडिंग टूल्स

• क्लॉड कोड: /mcp कमांड और समर्पित एजेंट्स के साथ पूर्ण गाइडेड वर्कफ्लो।
• कर्सर: AI-पावर्ड एडिटिंग के लिए बिना रुकावट इंटीग्रेशन।
• कोडेक्स: प्रोजेक्ट+लेवल कॉन्फ़िगरेशन सपोर्ट।
• VS कोड / गिटहब कोपायलट: एजेंट मोड संगतता।
• विंडसर्फ: यूजर-स्कोप कॉन्फ़िगरेशन।

इंस्टॉलेशन और सेटअप

1. अपने प्रोजेक्ट में इनिशियलाइज़ेशन कमांड चलाएँ:

   npx -y @aidesigner/agent-skills init <host> --trust-project
   

   (<host> को codex, cursor, आदि से बदलें)

2. CLI, MCP सर्वर को रजिस्टर करता है और OAuth साइन;इन के लिए एक ब्राउज़र विंडो खोलता है।

3. अपने AI असिस्टेंट के MCP पैनल के माध्यम से कनेक्ट करें (उदाहरण के लिए, क्लॉड कोड में /mcp चलाएँ और "aidesigner" चुनें)।

4. प्रॉम्प्टिंग शुरू करें: "डार्क मोड सपोर्ट वाला एक मॉडर्न प्राइसिंग पेज जनरेट करें" या "इस डैशबोर्ड को हमारे ब्रांड रंगों का उपयोग करने के लिए रिफाइन करें।"

विस्तृत सेटअप गाइड्स, टूल रेफरेंस, और ट्रबलशूटिंग ऑफिशियल डॉक्युमेंटेशन में उपलब्ध हैं।

उपयोग के मामले

• तेज फ्रंटएंड प्रोटोटाइपिंग: आइडिया से पॉलिश्ड UI तक मिनटों में पहुँचें, अपने एडिटर को छोड़े बिना।
• डिज़ाइन सिस्टम अनुपालन: सुनिश्चित करें कि सभी जनरेटेड कंपोनेंट्स आपके मौजूदा टोकन्स और कंपोनेंट्स का सम्मान करते हैं।
• पुनरावृत्त UI परिष्करण: लेआउट, एक्सेसिबिलिटी, या रिस्पॉन्सिवनेस को ट्वीक करने के लिए प्राकृतिक भाषा का उपयोग करें।
• फुल-स्टैक डेवलपमेंट: सुंदर इंटरफेस सहित पूर्ण फीचर्स बनाने के लिए कोडिंग एजेंट्स के साथ संयोजित करें।
• टीम सहयोग: AI-सहायित और मैन्युअल डेवलपमेंट में सुसंगत डिज़ाइन गुणवत्ता बनाए रखें।

तकनीकी विवरण

• प्रोटोकॉल: मॉडल कॉन्टेक्स्ट प्रोटोकॉल (MCP) — मानकीकृत टूल और कॉन्टेक्स्ट एक्सपोज़र।
• वितरण: npm के माध्यम से उपलब्ध (@aidesigner/agent-skills और संबंधित पैकेज)।
• प्रमाणीकरण: स्वचालित टोकन प्रबंधन के साथ OAuth-आधारित।
• स्थिति: सक्रिय रूप से विकसित; Product Hunt पर मजबूत शुरुआती अपनाने के साथ v0.1.0 रिलीज़।

AIDesigner MCP एआई कोडिंग सहायकों को कोड जनरेटर से पूर्ण डिज़ाइन. और कोड पार्टनर में बदल देता है, जिससे हर डेवलपर के लिए सुंदर, प्रोडक्शन-ग्रेड UI सुलभ हो जाता है।

अधिक जानकारी, लाइव डेमो और नवीनतम अपडेट के लिए aidesigner.ai पर जाएँ।