मैं पहले कुछ बहुत स्पष्ट करना चाहता हूँ।
इसे सेव कर लीजिए :)
मैं डेवलपर नहीं हूँ। मैं कभी डेवलपर नहीं रहा। मेरे पास कंप्यूटर साइंस की डिग्री नहीं है। मैंने कोई कोडिंग बूटकैंप नहीं लिया। मैं ज़्यादातर कोड पढ़कर यह नहीं बता सकता कि वह क्या करता है।
लेकिन पिछले सप्ताहांत मैंने एक वर्किंग वेब एप्लिकेशन इंटरनेट पर लाइव किया। असली यूज़र्स ने साइन अप किया। असली डेटा स्टोर हुआ। असली फीचर्स ने काम किया।
मैंने पूरी चीज़ सिर्फ दो दिनों में Claude Code से बनाई। और मैं आपको बताने जा रहा हूँ कि वह अनुभव वास्तव में कैसा था। संपादित संस्करण नहीं। असलीता, जिसमें गड़बड़, झुंझलाहट और सफलता के पल थे।
क्योंकि हर "मैंने AI से ऐप बनाया" की कहानी ऑनलाइन आसान लगती है। यह आसान नहीं है। लेकिन यह बहुत, बहुत संभव है।
शनिवार सुबह: आइडिया
मैं एक सरल टूल बनाना चाहता था। एक कंटेंट कैलेंडर जहाँ आप अपने पोस्ट को प्लेटफॉर्म पर प्लान कर सकें, उन्हें दिनों के बीच ड्रैग कर सकें और पब्लिश्ड मार्क कर सकें। क्रांतिकारी कुछ नहीं। लेकिन कुछ ऐसा जो मुझे अपने वर्कफ़्लो के लिए चाहिए था।
मैंने शनिवार सुबह 9 बजे पहली बार अपने टर्मिनल में Claude Code खोला।
9:15 बजे तक मैं अपनी पहली गलती कर चुका था।
गलती #1: बिना प्लान के शुरू करना
Claude Code के लिए मेरा पहला प्रॉम्प्ट था:
मेरे लिए एक कंटेंट कैलेंडर ऐप बनाओ
Claude ने ढेर सारी फ़ाइलें जनरेट कीं। स्क्रीन पर कुछ दिखा। यह ऐसा दिख रहा था जैसे कोई ऐसा व्यक्ति जिसने कभी कैलेंडर नहीं देखा हो, उसने डिज़ाइन किया हो।
यह वह जगह है जहाँ 90% लोग हार मान जाते हैं। वे एक अस्पष्ट प्रॉम्प्ट टाइप करते हैं, एक अस्पष्ट परिणाम पाते हैं, और निष्कर्ष निकालते हैं कि वाइब कोडिंग काम नहीं करती।
समस्या Claude नहीं थी। समस्या मैं था। मैंने उसे काम करने के लिए कुछ नहीं दिया था।
मुझे क्या करना चाहिए था:
मुझे Plan Mode में शुरू करना चाहिए था। Claude Code में Act Mode से Plan Mode में स्विच करने के लिए Shift + Tab दबाएँ। Plan Mode में, Claude बनाने से पहले सोचता है। वह सवाल पूछता है। वह आर्किटेक्चर मैप करता है। वह आपको दिखाता है कि वह क्या बनाने की योजना बना रहा है।
मैं वापस गया और इसे सही तरीके से किया:
मैं एक कंटेंट कैलेंडर वेब ऐप बनाना चाहता हूँ। कोई भी कोड लिखने से पहले, आइए इसे प्लान करें।
ऐप में ये होना चाहिए:
- सोमवार से रविवार तक 7 कॉलम के साथ एक साप्ताहिक दृश्य
- शीर्षक, प्लेटफ़ॉर्म (Twitter, LinkedIn, Instagram) और स्थिति (draft, scheduled, published) के साथ पोस्ट जोड़ने की क्षमता
- पोस्ट को दिनों के बीच ले जाने के लिए ड्रैग और ड्रॉप
- Tailwind CSS का उपयोग करके सरल, साफ डिज़ाइन
- डेटा स्थानीय डेटाबेस में स्टोर हो ताकि सत्रों के बीच बना रहे
हमें कौन सा टेक स्टैक इस्तेमाल करना चाहिए? फ़ोल्डर संरचना क्या होनी चाहिए? कुछ भी बनाने से पहले मुझे आर्किटेक्चर समझाएँ।
Claude ने एक विस्तृत प्लान दिया। फ्रेमवर्क के लिए Next.js। डेटाबेस के लिए SQLite। स्टाइलिंग के लिए Tailwind। फ़ाइल-दर-फ़ाइल एक साफ फ़ोल्डर संरचना।
सीखा गया सबक: हमेशा Plan Mode में शुरू करें। हमेशा विस्तार से बताएं कि आप क्या चाहते हैं। प्लानिंग के 5 मिनट आपको रीबिल्डिंग के 2 घंटे बचाते हैं।
गलती #2: सब कुछ एक साथ बनाने की कोशिश
प्लानिंग के बाद, मैं उत्साहित हो गया। मैंने Claude से पूरी चीज़ एक बार में बनाने को कहा।
परिणाम गड़बड़ था। कुछ फीचर्स काम कर रहे थे। बाकी आधे-अधूरे थे। ड्रैग और ड्रॉप टूटा हुआ था। डेटाबेस सही से सेव नहीं कर रहा था। मुझे पता नहीं था कि फिक्स कहाँ से शुरू करूँ।
मुझे क्या करना चाहिए था:
एक बार में एक फीचर बनाएँ। यह वाइब कोडिंग का सुनहरा नियम है।
मैंने फिर से शुरू किया और इस क्रम का पालन किया:
सेशन 1: बस मूल पेज लेआउट। सात कॉलम। कोई फीचर नहीं।
सेशन 2: पोस्ट बनाने की क्षमता जोड़ें (सिर्फ एक सरल फॉर्म)।
सेशन 3: सेव किए गए पोस्ट को सही दिन के कॉलम में डिस्प्ले करें।
सेशन 4: ड्रैग और ड्रॉप फंक्शनैलिटी जोड़ें।
सेशन 5: स्थिति फीचर जोड़ें (draft/scheduled/published)।
सेशन 6: इसे अच्छा दिखाएँ।
हर फीचर की अपनी अलग बातचीत थी। नया कॉन्टेक्स्ट। साफ कार्य। साफ परिणाम।
जब मैंने एक बार में एक फीचर बनाया, हर एक पूरी तरह से काम करता था। जब मैंने सब कुछ एक साथ बनाने की कोशिश की, कुछ भी काम नहीं किया।
सीखा गया सबक: प्रति फीचर एक बातचीत। एक ही Claude Code सेशन में कभी भी कई फीचर्स न मिलाएँ।
गलती #3: CLAUDE.md फ़ाइल न बनाना
शनिवार दोपहर तक मेरे पास एक काम करने वाला बेसिक लेआउट था और मैं उत्साहित था। लेकिन मैं बार-बार एक ही समस्या में भाग रहा था:
Claude लगातार अनावश्यक जटिलता जोड़ रहा था। जब मैं सिर्फ एक सरल try-catch चाहता था, तो वह विस्तृत एरर हैंडलिंग सिस्टम बना रहा था। जब मैं सिर्फ एक साफ ट्रांज़िशन चाहता था, तो वह एनिमेशन लाइब्रेरी जोड़ रहा था। जब मैं एक छोटा बदलाव माँगता था, तो वह मेरी पूरी फ़ोल्डर सिस्टम को पुनर्गठित कर देता था।
मैं एक ही चीज़ को बार-बार सुधार रहा था।
तब मुझे CLAUDE.md के बारे में पढ़ना याद आया।
मैंने अपने प्रोजेक्ट रूट में एक फ़ाइल बनाई:
CLAUDE.md
प्रोजेक्ट नियम
- यह एक सरल कंटेंट कैलेंडर है। सब कुछ न्यूनतम रखें।
- App Router के साथ Next.js 14 का उपयोग करें।
- सभी स्टाइलिंग के लिए Tailwind CSS का उपयोग करें। कोई अन्य CSS फ्रेमवर्क नहीं।
- डेटाबेस के लिए Prisma ORM के साथ SQLite का उपयोग करें।
- इसे सरल रखें। कोई अनावश्यक एब्स्ट्रक्शन या डिज़ाइन पैटर्न नहीं।
- जब मैं कहूँ "इसे अच्छा दिखाओ" तो मेरा मतलब है: साफ स्पेसिंग, पढ़ने योग्य फ़ॉन्ट, हल्के hover इफ़ेक्ट, गोल कोने।
- मुझसे पूछे बिना कभी भी नई डिपेंडेंसी न जोड़ें।
- किसी भी मौजूदा कोड को रीफैक्टर करने से पहले पूछें।
कोड स्टाइल
- सरल, पढ़ने योग्य कोड। एक शुरुआतकर्ता को इसे समझने में सक्षम होना चाहिए।
- साफ वेरिएबल नाम। कोई संक्षिप्ताक्षर नहीं।
- केवल गैर-स्पष्ट लॉजिक के लिए टिप्पणियाँ।
इस फ़ाइल को बनाने के बाद, अनुभव नाटकीय रूप से बदल गया। Claude ने ओवर-इंजीनियरिंग बंद कर दी। उसने बेतरतीब लाइब्रेरी जोड़ना बंद कर दिया। उसने उन चीज़ों को पुनर्गठित करना बंद कर दिया जिन्हें मैंने छूने के लिए नहीं कहा था।
हर बार जब Claude ने कुछ ऐसा किया जो मैं नहीं चाहता था, मैंने CLAUDE.md में एक नया नियम जोड़ा। रविवार रात तक इस फ़ाइल में 30+ नियम थे और Claude उन सभी का पूरी तरह से पालन कर रहा था।
सीखा गया सबक: पहले दिन CLAUDE.md बनाएँ। इसे लगातार अपडेट करते रहें। यह Claude Code में सबसे शक्तिशाली टूल है।
गलती #4: स्क्रीनशॉट का उपयोग न करना
शनिवार शाम। ऐप कार्यात्मक रूप से काम करता है लेकिन बदसूरत दिखता है। मैंने यह टाइप किया:
डिज़ाइन को और अधिक आधुनिक और प्रोफेशनल बनाएँ
Claude ने चीज़ें बदल दीं। वे अलग दिखीं। बेहतर नहीं, बस अलग।
मैं विज़ुअल समस्याओं को शब्दों में बयान करने की कोशिश कर रहा था। यह अविश्वसनीय रूप से अकुशल था।
इसके बजाय, मैंने उन वेबसाइटों के स्क्रीनशॉट लेना शुरू कर दिया जिनका डिज़ाइन मुझे पसंद था। मैंने उन्हें सीधे Claude Code में पेस्ट कर दिया:
[एक साफ कैलेंडर UI का स्क्रीनशॉट]
मैं चाहता हूँ कि मेरा कैलेंडर ऐसा दिखे। खास तौर पर:
- बैकग्राउंड के लिए ग्रे का यह सटीक शेड
- हर पोस्ट के लिए ये गोल कार्ड
- तत्वों के बीच यह स्पेसिंग
- जिस तरह से एक्टिव दिन को नीले रंग में हाइलाइट किया गया है
Claude ने डिज़ाइन को लगभग पूरी तरह से मैच कर लिया। पहली बार में।
फिर जब कुछ अजीब लगता था, तो उसका वर्णन करने के बजाय, मैं स्क्रीनशॉट लेता, समस्या क्षेत्र पर गोला बनाता, उसे पेस्ट करता और कहता "यह स्पेसिंग गलत है" या "यह फ़ॉन्ट बहुत छोटा है।"
सीखा गया सबक: विज़ुअल फीडबैक के लिए स्क्रीनशॉट शब्दों से 10 गुना बेहतर हैं। जो देखते हैं उसका वर्णन करने के बजाय हमेशा इमेज पेस्ट करें।
रविवार: सब कुछ एक साथ आया
रविवार सुबह तक मेरे पास एक काम करने वाला ऐप था जिसमें साफ डिज़ाइन, ड्रैग-एंड-ड्रॉप, स्थायी डेटा और एक कार्यशील डेटाबेस था। मैंने पूरी चीज़ बिना ज़्यादातर कोड समझे बना ली थी।
लेकिन यह केवल मेरे लैपटॉप पर मौजूद था। अब डिप्लॉय करने का समय था।
गलती #5: डिप्लॉयमेंट से डरना
डिप्लॉयमेंट भयावह लग रहा था। सर्वर। डोमेन। DNS। कॉन्फ़िगरेशन फ़ाइलें।
मैं लगभग रुक गया। मैंने लगभग तय किया कि "लोकली चलाना काफी है।"
लेकिन मैंने हार नहीं मानी और Claude से पूछा:
मैं इस ऐप को लाइव इंटरनेट पर डिप्लॉय करना चाहता हूँ। मैं Vercel का उपयोग करना चाहता हूँ क्योंकि मैंने सुना है कि यह सबसे आसान है। मुझे सटीक चरण बताएँ।
Claude ने मुझे सात चरण दिए:
- कोड को GitHub पर पुश करें (Claude ने Git सेट करने में मदद की)
- Vercel के लिए साइन अप करें (मुफ्त)
- Vercel को मेरे GitHub रिपो से कनेक्ट करें
- डेटाबेस के लिए एनवायरनमेंट वेरिएबल सेट करें
- डिप्लॉय पर क्लिक करें
- 90 सेकंड प्रतीक्षा करें
- मेरा लाइव URL प्राप्त करें
मैंने चरणों का पालन किया। तीन मिनट बाद मेरा ऐप लाइव था। मैंने पाँच लोगों को URL भेजा। उन्होंने इसे खोला। यह काम कर गया।
सीखा गया सबक: डिप्लॉयमेंट डरावना नहीं है। यह सिर्फ एक चेकलिस्ट है। Claude हर कदम पर आपका मार्गदर्शन करेगा।
12 नियम जो मैं चाहता हूँ कि मैं शुरू करने से पहले जानता
दो दिनों में मैंने जो कुछ सीखा, वह नियमों में समाहित:
नियम 1: हर बार Plan Mode में शुरू करें। Shift + Tab। बनाने से पहले सोचें।
नियम 2: प्रति फीचर एक बातचीत। ताजा कॉन्टेक्स्ट बेहतर कॉन्टेक्स्ट है।
नियम 3: पहले दिन CLAUDE.md बनाएँ। हर सुधार एक स्थायी नियम बन जाता है।
नियम 4: हर विज़ुअल समस्या के लिए स्क्रीनशॉट का उपयोग करें। समस्या पर गोला बनाएँ। सीधे पेस्ट करें।
नियम 5: पहले सबसे सरल संस्करण बनाएँ। सरल संस्करण काम करने के बाद ही जटिलता जोड़ें।
नियम 6: आप जो चाहते हैं उसका विस्तार से वर्णन करें। आपका प्रॉम्प्ट जितना विशिष्ट होगा, आउटपुट उतना ही बेहतर होगा। "एक लॉगिन पेज बनाएँ" बेकार है। "ईमेल और पासवर्ड फ़ील्ड, नीचे 'पासवर्ड भूल गए' लिंक, एक नीला सबमिट बटन और सफलता पर /dashboard पर रीडायरेक्ट के साथ एक लॉगिन पेज बनाएँ" से आपको ठीक वही मिलेगा जो आपने माँगा।
नियम 7: जब बातचीत लंबी हो जाए तो /compact का उपयोग करें। जब कॉन्टेक्स्ट भर जाता है तो Claude की क्वालिटी गिर जाती है।
नियम 8: हर काम करने वाले फीचर के बाद Git में कमिट करें। इसे करने में Claude आपकी मदद कर सकता है। अगर कुछ टूटता है, तो आप वापस रोल कर सकते हैं।
नियम 9: जब कुछ टूटता है, तो एरर मैसेज कॉपी करके Claude में पेस्ट करें। कहें "कुछ भी ठीक करने से पहले मूल कारण का निदान करें।" Claude लगभग हमेशा तुरंत समस्या ढूँढ़ लेता है।
नियम 10: कोड की हर पंक्ति को समझने की कोशिश न करें। समझें कि प्रत्येक फ़ाइल क्या करती है और वे कैसे जुड़ती हैं। Claude को प्रभावी ढंग से निर्देशित करने के लिए यह पर्याप्त है।
नियम 11: जब Claude एक ही चीज़ को बार-बार ठीक करने के चक्कर में फंस जाए, तो रुकें। एक नई बातचीत शुरू करें। केवल प्रासंगिक फ़ाइल और समस्या का स्पष्ट विवरण पेस्ट करें।
नियम 12: इसे परफेक्ट होने से पहले शिप करें। संस्करण एक को सुंदर होने की आवश्यकता नहीं है। उसे काम करने की आवश्यकता है। आप हमेशा संस्करण दो में इसे बेहतर बना सकते हैं।
उस सप्ताहांत के बाद मैंने क्या बनाया
उसे तीन हफ्ते हो गए। तब से मैंने बनाया है:
- लॉगिन और फ़ाइल अपलोड के साथ एक क्लाइंट ऑनबोर्डिंग पोर्टल
- मेरे कंटेंट मेट्रिक्स को ट्रैक करने वाला एक आंतरिक डैशबोर्ड
- फॉर्म से PDF इनवॉइस बनाने वाला एक सरल इनवॉइस जनरेटर
- लिंक को विषय के अनुसार सेव और व्यवस्थित करने वाला एक बुकमार्क मैनेजर
मैं अभी भी ज़्यादातर कोड नहीं पढ़ सकता। मैं अभी भी फ़ाइलों में हो रही 80% चीज़ों को नहीं समझता। लेकिन मैं अपनी इच्छा को इतनी स्पष्टता से बयान कर सकता हूँ कि Claude उसे बना देता है। मैं Claude को एरर दिखाकर डीबग कर सकता हूँ। मैं काम करने वाले उत्पादों को इंटरनेट पर डिप्लॉय कर सकता हूँ।
यही वाइब कोडिंग है। आप प्रोग्रामर नहीं हैं। आप प्रोडक्ट मैनेजर हैं। Claude प्रोग्रामर है। आपका काम यह जानना है कि क्या बनाना है और इसे स्पष्ट रूप से संप्रेषित करना है।
अधिकांश लोग खुद को बताते रहेंगे कि कुछ भी बनाने से पहले उन्हें कोडिंग सीखनी होगी।
जो लोग इस सप्ताहांत अपना टर्मिनल खोलेंगे, उनके पास सोमवार सुबह तक एक काम करने वाला ऐप होगा। मैं जानता हूँ क्योंकि मेरे साथ ठीक यही हुआ।
मुझे फॉलो करें @eng_khairallah1 अधिक AI कोर्स, टूल और वर्कफ़्लो के लिए। हर हफ्ते नई सामग्री।
उम्मीद है यह आपके लिए उपयोगी रहा, खैरुल्लाह ❤️
