छवियाँ (Images) और मल्टीमॉडल (Multimodal): एक स्क्रीनशॉट चिपकाएँ, वह समझ जाएगा
📚 सीरीज़ नेविगेशन: पिछला लेख 16 आम वर्कफ़्लो कोड पढ़ने, बग फिक्स करने और टेस्ट लिखने जैसी दैनिक दिनचर्या से गुज़रा। यह लेख एक नया आयाम (dimension) जोड़ता है—न केवल आप इसके साथ टाइप कर सकते हैं, बल्कि आप इसे सीधे चित्र (images) भी दिखा सकते हैं: एरर स्क्रीनशॉट, डिज़ाइन, आर्किटेक्चर आरेख (architecture diagrams), आप उन्हें अंदर फेंक सकते हैं और यह समझ जाएगा।
उदाहरण के लिए, डिज़ाइनर द्वारा दिए गए पेज के स्क्रीनशॉट को वेबपेज में बदलना। पहले, हमें पिक्सेल दर पिक्सेल मापना पड़ता था—गैप (gap) कितना है, फ़ॉन्ट आकार क्या है, बटन का राउंड कॉर्नर (border radius) कितने डिग्री है, केवल मान निकालने में पूरी सुबह लग जाती थी।
इस समय आपको बस उस PNG को सीधे Claude Code की विंडो में खींचना है, और यह टाइप करना है कि "इस डिज़ाइन के अनुसार संबंधित CSS जनरेट करें"।
कुछ मिनटों के बाद, यह CSS का एक पूरा खंड (block) दे देगा—लेआउट (layout), रंग (color scheme), राउंड कॉर्नर, शैडो (shadows) सब ठीक से मेल खाते हैं, इसे प्रोजेक्ट में पेस्ट करें, ब्राउज़र को रिफ्रेश करें, और यह डिज़ाइन के लगभग समान होगा। कार्यकुशलता (efficiency) में अंतर तुरंत दिखाई देता है: इसे बताने की तुलना में इसे दिखाना बहुत तेज़ है।
सरल शब्दों में, "एक तस्वीर हज़ार शब्दों के बराबर है (A picture is worth a thousand words)" यह कहावत Claude Code के मामले में पूरी तरह सच है। आज मैं "तस्वीरें (images) कैसे दें + तस्वीरें देने से क्या-क्या किया जा सकता है" के बारे में पूरी तरह से स्पष्ट करूँगा।
इस लेख को पढ़ने के बाद, आपको मिलेगा:
- Claude Code में छवियों (images) को डालने के तीन तरीके, बस उनका पालन करें (जिसमें Mac उपयोगकर्ताओं के लिए एक शॉर्टकट चेतावनी भी शामिल है)
- छवियों के तीन मुख्य गंभीर उपयोग: एरर स्क्रीनशॉट पेस्ट करना, डिज़ाइन को कोड में बदलना (recreate), और चार्ट / आर्किटेक्चर आरेख पढ़ना
- निर्णय लेने का मानदंड: कब तस्वीर का उपयोग करना चाहिए, और कब टाइप करना पर्याप्त है
- एकाधिक छवियों (multiple images) का उपयोग कैसे करें, Claude छवि को कैसे संदर्भित करता है, और एक-क्लिक में उस तस्वीर को कैसे खोलें जिसके बारे में वह बात कर रहा है
01 उसे बताने के बजाय, उसे तस्वीर क्यों दिखाएँ
पहले निष्कर्ष देते हैं: जब किसी चीज़ का "वर्णन (describe) करना स्क्रीनशॉट (screenshot) लेने से अधिक कठिन हो", तो आपको तस्वीर का उपयोग करना चाहिए।
यह आधिकारिक दस्तावेज़ में लिखित एक स्पष्ट मानदंड है—"जब टेक्स्ट का विवरण (description) स्पष्ट न हो या बोझिल (cumbersome) हो, तो छवियों का उपयोग करें"।
उपमा: एक तस्वीर हज़ार शब्दों के बराबर है। आप अपने दोस्त को लाल और हरे रंग की एरर विंडो के बारे में बताते हैं, और कहते हैं "ऊपर बाएँ कोने में एक लाल क्रॉस (cross) है, उसके नीचे छोटे शब्दों की एक पंक्ति है, और दाईं ओर एक बटन है...", सामने वाला फिर भी भ्रमित रहेगा; लेकिन आप एक स्क्रीनशॉट लेते हैं और उसे भेज देते हैं, वह "ओह" कहेगा और सब समझ जाएगा। Claude को तस्वीर दिखाना भी इसी सिद्धांत पर काम करता है—यह आपके शब्दों को व्यवस्थित करने के प्रयास को बचाता है, और इसके अनुमान लगाने के प्रयास को भी बचाता है।
तस्वीर का उपयोग करने के लिए कौन से परिदृश्य (scenarios) विशेष रूप से उपयुक्त हैं? उपयोग के बाद मुख्य रूप से ये तीन श्रेणियां हैं:
| परिदृश्य (Scenario) | टाइप करके वर्णन करना कितना थकाने वाला है | तस्वीर का उपयोग करना कितना आसान है |
|---|---|---|
| पेज मिसअलाइनमेंट (Page misalignment) / स्टाइल गलत है | "यह div दाईं ओर लगभग बीस पिक्सेल खिसक गया है, और नीचे वाले ब्लॉक के साथ ओवरलैप (overlap) कर रहा है" | एक स्क्रीनशॉट लें, यह तुरंत मिसअलाइनमेंट देख लेगा |
| एरर पॉपअप (Error popup) / कंसोल में लाल टेक्स्ट | स्टैक ट्रेस (stack trace) को मैन्युअल रूप से टाइप करना या उसे कॉपी करके अलाइन (align) करना | स्क्रीनशॉट लें और उसे पेस्ट कर दें, संदर्भ (context) भी साथ मिल जाएगा |
| डिज़ाइन से कोड बनाना / एक कंपोनेंट (component) की नकल करना | "मुख्य रंग थोड़ा बैंगनी-नीला है, राउंड कॉर्नर न बहुत बड़े हैं न बहुत छोटे..." | तस्वीर दें, और इसे खुद मापने दें |
यहाँ एक मुख्य अंतर है जिसे स्पष्ट किया जाना चाहिए: Claude Code "तस्वीर की सामग्री" को देखता है, यह आपके लिए स्क्रीनशॉट नहीं लेता है। स्क्रीनशॉट लेने का कदम आपको खुद करना होगा (सिस्टम का अंतर्निहित (built-in) स्क्रीनशॉट टूल काफी है), यह "आपके द्वारा दी गई तस्वीर को समझने" के लिए ज़िम्मेदार है।
💡 संक्षेप में: निर्णय का मानदंड सिर्फ एक वाक्य है—जब वर्णन करना स्क्रीनशॉट लेने से अधिक थकाने वाला हो, तो तस्वीर का उपयोग करें; आधिकारिक शब्दों में "जब टेक्स्ट स्पष्ट न हो या बोझिल हो, तो छवियों का उपयोग करें"।
02 तस्वीर देने के तीन तरीके: खींचना (Drag), चिपकाना (Paste), और पथ (Path) देना
तस्वीर कैसे डालें? आधिकारिक दस्तावेज़ में तीन तरीके दिए गए हैं, कोई भी चुनें, प्रभाव (effect) एक ही होगा। मैं उन्हें "सीखने में आसानी" के क्रम (सबसे आसान से शुरू) में रखूँगा।
यह चित्र तीन छवि-जोड़ने के पथों (image-adding paths) को एक साथ दिखाता है: विंडो में खींचें (drag and drop), कॉपी करने के बाद ctrl+v से पेस्ट करें (Mac में भी ctrl+v), या सीधे फ़ाइल पथ (file path) दें—तीनों तरीके एक ही लक्ष्य की ओर ले जाते हैं, यानी Claude को तस्वीर देना ताकि वह इसे "देखकर काम कर सके"।
तरीका एक: सीधे विंडो में खींचना (Drag and Drop) (सबसे सहज)
चित्र फ़ाइल को फाइंडर (Finder) / फ़ाइल एक्सप्लोरर (File Explorer) से खींचें और चल रहे Claude Code के टर्मिनल विंडो में छोड़ दें, बस वह अंदर आ जाएगा।
यह बिना दिमाग लगाए किया जाने वाला सबसे आसान तरीका है—बिल्कुल वैसे ही जैसे आप WeChat चैट बॉक्स में तस्वीर भेजने के लिए फ़ाइल खींचते हैं। शुरुआती लोग आमतौर पर शून्य सीखने की लागत (zero learning cost) के साथ इसी तरीके से शुरुआत करते हैं।
तरीका दो: छवि कॉपी करें, ctrl+v से पेस्ट करें (सबसे अधिक इस्तेमाल किया जाने वाला, लेकिन इसमें एक चेतावनी है)
कई बार तस्वीर फ़ाइल के रूप में सहेजी (saved) ही नहीं होती है—आपने अभी-अभी एक स्क्रीनशॉट लिया है, या किसी वेबपेज से "तस्वीर कॉपी (Copy Image)" की है, ऐसी स्थिति में सीधे पेस्ट करना सबसे अच्छा है।
लेकिन यहाँ पूरे लेख की सबसे बड़ी चेतावनी (pitfall) है, जिस पर आधिकारिक दस्तावेज़ में विशेष रूप से जोर दिया गया है:
छवि को कॉपी करें और इसे CLI में पेस्ट करने के लिए ctrl+v का उपयोग करें (cmd+v का उपयोग न करें)।
ध्यान दें: Mac पर भी चित्र पेस्ट करने के लिए ctrl+v का उपयोग किया जाता है, आपके आदत वाले cmd+v का नहीं।
यह कितना उल्टा (counter-intuitive) है? Mac उपयोगकर्ता दस सालों से टेक्स्ट को कॉपी और पेस्ट करने के लिए cmd+v का उपयोग कर रहे हैं, और यह उनकी मांसपेशियों की स्मृति (muscle memory) में गहराई तक बैठा है। पहली बार स्क्रीनशॉट पेस्ट करते समय, आदतन cmd+v दबाना बहुत आसान है, जिसका परिणाम यह होता है कि टर्मिनल में रास्तों (paths) की एक लंबी जंक टेक्स्ट लाइन (junk text) आ जाती है, तस्वीर अंदर नहीं जाती, और आपको लगता है कि यह समर्थित (supported) नहीं है। दस्तावेज़ पढ़ने पर ही समझ में आता है—कई टर्मिनलों में cmd+v फ़ाइल पथ टेक्स्ट को पेस्ट करता है, केवल ctrl+v ही मज़बूती से तस्वीर को Claude में फीड करता है।
(एक बात और: iTerm2 जैसे कुछ टर्मिनल चित्र पेस्ट करने के लिए cmd+v को भी पहचानते हैं, लेकिन विभिन्न टर्मिनलों का व्यवहार सुसंगत (consistent) नहीं है, ctrl+v वह तरीका है जो हर जगह काम करता है, इसे याद रखने पर आप कभी नहीं फँसेंगे।)
इस नियम को रट लें:
| प्लेटफ़ॉर्म (Platform) | चित्र पेस्ट करने के लिए उपयोग करें | इसका उपयोग न करें |
|---|---|---|
| Mac | ctrl+v | ❌ cmd+v (ज़्यादातर टर्मिनल इसे पथ (path) टेक्स्ट के रूप में पेस्ट कर देंगे) |
| Windows / Linux | ctrl+v (WSL में यदि टर्मिनल ctrl+v को इंटरसेप्ट (intercept) करता है, तो alt+v का उपयोग करें) | —— |
एक छोटा सा विवरण: पेस्ट के सफल होने के बाद, इनपुट बॉक्स में एक [Image #1] प्लेसहोल्डर मार्क (जिसे आधिकारिक तौर पर "चिप (chip)" कहा जाता है) दिखाई देगा, जो यह दर्शाता है कि तस्वीर अटैच (attach) हो गई है, आप इस प्रॉम्ट में टाइप करना जारी रख सकते हैं।
तरीका तीन: सीधे चित्र पथ (Image Path) देना (स्क्रिप्ट (scripts) / पहले से सहेजे गए चित्रों के लिए सबसे उपयुक्त)
यदि चित्र पहले ही फ़ाइल के रूप में सहेजा जा चुका है, और आपको इसका पथ (path) भी पता है, तो सबसे सीधा तरीका यह है कि प्रॉम्ट में सीधे पथ टाइप करें, और इसे स्वयं पढ़ने दें:
Analyze this image: /path/to/your/image.png/path/to/your/image.png को अपनी तस्वीर के वास्तविक पथ से बदल दें (सापेक्ष पथ (relative path) या पूर्ण पथ (absolute path) दोनों काम करेंगे)। यह विधि माउस के ड्रैग-एंड-ड्रॉप पर निर्भर नहीं करती है, यह तब सबसे अच्छा काम करती है जब इसे स्क्रिप्ट में लिखा जाए, या जब चित्र प्रोजेक्ट की किसी गहरी डायरेक्टरी (directory) में छिपा हो।
💡 संक्षेप में: विंडो में खींचें /
ctrl+vसे पेस्ट करें / सीधे पथ (path) दें, इन तीनों में से एक चुनें; Mac उपयोगकर्ताctrl+vयाद रखें,cmd+vन दबाएं।
03 उपयोग एक: एरर और UI स्क्रीनशॉट पेस्ट करें, उसे "क्राइम सीन (Crime Scene)" दिखाएं
पहला और सबसे व्यावहारिक परिदृश्य—समस्या का स्क्रीनशॉट उसे दें, और उसे देखकर फैसला करने दें।
यह तरीका इतना उपयोगी क्यों है? क्योंकि कई एरर और स्टाइल की समस्याएँ, शब्दों के माध्यम से पूरी तरह से नहीं बताई जा सकतीं। एक एरर पॉपअप में आइकॉन (icon), रंग, और लेआउट (layout) होते हैं, जिसे आप टाइप करके केवल आंशिक रूप से ही समझा सकते हैं; UI का अलाइन न होना (misalignment) तो और भी मुश्किल है, कुछ पिक्सेल का अंतर नंगी आँखों से देखा जा सकता है, लेकिन शब्दों में समझाना बहुत कठिन है।
उपमा: अस्पताल जाने पर केवल मुँह से यह न बताएं "यहाँ दर्द है", डॉक्टर को एक्स-रे (X-ray) दिखाएं। आप कहते हैं कि "पेट के निचले दाएँ हिस्से में हल्का दर्द है", तो डॉक्टर केवल अनुमान लगा सकता है; एक CT स्कैन दिखाते ही समस्या एक नज़र में स्पष्ट हो जाती है। स्क्रीनशॉट Claude के लिए "एक्स-रे" के समान है।
यह कैसे करें? स्क्रीनशॉट दें (तीनों तरीकों में से कोई एक चुनें), और अपनी मांग को बताने के लिए एक वाक्य जोड़ें। आधिकारिक तौर पर दिया गया प्रदर्शन (demonstration) प्रॉम्ट बहुत सटीक है:
Here's a screenshot of the error. What's causing it? (यहाँ एरर का स्क्रीनशॉट है। इसका कारण क्या है?)या, UI समस्याओं के लिए:
Describe the UI elements in this screenshot (इस स्क्रीनशॉट में UI तत्वों का वर्णन करें)उदाहरण के लिए, किसी React पेज को डिबग (debug) करते समय, एक बटन हमेशा दाईं ओर खिसक जाता है, और CSS को कई बार चेक करने के बाद भी कोई समस्या नहीं दिखती। उस समय सीधे अलाइन न हुए बटन का स्क्रीनशॉट लें और उसे डालें, साथ में पूछें "यह बटन दाईं ओर क्यों खिसक रहा है?", Claude एक नज़र में देखेगा और कहेगा "आपके पैरेंट कंटेनर (parent container) में एक padding-right है, और बटन का अपना margin है, दोनों जुड़ रहे हैं" — एक वाक्य में रहस्य उजागर हो जाएगा, आप एक लाइन बदलेंगे और सब ठीक हो जाएगा। यदि आप शब्दों से इस अलाइनमेंट (alignment) समस्या का वर्णन करते, तो शायद आपको कई बार आगे-पीछे बात करनी पड़ती।
💡 संक्षेप में: एरर और UI समस्याओं के लिए, स्क्रीनशॉट "क्राइम सीन (Crime Scene) की तस्वीर" है — उसे बताने की तुलना में उसे दिखाना बहुत तेज़ है।
04 उपयोग दो: डिज़ाइन से कोड (Design to Code), स्क्रीनशॉट से सीधे कोड पाएँ
यह वह परिदृश्य है जहाँ "कार्यकुशलता (efficiency) में अंतर तुरंत दिखाई देता है" जिसका ज़िक्र शुरुआत में किया गया था, आइए इसे अलग से समझें — इसे एक डिज़ाइन (design mockup) दें, और इसे रन करने योग्य कोड आउटपुट करने दें।
यह तरीका सबसे अद्भुत क्यों है? क्योंकि यह "डिज़ाइन से कोड (design to code)" के सबसे थका देने वाले हिस्से को खत्म कर देता है। तस्वीर को देखकर मान (values) मापना, स्पेसिंग एडजस्ट करना, कलर स्कीम मिलाना, जो पहले फ्रंट-एंड डेवलपर (front-end developer) के लिए सबसे उबाऊ काम था, अब आप इसे लगभग पूरा (80-90%) करने के लिए दे सकते हैं, और बाद में बस थोड़ा फाइन-ट्यून (fine-tune) कर सकते हैं।
उपमा: दर्जी को एक तस्वीर दिखाना और उसे कपड़े बनाने के लिए कहना। आपको दर्जी को एक-एक माप बताने की ज़रूरत नहीं है, बस उसे सैंपल कपड़े की तस्वीर दिखाएँ, वह खुद पैटर्न, सामग्री और सिलाई का अंदाज़ा लगा लेगा। Claude के लिए डिज़ाइन का स्क्रीनशॉट वही "सैंपल कपड़े की तस्वीर" है।
आधिकारिक रूप से दिए गए प्रदर्शन प्रॉम्ट, काम शुरू करने के लिए इन दो वाक्यों को याद रखें:
इस डिज़ाइन के अनुसार संबंधित CSS जनरेट करेंWhat HTML structure would recreate this component? (इस कंपोनेंट को बनाने के लिए HTML संरचना क्या होगी?)पहला वाक्य उसे डिज़ाइन के अनुसार CSS जनरेट करने के लिए कहता है, दूसरा वाक्य उसे इस कंपोनेंट (component) को बनाने के लिए आवश्यक HTML संरचना (structure) का अनुमान लगाने के लिए कहता है। दोनों वाक्यों का एक साथ उपयोग करने पर एक स्थिर (static) कंपोनेंट का ढाँचा तैयार हो जाता है।
सच कहूँ तो, एक उचित अपेक्षा (expectation) रखनी चाहिए: यह पिक्सेल-परफेक्ट (pixel-perfect) कॉपी नहीं होगी, यह आपको एक उच्च-पूर्णता (high-completion) वाला शुरुआती बिंदु (starting point) देगा। शुरुआत में बताए गए CSS की तरह, समग्र लेआउट (layout) और कलर स्कीम (color scheme) पूरी तरह से मेल खाती है, लेकिन दो जगहों पर इनर पैडिंग (inner padding) कुछ पिक्सेल अलग है, जिसे आप मैन्युअल रूप से एडजस्ट कर सकते हैं। लेकिन इसने कम से कम एक घंटे का समय बचा लिया है — शून्य से CSS लिखना, और इसके द्वारा दिए गए अस्सी प्रतिशत तैयार कोड को संशोधित करना, पूरी तरह से दो अलग-अलग काम (workloads) हैं।
| डिज़ाइन को कोड में बदलना | ❌ शून्य से खुद लिखना | ✅ स्क्रीनशॉट देना |
|---|---|---|
| मान मापना (Measuring values) | खुद एक-एक पिक्सेल को मापना | यह तस्वीर को देखकर अनुमान लगाता है |
| ढाँचा बनाना (Skeleton) | खाली फ़ाइल से टाइप करना शुरू करना | सीधे एक रन होने योग्य वर्ज़न देना |
| आपका काम | शुरुआत से अंत तक सब कुछ करना | केवल अंतिम 10-20% को संशोधित करना |
💡 संक्षेप में: डिज़ाइन का स्क्रीनशॉट + "इस डिज़ाइन के अनुसार संबंधित CSS जनरेट करें", यह आपको अस्सी प्रतिशत काम देगा, आप बाकी बीस प्रतिशत पूरा करेंगे, जो समय बचता है वह केवल थकाऊ काम का होता है।
05 उपयोग तीन: चार्ट और आर्किटेक्चर आरेख (Architecture Diagrams) पढ़ना, इसे "संरचना (Structure)" समझने दें
तीसरा उपयोग, चार्ट, डेटाबेस स्कीमा (database schemas), आर्किटेक्चर आरेख (architecture diagrams)—ये "संरचनात्मक (structural)" आरेख भी वह समझ सकता है।
इसे एक अलग श्रेणी में क्यों रखा गया है? क्योंकि पहली दो श्रेणियों (एरर, डिज़ाइन) की तस्वीरों में "इंटरफ़ेस (interface)" होता है, इस श्रेणी की तस्वीरों में "संबंध (relationships)" होते हैं—कौन किससे जुड़ा है, डेटा कैसे बहता है, मॉड्यूल को परतों (layers) में कैसे विभाजित किया गया है। इन संबंधों को शब्दों में समझाना बहुत भ्रमित करने वाला होता है, चित्रों के साथ यह एक नज़र में स्पष्ट होता है, और यह ठीक Claude की विशेषता है।
उपमा: नए सहयोगी को सिस्टम समझाते समय, बहुत देर तक बात करने से बेहतर है व्हाइटबोर्ड पर ब्लॉक डायग्राम (block diagram) बनाना। आप नए व्यक्ति को मौखिक रूप से बताते हैं कि "उपयोगकर्ता सेवा (user service) ऑर्डर सेवा (order service) को कॉल करती है, और ऑर्डर सेवा इन्वेंट्री (inventory) और भुगतान (payment) पर निर्भर करती है...", वह सुनकर भ्रमित हो जाएगा; व्हाइटबोर्ड पर कुछ ब्लॉक बनाएं, तीर बनाएं, और वह तुरंत समझ जाएगा। इस ब्लॉक डायग्राम का स्क्रीनशॉट Claude को देने का प्रभाव भी समान होता है।
आधिकारिक रूप से दिए गए प्रदर्शन प्रॉम्ट, "पढ़ने" और "बदलने" दोनों दिशाओं को कवर करते हैं:
This is our current database schema. How should we modify it for the new feature? (यह हमारा वर्तमान डेटाबेस स्कीमा (database schema) है। हमें नए फीचर (feature) के लिए इसे कैसे बदलना चाहिए?)Are there any problematic elements in this diagram? (क्या इस आरेख (diagram) में कोई समस्याग्रस्त तत्व (problematic elements) हैं?)पहला वाक्य मौजूदा डेटाबेस संरचना आरेख (database structure diagram) को लेकर पूछता है कि नई सुविधा के लिए टेबल (table) को कैसे बदला जाए; दूसरा वाक्य इसे यह जांचने के लिए कहता है कि क्या इस आरेख में कुछ भी अनुचित (unreasonable) है।
एक बहुत ही सामान्य उपयोग: किसी अपरिचित प्रोजेक्ट को हाथ में लेना, सामने वाला आपको एक आर्किटेक्चर आरेख PNG भेजता है, इसे सीधे Claude को दें, और उससे कहें कि यह सिस्टम कैसे काम करता है, इसका संक्षेप में वर्णन करे। यह आरेख से मॉड्यूल और कॉलिंग संबंधों (calling relationships) को पढ़ सकता है, और आपको एक अवलोकन (overview) दे सकता है — चित्र को अकेले घूरने से यह कहीं अधिक तेज़ है, ऐसा लगता है जैसे किसी ने आपको आरेख को समझने में मदद की हो।
💡 संक्षेप में: चार्ट, स्कीमा (schemas), आर्किटेक्चर आरेख जैसी "संबंधों (relationships)" वाली तस्वीरें, इसे पृष्ठभूमि (background) के रूप में दें, इसे संरचना (structure) को समझने दें और फिर इसे बदलने या जांचने (review) के लिए कहें।
06 बहु-चित्र (Multiple Images), संदर्भ (References), और एक-क्लिक में खोलना: कुछ उपयोगी छोटे संचालन
अंत में, कुछ विवरण (details) जोड़ते हैं जो आपके उपयोग को और आसान बना देंगे, ये सभी आधिकारिक दस्तावेज़ में उल्लिखित हैं।
एक ही बार में कई चित्र (Images) दे सकते हैं
एक-एक करके भेजने की ज़रूरत नहीं है—आप एक ही प्रॉम्ट (prompt) में कई चित्र डाल सकते हैं। उदाहरण के लिए, "यह पुराना डिज़ाइन है, यह नया डिज़ाइन है, मुझे बताएं कि क्या-क्या बदला है", दोनों चित्र एक साथ दें, और इसे तुलना (compare) करने दें। डिज़ाइन में संशोधन करते समय ऐसा अक्सर किया जाता है, जिससे आगे-पीछे वर्णन करने से बचा जा सकता है।
Claude चित्रों को कैसे संदर्भित करता है: [Image #1]
जब Claude अपने उत्तर में आपके द्वारा दिए गए किसी चित्र का उल्लेख करता है, तो यह उसे इंगित (refer) करने के लिए [Image #1], [Image #2] जैसे नंबरों का उपयोग करेगा—चित्र का नंबर उसकी क्रमिक संख्या (sequence number) होगी। जब कई चित्र होते हैं, तो यह नंबर आपको एक नज़र में यह देखने देता है कि "वह किस चित्र के बारे में बात कर रहा है"।
उसके द्वारा उल्लिखित चित्र को एक-क्लिक में खोलें
उसके उत्तर में दिखाई देने वाला [Image #N] क्लिक करने योग्य (clickable) होता है, आधिकारिक शब्दों में:
जब Claude किसी छवि (image) को संदर्भित (reference) करता है (उदाहरण के लिए
[Image #1]), तो डिफ़ॉल्ट व्यूअर (viewer) में छवि खोलने के लिए लिंक परCmd+Click(Mac) याCtrl+Click(Windows/Linux) करें।
दूसरे शब्दों में, यह पुष्टि करने के लिए कि वह वास्तव में किस चित्र का जिक्र कर रहा है, उस नंबर पर Mac पर Cmd+Click करें, Windows/Linux पर Ctrl+Click करें, और सिस्टम का डिफ़ॉल्ट इमेज व्यूअर (image viewer) आपके लिए चित्र खोल देगा ताकि आप जांच सकें।
| संचालन (Operation) | Mac | Windows / Linux |
|---|---|---|
| चित्र पेस्ट करना | ctrl+v | ctrl+v |
[Image #N] खोलना | Cmd+Click | Ctrl+Click |
ध्यान दें कि इन दोनों शॉर्टकट का "विभाजन (division)" विपरीत है: चित्र पेस्ट करने के लिए ctrl का उपयोग किया जाता है, लेकिन Mac पर चित्र लिंक खोलने के लिए Cmd का उपयोग किया जाता है। इन्हें मिलाएँ नहीं।
💡 संक्षेप में: एक प्रॉम्ट में कई चित्र रखे जा सकते हैं, Claude उन्हें इंगित (refer) करने के लिए
[Image #N]का उपयोग करता है, उस नंबर पर क्लिक करने (Mac मेंCmd+Click) से चित्र जाँच के लिए खुल जाएगा।
07 हैंड्स-ऑन: इसे पढ़ने के लिए एक चित्र खींचें, तीन-चरणीय प्रक्रिया
केवल सिद्धांत पढ़ना काफी नहीं है। नीचे हम "तस्वीर देने → वह समझेगा" की पूरी प्रक्रिया को तीन चरणों में चलाकर देखेंगे, इसके लिए आपके कंप्यूटर पर कोई भी चित्र चलेगा। किसी प्रोजेक्ट की आवश्यकता नहीं है, डेस्कटॉप पर बस एक चित्र होना चाहिए।
पहला कदम: कोई भी चित्र (image) ढूंढें, उसका स्थान याद रखें
एक स्क्रीनशॉट लें, या कोई भी मौजूदा PNG / JPG ढूंढें। Mac के स्क्रीनशॉट डिफ़ॉल्ट रूप से डेस्कटॉप पर सहेजे जाते हैं, फ़ाइल नाम कुछ इस तरह होता है Screenshot 2026-06-10 at 3.20.15 PM.png। इसे टाइप करने में आसान पथ (path) पर खींचें, जैसे सीधे डेस्कटॉप पर रखें।
दूसरा कदम: किसी भी डायरेक्टरी में Claude Code शुरू करें
claudeअपेक्षित परिणाम: एक वेलकम स्क्रीन (welcome screen) दिखाई देगी, नीचे एक इनपुट बॉक्स होगा। (चित्र पढ़ना किसी विशिष्ट डायरेक्टरी (directory) पर निर्भर नहीं करता, इसे कहीं भी शुरू किया जा सकता है।)
तीसरा कदम: चित्र दें, और इसे वर्णन करने के लिए कहें
तीनों तरीकों में से कोई भी चुनें, शुरुआती लोगों के लिए सीधे खींचना (drag and drop) अनुशंसित है: डेस्कटॉप से उस तस्वीर को टर्मिनल विंडो में खींचें, छोड़ें, और इनपुट बॉक्स में [Image #1] चिह्न (mark) दिखाई देगा। फिर टाइप करना जारी रखें:
इस चित्र में क्या है? आपने जो देखा है उसका वर्णन करने के लिए हिंदी का उपयोग करेंEnter दबाएं।
अपेक्षित परिणाम: Claude इस तस्वीर को पढ़ेगा, और आपको हिंदी में बताएगा कि तस्वीर में क्या है — अगर यह स्क्रीनशॉट है, तो यह इंटरफ़ेस तत्वों (interface elements) के बारे में बताएगा, अगर यह फोटो है, तो यह छवि सामग्री का वर्णन करेगा। उसे चित्र में मौजूद चीजों का सटीक वर्णन करते हुए देखना = चित्र सफलतापूर्वक दिया गया, पूरी प्रक्रिया पूरी हो गई।
⚠️ Mac उपयोगकर्ता जो "कॉपी और पेस्ट (Copy and Paste)" का प्रयास करना चाहते हैं: पहले प्रीव्यू / ब्राउज़र में चित्र कॉपी करें, टर्मिनल पर वापस जाएं और ctrl+v (न कि cmd+v) दबाएं। यदि दबाने के बाद फ़ाइल पथों की एक श्रृंखला पॉप अप (pop up) होती है न कि [Image #N] चिह्न, तो यह बहुत संभव है कि आपने गलती से cmd+v दबा दिया है, इसे मिटा दें और पुनः प्रयास करें।
💡 संक्षेप में: विंडो में खींचें /
ctrl+v/ पथ दें, चित्र देने के तीन चरण, Claude को चित्र की सामग्री का सटीक वर्णन करते हुए देखना सफल माना जाएगा।
08 सारांश
इस लेख में आपने Claude Code को "दृश्यता (vision)" देना सीखा है — केवल टाइप करने में सक्षम होने से लेकर, सीधे चित्र (images) दिखाने में सक्षम होने तक।
मुख्य बिंदुओं को फिर से देखते हैं:
| आयाम (Dimension) | मुख्य बिंदु (Key Point) |
|---|---|
| कैसे दें | विंडो में खींचें / ctrl+v पेस्ट / पथ दें, तीन में से एक चुनें |
| सबसे बड़ा गड्ढा (pitfall) | Mac में चित्र पेस्ट करने के लिए ctrl+v का उपयोग करें, cmd+v न दबाएं |
| तीन मुख्य उपयोग | एरर / UI स्क्रीनशॉट "क्राइम सीन (crime scene)" दिखाने के लिए, कोड बनाने के लिए डिज़ाइन (design mockup), संरचना (structure) को समझने के लिए चार्ट / आर्किटेक्चर आरेख (architecture diagrams) |
| तस्वीर का उपयोग कब करें | जब टेक्स्ट विवरण स्क्रीनशॉट से अधिक थकाऊ हो |
| एकाधिक चित्र और संदर्भ | एक प्रॉम्ट (prompt) में कई चित्र रखे जा सकते हैं, Claude इंगित करने के लिए [Image #N] का उपयोग करता है, और खोलने के लिए नंबर पर क्लिक करें |
अब आप सक्षम होने चाहिए: किसी भी स्क्रीनशॉट, डिज़ाइन, या आर्किटेक्चर आरेख (architecture diagram) को Claude Code को दें, और इसे आपको एरर (errors) जांचने, कोड जनरेट करने, या संरचना को समझने में मदद करने दें; और Mac पर उस सबसे असंगत (counter-intuitive) ctrl+v को याद रखें। यह "इसे दिखाने" की क्षमता बाद में समस्याओं का वर्णन करने की आपकी लागत (cost) को काफी कम कर देगी — कई ज़रूरतें (requirements) जिन्हें पहले टाइप करने में बहुत समय लगता था, अब एक तस्वीर और एक वाक्य के साथ हल की जा सकती हैं।
अगला लेख 18 "CLAUDE.md उपयोग मार्गदर्शिका (Usage Guide)"—अब तक हम चित्र दे रहे हैं, मांगें दे रहे हैं, लेकिन हर बार हमें प्रोजेक्ट का बैकग्राउंड (background) बार-बार समझाना पड़ता है। क्या ऐसा कोई तरीका है जिससे Claude प्रोजेक्ट में आते ही अपने आप जान जाए कि यह क्या है, और किन नियमों का पालन करना है? अगला लेख उस "ऑनबोर्डिंग मैनुअल (Onboarding Manual)" के बारे में बात करेगा जो इसे दिया जाता है—CLAUDE.md, एक बार कॉन्फ़िगर करने के बाद, आपको इसे बार-बार बताने की आवश्यकता नहीं होगी।