डिजाइनरों के लिए Claude Code: एक कार्यरत डिजाइनर का सेटअप

पिछले महीने मैंने जिस डिज़ाइनर के साथ काम किया, उसने तीन दिनों में पूरे डिज़ाइन सिस्टम का रिफैक्टर तैयार कर दिया। वह इंजीनियर नहीं है। उसे बैश का ज्ञान नहीं है। उसने कभी रेगुलर एक्सप्रेशन (regex) नहीं लिखा था। उसके पास Claude Code, एक CLAUDE.md फ़ाइल और अपनी गलतियों को स्वीकार करने का शौक था।

यह इस टूल का वह वर्शन है जिसके बारे में कोई बात नहीं कर रहा है। Claude Code से संबंधित हर पोस्ट वरिष्ठ इंजीनियरों द्वारा वरिष्ठ इंजीनियरों के लिए लिखी जाती है। यह एजेंट लेन, हुक स्क्रिप्ट और अस्पष्ट फ़्लैग से भरी होती है। डिज़ाइनर इसे पढ़ते हैं, सोचते हैं कि यह उनके लिए नहीं है और टैब बंद कर देते हैं।

लेकिन यह आपके लिए है। सच कहूँ तो, अधिकांश इंजीनियरों की तुलना में कहीं अधिक। क्योंकि डिज़ाइनरों को कोड टाइप करने में नहीं, बल्कि टीम द्वारा लगातार फ़ीचर जोड़ने के बीच दस रिपॉज़िटरी में डिजाइन प्रणाली को बनाए रखने में परेशानी होती है। यही वह समस्या है जिसे Claude Code आसानी से हल कर देता है।

Claude Code एक एजेंट है, ऑटो-कंप्लीट नहीं

Claude Code, GitHub कोपायलट का क्लोन नहीं है। यह कोड थीम वाली चैट विंडो भी नहीं है। यह एक दीर्घकालिक एजेंट है जो आपके टर्मिनल में रहता है, आपके पूरे रिपॉजिटरी को पढ़ता है, फाइलों को संपादित करता है, परीक्षण चलाता है, पीआर खोलता है और भ्रमित होने पर प्रतिक्रिया देता है।

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

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

एक डिज़ाइनर का काम हमेशा से ही स्टाइल होता था, सिंटेक्स नहीं। Claude Code स्टाइल को ही असल प्रोडक्ट बनाता है।

इसे दस मिनट में इंस्टॉल करें

आपको तीन चीज़ों की ज़रूरत है: Node.js, एक टर्मिनल, और एक Claude अकाउंट।

1. टर्मिनल खोलें (मैक: Cmd+Space, Terminal टाइप करें)। आपको दो कमांड टाइप करने होंगे। यही पूरा इंस्टॉलेशन है।

2. अगर आपके पास Node नहीं है, तो उसे इंस्टॉल करें। nodejs.org पर जाएं, LTS डाउनलोड पर क्लिक करें, और उसे चलाएं। यह एक सामान्य इंस्टॉलर है जिसे डबल-क्लिक करके इंस्टॉल किया जा सकता है।

3. टर्मिनल में पेस्ट करें: npm install -g @anthropic-ai/claude-code

4. अपने डिज़ाइन रिपॉज़िटरी पर जाएँ: cd ~/path/to/your/repo

5. चलाएँ: claude

पहली बार चलाने पर, यह आपको लॉगिन करने की प्रक्रिया बताएगा। बस हो गया।

रिपॉज़िटरी कुछ भी हो सकती है: एक डिज़ाइन सिस्टम पैकेज, एक Next.js मार्केटिंग साइट, एक स्टोरीबुक, एक Figma टोकन एक्सपोर्ट, एक टेलविंड कॉन्फ़िग, या आप जिस भी फ़ोल्डर में काम करते हैं। यदि यह फ़ाइलों वाला फ़ोल्डर है, तो Claude Code इसे पढ़ सकता है।

| चरण | यह कैसा दिखता है | कितना समय लगेगा |

|------|-------------------|----------|

| नोड इंस्टॉल करें | स्टैंडर्ड मैक/विंडोज इंस्टॉलर | 2 मिनट |

| Claude Code इंस्टॉल करें | एक npm कमांड | 1 मिनट |

| लॉगिन करें | ब्राउज़र रीडायरेक्ट | 1 मिनट |

पहला सत्र | claude किसी भी फ़ोल्डर में | तुरंत |

CLAUDE.md को डिज़ाइन ब्रीफ़ की तरह लिखें, रीडमी की तरह नहीं

CLAUDE.md वह फ़ाइल है जिसे Claude Code हर बार रिपॉज़िटरी खोलते ही सबसे पहले पढ़ता है। इंजीनियर इसका उपयोग बिल्ड कमांड और टेस्ट पाथ के लिए करते हैं। यह ठीक है। लेकिन इससे इसके वास्तविक मूल्य का नब्बे प्रतिशत हिस्सा भी छूट जाता है।

