Vibe Coding के उदाहरण: 10 असली ऐप टाइप, प्रॉम्प्ट और कहाँ गड़बड़ हुई

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

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

1. पर्सनल बजट ट्रैकर

इसे कौन बनाता है: वे लोग जिन्होंने स्प्रेडशीट आज़माकर छोड़ दी।

पहला प्रॉम्प्ट:

मासिक बजट ट्रैकर बनाओ। मैं राशि, कैटेगरी (खाना, किराया, यात्रा, मौज-मस्ती, अन्य), तारीख और एक नोट के साथ ख़र्च जोड़ता हूँ। इस महीने का हर कैटेगरी का कुल ख़र्च बार चार्ट में और हाल के ख़र्चों की सूची दिखाओ। मैं हर कैटेगरी का बजट तय कर सकूँ और देख सकूँ कि कितना बचा है।

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

ठीक करने वाला प्रॉम्प्ट:

चार्ट और कुल राशि में सिर्फ़ चुने हुए महीने के ख़र्च गिने जाएँ। ऊपर एक मंथ पिकर जोड़ो, जो डिफ़ॉल्ट रूप से मौजूदा महीना दिखाए। कॉमा या स्पेस के साथ लिखी राशि भी स्वीकार करो और उसे संख्या के रूप में सेव करो।

सीख: "इस महीने" एक नियम है। नियम साफ़ शब्दों में बोलें।

2. छोटे सैलून के लिए बुकिंग पेज

इसे कौन बनाता है: छोटे बिज़नेस के मालिक जो फ़ोन और DM पर बुकिंग से थक चुके हैं।

पहला प्रॉम्प्ट:

मेरे सैलून के लिए एक बुकिंग पेज बनाओ। ग्राहक एक सर्विस, तारीख और ख़ाली टाइम स्लॉट चुनें, फिर नाम और फ़ोन नंबर डालें। मेरा एक प्राइवेट एडमिन पेज हो, लॉगिन के पीछे, जो दिन के हिसाब से बुकिंग दिखाए।

क्या गड़बड़ हुई: दो ग्राहकों ने एक मिनट के अंदर 10:00 का एक ही स्लॉट बुक कर लिया, क्योंकि पेज ने उपलब्धता सिर्फ़ पहली बार लोड होते समय जाँची थी। 90 मिनट की कलर बुकिंग ने उसके बाद के स्लॉट भी ब्लॉक नहीं किए।

ठीक करने वाला प्रॉम्प्ट:

जब ग्राहक बुकिंग सबमिट करे, तो सर्वर पर जाँचो कि उसमें आने वाला हर स्लॉट अब भी ख़ाली है, और ख़ाली न हो तो "यह समय अभी-अभी बुक हो गया" कहकर अस्वीकार कर दो। सर्विस अपनी पूरी अवधि को ब्लॉक करती है, इसलिए 10:00 की 90 मिनट की बुकिंग 10:00, 10:30 और 11:00 को ब्लॉक करे।

सीख: जो काम दो लोग एक साथ कर सकते हैं, उसके लिए सर्वर-साइड जाँच ज़रूरी है। पूरे तरीके के लिए बुकिंग ऐप कैसे बनाएँ देखें।

3. QR कोड वाला रेस्टोरेंट मेन्यू

इसे कौन बनाता है: कैफ़े और रेस्टोरेंट के मालिक जिन्हें मेन्यू बार-बार दोबारा छपवाना पड़ता है।

पहला प्रॉम्प्ट:

मेरे कैफ़े के लिए मोबाइल मेन्यू वेबसाइट बनाओ। नाश्ता, दोपहर का खाना, ड्रिंक्स और डेज़र्ट के सेक्शन हों, हर आइटम में नाम, कीमत, छोटा विवरण और डाइट टैग (वीगन, ग्लूटेन-फ़्री) हों। आइटम एडिट करने और "ख़त्म" मार्क करने के लिए एक एडमिन पेज चाहिए। एक QR कोड दिखाओ जिसे मैं प्रिंट कर सकूँ और जो मेन्यू से जुड़ा हो।

