शुरुआती लोगों के लिए Vibe Coding: कैसे शुरू करें, स्टेप बाय स्टेप

शुरुआती लोगों के लिए vibe coding पाँच क़दमों में सिमट जाती है: ऐसा टूल चुनें जो ऐप को आपके लिए चलाए, एक छोटे ऐप को सादे शब्दों में बताएँ, उसे यूज़र की तरह आज़माएँ, एक बार में एक सुधार माँगें, और जब चल जाए तो पब्लिश करें। आपको कोडिंग आना ज़रूरी नहीं। इस ट्यूटोरियल में हर क़दम एक असली पहले प्रोजेक्ट के साथ समझाया गया है, साथ में टाइप करने के सटीक प्रॉम्प्ट और वे ग़लतियाँ जो लगभग हर शुरुआती पहले हफ़्ते में करता है।

अगर आप पहले पृष्ठभूमि जानना चाहते हैं, यानी यह शब्द कहाँ से आया और लोग इस पर बहस क्यों करते हैं, तो vibe coding क्या है पढ़ें। यह पेज व्यावहारिक पक्ष के लिए है।

शुरू करने से पहले आपको क्या चाहिए

जितना आप सोचते हैं उससे कम:

• एक ब्राउज़र और एक अकाउंट किसी vibe coding टूल पर। शुरुआती लोगों को AI ऐप बिल्डर चुनना चाहिए, जो कोड लिखता है, उसे चलाता है और होस्ट करता है, न कि ऐसा कोडिंग असिस्टेंट जिसमें फ़ाइलें और सर्वर आपको ख़ुद सँभालने पड़ें।
• एक छोटा आइडिया। आपका स्टार्टअप नहीं। एक व्यक्ति (आप) के लिए एक या दो स्क्रीन वाला टूल।
• एक-दो घंटे बिना रुकावट के। पहला सेशन आपको इसकी लय सिखा देता है।

बस इतना ही। कोई इंस्टॉल नहीं, कोई प्रोग्रामिंग कोर्स नहीं, कोई टर्मिनल नहीं।

शुरुआती के रूप में कौन-सा टूल चुनें

टूल से ज़्यादा आदतें मायने रखती हैं, पर उसे तीन काम करने चाहिए: बनाते समय लाइव प्रीव्यू दिखाना, ग़लत बदलाव को पलटने देना, और ऐसे लिंक पर पब्लिश करना जिसे आप शेयर कर सकें। हमारी सबसे अच्छे vibe coding टूल की तुलना मुख्य विकल्पों को ईमानदारी से कवर करती है। Mythex उनमें से एक है: आप चैट में ऐप बताते हैं, वह लाइव प्रीव्यू के साथ असली फ़ुल-स्टैक ऐप बनाता है, जब ऐप को कुछ याद रखना हो तो डेटाबेस जोड़ता है, और एक क्लिक में पब्लिश करता है। Free प्लान के लिए कार्ड नहीं चाहिए।

स्टेप 1: ऐसा पहला प्रोजेक्ट चुनें जिसे आप पूरा कर सकें

शुरुआती लोग अक्सर बहुत बड़ा निशाना लगाकर फ़ेल होते हैं। अच्छा पहला प्रोजेक्ट:

• आपके अपने काम का हो, ताकि आप उसे ठीक से टेस्ट करें।
• एक या दो स्क्रीन में समा जाए।
• आपके अपने डेटा की थोड़ी मात्रा स्टोर करे।
• उसमें पेमेंट, टीमें और संवेदनशील निजी डेटा न हो।

अच्छे पहले प्रोजेक्ट:

इस ट्यूटोरियल के बाक़ी हिस्से में हम पढ़ने की सूची का इस्तेमाल करेंगे।

स्टेप 2: अपना पहला प्रॉम्प्ट लिखें

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

कमज़ोर पहला प्रॉम्प्ट:

मुझे एक किताब वाला ऐप बना दो।

अच्छा पहला प्रॉम्प्ट:

मेरे लिए पढ़ने की सूची का ऐप बनाओ। मैं शीर्षक, लेखक और स्टेटस (पढ़नी है, पढ़ रहा हूँ, पूरी हुई) के साथ किताब जोड़ सकूँ। किताबें स्टेटस के हिसाब से ग्रुप किए गए कार्ड में दिखाओ, सबसे नई पहले। मैं किताब का स्टेटस बदल सकूँ या उसे डिलीट कर सकूँ। इसे साफ़ और सादा रखो: सफ़ेद बैकग्राउंड, एक एक्सेंट रंग, मेरे फ़ोन पर चले। किताबें सेव करो ताकि रीफ़्रेश के बाद भी रहें।

