Vibe Coding गाइड v1.0: AI-असिस्टेड डेवलपमेंट के लिए एक संपूर्ण मैनुअल

यह दस्तावेज़ एक मार्गदर्शिका है जिसे न केवल अनुभवी कोडर्स बल्कि गैर-कोडर्स को भी 'Vibe Coding' का उपयोग करके ऐप्स/सेवाएं विकसित करने में मदद करने के लिए डिज़ाइन किया गया है। कम कोडिंग अनुभव वाले जूनियर डेवलपर्स और प्लानर भी इन चरणों का पालन करके स्थिर परिणाम प्राप्त कर सकते हैं।

मुख्य सिद्धांत: AI को तुरंत कोड लिखने के लिए कहने के बजाय, डेवलपमेंट शुरू करने से पहले उससे दस्तावेज़ (Design.md, ToDo.md) बनवाना बेहतर है।

0. समग्र प्रवाह सारांश

[1] Concept.md बनाने का अनुरोध करें

↓

[2] Design.md बनाएं (UI/UX संदर्भ दस्तावेज़)

↓

[3] Tech Stack तय करें (नीचे दिए गए निर्णय वृक्ष को देखें)

↓

[4] ToDo.md बनाएं (मॉड्यूल-स्तरीय तकनीकी विशिष्टताएं + विकास योजना)

↓

[5] GitHub रिपॉजिटरी और प्रारंभिक कमिट बनाएं

↓

[6] ऐप विवरण + Design.md + ToDo.md को Claude Code या Grok Build को दें और डेवलपमेंट शुरू करें

↓

[7] दोहराएं: मॉड्यूल के अनुसार कार्यान्वित करें → परीक्षण करें → कमिट/पुश करें

1. Concept.md — एक सरल विचार से शुरू करने के लिए प्रॉम्प्ट

आप जो ऐप या सेवा बनाना चाहते हैं, उसका संक्षेप में 2-3 पंक्तियों में वर्णन करके शुरू करें, जैसे वह आपके दिमाग में आता है, इस रूप में: "मैं कुछ ऐसा बनाना चाहता हूं; कृपया एक Concept.md दस्तावेज़ बनाएं जिसमें इसे लागू करने की प्रक्रियाएं और विधियां विस्तृत हों।"

जनरेट किए गए दस्तावेज़ को डाउनलोड करें और इसे Concept.md के रूप में सेव करें।

2. Design.md — पहले UI/डिज़ाइन संदर्भ दस्तावेज़ बनाना

यदि ऐप में UI है, तो पहले Design.md लिखना अच्छा है। यानी, यदि कोई ऐसी सेवा या ऐप है जिसे आप संदर्भित करना चाहते हैं, या यदि आप पहले से जानते हैं कि UI खुद कैसे डिज़ाइन करना है, तो आप Figma आदि में किए गए डिज़ाइनों की इमेज प्रदान करके अनुरोध कर सकते हैं।

विधि

• एक वास्तव में तैनात वेबसाइट चुनें जो आपको पसंद हो। (उदाहरण के लिए, linear.app, stripe.com, toss.im, आदि)
• Claude या Grok को निर्देश दें: "उस साइट के लेआउट संरचना, रंग पैलेट, टाइपोग्राफी, मार्जिन/स्पेसिंग और कंपोनेंट स्टाइल का विश्लेषण करें और इसे Design.md में व्यवस्थित करें।"

प्रॉम्प्ट उदाहरण

https://linear.app के डिज़ाइन का विश्लेषण करें और एक Design.md दस्तावेज़ लिखें। आपको निम्नलिखित आइटम शामिल करने होंगे: 1. समग्र लेआउट संरचना (Header/Sidebar/Body/Footer प्लेसमेंट) 2. रंग पैलेट (HEX कोड में प्राथमिक, द्वितीयक, पृष्ठभूमि, टेक्स्ट रंग) 3. टाइपोग्राफी (फ़ॉन्ट प्रकार, आकार प्रणाली, वज़न) 4. मार्जिन और स्पेसिंग नियम (स्पेसिंग स्केल) 5. बटन, कार्ड और इनपुट फ़ॉर्म जैसे प्रमुख कंपोनेंट्स के लिए स्टाइल 6. डार्क मोड समर्थन और रंग मैपिंग

टिप्स