क्या गड़बड़ हुई: कुछ टूटा नहीं, पर कैफ़े के वाई-फ़ाई पर मेन्यू धीमा था, क्योंकि हर आइटम के लिए फ़ोन की फ़ुल-साइज़ फ़ोटो लोड हो रही थीं।

ठीक करने वाला प्रॉम्प्ट:

मेन्यू की फ़ोटो बहुत भारी हैं। अपलोड की गई इमेज को ज़्यादा से ज़्यादा 800px चौड़ाई में बदलो, कंप्रेस करो और विज़िटर के स्क्रॉल करने पर ही लेज़ी लोड करो।

सीख: सिर्फ़ अपने ऑफ़िस में नहीं, धीमे कनेक्शन पर भी टेस्ट करें।

4. टीम के लिए इक्विपमेंट या स्टॉक ट्रैकर

इसे कौन बनाता है: ऑपरेशंस के लोग जो साझा स्प्रेडशीट की जगह कुछ बेहतर चाहते हैं।

पहला प्रॉम्प्ट:

हमारी वेयरहाउस टीम के लिए इन्वेंटरी टूल बनाओ। आइटम में नाम, SKU, मात्रा, लोकेशन और न्यूनतम स्तर हो। स्टाफ़ लॉगिन करके स्टॉक जोड़ सके, कारण बताकर स्टॉक घटा सके, और न्यूनतम स्तर से नीचे के आइटम की सूची लाल रंग में देख सके। हर बदलाव और उसे किसने किया, इसका इतिहास रखो।

क्या गड़बड़ हुई: इतिहास में नामों की जगह "user 3" दिख रहा था, और उपलब्ध स्टॉक से ज़्यादा निकालने पर मात्रा नेगेटिव हो जाती थी।

ठीक करने वाला प्रॉम्प्ट:

इतिहास में ID की जगह व्यक्ति का नाम दिखाओ। ऐसा कोई निकासी मत होने दो जो मात्रा को शून्य से नीचे ले जाए; इसके बजाय "सिर्फ़ 4 स्टॉक में हैं" दिखाओ।

सीख: सिर्फ़ यह न बताएँ कि क्या संभव होना चाहिए, यह भी बताएँ कि क्या असंभव होना चाहिए। बाकी के लिए हमारी गाइड इन्वेंटरी ऐप कैसे बनाएँ देखें।

5. फ़्रीलांसर या स्टूडियो के लिए क्लाइंट पोर्टल

इसे कौन बनाता है: डिज़ाइनर, अकाउंटेंट, कंसल्टेंट और एजेंसियाँ।

पहला प्रॉम्प्ट:

क्लाइंट पोर्टल बनाओ। मैं क्लाइंट्स को ईमेल से इनवाइट करता हूँ। हर क्लाइंट लॉगिन करके सिर्फ़ अपने प्रोजेक्ट, फ़ाइलें और इनवॉइस देखे और कमेंट कर सके। मैं एडमिन के रूप में लॉगिन करके सब कुछ देखूँ।

क्या गड़बड़ हुई: यह इस सूची की सबसे ज़रूरी गड़बड़ी है। पेज हर क्लाइंट को सिर्फ़ उसके अपने प्रोजेक्ट दिखाते थे, पर एड्रेस बार में नंबर बदलने पर सर्वर कोई भी प्रोजेक्ट लौटा देता था। एक क्लाइंट बनकर इधर-उधर क्लिक करने से यह कभी पकड़ में नहीं आता।

ठीक करने वाला प्रॉम्प्ट:

प्रोजेक्ट, फ़ाइलें, कमेंट या इनवॉइस लौटाने वाले हर सर्वर रूट को जाँचो। हर एक को पुष्टि करनी चाहिए कि लॉगिन किया हुआ क्लाइंट उस रिकॉर्ड का मालिक है, वरना "नहीं मिला" लौटाओ। फिर टेस्ट करो: क्लाइंट A के रूप में लॉगिन करके क्लाइंट B का प्रोजेक्ट उसकी ID से खोलने की कोशिश करो।

सीख: स्क्रीन पर कुछ छिपा देना उसे सुरक्षित करना नहीं है। इस पर और जानकारी क्या vibe coding सुरक्षित है? में है।

