एक वेब लॉगिन पेज बनाने के लिए एक MCP सर्वर का उपयोग करके कर्सर IDE के साथ अंजीर को एकीकृत करना – Gadgets Solutions

मॉडल संदर्भ प्रोटोकॉल शक्तिशाली उपकरणों को सीधे आधुनिक आईडी में एकीकृत करना अविश्वसनीय रूप से आसान बनाता है जैसे कर्सरनाटकीय रूप से उत्पादकता को बढ़ावा देना। बस कुछ सरल चरणों के साथ हम कर्सर को एक अंजीर डिजाइन तक पहुंचने और मिनटों के भीतर वेब पेजों को डिजाइन करने के लिए इसकी कोड पीढ़ी क्षमताओं का उपयोग करने की अनुमति दे सकते हैं। इस हैंड्स-ऑन ट्यूटोरियल में, हम आपको इस एकीकरण को स्थापित करने और कर्सर का उपयोग करके एक अंजीर फ़ाइल से एक साधारण लॉगिन पृष्ठ बनाने की प्रक्रिया के माध्यम से चलेंगे।

फिग्मा एपीआई

सबसे पहले, हमें इस ट्यूटोरियल के लिए एक अंजीर एपीआई की आवश्यकता होगी।

• अपने FIGMA खाते में लॉग इन करें
• सेटिंग्स पर जाएं> सुरक्षा> नया टोकन उत्पन्न करें
• टोकन के लिए एक नाम दर्ज करें और सुनिश्चित करें कि आपने अनुमतियाँ पढ़ी हैं फ़ाइल सामग्री और देव संसाधनफिर जनरेट टोकन पर क्लिक करें।

• भविष्य के उपयोग के लिए टोकन की प्रतिलिपि बनाएँ और रखें।

Node.js स्थापना

हम FIGMA MCP सर्वर को चलाने के लिए NPX का उपयोग करेंगे, और उसके लिए, Node.js की आवश्यकता है।

• नवीनतम डाउनलोड करें संस्करण Nodejs.org से node.js
• इंस्टॉलर चलाएं।
• सभी सेटिंग्स को डिफ़ॉल्ट के रूप में छोड़ दें और स्थापना को पूरा करें।

स्थापना के बाद, अपने टर्मिनल में इन कमांडों को चलाकर काम की गई हर चीज को सत्यापित करें:

node -v   # should return the Node.js version
npm -v    # should return the npm version
npx -v    # should return the npx version

कर्सर आइड इंस्टॉलेशन

अंत में, डाउनलोड करें कर्सर आइड Cursor.com से।

• यह डाउनलोड करने के लिए स्वतंत्र है और एक के साथ आता है 14-दिवसीय नि: शुल्क परीक्षण।
• कर्सर विशेष रूप से AI-ASSISTED विकास के लिए बनाया गया है और हमें FIGMA MCP सर्वर से जुड़ने और आसानी से कोड उत्पन्न करने में मदद करेगा।

एक बार जब आप इंस्टॉल और लॉन्च कर चुके हैं कर्सर आइडअपने FIGMA MCP सर्वर को जोड़ने के लिए इन चरणों का पालन करें:

1. नेविगेट करें:
   फ़ाइल> प्राथमिकताएं> कर्सर सेटिंग्स> एमसीपी
   
2. पर क्लिक करें “एक नया वैश्विक MCP सर्वर जोड़ें”।
3. यह एक mcp.json कॉन्फ़िगरेशन फ़ाइल खोलेगा। इसमें निम्न कोड पेस्ट करें:

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": ("/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio")
    }
  }
}

4। अपनी-कुंजी को बदलें फिग्मा एपीआई टोकन आपने पहले उत्पन्न किया था।

5। फ़ाइल सहेजें। एक बार बच जाने के बाद, आपको देखना चाहिए “Framelink Figma MCP” उपलब्ध MCP सर्वर के तहत सूचीबद्ध।

अब आप सेटिंग्स फलक को बंद कर सकते हैं और कर्सर के चैट इंटरफ़ेस में प्रासंगिक संकेतों को दर्ज करके इस सर्वर का उपयोग करना शुरू कर सकते हैं – यह आपके FIGMA फ़ाइल से कनेक्ट होगा और तदनुसार कोड उत्पन्न करेगा।

इस ट्यूटोरियल के लिए, मैंने निम्नलिखित का उपयोग किया अंजीर टेम्पलेट और बस कर्सर के चैट एजेंट को एक index.html और एक स्टाइल.सीएसएस फ़ाइल दोनों उत्पन्न करने के लिए कहा। मैंने इसे अपनी पसंद की कस्टम इमेज के साथ फिग्मा डिज़ाइन में छवियों में से एक को बदलने का भी अनुरोध किया।

एक बार प्रारंभिक कोड उत्पन्न होने के बाद, मैंने एजेंट से कुछ बदलाव करने के लिए कहा – जैसे कि पाद पाठ और वर्ष को अपडेट करना, और कुछ एनीमेशन प्रभाव जोड़ना। कर्सर ने इन संपादन को मूल रूप से संभाला, कोड को स्वचालित रूप से अपडेट किया।

अपने स्वयं के उपयोग के मामले के लिए, आप उपयोग कर सकते हैं कोई अंजीर डिजाइन – बस कॉपी करें फ्रेम url और इसे कर्सर के भीतर चैट एजेंट को प्रदान करें। लिंक प्राप्त करने के लिए:

1. अपना अंजीर डिजाइन खोलें।
2. दाएँ क्लिक करें फ्रेम या तत्व पर आप दोहराना चाहते हैं।
3. चुनना कॉपी/पेस्ट के रूप में> चयन के लिए कॉपी लिंक

कर्सर की चैट में इस लिंक को पेस्ट करें, और एजेंट बाकी को संभाल लेगा – आपके चयनित फ्रेम के आधार पर HTML/CSS उत्पन्न करना।

मैं जामिया मिलिया इस्लामिया, नई दिल्ली से एक सिविल इंजीनियरिंग स्नातक (2022) हूं, और मुझे डेटा विज्ञान, विशेष रूप से तंत्रिका नेटवर्क और विभिन्न क्षेत्रों में उनके आवेदन में गहरी रुचि है।