• यदि आपमें डिज़ाइन की समझ है, तो चूंकि जनरेट किया गया Design.md कंटेंट सभी प्राकृतिक भाषा में वर्णित है, आप इसे पढ़ सकते हैं और सीधे संशोधित/परिष्कृत कर सकते हैं जिस दिशा में आप चाहते हैं। यह दस्तावेज़ बाद के सभी UI कार्यान्वयन के लिए मानक बन जाता है।
• यदि आप सिर्फ कहते हैं "इसे इस साइट जैसा बनाओ," तो परिणाम हर बार अलग होंगे। स्थिरता बनाए रखने के लिए आपको इसे एक दस्तावेज़ के साथ फिक्स करना होगा।

2. Tech Stack निर्णय अनुशंसा वृक्ष

आप जिस प्रकार की सेवा बनाने का प्रयास कर रहे हैं, उसके आधार पर पहले स्टैक तय करें।

सामान्य सर्वर (बैकएंड) सिद्धांत

• इसे किसी भी स्थानीय वातावरण में CLI से सीधे इंस्टॉल और चलाना संभव होना चाहिए।
• भाषा/रनटाइम Node.js या Python होनी चाहिए।
• पैकेज/निष्पादन वातावरण के लिए सभी OS पर स्थिर तैनाती और समर्थन के लिए सत्यापित टूल का उपयोग करें:
• Python → uv
• Node.js → npm

डेटाबेस चयन मानदंड

विस्तृत प्रॉम्प्ट निर्देश (यदि आपके पास डेवलपमेंट ज्ञान है)

यह प्रोजेक्ट एक वेब ऐप है। फ्रंटएंड को React के साथ कॉन्फ़िगर करें, और इसे स्थानीय रूप से npm run dev के साथ तुरंत परीक्षण करने में सक्षम होना चाहिए, जिसमें स्थिर तैनाती की अनुमति देने वाली संरचना हो। बैकएंड को Node.js के साथ कॉन्फ़िगर करें, और चूंकि एक रिलेशनल DB की आवश्यकता है, MariaDB का उपयोग करें। एक सेटअप स्क्रिप्ट शामिल करें जिसे स्थानीय डेवलपमेंट वातावरण में CLI के माध्यम से सीधे इंस्टॉल/चलाया जा सके। इस कंटेंट और Concept.md दस्तावेज़ की जांच करके विस्तृत तकनीकी कार्यान्वयन के लिए एक ToDo.md दस्तावेज़ लिखें।

• इस प्रॉम्प्ट के साथ Concept.md दस्तावेज़ संलग्न करके या Concept.md दस्तावेज़ की सामग्री को कॉपी और पेस्ट करके आगे बढ़ें।

लेकिन क्या होगा अगर मैं एक गैर-डेवलपर हूं जो उपरोक्त नहीं जानता?

बस इस तरह एकीकृत निर्देश दें:

मुझे यकीन नहीं है कि इस प्रोजेक्ट को कैसे चलाया जाए, इसलिए कृपया एक तरीका सुझाएं। सिफारिश करें कि क्या वेब ऐप बेहतर है, क्या OS इंस्टॉलेशन विधि डेवलपमेंट के दौरान जांचना आसान है, या क्या मोबाइल ऐप के रूप में बनाना बेहतर है। यदि इसे वेब ब्राउज़र में दिखाया जा सकता है, तो फ्रंटएंड को React के साथ कॉन्फ़िगर करें; यदि इसे मोबाइल ऐप के रूप में प्रस्तुत करने की आवश्यकता है, तो फ्रंटएंड को Flutter के साथ कॉन्फ़िगर करें। यदि यह एक ऐसी विधि है जिसे स्थानीय रूप से इंस्टॉल करने की आवश्यकता है, तो इसे npm या uv का उपयोग करके कॉन्फ़िगर करें, जिसे CLI के माध्यम से आसानी से तैनात और इंस्टॉल किया जा सके। एक ऐसी संरचना स्थापित करें जो स्थिर तैनाती की अनुमति दे। मुझे यकीन नहीं है कि बैकएंड की आवश्यकता है या नहीं, लेकिन Node.js या तैनाती/इंस्टॉलेशन के लिए एक स्थिर संरचना स्थापित करें। यदि DB की आवश्यकता है, तो यदि रिलेशनल की आवश्यकता है तो MariaDB का उपयोग करें, और यदि यह सिर्फ एक की-वैल्यू DB है, तो डेवलपमेंट के लिए स्थानीय रूप से AWS DynamoDB का उपयोग करें और इसे AWS पर आसान तैनाती के लिए कॉन्फ़िगर करें। यदि यह एक ऐसा प्रारूप है जिसे स्थानीय डेवलपमेंट वातावरण में CLI के माध्यम से सीधे इंस्टॉल/चलाया जा सकता है, तो सभी सेटअप स्क्रिप्ट शामिल करें। ऐसे विस्तृत तकनीकी स्टैक की सिफारिश करें, इस कंटेंट और Concept.md दस्तावेज़ की जांच करें, और विस्तृत तकनीकी कार्यान्वयन के लिए एक ToDo.md दस्तावेज़ लिखें।