6. वेटलिस्ट वाला लॉन्च पेज

इसे कौन बनाता है: फ़ाउंडर जो आइडिया बनाने से पहले उसे परखना चाहते हैं।

पहला प्रॉम्प्ट:

ट्यूटर्स के लिए एक ऐप का लैंडिंग पेज बनाओ, जो उन्हें लेसन शेड्यूल करने और पेमेंट लेने में मदद करे। हीरो हेडलाइन, सबहेडिंग, ईमेल साइन-अप, तीन फ़ायदे, कैसे काम करता है का सेक्शन और FAQ हो। साइन-अप तारीख के साथ डेटाबेस में सेव करो, और मुझे एक प्राइवेट पेज से उन्हें CSV के रूप में डाउनलोड करने दो।

क्या गड़बड़ हुई: कुछ ही दिनों में लिस्ट बॉट्स के फ़ालतू साइन-अप से भर गई, और पेज में टाइटल या विवरण नहीं था, इसलिए शेयर किए गए लिंक का प्रीव्यू ख़ाली दिखता था।

ठीक करने वाला प्रॉम्प्ट:

साइन-अप फ़ॉर्म में बुनियादी बॉट सुरक्षा जोड़ो (एक छिपा हुआ हनीपॉट फ़ील्ड और प्रति IP प्रति घंटे 5 साइन-अप की सीमा)। पेज टाइटल, मेटा डिस्क्रिप्शन और सोशल शेयरिंग इमेज जोड़ो।

सीख: पब्लिक फ़ॉर्म को लोग ढूँढ ही लेते हैं। वेटलिस्ट पेज कैसे बनाएँ देखें।

7. शिक्षक के लिए क्विज़ ऐप

इसे कौन बनाता है: शिक्षक और ट्रेनर जो LMS से हल्का कुछ चाहते हैं।

पहला प्रॉम्प्ट:

मेरी क्लास के लिए क्विज़ ऐप बनाओ। मैं बहुविकल्पीय सवालों वाले क्विज़ बनाता हूँ, हर सवाल का एक सही उत्तर हो। स्टूडेंट्स एक कोड और अपने पहले नाम से जुड़ें, सवालों के जवाब दें और आख़िर में अपना स्कोर देखें। मुझे हर क्विज़ की रिज़ल्ट टेबल दिखे।

क्या गड़बड़ हुई: सही उत्तर सवालों के साथ ब्राउज़र को भेज दिए गए थे, इसलिए जिज्ञासु स्टूडेंट उन्हें पेज सोर्स में पढ़ सकता था। स्टूडेंट्स 100% आने तक दोबारा सबमिट भी कर सकते थे।

ठीक करने वाला प्रॉम्प्ट:

सही उत्तर ब्राउज़र को मत भेजो। सबमिशन के बाद उत्तर सर्वर पर जाँचो। हर क्विज़ में हर स्टूडेंट नाम को एक ही सबमिशन की अनुमति दो, और अगर कोई दोबारा कोशिश करे तो शिक्षक को दिखाओ।

सीख: ब्राउज़र यूज़र का होता है। वहाँ मौजूद हर चीज़ पढ़ी जा सकती है।

8. छोटा AI टूल

इसे कौन बनाता है: मार्केटर, लेखक और फ़ाउंडर जो एक ख़ास काम वाला AI सहायक चाहते हैं।

पहला प्रॉम्प्ट:

ऐसा टूल बनाओ जो प्रोडक्ट के विवरण को अलग-अलग टोन (दोस्ताना, एक्सपर्ट, मज़ेदार, छोटा, लंबा) में पाँच सोशल मीडिया पोस्ट में बदल दे। AI API इस्तेमाल करो। मैं विवरण पेस्ट करूँ, प्लेटफ़ॉर्म चुनूँ और कॉपी बटन के साथ पोस्ट पाऊँ।

क्या गड़बड़ हुई: पहले वर्शन ने AI सर्विस को सीधे ब्राउज़र से कॉल किया और API की पेज के अंदर ही थी, जहाँ कोई भी उसे कॉपी करके बिल बढ़ा सकता था।