CLAUDE.md को एक डिज़ाइन ब्रीफ़ की तरह समझें जो आप किसी नए डिज़ाइनर को दे रहे हैं। इसमें ब्रांड की शैली, ब्रांड के नियम, यह उत्पाद क्या है, हम क्या नहीं करते, और यहाँ स्वच्छ कार्य कैसा दिखता है, ये सब लिखें। CLAUDE.md में लिखा गया हर वाक्य ऐसा वाक्य है जिसे आपको चैट में दोहराने की ज़रूरत नहीं पड़ेगी।

मैं हर नए डिज़ाइनर को यह टेम्पलेट देता हूँ:

# CLAUDE.md

## What this repo is
One line. "Marketing site for Acme, a B2B analytics tool for finance teams."

## Voice
Three adjectives that describe how we write. Three phrases we never use. One example of a sentence we would ship and one we would cut.

## Design system
Where tokens live (path). Where components live (path). How we name things. Forbidden patterns (no inline styles, no hardcoded hex, no px values for spacing).

## Components we have
One-line descriptions of Button, Card, Hero, Nav, etc. So Claude does not build a new one when we already have it.

## What clean work looks like
A short paragraph. "We ship small, focused PRs. We update the Storybook story when we change a component. We never introduce a new dependency without asking."

## What to ask before proceeding
"If you are about to add a new color, stop and ask. If you are about to rename a component, stop and ask."

## Review standards
"Every change must pass typecheck and lint. Screenshots of before/after for any visual change."

इसे हर रिपॉज़िटरी के लिए एक बार लिखें। जब आपको पता चले कि एजेंट आपके कोडबेस में क्या गड़बड़ कर रहा है, तो इसे अपडेट करें। यह समस्या बढ़ती जाती है।

पाँच महत्वपूर्ण वर्कफ़्लो

अधिकांश Claude Code ट्यूटोरियल में बीस फ़ीचर सूचीबद्ध होते हैं। इनमें से पाँच फ़ीचर ऐसे हैं जहाँ एक डिज़ाइनर का 90 प्रतिशत मूल्य दिखता है।

डिज़ाइन सिस्टम रखरखाव। "हर उस जगह को खोजें जहाँ हम अभी भी पुराने स्पेसिंग मान (8px, 16px, 24px) का उपयोग कर रहे हैं और उन्हें टोकन (--space-2, --space-4, --space-6) से बदलें। कंपोनेंट्स को अपडेट करें। स्टोरीज़ को पास करते रहें।" दो मिनट। आमतौर पर एक हफ़्ता लगता है।

कंपोनेंट रीफ़ैक्टर। "हमारे बटन के बारह वेरिएंट हो गए हैं। उनका ऑडिट करें। मुझे बताएं कि वास्तव में कौन से तीन उपयोग में हैं और कौन से नौ बेकार हैं। फिर एक समेकित API प्रस्तावित करें और इसे एक फ़ीचर फ़्लैग के पीछे लागू करें।" आप प्रस्ताव की समीक्षा करते हैं। आप हाँ कहते हैं। यह शिप हो जाता है।

Figma-से-पेज. Figma का स्क्रीनशॉट पेस्ट करें या, बेहतर होगा, ⟦ब्रांड0⟧ ⟦ब्रांड1⟧ को कनेक्ट करें। कहें "इस हीरो सेक्शन को हमारे मौजूदा कंपोनेंट्स और टोकन का उपयोग करके बनाएं, नए का नहीं।" इससे आपको एक या दो राउंड फीडबैक के भीतर डिज़ाइन से मेल खाने वाला PR मिल जाएगा।

टोकन प्रसार. ब्रांड एक रंग अपडेट करता है। "पूरे मोनोरेपो में --color-accent को बदलें और टाइपचेक चलाएं।" काम टाइप करना नहीं है, बल्कि साहस है। Claude Code में असीमित साहस और शून्य अहंकार है।

दृश्य समीक्षा. "डेवलपर सर्वर चलाएं, हर पेज के स्क्रीनशॉट लें और मुझे बताएं कि पिछले डिप्लॉय की तुलना में किन पेजों में स्पेसिंग में गड़बड़ी या ओवरफ्लो है।" यदि आपके रेपो में प्लेराइट या इसी तरह का सेटअप है तो यह जादुई है। यह उन चीजों को पकड़ लेता है जिन्हें आपकी नज़रें नहीं देख पातीं।

| वर्कफ़्लो | Claude Code से पहले | Claude Code के साथ |

|----------|-------------------|------------------|

| डिज़ाइन सिस्टम की व्यापक समीक्षा | 2 से 5 दिन, 1 डिज़ाइनर + 1 इंजीनियर | 20 मिनट, 1 डिज़ाइनर |

