C✳CODEZ.WIN
🌐 हिन्दी

स्थानीयकृत पठन मार्गदर्शिका

figma-implement-designउद्देश्य, उपयोग और स्रोत

फिग्मा डिज़ाइनों को उत्पादन-तैयार एप्लिकेशन कोड में अनुवादित करता है1:1दृश्य सटीकता। इसका उपयोग तब करें जब आप फिग्मा फ़ाइलों से यूआई कोड लागू कर रहे हों, जब उपयोगकर्ता "डिज़ाइन लागू करें", "कोड जनरेट करें", "कंपोनेंट लागू करें" का उल्लेख करता हो, फिग्मा यूआरएल प्रदान करता हो, या फिग्मा विनिर्देशों के अनुरूप कंपोनेंट बनाने के लिए कहता हो। फिग्मा कैनवास के लिए लेखन के माध्यम से।use_figma, उपयोगfigma-use.

स्रोत प्राप्त किया गया:

स्रोत रिपॉज़िटरी
openai/skills
SKILL.md
skills/.curated/figma-implement-design/SKILL.md
रिपॉज़िटरी Star
28,420
रिपॉज़िटरी का अंतिम अपडेट
2026-10-29
क्षमता वर्गीकरण
डिज़ाइन
अंतिम संग्रह समय

लाइसेंस: लाइसेंस दस्तावेजों का सत्यापन लंबित है

वर्कफ़्लो के अंश केवल पढ़ने में सहायता के लिए हैं, कोडेज़ से निष्पादन योग्य निर्देश नहीं हैं। इस पृष्ठ को बनाने के लिए किसी तृतीय-पक्ष स्किल का उपयोग नहीं किया गया है।

नीचे दिए गए उद्देश्य और कार्यप्रणाली संबंधी अंश प्रारंभिक सामग्री हैं, जिन्हें पढ़ने के लिए व्यवस्थित और अनुवादित किया गया है। ये अलग से लेबल किए गए कोडेज़ संपादकीय विश्लेषण से भिन्न हैं।

यह कौशल क्या करता है

फिग्मा डिज़ाइनों को उत्पादन-तैयार एप्लिकेशन कोड में अनुवादित करता है1:1दृश्य सटीकता। इसका उपयोग तब करें जब आप फिग्मा फ़ाइलों से यूआई कोड लागू कर रहे हों, जब उपयोगकर्ता "डिज़ाइन लागू करें", "कोड जनरेट करें", "कंपोनेंट लागू करें" का उल्लेख करता हो, फिग्मा यूआरएल प्रदान करता हो, या फिग्मा विनिर्देशों के अनुरूप कंपोनेंट बनाने के लिए कहता हो। फिग्मा कैनवास के लिए लेखन के माध्यम से।use_figma, उपयोगfigma-use.

अपस्ट्रीम वर्कफ़्लो कैसे काम करता है

आवश्यक कार्यप्रवाह

इन चरणों का क्रम से पालन करें। कोई भी चरण न छोड़ें।

ऊपर की ओर मार्ग · L29 ↗

अवलोकन

यह कौशल फिग्मा डिज़ाइनों को पिक्सेल-परफेक्ट सटीकता के साथ उत्पादन-तैयार कोड में अनुवादित करने के लिए एक संरचित कार्यप्रवाह प्रदान करता है। यह फिग्मा एमसीपी सर्वर के साथ सुसंगत एकीकरण, डिज़ाइन टोकन का उचित उपयोग और अन्य पहलुओं को सुनिश्चित करता है।1:1डिजाइन के साथ दृश्य समानता।

ऊपर की ओर मार्ग · L8 ↗

कदम2: डिज़ाइन संदर्भ प्राप्त करें

दौड़नाget_design_contextनिकाले गए फ़ाइल कुंजी और नोड आईडी के साथ। यह संरचित डेटा प्रदान करता है जिसमें शामिल हैं: लेआउट गुण (स्वचालित लेआउट, बाधाएं, आकार), रंग मान और डिज़ाइन टोकन।

ऊपर की ओर मार्ग · L60 ↗
ऊपर की ओर मार्ग · ↗
get_design_context(fileKey=":fileKey", nodeId="1-2")

आवश्यकताएँ और सेटअप

आवश्यक शर्तें

Figma MCP सर्वर कनेक्टेड और एक्सेस करने योग्य होना चाहिए। उपयोगकर्ता को Figma URL निम्न प्रारूप में प्रदान करना होगा:https://figma.com/design/:fileKey/:fileName?node-id=1-2

ऊपर की ओर मार्ग · L20 ↗

सीमाएं और गुणवत्ता जांच

कोड गुणवत्ता

हार्डकोडेड मानों से बचें - उन्हें स्थिरांक या डिज़ाइन टोकन में निकालें। घटकों को संयोजनीय और पुन: प्रयोज्य रखें।

ऊपर की ओर मार्ग · L156 ↗

सुरक्षित परीक्षण से शुरुआत करें

  1. समर्थित होस्ट और रिपॉजिटरी इंस्टॉलेशन निर्देशों की जाँच करें। स्किल डायरेक्टरी और उससे संबंधित स्क्रिप्ट, एसेट्स और डॉक्यूमेंटेशन को एक साथ रखें;SKILL.mdअकेले होने पर निर्भरताओं को छोड़ा जा सकता है।
  2. एजेंट को अपना वास्तविक इनपुट, अपेक्षित आउटपुट और स्वीकृति मानदंड प्रदान करें। इनवोकेशन सिंटैक्स और उपलब्ध उपकरण होस्ट पर निर्भर करते हैं; यह साइट किसी सार्वभौमिक इंस्टॉलेशन कमांड को नहीं मानती है।
  3. डिस्पोजेबल प्रोजेक्ट या उसकी कॉपी पर मूल वर्कफ़्लो को आज़माएँ। फ़ाइलों, रिमोट सेवाओं या बिल योग्य संसाधनों में परिवर्तन करने वाले कार्यों की अनुमति देने से पहले उनकी समीक्षा करें।
  4. स्रोत गुणवत्ता जांच और अपनी आवश्यकताओं के आधार पर आउटपुट को सत्यापित करें। सफल ट्रिगर या उच्च रिपॉजिटरी स्टार संख्या सही परिणाम की गारंटी नहीं देते।

कौशल प्रारूप और निर्देशिका विनिर्देश ↗

मूल लेख में आगे पढ़ें

अनुवाद और दायरा

यह पठन मार्गदर्शिका ऊपर पिन किए गए अंशों में से चयनित अंशों को प्रस्तुत करती है।SKILL.mdयह अनुवाद सहायता से किया गया है। यह कोई संपूर्ण नियमावली या परीक्षित संगतता का दावा नहीं है। उपयोग करने से पहले मूल दस्तावेज़ और उससे संबंधित फ़ाइलों को पढ़ें।

यह परिचय नीचे पिन किए गए संस्करण को संदर्भित करता है; वर्तमान रिपॉजिटरी गतिविधि और संग्रह समय अलग से दिखाए गए हैं।

पिन किया गया स्रोत
मूल लेख पढ़ें ↗
स्रोत प्राप्त किया गया
स्रोत कमिट
49f948faa9258a0c61caceaf225e179651397431
स्रोत SHA-256
63f3d12d444547bbf68c10a12982b1f42e0f6e26fc074324564a13184d4b15ad
संपूर्ण कौशल सूची पर वापस जाएँ