ठीक करने वाला प्रॉम्प्ट:

AI कॉल को सर्वर पर ले जाओ। API की को सीक्रेट के रूप में रखो, फ़्रंटएंड कोड में कभी नहीं। हर विज़िटर को दिन में 20 जनरेशन तक सीमित करो।

सीख: की (key) सर्वर पर सीक्रेट में रहनी चाहिए। API कीज़ को सुरक्षित कैसे रखें और अपने ऐप में AI फ़ीचर कैसे जोड़ें देखें।

9. अरबी और अंग्रेज़ी में बिज़नेस वेबसाइट

इसे कौन बनाता है: खाड़ी और व्यापक अरब दुनिया के बिज़नेस जो दो भाषाओं में ग्राहकों को सेवा देते हैं।

पहला प्रॉम्प्ट:

मेरी इंटीरियर डिज़ाइन कंपनी के लिए अरबी और अंग्रेज़ी में वेबसाइट बनाओ, भाषा बदलने के स्विच के साथ। पेज: होम, सर्विसेज़, पोर्टफ़ोलियो, अबाउट और कॉन्टैक्ट। अरबी पूरी तरह दाएँ-से-बाएँ (right-to-left) हो।

क्या गड़बड़ हुई: अरबी टेक्स्ट दाईं ओर अलाइन था, पर लेआउट मिरर नहीं हुआ: तीर अब भी ग़लत दिशा में थे और मेन्यू ग़लत तरफ़ था। फ़ोन नंबर भी कुछ जगह उल्टे दिख रहे थे।

ठीक करने वाला प्रॉम्प्ट:

अरबी में पूरा लेआउट मिरर करो: पेज की दिशा right-to-left रखो, मेन्यू दाईं ओर रखो, दिशा वाले आइकन पलटो, और फ़ोन नंबर और ईमेल को अरबी टेक्स्ट के अंदर left-to-right ही रखो।

सीख: right-to-left एक लेआउट है, सिर्फ़ अलाइनमेंट नहीं। Mythex अरबी और दूसरे right-to-left लेआउट सँभालता है, और आप सीधे अरबी में प्रॉम्प्ट लिख सकते हैं।

10. ऐसा ट्रैकर जो फ़ोन ऐप बन जाए

इसे कौन बनाता है: कोच, जिम और कम्युनिटी ग्रुप, जिनके यूज़र्स ज़्यादातर फ़ोन पर रहते हैं।

पहला प्रॉम्प्ट:

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

क्या गड़बड़ हुई: वेब ऐप चला, पर फ़ोन पर वर्कआउट के बीच बटन टैप करने के लिए बहुत छोटे थे और चार्ट पढ़ने लायक नहीं था।

ठीक करने वाला प्रॉम्प्ट:

इसे फ़ोन पर एक हाथ से इस्तेमाल के लिए डिज़ाइन करो: स्क्रीन के नीचे बड़े टैप टारगेट, हर स्क्रीन पर एक एक्सरसाइज़ और बड़े Next और Done बटन, और एक सादा साप्ताहिक प्रगति चार्ट।

सीख: अगर लोग इसे फ़ोन पर इस्तेमाल करेंगे, तो पहले फ़ोन के लिए डिज़ाइन करें। Mythex Pro पर पब्लिश किया हुआ ऐप Google Play के लिए Android ऐप और TestFlight पर भेजे जाने वाले iPhone ऐप में बदला जा सकता है; फ़ोन ऐप आपका पब्लिश किया हुआ ऐप खोलता है, इसलिए हर Publish उसे अपडेट कर देता है। मोबाइल ऐप बिल्डर पेज देखें।

इन उदाहरणों के पीछे के पैटर्न

दसों में गड़बड़ियाँ कुछ समूहों में बँटती हैं:

इनमें से किसी के लिए कोड पढ़ना ज़रूरी नहीं है। ज़रूरी है एक जिज्ञासु, थोड़े शरारती यूज़र की तरह टेस्ट करना और जो दिखे उसे सटीक शब्दों में बताना।

ख़ुद एक आज़माएँ

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

सवाल