कंपोनेंट ऑडिट + रिफैक्टर | 1 स्प्रिंट | 1 दोपहर |

Figma से पेज में रूपांतरण | 1 से 3 दिन | 1 से 3 घंटे |

टोकन प्रसार | सप्ताह, त्रुटि-प्रवण | मिनट, विश्वसनीय |

विज़ुअल रिग्रेशन पास | आमतौर पर कभी नहीं होता | प्रत्येक PR पर |

स्क्रीनशॉट नहीं, Figma फ़ाइल दें

यदि आपके पास केवल PNG फ़ाइल है, तो उसे पेस्ट करें। Claude Code छवियों को संभालता है। इसमें स्पेसिंग की सटीकता और टाइपोग्राफी की कुछ बारीकियां छूट सकती हैं, लेकिन संरचना स्पष्ट हो जाएगी।

यदि आपके पास Figma है, तो Figma MCP सर्वर को कनेक्ट करें। यह पाँच मिनट का इंस्टॉलेशन है जो Claude Code को आपके Figma फ्रेम्स तक सीधी रीड एक्सेस देता है। फ्रेम आईडी, लेयर नाम, स्पेसिंग वैल्यू, टोकन लिंक, पूरी संरचना। आउटपुट की गुणवत्ता में ज़बरदस्त सुधार होता है। मॉडल अनुमान लगाना बंद कर देता है।

किसी भी स्थिति में, एक नियम: इसे हमेशा अपना मौजूदा डिज़ाइन सिस्टम दें, खाली कैनवास नहीं। "हमारे कंपोनेंट्स के साथ इसे बनाएं" हमेशा "इसे बनाएं" से बेहतर है। यदि आप कैनवास को खाली छोड़ देते हैं, तो Claude Code आपके पास पहले से मौजूद कंपोनेंट्स को खुद ही बना लेगा। यह व्यर्थ का काम है।

जहां Claude Code आपका भरोसा जीतना बंद कर देता है

अपने आप से ईमानदार रहें। यहीं पर यह टूल आज विफल हो जाता है।

वास्तविक ब्रांड चित्रण। कोई भी ऐसी चीज़ जिसके लिए एक विशिष्ट कलात्मक शैली, हाथ से बनाए गए पात्रों का काम, या ब्रांड शुभंकर जो आपके ब्रांड से मिलते-जुलते हों, आवश्यक है। Claude Code जनरेटरों का उपयोग करता है, इसमें कलात्मक समझ नहीं होती। इसके लिए आपको अभी भी Prismlight, Runesmith, या किसी मानव चित्रकार को निर्देश देना होगा।

व्यक्तिगत लेआउट की समझ। यह पृष्ठ को सही ढंग से लेआउट कर सकता है। यह आपको यह नहीं बता सकता कि पृष्ठ भावनात्मक रूप से नीरस है। यह आपको यह नहीं बता सकता कि नायक को अधिक स्पष्टता की आवश्यकता है। यह अभी भी आपके द्वारा तय किए गए भार को महसूस नहीं कर सकता। यह अभी भी आप पर निर्भर करता है।

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

कोई भी ऐसी चीज़ जहाँ रिपॉज़िटरी अव्यवस्थित हो। यदि आपके कोडबेस में कोई सुसंगत प्रणाली नहीं है, कोई CLAUDE.md नहीं है, कोई नामकरण नियम नहीं है, कोई टोकन नहीं हैं, तो Claude Code इस गड़बड़ी को और भी तेज़ी से बढ़ा देगा। आपको पहले आधार को ठीक करना होगा। यह निराशाजनक है, लेकिन उचित भी है।

यदि आप AI वर्कफ़्लो के बारे में और अधिक जानकारी चाहते हैं, तो Brainy पेपर्स का शेष भाग देखें। यदि आप इसे अपनी डिज़ाइन टीम में ठीक से स्थापित करवाना चाहते हैं, तो किराया Brainy देखें और हम सेटअप और पहले वास्तविक वर्कफ़्लो को संभाल लेंगे।

डिज़ाइनर की शुरुआती चेकलिस्ट

पहले दिन, यहाँ असली सूची है।

• Claude Code इंस्टॉल करें (npm कमांड, एक मिनट)

• लॉग इन करें और सत्यापित करें कि सत्र काम कर रहा है

• एक रिपॉज़िटरी चुनें। केवल एक। छोटे से शुरू करें।

• ऊपर दिए गए टेम्पलेट का उपयोग करके CLAUDE.md लिखें। इस पर एक घंटा खर्च करें।

• पाँच वर्कफ़्लो में से एक चुनें। इसे शुरू से अंत तक करें।

