Figma से Claude Code: डिज़ाइनर्स के लिए प्लेबुक

1┌─────────────────────────────────────────────────────────────────────────┐
2│                                                                         │
3│   पहले (हैंडऑफ़ नर्क)                    बाद में (वाइब कोडिंग)         │
4│   ────────────────────                    ───────────────────          │
5│                                                                         │
6│   डिज़ाइन                                डिज़ाइन                       │
7│      ↓                                       ↓                          │
8│   स्पेक डॉक                               Claude सीधे Figma पढ़ता है  │
9│      ↓                                       ↓                          │
10│   डेव डीकोड करता है                        आप प्रॉम्प्ट करते हैं: "इसे बनाओ" │
11│      ↓                                       ↓                          │
12│   रिव्यू                                  प्रोडक्शन कोड                │
13│      ↓                                       ↓                          │
14│   फीडबैक लूप ×10                          शिप 🚀                        │
15│      ↓                                       ↓                          │
16│   "लगभग सही"                              समय: मिनट                     │
17│                                                                         │
18│   समय: हफ्ते                                                           │
19│                                                                         │
20└─────────────────────────────────────────────────────────────────────────┘

1Figma.com → प्रोफ़ाइल पर क्लिक करें (ऊपर-बाएँ) → सेटिंग्स → सुरक्षा
2→ पर्सनल एक्सेस टोकन → नया टोकन जनरेट करें → तुरंत कॉपी करें

1claude mcp add figma -e FIGMA_PERSONAL_ACCESS_TOKEN=figd_xxxxxxxxxx

1Claude Code में, टाइप करें: /mcp
2आपको देखना चाहिए: figma ✓ कनेक्टेड

1┌─────────────────────────────────────────────────────────────────────────┐
2│                         आपकी FIGMA फ़ाइल                               │
3├─────────────────────────────────────────────────────────────────────────┤
4│                                                                         │
5│   ┌─────────────────────────────────────────────────────────────────┐   │
6│   │  CLAUDE क्या पढ़ सकता है                                        │   │
7│   ├─────────────────────────────────────────────────────────────────┤   │
8│   │  ✓ लेयर नाम और पदानुक्रम      ✓ ऑटो लेआउट सेटिंग्स            │   │
9│   │  ✓ रंग (फिल, स्ट्रोक)          ✓ कंपोनेंट वेरिएंट              │   │
10│   │  ✓ टाइपोग्राफी स्टाइल         ✓ स्पेसिंग और पैडिंग            │   │
11│   │  ✓ इफ़ेक्ट (शैडो, ब्लर)        ✓ कंस्ट्रेंट                    │   │
12│   │  ✓ डिज़ाइन टोकन/वेरिएबल       ✓ टेक्स्ट कंटेंट                │   │
13│   └─────────────────────────────────────────────────────────────────┘   │
14│                                                                         │
15│   ┌─────────────────────────────────────────────────────────────────┐   │
16│   │  CLAUDE क्या नहीं पढ़ सकता                                      │   │
17│   ├─────────────────────────────────────────────────────────────────┤   │
18│   │  ✗ असली इमेज पिक्सल           ✗ प्रोटोटाइप इंटरैक्शन          │   │
19│   │  ✗ कमेंट और फीडबैक            ✗ वर्शन हिस्ट्री                │   │
20│   └─────────────────────────────────────────────────────────────────┘   │
21│                                                                         │
22└─────────────────────────────────────────────────────────────────────────┘

1मेरी Figma डिज़ाइन को यहाँ पढ़ें:
2https://www.figma.com/design/[YOUR-FILE-ID]/[FILE-NAME]
3
4मुझे दें:
51. पेज संरचना का अवलोकन
62. मुख्य अनुभागों की सूची
73. उपयोग किए जा रहे रंग पैलेट
84. टाइपोग्राफी स्टाइल
95. कोई भी कंपोनेंट जिसे आप पहचान सकते हैं

