Claude के साथ Vibe Coding: Claude चैट, Claude Code और Claude से ऐप बनाना

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

यह गाइड तीनों को प्रॉम्प्ट और हर एक की सीमाओं के साथ कवर करती है। इन सबके पीछे के विचार के लिए vibe coding क्या है देखें।

विकल्प 1: छोटे टूल के लिए Claude चैट

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

यहाँ अच्छा प्रॉम्प्ट अपने आप में पूरा होता है:

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

यह किसके लिए बढ़िया है: जल्दी के, एक-पेज वाले टूल जो आप ख़ुद इस्तेमाल करें या लिंक के रूप में शेयर करें, और सीखने के लिए, क्योंकि आप Claude से हर हिस्सा समझाने को कह सकते हैं।

कहाँ रुकता है: ये Claude के अपने वातावरण के अंदर चलते हैं। आपका अपना स्थायी डेटाबेस नहीं है, यूज़र अकाउंट नहीं हैं, कस्टम डोमेन नहीं है, और सर्वर चलाने की जगह नहीं है। जब कोई आइडिया एक पेज से बड़ा हो जाए, तो आपको अगले दो विकल्पों में से एक चाहिए।

विकल्प 2: असली कोडबेस के लिए Claude Code

Claude Code Anthropic का कोडिंग एजेंट है। यह आपके टर्मिनल में, VS Code और JetBrains जैसे एडिटर में, डेस्कटॉप ऐप में और वेब पर काम करता है। आप उसे सादी भाषा में काम देते हैं, और वह आपका प्रोजेक्ट पढ़ता है, फ़ाइलें एडिट करता है, कमांड और टेस्ट चलाता है और दिखाता है कि क्या बदला। लिखते समय यह Claude के पेड प्लान में शामिल है और API के ज़रिए उपलब्ध है; मौजूदा प्लान के लिए Anthropic की साइट देखें।

एक सामान्य vibe coding सेशन ऐसा दिखता है:

एक /bookings पेज जोड़ो जो मौजूदा यूज़र की बुकिंग सबसे नई पहले दिखाए, और एक कैंसल बटन हो जो क्लास से दो घंटे से कम पहले डिसेबल हो जाए। मौजूदा auth हेल्पर इस्तेमाल करो। पूरा होने पर टेस्ट चलाओ।

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

कहाँ ज़्यादा मेहनत लगती है: आपको डेवलपमेंट सेटअप चाहिए, और Claude Code कुछ भी होस्ट नहीं करता। डेटाबेस, सीक्रेट्स, डिप्लॉयमेंट और डोमेन का इंतज़ाम आपको करना है। दूसरे डेवलपर टूल से तुलना के लिए Cursor बनाम Windsurf बनाम Claude Code देखें।

Claude Code के साथ अच्छी चलने वाली आदतें

• बड़े बदलावों से पहले प्लान माँगें। "क़दमों और जिन फ़ाइलों को छुओगे उनकी रूपरेखा दो, फिर रुको।"
• प्रोजेक्ट नोट्स की फ़ाइल रखें। Claude Code परंपराओं के लिए प्रोजेक्ट मेमोरी फ़ाइल (CLAUDE.md) पढ़ता है, ताकि आपको उन्हें दोहराना न पड़े।
• diff की समीक्षा करें। vibe coding में भी, संवेदनशील जगहों में क्या बदला उस पर नज़र डालें: auth, पेमेंट, यूज़र डेटा वाली कोई भी चीज़।
• अक्सर कमिट करें। छोटे कमिट से ग़लत क़दम पलटना आसान हो जाता है।

विकल्प 3: Mythex के साथ Claude से बनाएँ और पब्लिश करें

अगर आपको Claude में काम करना पसंद है पर अंत में असली ऐप चाहिए, यानी डेटाबेस, लॉगिन, फ़ाइल स्टोरेज, पब्लिक URL, तो आप MCP के ज़रिए Claude को AI ऐप बिल्डर से जोड़ सकते हैं। MCP वह प्रोटोकॉल है जिससे Claude कहीं और होस्ट किए गए टूल इस्तेमाल कर सकता है। (MCP क्या है इसे सादे शब्दों में समझाता है।)

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

कनेक्ट कैसे करें

1. Mythex में Account settings खोलें और MCP URL कॉपी करें: https://mcp.mythex.ai/mcp।
2. Claude में Settings → Connectors → Add custom connector पर जाएँ, URL पेस्ट करें और Connect क्लिक करें।
3. एक Mythex पेज खुलता है। ज़रूरत हो तो साइन इन करें और Allow access चुनें। कॉपी करने के लिए कोई API की नहीं है।
4. वापस Claude में, जो चाहिए वह माँगें।