• अंतर की सावधानीपूर्वक समीक्षा करें। बिना सोचे-समझे स्वीकृति न दें। आप कला निर्देशक हैं।

• Claude को बताएं कि कहाँ गलती हुई। CLAUDE.md को इस पाठ से अपडेट करें।

[ ] एक और वर्कफ़्लो करें। इसे कल करें।

एक हफ़्ते तक ऐसा करने से आपको फ़र्क़ महसूस होगा। एक महीने में आप वापस पुराने तरीके पर नहीं जाना चाहेंगे।

अक्सर पूछे जाने वाले प्रश्न

क्या Claude Code का उपयोग करने के लिए मुझे कोडिंग का ज्ञान होना ज़रूरी है?

नहीं। आपको यह जानना होगा कि आप क्या चाहते हैं, उसे कैसे वर्णित करना है, और अंतर को अच्छी तरह से पढ़कर यह बताना आना चाहिए कि "यह सही है" या "यह गलत है"। यदि आपने कभी किसी जूनियर डिज़ाइनर को फ़ीडबैक दिया है, तो आपके पास यह कौशल है।

क्या Claude Code प्रोडक्शन रिपॉज़िटरी पर सुरक्षित है?

हाँ, यदि आप एक शाखा का उपयोग करते हैं। इसे कभी भी मुख्य रिपॉज़िटरी पर न चलाएँ। एक शाखा बनाएँ, Claude Code को वहाँ काम करने दें, किसी भी अन्य PR की तरह PR की समीक्षा करें, और जब यह सही हो तो मर्ज करें। Git आपकी सुरक्षा करता है। साथ ही, PR के लिए परीक्षण पास करना अनिवार्य करना भी सुरक्षा प्रदान करता है।

Claude Code बनाम कर्सर बनाम v0 बनाम लवेबल, इनमें क्या अंतर है?

कर्सर एक पूर्ण संपादक है जिसमें Claude अंतर्निहित है। v0 और लवेबल प्रॉम्प्ट से यूआई उत्पन्न करते हैं, लेकिन ये आपके रिपॉजिटरी में लंबे समय तक नहीं रहते। Claude Code हेडलेस है, किसी भी रिपॉजिटरी में रह सकता है, और मौजूदा कोडबेस के लिए सबसे शक्तिशाली है। बिल्कुल नए प्रोटोटाइप के लिए, v0 या लवेबल तेज़ हैं। वास्तविक उत्पाद कार्य के लिए, Claude Code बेहतर है।

Claude Code की कीमत कितनी है?

Claude मैक्स सदस्यता में यह शामिल है, और अधिकांश डिज़ाइनरों को इसी से शुरुआत करनी चाहिए। बड़ी टीमें API मूल्य निर्धारण की ओर रुख करती हैं। किसी भी तरह से, यह ऊपर बताए गए वर्कफ़्लो में लगने वाले समय की बचत की तुलना में सस्ता है।

मुझे Claude Code का उपयोग किन कामों के लिए कभी नहीं करना चाहिए?

ब्रांड चित्रण, व्यक्तिगत पसंद के निर्णय, उत्पाद रणनीति, या ऐसा कोई भी काम जिसके लिए यह जानना ज़रूरी हो कि उपयोगकर्ता वास्तव में उस फ़ीचर को क्यों चाहता है। ये काम अपने पास रखें। बार-बार किए जाने वाले कार्यों को इस टूल को सौंप दें।

अब आप जूनियर नहीं हैं

लंबे समय तक, डिज़ाइनर ही विज़न बनाते थे और उसे इंजीनियरों को सौंपते थे जो वास्तव में उत्पाद तैयार करते थे। इसका मतलब था कि डिज़ाइनर इंतज़ार करते थे। स्प्रिंट की उपलब्धता का, बैकएंड के काम का, और किसी और के टाइपिंग करने का।

वो दौर अब बीत चुका है।

जूनियर अब कोई व्यक्ति नहीं है। जूनियर एक मॉडल है। आप आर्ट डायरेक्टर हैं।

CLAUDE.md को एक डिज़ाइन ब्रीफ़ की तरह लिखें। काम एजेंट को सौंप दें। जूनियर के मॉकअप की तरह ही, मानकों के साथ, अंतर की समीक्षा करें। अगर कोई गलती हो तो उसे वापस भेज दें। सही होने पर उसे लॉन्च कर दें।

डिज़ाइन सिस्टम रीफ़ैक्टर में तीन दिन लगते हैं, तीन स्प्रिंट नहीं। मार्केटिंग साइट इस सप्ताह लॉन्च हो रही है, अगले तिमाही में नहीं। टोकन अपडेट कुछ ही मिनटों में हो जाता है, दिनों तक भागदौड़ करने की ज़रूरत नहीं।

इसे इंस्टॉल करें। संक्षिप्त विवरण लिखें। काम पूरा करके भेज दें।