1Figma फ़ाइल से, निकालें और बनाएं:
2
31. एक Tailwind कॉन्फ़िग जिसमें शामिल हो:
4   - डिज़ाइन से मेल खाने वाले कस्टम रंग
5   - फ़ॉन्ट फ़ैमिली और साइज़
6   - आपके द्वारा देखे गए स्पेसिंग स्केल
7
82. बैकअप के रूप में CSS वेरिएबल्स फ़ाइल
9
10रंगों को सिमैंटिक नामों (प्राइमरी, सेकंडरी, एक्सेंट, न्यूट्रल) के रूप में फ़ॉर्मेट करें।

1मेरी Figma फ़ाइल में [COMPONENT NAME] देखें।
2
3एक React कंपोनेंट जनरेट करें जो:
4- सटीक स्टाइलिंग (रंग, स्पेसिंग, टाइपोग्राफी) से मेल खाता हो
5- Tailwind CSS का उपयोग करता हो
6- मेरे द्वारा परिभाषित सभी वेरिएंट (यदि कोई हों) को सपोर्ट करता हो
7- TypeScript के साथ पूरी तरह से टाइप किया गया हो
8- डिज़ाइन के आधार पर hover/focus स्टेट शामिल करता हो

1मेरी Figma डिज़ाइन से [SECTION NAME] अनुभाग जनरेट करें।
2
3आवश्यकताएँ:
4- डिज़ाइन से बिल्कुल मेल खाएं
5- इसे रिस्पॉन्सिव बनाएं:
6  - मोबाइल (<768px): [लेआउट का वर्णन करें]
7  - डेस्कटॉप (≥768px): [लेआउट का वर्णन करें]
8- सिमैंटिक HTML का उपयोग करें (section, nav, main, article)
9- डिज़ाइन से सभी टेक्स्ट कंटेंट शामिल करें

1┌─────────────────────────────────────────────────────────────────────────┐
2│                           MCP कार्य में                                 │
3└───────────────────────────────┬─────────────────────────────────────────┘
4                                │
5        ┌───────────────────────┼───────────────────────┐
6        ▼                       ▼                       ▼
7┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
8│  FIGMA डिज़ाइन    │  │     FIGJAM        │  │   FIGMA MAKE      │
9│  ─────────────    │  │  ─────────────    │  │  ─────────────    │
10│                   │  │                   │  │                   │
11│  डिज़ाइन फ़ाइलें  │  │  वायरफ़्रेम और    │  │  AI-जनरेटेड       │
12│  → प्रोडक्शन     │  │  यूज़र फ़्लो →    │  │  UI → कोडबेस में │
13│  कोड              │  │  काम करने वाला    │  │  इंजेक्ट करें     │
14│                   │  │  ऐप               │  │                   │
15│                   │  │                   │  │                   │
16│  ⭐ सबसे अधिक     │  │  🎯 शक्तिशाली     │  │  ⚡ सबसे तेज़     │
17│  उपयोग            │  │                   │  │                   │
18└───────────────────┘  └───────────────────┘  └───────────────────┘
19        │                       │                       │
20        ▼                       ▼                       ▼
21┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
22│ "इस Figma डिज़ाइन │  │ "मेरे यूज़र फ़्लो │  │ "इस Make डिज़ाइन │
23│ से मेरी लैंडिंग   │  │ को पढ़ें और       │  │ को लें और मेरे   │
24│ पेज बनाएं"        │  │ Next.js रूट       │  │ मौजूदा पोर्टफ़ोलियो │
25│                   │  │ स्ट्रक्चर बनाएं"   │  │ ऐप में जोड़ें"   │
26└───────────────────┘  └───────────────────┘  └───────────────────┘

1चरण 1                    चरण 2                    चरण 3
2───────────────────────────────────────────────────────────────────
3"मेरी डिज़ाइन            "बेस कंपोनेंट            "इन कंपोनेंट्स का
4सिस्टम फ़ाइल पढ़ें       जनरेट करें: बटन,        उपयोग करके होमपेज
5और सभी टोकन निकालें"     कार्ड, इनपुट, बैज"      बनाएं"
6        │                        │                        │
7        └────────────────────────┴────────────────────────┘
8                                 │
9                                 ▼
10                    चरण 4: एक-एक करके पेज जोड़ें
11                    "अब प्राइसिंग पेज बनाएं"
12                    "अब अबाउट पेज बनाएं"