3. एडमिन डैशबोर्ड — यदि सर्वर है तो आवश्यक

आपको नहीं पता होगा कि यह सर्वर वाली सेवा है या नहीं, लेकिन आमतौर पर इसे बनाना अच्छा होता है ताकि डेवलपर व्यक्तिगत रूप से पूरे ऐप की परिचालन स्थिति और प्रगति को समझ सके।

• सर्वर वाले प्रोजेक्ट्स में डिफ़ॉल्ट रूप से एडमिन डैशबोर्ड का कार्यान्वयन शामिल होना चाहिए।
• डैशबोर्ड में शामिल करने के लिए न्यूनतम आइटम:
• सर्वर हेल्थ चेक
• मुख्य डेटा स्थिति (सब्सक्राइबर्स की संख्या, प्रोसेस किए गए मामलों की संख्या आदि जैसे मुख्य मीट्रिक)
• हाल की त्रुटियां/लॉग
• प्रमुख कार्यों की प्रोसेसिंग प्रगति (बैच, क्यू आदि)

प्रॉम्प्ट उदाहरण

यदि इस सेवा में एक सर्वर शामिल है, तो डेवलपमेंट प्लान में एक एडमिन डैशबोर्ड शामिल करें। डैशबोर्ड को सर्वर स्थिति, मुख्य मीट्रिक और हाल के लॉग/त्रुटियों की जांच करने की अनुमति देनी चाहिए। डिफ़ॉल्ट एडमिन अकाउंट को 'admin' और पासवर्ड '12345' पर सेट करें, और एडमिन डैशबोर्ड में पासवर्ड बदलने की क्षमता शामिल करें। ToDo.md की जांच करें और यदि आवश्यक समझा जाए तो इसे डेवलपमेंट प्लान में शामिल करें।

4. ToDo.md को अंतिम रूप देना — मॉड्यूल-स्तरीय विकास योजना

प्रोग्रामिंग का आधार मॉड्यूलरीकरण है। यदि आप कोड लिखने से पहले ToDo.md में मॉड्यूल में उप-विभाजित करने के लिए सामग्री जोड़ते हैं, तो भविष्य के रखरखाव के लिए एक अच्छा आर्किटेक्चर बनाया जा सकता है।

प्रॉम्प्ट उदाहरण

ToDo.md दस्तावेज़ की जांच करें और सत्यापित करें कि क्या यह नीचे दिए गए गाइड के अनुसार अच्छी तरह से लिखा गया है, और किसी भी कमी वाले भागों को संशोधित/पूरक करें। ToDo.md आवश्यकताएं: 1. पूरे सिस्टम को ऑब्जेक्ट-ओरिएंटेड डिज़ाइन के साथ मॉड्यूलराइज़ करने के लिए डिज़ाइन करें। 2. अधिकतम एनकैप्सुलेशन सुनिश्चित करने के लिए प्रत्येक मॉड्यूल की भूमिका, इनपुट/आउटपुट और डेटा संरचना को स्पष्ट रूप से निर्दिष्ट करें। 3. एक चेकबॉक्स सूची के रूप में एक कार्यान्वयन अनुक्रम बनाएं (बिना निर्भरता वाले मॉड्यूल से शुरू करके)। 4. DB स्कीमा डिज़ाइन शामिल करें। 5. वर्णन करें कि गैर-तकनीकी लोग कब और कैसे आसानी से परीक्षण कर सकते हैं।

पूर्ण ToDo.md में सत्यापित करने योग्य आइटम:

1. प्रोजेक्ट अवलोकन (एक पैराग्राफ)
2. पुष्टि किया गया Tech Stack (चरण 2 में निर्णय वृक्ष का परिणाम)
3. मॉड्यूल सूची और प्रत्येक मॉड्यूल के लिए विस्तृत तकनीकी विशिष्टताएं (गैर-तकनीकी लोगों को यह समझना मुश्किल हो सकता है)
4. मॉड्यूल का नाम और भूमिका
5. इनपुट/आउटपुट (API एंडपॉइंट और अनुरोध/प्रतिक्रिया प्रारूप)
6. उपयोग की गई डेटा संरचना / DB तालिका (या संग्रह) डिज़ाइन
7. अन्य मॉड्यूल के साथ निर्भरता संबंध
8. कार्यान्वयन अनुक्रम (चेकबॉक्स रूप में, निर्भरता के क्रम में)
9. जांचें कि क्या प्रत्येक परीक्षण विधि मेरी समझ के स्तर पर लिखी गई है।

महत्वपूर्ण

• आपको जनरेट किए गए ToDo.md को स्वयं पढ़ने और समीक्षा करने की आवश्यकता नहीं है। जबकि ऐसा लगता है कि यदि आप पूरी तरह से तैयारी करते हैं तो चीजें अच्छी होंगी, Vibe Coding का मूल एक परिणाम पहले बनाने और फिर धीरे-धीरे संशोधित करके वह प्राप्त करने की प्रक्रिया है जो आप चाहते हैं—यह सबसे मूल्यवान और मजेदार हिस्सा है।

अभ्यास भाग: पर्यावरण सेटअप → GitHub → Claude Code डेवलपमेंट शुरू करना

पहली बार डेवलपमेंट टूल इंस्टॉल करने वालों के लिए भी अनुसरण करने योग्य लिखा गया है।

• फिर भी, यदि यह बहुत जटिल लगता है और आप नहीं जानते कि आपको इसका उपयोग क्यों करना चाहिए और आप बोरियत से मर रहे हैं, तो कृपया पहले नीचे दिए गए लिंक पर एक मुफ्त व्याख्यान सुनें।

https://nomadcoders.co/git-for-beginners

5. डेवलपमेंट एनवायरनमेंट तैयार करना (केवल 2 चीजें इंस्टॉल करें)

हम दो चीजें इंस्टॉल करेंगे।

और आपको एक GitHub अकाउंट चाहिए। https://github.com पर मुफ्त में साइन अप करें (ईमेल सत्यापन पूरा करें)। Claude Code या Grok Build का उपयोग करने के लिए Claude पेड प्लान (Pro/Max/Team) या Grok पेड अकाउंट की आवश्यकता होती है।

5-1. 🪟 विंडोज उपयोगकर्ता इंस्टॉलेशन चरण

① Git इंस्टॉल करें

1. अपने ब्राउज़र में https://git-scm.com/download/win पर जाएं → डाउनलोड अपने आप शुरू हो जाता है।
2. डाउनलोड किए गए इंस्टॉलर को चलाएं।
3. कई इंस्टॉलेशन विकल्प दिखाई देते हैं; सभी डिफ़ॉल्ट मानों के साथ बस "Next" पर क्लिक करते रहें।
4. हालांकि, जब "Choosing the default editor" स्क्रीन दिखाई देती है, तो "Use Visual Studio Code as Git's default editor" चुनना अच्छा है (यदि आपने अभी तक VS Code इंस्टॉल नहीं किया है, तो डिफ़ॉल्ट ठीक है)।
5. इंस्टॉलेशन सत्यापित करें: स्टार्ट मेनू से PowerShell चलाएं और टाइप करें:

git --version

→ यदि git version 2.xx.x जैसा कोई वर्जन दिखाई देता है, तो यह सफल है। यदि नहीं, तो PowerShell को बंद करके फिर से खोलने का प्रयास करें।

② VS Code इंस्टॉल करें

1. https://code.visualstudio.com पर जाएं → Download for Windows पर क्लिक करें।
2. इंस्टॉलर चलाएं → "Next" पर क्लिक करते रहें। हालांकि, विकल्प स्क्रीन पर इन दो को चेक करें:
3. "Add to PATH"
4. "Add 'Open with Code' action to file/directory context menus"
5. इंस्टॉलेशन के बाद VS Code चलाएं। यदि पहली स्क्रीन पर कोरियाई भाषा पैक इंस्टॉलेशन अधिसूचना दिखाई देती है, तो आप इसे इंस्टॉल कर सकते हैं।