कोई भी किसी भी प्लान पर कनेक्ट कर सकता है; सैंडबॉक्स टूल के लिए Mythex Pro ($25 प्रति माह) चाहिए। Claude का इस्तेमाल आपके Claude प्लान पर रहता है, और सैंडबॉक्स समय, प्रीव्यू और होस्टिंग आपके Mythex क्रेडिट से आते हैं। पूरा वॉकथ्रू Claude, Cursor या Codex से Mythex ऐप बनाना में है।

आज़माने के लिए पहला प्रॉम्प्ट

Mythex इस्तेमाल करके नया प्रोजेक्ट बनाओ: मेरे छोटे डिज़ाइन स्टूडियो के लिए सादा CRM। कॉन्टैक्ट्स में नाम, कंपनी, ईमेल, फ़ोन, स्टेज (lead, active, past) और नोट्स हों। स्टेज के हिसाब से बोर्ड व्यू जहाँ मैं कॉन्टैक्ट्स को कॉलम के बीच ड्रैग कर सकूँ, और एक सर्च बॉक्स। डेटा बना रहे इसके लिए डेटाबेस जोड़ो, और लॉगिन ताकि सिर्फ़ मैं देख सकूँ। प्रीव्यू शुरू करो और चलने पर मुझे लिंक भेजो।

फिर उसी बातचीत में, एक-एक बदलाव करके सुधारें:

Mythex प्रोजेक्ट में कॉन्टैक्ट्स में "अगला फ़ॉलो-अप" तारीख जोड़ो और होम स्क्रीन पर इस सप्ताह देय फ़ॉलो-अप की सूची। प्रीव्यू में जाँचो।

CRM पब्लिश करो और मुझे लाइव URL दो।

यह किसके लिए बढ़िया है: वे लोग जो Claude में सबसे अच्छा सोचते हैं और नतीजा होस्टेड, डेटाबेस के साथ चाहते हैं, सर्वर सेटअप किए बिना। आप बदल भी सकते हैं: Claude में शुरू करके Mythex चैट में आगे बढ़ें, या उल्टा, क्योंकि यह वही प्रोजेक्ट है।

आपको कौन-सा इस्तेमाल करना चाहिए?

प्रॉम्प्टिंग के सुझाव जो Claude के साथ ज़्यादा मायने रखते हैं

Claude विस्तृत निर्देशों का बारीकी से पालन करता है, जो दोनों तरफ़ असर करता है।

• बताएँ क्या नहीं बदलना है। "लेआउट और रंग रखो; सिर्फ़ फ़ॉर्म वैलिडेशन बदलो।"
• "पूरा होने" की परिभाषा दें। "पूरा मतलब: नया कॉन्टैक्ट सेव हो, बोर्ड पर दिखे, और रीफ़्रेश के बाद भी रहे।"
• उससे अपना काम जाँचने को कहें। Claude Code में इसका मतलब टेस्ट चलाना है; Mythex के साथ इसका मतलब लाइव प्रीव्यू जाँचना या ब्राउज़र टेस्ट चलाना है।
• जब कोई बदलाव समझ न आए तो सादे शब्दों में समझाने को कहें। आपका ऐप क्या कर रहा है, यह सीखने का यह सबसे तेज़ तरीका है।

हमारी vibe coding प्रॉम्प्ट चीट शीट में 30 प्रॉम्प्ट हैं जो तीनों सेटअप में काम करते हैं।

तीनों के लिए सुरक्षा नोट

• असली API कीज़ या पासवर्ड Claude की बातचीत में पेस्ट न करें। Mythex के साथ सीक्रेट्स प्रोजेक्ट की सीक्रेट्स सेटिंग में जाते हैं, और Claude उनके नाम देख सकता है, मान नहीं।
• पब्लिश करने से पहले जाँचें कि कौन क्या देख सकता है। "क्या लॉगिन किया हुआ यूज़र दूसरे यूज़र के रिकॉर्ड खोल सकता है?" पूछने वाला पहला सवाल है।
• संवेदनशील कोड की समीक्षा करें। Claude सक्षम कोडर है, पर vibe coding का मतलब है कि आप हर पंक्ति नहीं पढ़ रहे, इसलिए वे पंक्तियाँ चुनें जो मायने रखती हैं। देखें क्या vibe coding सुरक्षित है?।

अगर आप ChatGPT भी इस्तेमाल करते हैं, तो साथी गाइड ChatGPT और Codex के साथ vibe coding को कवर करती है। और अगर आप सेटअप पूरी तरह छोड़ना चाहते हैं, तो AI ऐप बिल्डर खोलें और वहीं अपने ऐप का वर्णन करें।

सवाल