ध्यान दें कि दूसरा प्रॉम्प्ट क्या करता है। वह फ़ील्ड, क्रियाएँ, लेआउट और एक नियम बताता है जो शुरुआती लोग हमेशा भूल जाते हैं: डेटा सेव करो ताकि रीफ़्रेश के बाद भी रहे। उस पंक्ति के बिना कई टूल ऐसा पेज बना देते हैं जो पूरा दिखता है पर रीलोड करते ही सब भूल जाता है।

और शुरुआती आइडिया के लिए हमारी vibe coding प्रॉम्प्ट चीट शीट देखें।

अनिश्चित हों तो प्लान माँगें

अगर आपको पक्का नहीं पता कि कुछ कैसे बताएँ, तो AI से कहें कि बनाने से पहले प्लान करे:

कुछ भी बनाने से पहले मुझे सादे शब्दों में बताओ कि तुम कौन-सी स्क्रीन बनाओगे, कौन-सा डेटा स्टोर करोगे और मुझे किस चीज़ पर फ़ैसला करना होगा।

Mythex में Plan मोड इसी के लिए है: एजेंट तरीका सामने रखता है और किसी भी फ़ाइल के बदलने से पहले आप उसे मंज़ूर करते हैं।

स्टेप 3: इसे यूज़र की तरह टेस्ट करें, बनाने वाले की तरह नहीं

जब प्रीव्यू दिखे, तो बस तारीफ़ न करें। उसे इस्तेमाल करें:

1. तीन किताबें जोड़ें, जिनमें एक का शीर्षक बहुत लंबा हो।
2. स्टेटस बदलें। क्या कार्ड सही ग्रुप में चला गया?
3. पेज रीफ़्रेश करें। क्या किताबें अब भी हैं?
4. ख़ाली शीर्षक के साथ किताब जोड़ने की कोशिश करें। क्या होता है?
5. प्रीव्यू अपने फ़ोन पर खोलें, या ब्राउज़र विंडो को संकरा करें।

जो ग़लत है उसे सादे शब्दों में लिख लें। "लंबा शीर्षक कार्ड का लेआउट तोड़ देता है" एक बढ़िया बग रिपोर्ट है। "यह टूट गया" नहीं है।

स्टेप 4: एक संदेश में एक ही चीज़ ठीक करें

यही आदत उन लोगों को अलग करती है जो पूरा करते हैं और जो छोड़ देते हैं। एक बदलाव भेजें, जाँचें, फिर अगला भेजें।

लंबा शीर्षक "The Hitchhiker's Guide to the Galaxy: The Complete Trilogy" कार्ड से बाहर निकल जाता है। लंबे शीर्षक को दो पंक्तियों में लपेटो और बाक़ी को "…" से काट दो।

फिर:

अगर मैं ख़ाली शीर्षक के साथ फ़ॉर्म सबमिट करता हूँ, तो कुछ नहीं होता और कोई संदेश भी नहीं दिखता। फ़ील्ड के नीचे "शीर्षक जोड़ें" दिखाओ और किताब सेव मत करो।

एक-एक करके क्यों? जब आप एक संदेश में पाँच बदलाव माँगते हैं, तो AI चार अच्छे से कर सकता है और चुपचाप कुछ और तोड़ सकता है, और आपको पता नहीं चलेगा कि किस बदलाव से हुआ। छोटे क़दम अनडू को भी काम का बनाते हैं: अगर एक बदलाव बिगड़ जाए, तो उससे ठीक पहले वाले वर्शन पर लौटें और ज़्यादा साफ़ माँग आज़माएँ।

जब कुछ टूट जाए

टूटेगा ज़रूर। हर बिल्डर में एरर आते हैं। एरर का सटीक टेक्स्ट कॉपी करें, या बताएँ कि आपने ठीक क्या क्लिक किया और क्या देखा, और उसे वापस पेस्ट करें:

जब मैं किसी कार्ड पर Delete क्लिक करता हूँ तो "Something went wrong" दिखता है और किताब वहीं रहती है। पता लगाओ कि क्यों और ठीक करो। मुझे बताओ कि वजह क्या थी।

वजह पूछना मायने रखता है। इससे आप सीखते हैं कि ऐप कैसे काम करते हैं, और AI अंदाज़े लगाना बंद करता है। हमारी गाइड AI से बने ऐप को डीबग कैसे करें और गहराई में जाती है।

स्टेप 5: इसे अपना बनाएँ

जब यह चल जाए, तो उसी तरह छोटे क़दमों में सुधारें:

• "पूरी हुई किताबों पर 1–5 स्टार रेटिंग जोड़ो।"
• "कार्ड के ऊपर एक सर्च बॉक्स जोड़ो जो शीर्षक या लेखक से फ़िल्टर करे।"
• "गर्म ऑफ़-व्हाइट बैकग्राउंड और गहरा हरा एक्सेंट इस्तेमाल करो।"
• "ऊपर एक काउंटर जोड़ो: इस साल पूरी की गई किताबें।"

हर एक अकेला, परखने लायक बदलाव है।

स्टेप 6: पब्लिश करें और शेयर करें

जब यह वह करने लगे जो आपको चाहिए, तो इसे पब्लिश करें। Mythex पर यह एक क्लिक है, और आपको एक पब्लिक URL मिलता है जिसे आप किसी भी डिवाइस पर खोल सकते हैं या दोस्त को भेज सकते हैं। अगर आगे चलकर आप अपना डोमेन चाहें, तो वह Pro फ़ीचर है, और हमारी गाइड कस्टम डोमेन कैसे जोड़ें इसे समझाती है।

कुछ दोस्तों से आगे किसी को भी शेयर करने से पहले क्या vibe coding सुरक्षित है? पढ़ें। निजी पढ़ने की सूची के लिए जोखिम कम है। जिस ऐप में अजनबी साइन-अप करके डेटा रखते हैं, उसके लिए पहले कुछ जाँचें ज़रूरी हैं।

शुरुआती की ग़लतियाँ जिनसे बचें

• सब कुछ एक साथ माँगना। "मेरे लिए Goodreads बना दो" से ऐसा कुछ बनता है जो प्रभावशाली दिखता है पर ख़राब चलता है। सबसे छोटे काम के वर्शन से शुरू करें।
• रीफ़्रेश टेस्ट न करना। रीलोड पर डेटा ग़ायब हो जाना शुरुआती लोगों को सबसे ज़्यादा चौंकाने वाली चीज़ है।
• हर बार माँग शुरू से लिखना। बताएँ कि क्या बदलना है और क्या रखना है: "लेआउट वैसा ही रखो, सिर्फ़ रंग बदलो।"
• "ठीक हो गया" पर भरोसा करना। AI अक्सर कह देगा कि बग ठीक हो गया। हर बार ख़ुद जाँचें।
• चैट में पासवर्ड या API कीज़ पेस्ट करना। अगर आपके ऐप को किसी बाहरी सर्विस की की चाहिए, तो उसे टूल की सीक्रेट्स सेटिंग में रखें, कभी संदेश या कोड में नहीं। API कीज़ को सुरक्षित कैसे रखें देखें।
• पहले एरर के बाद छोड़ देना। एरर सामान्य हैं। उन्हें वापस पेस्ट करें और वजह पूछें।

चलते-चलते क्या सीखें

आपको कोर्स की ज़रूरत नहीं, पर कुछ अवधारणाएँ हर माँग को तेज़ बना देंगी। AI से कहें कि इन्हें आपके अपने ऐप के संदर्भ में समझाए:

• फ़्रंटएंड और बैकएंड: विज़िटर के ब्राउज़र में क्या चलता है और सर्वर पर क्या। (फ़्रंटएंड बनाम बैकएंड)
• डेटाबेस: आपका ऐप अपना डेटा कहाँ रखता है। (डेटाबेस क्या है?)
• ऑथेंटिकेशन: ऐप कैसे जानता है कि कोई कौन है।
• सीक्रेट्स: वे निजी कीज़ जो ऐप इस्तेमाल करता है और जो विज़िटर को कभी नहीं दिखनी चाहिए।

इसके लिए अच्छा प्रॉम्प्ट: "समझाओ कि मेरी पढ़ने की सूची किताब कैसे सेव करती है, Add क्लिक करने से लेकर डेटा स्टोर होने तक। सादे शब्द इस्तेमाल करो और असली फ़ाइलों का ज़िक्र करो।"

आपके दूसरे और तीसरे प्रोजेक्ट

पहले ऐप के बाद, एक क़दम कठिन कुछ चुनें। साप्ताहिक चार्ट वाला हैबिट ट्रैकर। ऐसा बुकिंग फ़ॉर्म जो आपको ईमेल करे। छोटा डैशबोर्ड जो Google Sheet से पढ़े। हमारे vibe coding के उदाहरण असली ऐप टाइप, उनके पीछे के प्रॉम्प्ट और क्या गड़बड़ हुई यह दिखाते हैं, और vibe coding से ऐप कैसे बनाएँ एक बड़े प्रोजेक्ट को आइडिया से यूज़र्स वाले पब्लिश किए ऐप तक ले जाती है।

जब शुरू करने के लिए तैयार हों, तो AI ऐप बिल्डर खोलें, ऊपर का पढ़ने की सूची वाला प्रॉम्प्ट पेस्ट करें और उसे अपने आइडिया में बदल दें।

सवाल