5-2. 🍎 मैक उपयोगकर्ता इंस्टॉलेशन चरण

① Git इंस्टॉल करें

1. टर्मिनल खोलें: Cmd + Space → "Terminal" टाइप करें → Enter दबाएं।
2. टाइप करें:

git --version

1. यदि वर्जन तुरंत दिखाई देता है, तो यह पहले से इंस्टॉल है → ② पर जाएं। यदि कोई इंस्टॉलेशन गाइड पॉपअप ("Command Line Developer Tools...") दिखाई देता है, तो "Install" पर क्लिक करें और प्रतीक्षा करें। (यह Git इंस्टॉलेशन है)।
2. पूरा होने के बाद git --version के साथ फिर से सत्यापित करें।

② VS Code इंस्टॉल करें

1. https://code.visualstudio.com पर जाएं → Download for macOS पर क्लिक करें।
2. डाउनलोड की गई फ़ाइल को अनज़िप करें और Visual Studio Code.app को Applications फ़ोल्डर में खींचें। (महत्वपूर्ण! इसे सीधे Downloads फ़ोल्डर से उपयोग न करें)।
3. Applications से VS Code चलाएं।

5-3. (सामान्य) Git में अपना नाम पंजीकृत करना — केवल पहली बार

यह सेटिंग कमिट में "किसने काम किया" का रिकॉर्ड छोड़ने के लिए है। PowerShell (Windows) या टर्मिनल (Mac) में:

git config --global user.name "आपका नाम" git config --global user.email "आपका-github-ईमेल@example.com"

वही ईमेल दर्ज करें जिसका उपयोग आपने GitHub के लिए साइन अप करते समय किया था।

6. GitHub रिपॉजिटरी बनाना और VS Code के साथ अपने PC से कनेक्ट करना

"रिपॉजिटरी" को एक क्लाउड फ़ोल्डर के रूप में सोचें जो एक प्रोजेक्ट रखता है। प्रवाह है: GitHub वेबसाइट पर एक खाली रिपॉजिटरी बनाएं → VS Code के साथ इसे अपने PC पर क्लोन करें → प्लानिंग दस्तावेज़ अपलोड करें → उस रिपॉजिटरी को Claude Code वेब से कनेक्ट करें।

6-1. GitHub वेबसाइट पर रिपॉजिटरी बनाना

1. https://github.com में लॉग इन करें।
2. ऊपर दाईं ओर + बटन → New repository पर क्लिक करें।
3. इस प्रकार दर्ज करें:
4. Repository name: प्रोजेक्ट का नाम (अंग्रेजी में, रिक्त स्थान के बजाय हाइफ़न। उदाहरण के लिए, my-first-app)
5. Private चुनें (कंपनी प्रोजेक्ट Private होने चाहिए!)
6. "Add a README file" चेकबॉक्स को चेक करें ✅ ← शुरुआती लोगों को यह जांचना चाहिए। यह अगले चरण (क्लोन) को सरल बनाता है।
7. Create repository पर क्लिक करें।
8. बनाई गई रिपॉजिटरी पेज पर, हरे <> Code बटन पर क्लिक करें → HTTPS टैब में पते को कॉपी करें।

6-2. VS Code के साथ अपने PC पर क्लोन करना

1. VS Code चलाएं।
2. Ctrl + Shift + P (Mac पर Cmd + Shift + P) → कमांड पैलेट खुलता है।
3. clone टाइप करें → "Git: Clone" चुनें।
4. कॉपी किया गया रिपॉजिटरी पता पेस्ट करें और Enter दबाएं।
5. आप "Clone from GitHub" भी चुन सकते हैं → यदि ब्राउज़र खुलता है और GitHub लॉगिन/प्राधिकरण के लिए पूछता है, तो इसे स्वीकार करें। (केवल पहली बार)।
6. प्रोजेक्ट को सेव करने के लिए एक स्थान चुनें (उदाहरण के लिए, Documents/Projects फ़ोल्डर बनाना अच्छा है)।
7. जब क्लोनिंग समाप्त हो जाती है, तो नीचे दाईं ओर एक "Open" अधिसूचना दिखाई देती है → उस पर क्लिक करें।
8. यदि आप बाईं ओर फ़ाइल एक्सप्लोरर में README.md देखते हैं, तो सफलता! 🎉 यह फ़ोल्डर अब मेरे PC और GitHub के बीच जुड़ा कार्य फ़ोल्डर है।