1"[URL] पढ़ें, टोकन निकालें, सभी अनुभागों के साथ पूरा पेज जनरेट करें,
2इसे रिस्पॉन्सिव बनाएं, Next.js + Tailwind का उपयोग करें। जाओ।"
3
4     ┌──────────────────────────────────────────────────────────┐
5     │  ⚠️  सबसे अच्छा तब काम करता है जब आपकी Figma फ़ाइल    │
6     │     सही नामकरण और पूरे में ऑटो लेआउट के साथ अच्छी तरह │
7     │     से व्यवस्थित हो                                      │
8     └──────────────────────────────────────────────────────────┘

1┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐
2│ टोकन   │ → │ एटम    │ → │ मॉलिक्यूल│ → │ सेक्शन  │ → │ पेज    │
3│ (रंग,   │    │ (बटन,  │    │ (कार्ड, │    │ (हीरो,  │    │ (पूरा  │
4│ फ़ॉन्ट) │    │ इनपुट) │    │ नेव)   │    │ फ़ुटर) │    │ पेज)   │
5└─────────┘    └─────────┘    └─────────┘    └─────────┘    └─────────┘

1┌─────────────────────────────────────────────────────────────────────────┐
2│  नामकरण                                                                │
3│  [ ] लेयर्स में सिमैंटिक नाम हों      hero-section ✓   Frame 427 ✗    │
4│  [ ] कंपोनेंट्स स्पष्ट रूप से नामित  Button/Primary ✓  Component 1 ✗ │
5│  [ ] वेरिएंट्स में वर्णनात्मक प्रॉपर्टी  size=lg ✓        variant=2 ✗  │
6├─────────────────────────────────────────────────────────────────────────┤
7│  संरचना                                                                │
8│  [ ] सभी कंटेनरों पर ऑटो लेआउट       Flexbox ready ✓  Absolute mess ✗│
9│  [ ] सपाट पदानुक्रम (न्यूनतम नेस्टिंग)  Clean DOM ✓      Div soup ✗   │
10│  [ ] सेक्शन स्पष्ट रूप से अलग         Easy parsing ✓   Chaos ✗       │
11├─────────────────────────────────────────────────────────────────────────┤
12│  टोकन                                                                  │
13│  [ ] रंग स्टाइल के रूप में परिभाषित   Extractable ✓    Hardcoded ✗    │
14│  [ ] टाइपोग्राफी टेक्स्ट स्टाइल के रूप में  Consistent ✓     Random ✗ │
15│  [ ] स्पेसिंग सुसंगत                  Systematic ✓     Arbitrary ✗    │
16└─────────────────────────────────────────────────────────────────────────┘

11. लेयर्स को CSS क्लास की तरह नाम दें
2   nav-links ✓    Group 5 ✗
3
42. सेक्शन दर सेक्शन काम करें
5   हीरो → फीचर्स → टेस्टीमोनियल्स → फ़ुटर
6   (एक बार में पूरा पेज न मांगें)
7
83. सीधे Figma का संदर्भ दें
9   "फीचर्स सेक्शन में कार्ड देखें"
10   (नहीं: "गोल कोनों वाला कार्ड बनाएं")
11
124. पहले एसेट्स निर्यात करें
13   इमेज को मैन्युअल निर्यात की आवश्यकता है → /public फ़ोल्डर
14   फिर Claude को बताएं: "हीरो इमेज /public/hero.png पर है"
15
165. अपना स्टैक पहले बताएं
17   "मैं Next.js 14 + Tailwind + TypeScript का उपयोग कर रहा हूं"
18   (Claude आपके कन्वेंशन से मेल खाएगा)

1मैं अपनी Figma डिज़ाइन को कोड में बदलना चाहता हूं।
2
3Figma URL: [अपना URL डालें]
4
5स्टैक: Next.js 14 + Tailwind CSS + TypeScript
6
7कृपया:
81. पहले, डिज़ाइन का विश्लेषण करें और मुझे बताएं कि आप क्या देखते हैं
92. रंग पैलेट निकालें और एक Tailwind कॉन्फ़िग बनाएं
103. फिर मैं आपको बताऊंगा कि पहले कौन सा सेक्शन बनाना है
11
12आइए कदम दर कदम चलते हैं।