2.3 Multimodal Image Context

🎯 Objective (इस लेसन का मक़सद)

इस लेसन को पूरा करने के बाद आप:

• Claude Code टर्मिनल में स्क्रीनशॉट और UI डिज़ाइन को प्रॉम्प्ट के साथ जोड़ सकेंगे।
• Figma डिज़ाइन या स्क्रीनशॉट देखकर React/Tailwind/HTML कंपोनेंट्स बनवा सकेंगे।
• स्क्रीन पर दिखने वाले विजुअल बग्स (जैसे लेआउट कटना) को इमेज दिखाकर तुरंत ठीक करवा सकेंगे।

💡 Real-Life Analogy (आसान मिसाल)

मिसाल (घर का नक्शा vs फोन पर समझाना):
अगर आप किसी मिस्त्री को फोन पर समझाएं कि “सोफा यहाँ रखो और टीवी वहाँ”, तो वह गलती कर सकता है। लेकिन अगर आप उसे कमरे के डिज़ाइन की फोटो (स्क्रीनशॉट) दिखा दें, तो वह बिना किसी कन्फ्यूजन के बिल्कुल वैसा ही सेट कर देगा।
Claude Code में Image Context बिल्कुल यही काम करता है!

📖 Key Terms & Glossary (ज़रूरी शब्द)

🖼️ टर्मिनल में इमेज कैसे जोड़ें?

Claude Code में इमेज अटैच करने के 2 आसान तरीके हैं:

तरीका 1: Drag & Drop
[ इमेज फाइल (.png/.jpg) ] ───(माउस से ड्रैग करें)───> [ Claude Code Terminal ]

तरीका 2: फाइल पाथ लिखना
> "यह डिज़ाइन देखो: ./mockups/dashboard.png और इसका React Tailwind कंपोनेंट बनाओ"

1. तरीका 1 (Drag & Drop):
   अपने डेस्कटॉप से इमेज फाइल को टर्मिनल के अंदर खींचकर छोड़ दें। टर्मिनल खुद उसका पाथ लिख देगा।

2. तरीका 2 (सीधा पाथ):
   इमेज को प्रोजेक्ट फोल्डर में रखें और प्रॉम्प्ट में उसका पाथ लिख दें (जैसे assets/login-ui.png)।

💻 काम के प्रॉम्प्ट्स (Real Use Cases)

1. Figma डिज़ाइन से React कंपोनेंट बनवाना

> "मैं एक इमेज अटैच कर रहा हूँ (./designs/pricing-card.png)। 
इस डिज़ाइन को देखो और Tailwind CSS के साथ एक responsive React component बनाओ। 
मंथली और इयरली टॉगल बटन भी बनाना।"

Claude Code इमेज देखकर:

• सही कलर्स, पैडिंग और फॉन्ट साइज पहचान लेगा।
• मोबाइल और डेस्कटॉप दोनों के लिए रिस्पॉन्सिव लेआउट बनाएगा।
• कोड src/components/PricingCard.jsx में सेव कर देगा।

2. फ्रंटएंड का विजुअल बग ठीक करना

> "मोबाइल स्क्रीन पर नेवबार कट रहा है जैसा इस स्क्रीनशॉट में दिख रहा है (./screenshots/bug.png)। 
Navbar.jsx फाइल चेक करो और flex-wrap सही करो।"

⚠️ Common Mistakes & Pro Tips (बचने वाली गलतियाँ)

• ❌ गलती: बहुत भारी 4K इमेज अटैच करना जिससे रिस्पॉन्स स्लो हो जाए।
• ✅ Pro Tip: सिर्फ उसी हिस्से का स्क्रीनशॉट क्रॉप करके दें जिसे बनवाना या ठीक करवाना है। इससे टोकन कम लगते हैं और काम 100% सही होता है।

📝 Practice Challenge (खुद करके देखें)

1. किसी अच्छी वेबसाइट के कार्ड का स्क्रीनशॉट लें।
2. Claude Code में कमांड दें: "इस स्क्रीनशॉट का एक साफ Tailwind कार्ड बनाओ"।
3. ब्राउज़र में चलाकर देखें कि कितना सटीक बना है!

📌 Quick Revision Summary (मुख्य बातें)

• Claude Code टर्मिनल में सीधे Images/Screenshots सपोर्ट करता है।
• ड्रैग एंड ड्रॉप या फाइल पाथ देकर आप डिज़ाइन पास कर सकते हैं।
• डिज़ाइन से कोड बनाना और विजुअल बग्स ठीक करना बहुत आसान हो जाता है।

🧭 Next Steps & Navigation

• ⬅️ पिछला Lesson: 2.2 Making Code Changes & Diffs
• ➡️ अगला Module: Module 3: Context Window & CLAUDE.md Memory