6-3. प्लानिंग दस्तावेज़ अपलोड करना — Concept.md, Design.md, ToDo.md

Claude Code वेब रिपॉजिटरी के अंदर फ़ाइलों को पढ़ सकता है। इसलिए, रिपॉजिटरी में प्लानिंग दस्तावेज़ डालना "दस्तावेज़ अपलोड करने" के समान है।

1. VS Code फ़ाइल एक्सप्लोरर में एक खाली जगह पर राइट-क्लिक करें → New File → नाम Concept.md दर्ज करें।
2. आपके द्वारा तैयार किया गया ऐप विवरण पेस्ट करें और सेव करें (Ctrl+S / Cmd+S)।
3. उसी तरह Design.md (यदि UI है) और ToDo.md फ़ाइलें बनाएं और डालें।
4. अब GitHub पर अपलोड करें (कमिट और पुश) — 6-4 में विधि का उपयोग करके।

6-4. VS Code में कमिट और पुश करना — केवल माउस से

1. जब आप कोई फ़ाइल सेव करते हैं, तो VS Code के बाईं ओर शाखा के आकार के आइकन (Source Control) पर एक नंबर बैज दिखाई देता है।
2. उस आइकन पर क्लिक करें → आपको बदली गई फ़ाइलों की एक सूची दिखाई देगी।
3. शीर्ष पर संदेश इनपुट बॉक्स में, आपने जो किया उसके बारे में एक पंक्ति लिखें। (उदाहरण के लिए, प्लानिंग दस्तावेज़ जोड़े गए)।
4. ✔ Commit बटन पर क्लिक करें → मेरे PC पर सेव पूरा हुआ।
5. यदि "There are no staged changes" पॉपअप दिखाई देता है, तो सब कुछ कमिट करने के लिए "Yes" पर क्लिक करें।
6. फिर Sync Changes बटन पर क्लिक करें → GitHub पर अपलोड (पुश) पूरा हुआ।
7. आपके द्वारा अभी अपलोड किए गए Concept.md को देखने के लिए GitHub वेबसाइट पर रिपॉजिटरी को रिफ्रेश करें। अब Claude Code वेब भी इस दस्तावेज़ को पढ़ सकता है।

पुलिंग (डाउनलोड करना) भी उसी स्क्रीन पर किया जाता है: यदि Claude ने क्लाउड में अपलोड किए गए परिवर्तन हैं, तो Sync Changes बटन डाउनलोड और अपलोड दोनों को संभालेगा।

7. रिपॉजिटरी को Claude Code वेब से कनेक्ट करना और डेवलपमेंट शुरू करना

अब अपने ब्राउज़र में Claude Code वेब खोलें और आपके द्वारा अभी बनाई गई GitHub रिपॉजिटरी को कनेक्ट करें।

7-1. Claude Code वेब ↔ GitHub रिपॉजिटरी कनेक्ट करना (केवल पहली बार)

1. https://claude.ai/code पर पहुंचें → अपने Claude अकाउंट से लॉग इन करें।
2. जब आप पहली बार पहुंचते हैं, तो एक Connect GitHub गाइड दिखाई देता है → गाइड का पालन करें।
3. आपको GitHub पेज पर ले जाया जाएगा, और Claude GitHub App इंस्टॉलेशन स्क्रीन दिखाई देगी:
4. अपना GitHub अकाउंट (या संगठन) चुनें।
5. एक्सेस रेंज चुनें: "Only select repositories" चुनने और 6-1 में बनाई गई रिपॉजिटरी निर्दिष्ट करने की अनुशंसा की जाती है।
6. Install / Authorize पर क्लिक करें।
7. Claude पर लौटने पर कनेक्शन पूरा हो जाता है। यदि Environment सेटिंग्स स्क्रीन दिखाई देती है, तो इसे Default पर छोड़ दें।
8. एक नया सत्र (कार्य) शुरू करते समय, रिपॉजिटरी चयन सूची से अपनी रिपॉजिटरी चुनें, एक प्रॉम्प्ट दर्ज करें, और कार्य शुरू होता है।

7-2. समझना कि Claude Code और Grok Build वेब कैसे काम करते हैं (महत्वपूर्ण!)

Claude Code और Grok Build वेब मेरे PC पर नहीं, बल्कि क्लाउड में एक वर्चुअल कंप्यूटर पर काम करते हैं। प्रवाह है:

