implement-design
द्वारा figma
Figma डिज़ाइन को पिक्सेल-परफेक्ट विज़ुअल फिडेलिटी के साथ प्रोडक्शन-रेडी कोड में अनुवादित करता है। Figma MCP सर्वर कनेक्शन और फ़ाइल कुंजी तथा नोड ID वाले Figma URL की आवश्यकता होती है ताकि डिज़ाइन संदर्भ, स्क्रीनशॉट और एसेट्स निकाले जा सकें। सात-चरणीय संरचित वर्कफ़्लो: URL पार्स करें, डिज़ाइन संदर्भ प्राप्त करें, विज़ुअल संदर्भ कैप्चर करें, एसेट्स डाउनलोड करें, प्रोजेक्ट कन्वेंशन में अनुवाद करें, 1:1 समानता प्राप्त करें, और Figma के विरुद्ध मान्य करें। डिज़ाइन सिस्टम पुन: उपयोग को डुप्लिकेशन पर प्राथमिकता देता है; Figma टोकन को प्रोजेक्ट डिज़ाइन में मैप करता है...
npx skills add https://github.com/figma/mcp-server-guide --skill implement-designfigma की और Skills
video-interaction-mapper
figma
यह कौशल तब उपयोग किया जाना चाहिए जब उपयोगकर्ता किसी UI स्क्रीन रिकॉर्डिंग का विश्लेषण करने और इंटरैक्शन स्थितियों को Figma में मैप करने के लिए कहे। "वीडियो डालें..." जैसे अनुरोधों के लिए ट्रिगर करें।
figma-code-connect
figma
Figma Code Connect टेम्पलेट फ़ाइलें बनाता और बनाए रखता है जो Figma घटकों को कोड स्निपेट से मैप करती हैं। उपयोग तब करें जब उपयोगकर्ता Code Connect, Figma घटक का उल्लेख करता है…
create-design-system-rules
figma
आपके प्रोजेक्ट में consistent Figma-to-code implementation के लिए custom design system rules। Component organization, styling, design tokens, और asset handling के लिए project-specific conventions उत्पन्न करता है जो AI agents को consistent code बनाने में मार्गदर्शन करते हैं। तीन rule file formats का समर्थन करता है: Claude Code के लिए CLAUDE.md, Codex CLI के लिए AGENTS.md, और Cursor के लिए .cursor/rules/figma-design-system.mdc। Rule बनाने से पहले existing patterns खोजने के लिए Figma MCP server connection और codebase analysis की आवश्यकता होती है...
figma-implement-motion
figma
Figma मोशन और एनिमेशन को प्रोडक्शन-रेडी एप्लिकेशन कोड में अनुवाद करता है। Figma डिज़ाइन से एनिमेशन/मोशन लागू करते समय उपयोग करें — उपयोगकर्ता उल्लेख करता है…
figma-swiftui
figma
SwiftUI ↔ Figma अनुवाद। जब भी उपयोगकर्ता Swift, SwiftUI, iOS, iPhone, या iPad का उल्लेख करे — किसी भी दिशा में — Figma डिज़ाइन का अनुवाद करने के लिए उपयोग करें...
figma-use-motion
figma
Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…
figma-use-slides
figma
यह कौशल एजेंटों को स्लाइड्स संदर्भ में Figma के use_figma MCP टूल का उपयोग करने में मदद करता है। इसे figma-use के साथ उपयोग किया जा सकता है, जिसमें इसके उपयोग के लिए मूलभूत संदर्भ है…
figma-use-figjam
figma
यह कौशल एजेंटों को FigJam संदर्भ में Figma के use_figma MCP टूल का उपयोग करने में मदद करता है। इसे figma-use के साथ उपयोग किया जा सकता है, जिसमें इसके उपयोग के लिए मूलभूत संदर्भ है…