① मैं एक प्रॉम्प्ट दर्ज करता हूं

↓

② Claude Code/Grok Build क्लाउड में मेरी रिपॉजिटरी को क्लोन करता है और कोड लिखता है

↓

③ परिणाम को GitHub पर "नई टास्क ब्रांच" के रूप में पुश करता है

↓

④ मैं परीक्षण करने के लिए उस ब्रांच को अपने PC पर पुल करता हूं, या GitHub पर Pull Request के माध्यम से परिवर्तनों की जांच करता हूं

↓

⑤ यदि मुझे यह पसंद है, तो main में मर्ज करें।

• चूंकि यह हमेशा मुख्य ब्रांच को सीधे छुए बिना एक नई ब्रांच पर परिणाम अपलोड करता है, मौजूदा कोड के टूटने की कोई चिंता नहीं है। (Grok Build मुख्य ब्रांच पर काम करता है लेकिन इसे पूर्ववत किया जा सकता है, इसलिए गलतियों के बारे में चिंता न करें)।

7-4. डेवलपमेंट शुरू करने का प्रॉम्प्ट

एक बार main में तीन दस्तावेज़ (Concept.md / Design.md / ToDo.md) तैयार हो जाने के बाद, अंत में एक नए सत्र में डेवलपमेंट शुरू करें।

इस प्रोजेक्ट को विकसित करें। रिपॉजिटरी में निम्नलिखित दस्तावेज़ों के आधार पर आगे बढ़ें: - Concept.md: बनाए जाने वाले ऐप का विवरण - ToDo.md: मॉड्यूल-स्तरीय विकास योजना (इस क्रम में कार्यान्वित करें) - Design.md: डिज़ाइन मानक (सभी UI इस दस्तावेज़ का पालन करते हैं)

कार्य नियम: 1. ToDo.md में कार्यान्वयन क्रम के अनुसार एक बार में एक मॉड्यूल पर आगे बढ़ें। 2. जब एक परीक्षण योग्य इकाई पूरी हो जाए, तो मुझे बताएं कि इसे README या प्रतिक्रिया के माध्यम से अपने स्थानीय PC पर कैसे चलाना/परीक्षण करना है। चूंकि मैं एक गैर-डेवलपर हूं, इसे अच्छी तरह से समझाएं जैसे किसी शुरुआती को सिखा रहे हों। 3. ToDo.md में पूर्ण किए गए आइटम को चेकमार्क से चिह्नित करें। 4. मुझे टास्क ब्रांच का नाम बताएं और एक याद रखने में आसान कमिट संदेश के साथ पुश करें। 5. यदि अस्पष्ट भाग हैं, तो अनुमान न लगाएं; मुझसे पूछें।

7-5. डेवलपमेंट के दौरान दोहराया जाने वाला चक्र

① वेब Claude Code एक टास्क ब्रांच में एक मॉड्यूल लागू करता है → पुश करता है

↓

② उस टास्क ब्रांच को अपने PC (VS Code) पर पुल करें और सीधे चलाएं/परीक्षण करें

↓

③ यदि कोई समस्या है → पूरा एरर मैसेज कॉपी करें और वेब सत्र में पेस्ट करें

यदि कोई समस्या नहीं है → "अच्छा है, अगले डेवलपमेंट के साथ जारी रखें"

↓

अगले मॉड्यूल के लिए ① पर लौटें

↓

④ एक बार सभी सुविधाएं पूरी हो जाएं और परीक्षण पास हो जाएं

→ Pull Request के माध्यम से main ब्रांच में मर्ज करें

→ तैनाती हमेशा main पर आधारित होती है

8. ब्रांच — टास्क ब्रांच में परीक्षण करना और तैनाती के लिए main में मर्ज करना

8-1. ब्रांच क्या है?

• main ब्रांच = तैयार उत्पाद प्रदर्शन जो हमेशा अच्छी तरह से काम करता है। तैनाती हमेशा main पर आधारित होती है।
• टास्क ब्रांच (उदाहरण के लिए, claude/feature-login) = main की कॉपी करके बनाई गई निर्माण स्थल। आप यहां जितना चाहें बना और तोड़ सकते हैं; main सुरक्षित है।

Claude Code वेब हमेशा एक नई टास्क ब्रांच बनाता है और परिणाम पुश करता है। इसलिए, आपको बस तीन चीजें जानने की जरूरत है:

1. कैसे जांचें कि मेरा फ़ोल्डर वर्तमान में किस ब्रांच पर है।
2. Claude द्वारा पुश की गई टास्क ब्रांच को परीक्षण के लिए अपने PC पर कैसे पुल करें।
3. समाप्त होने पर main में कैसे मर्ज करें और तैनात करें।

8-2. जांचना कि आप किस ब्रांच पर हैं

• VS Code स्क्रीन के सबसे नीचे बाईं ओर स्टेटस बार देखें। ब्रांच आइकन के बगल में ब्रांच का नाम प्रदर्शित होता है। (उदाहरण के लिए, main या claude/feature-login)।

8-3. Claude Code/Grok Build द्वारा बनाई गई टास्क ब्रांच को परीक्षण के लिए अपने PC पर पुल करना

जब वेब Claude Code कहता है "मैंने ब्रांच OO पर पुश किया," तो परीक्षण करने के लिए उस ब्रांच को अपने PC पर लाएं। Grok Build में वेब स्क्रीन के ऊपर दाईं ओर एक 'Push to Github' बटन होता है, इसलिए पुश करने के लिए इस बटन को दबाएं।

VS Code के साथ (केवल माउस से):

1. नीचे बाईं ओर ब्रांच नाम पर क्लिक करें → ब्रांच सूची खुलती है।
2. यदि नई ब्रांच दिखाई नहीं दे रही है, तो Source Control टैब में ... मेनू → Fetch चलाएं और फिर से प्रयास करें।
3. सूची से origin/claude/... से शुरू होने वाली Claude की टास्क ब्रांच चुनें → आपका फ़ोल्डर उस ब्रांच की स्थिति में बदल जाता है।

8-4. समाप्त होने पर main में मर्ज करना — Pull Request

यदि टास्क ब्रांच में सुविधाएं पूरी हो जाती हैं और परीक्षण पास हो जाते हैं, तो GitHub वेबसाइट पर Pull Request (PR) के माध्यम से main में मर्ज करें।

1. GitHub पर अपनी रिपॉजिटरी तक पहुंचें → Pull requests टैब पर क्लिक करें।
2. Claude द्वारा बनाए गए PR पर क्लिक करें। यदि कोई नहीं है, तो New pull request → base: main, compare: टास्क ब्रांच चुनें → Create pull request पर क्लिक करें।
3. Merge pull request → Confirm merge पर क्लिक करें → main में परिलक्षित!
4. अपने PC के main को नवीनतम में अपडेट करें:
5. VS Code के नीचे बाईं ओर ब्रांच पर क्लिक करें → main चुनें → Source Control टैब में Sync Changes पर क्लिक करें।

9. प्रॉम्प्टिंग टिप्स (सामान्य)

Vibe Coding की गुणवत्ता प्रॉम्प्ट की गुणवत्ता के समानुपाती होती है।

1. क्या नहीं करना है यह निर्दिष्ट करें — "जब तक मैं स्वीकृति न दूं, तब तक कोड को मनमाने ढंग से संशोधित न करें," "लाइब्रेरी न जोड़ें, केवल मौजूदा स्टैक का उपयोग करें।"
2. एक बार में एक मॉड्यूल — यदि आप एक प्रॉम्प्ट में पूरे ऐप के लिए पूछते हैं तो गुणवत्ता गिर जाती है। ToDo.md क्रम के अनुसार छोटे भागों में पूछें।
3. त्रुटियों को ज्यों का त्यों पेस्ट करें — एरर मैसेज को संक्षेप में न बताएं; पूरा टर्मिनल आउटपुट कॉपी करें।
4. Claude को अस्पष्ट होने पर पूछने दें — प्रॉम्प्ट में "यदि अस्पष्ट भाग हैं, तो अनुमान न लगाएं; मुझसे पूछें" शामिल करें।
5. दस्तावेज़ों के आधार पर संवाद करें — "जैसा मैंने पहले कहा था" ❌ → "Design.md डिज़ाइन के अनुसार" ✅. रिपॉजिटरी में दस्तावेज़ बातचीत की मेमोरी की तुलना में बहुत अधिक स्थिर होते हैं।

समाप्त।

जैसा कि प्राचीन मॉर्फियस ने कहा था:

"नीओ। मैं तुम्हें केवल दरवाजा दिखा सकता हूं। तुम्हें ही उसमें से गुजरना होगा।"