गैर-डेवलपर्स के लिए vibe coding शुरू करने की 5-स्टेप गाइड

पिछले कुछ हफ्तों में मैंने गैर-डेवलपर परिचितों (वकील, मार्केटर, PM आदि) के साथ मिलकर vibe coding से 5-6 सरल ऐप बनाए।

• WoW guild raid dashboard (web)
• Prize draw event racing simulator (web + Three.js)
• वीडियो एडिटर और क्लाइंट के बीच कम्युनिकेशन के लिए टूल (Chrome extension)
• iteration की संख्या तय करने, कुछ समय तक फोकस करने और खत्म होने पर review करने में मदद करने वाला auto timer (Electron desktop app)

इस प्रक्रिया को समेटकर मैंने 'गैर-डेवलपर्स के लिए vibe coding intro guide' को 5 चरणों में बनाया।

1. आजकल AI कहाँ तक क्या कर सकता है, इसका अंदाज़ा लगाना
2. जिस समस्या को हल करना है और जो प्रोडक्ट बनाना है, उसे स्पष्ट रूप से परिभाषित करना
3. बहुत जल्दी और बार-बार अपनी आँखों से आउटपुट का काम करना जाँचना
4. AI अच्छी coding कर सके, इसके लिए prompting के साथ लगातार संवाद करना
5. असामान्य व्यवहार और सुधार के बिंदुओं को पहचानना, सुधारना और finish करना

1) आजकल AI कहाँ तक क्या कर सकता है, इसका अंदाज़ा लगाना

जो गैर-डेवलपर्स पहली बार vibe coding देख रहे हैं, उन्हें मैं लगभग इस तरह से शुरुआत करने की सलाह दूँगा।

• LLM में, या AI prototyping service में, सिर्फ छोटे prompt से काम करने वाली कोई चीज़ बनाई जा सकती है—इसे खुद अनुभव करके आत्मविश्वास बढ़ाएँ
• कुछ ऐसे SNS और newsletters subscribe करें जो latest AI जानकारी को व्यवस्थित करके बताते हों
• हर AI जानकारी और टूल को समझने की लालसा छोड़ दें, और सिर्फ उन टूल्स को हल्के से आज़माएँ जो आपकी रुचि के किसी खास विषय से जुड़े हों

2) जिस समस्या को हल करना है और जो प्रोडक्ट बनाना है, उसे स्पष्ट रूप से परिभाषित करना

• भले ही AI की क्षमता का अंदाज़ा हो, लेकिन अगर problem definition स्पष्ट नहीं है तो प्रोडक्ट नहीं बन सकता
• इसलिए पहले meta-cognition बढ़ाने वाले सवालों के ज़रिए मुझे खुद ज़्यादा स्पष्ट होना होगा
• vibe coding से बने meta-cognition app का उपयोग
  1. आप क्या बनाना चाहते हैं?
  2. आप उसे क्यों बनाना चाहते हैं? कौन-सी समस्या हल करनी है?
  3. यह समस्या किसे होती है?
  4. वे यह समस्या किन परिस्थितियों में झेलते हैं?
  5. उस स्थिति में वे अभी कौन-सा workaround/alternative इस्तेमाल कर रहे हैं?
  6. कैसे जाँचा जा सकता है कि 1, 5 से बेहतर तरीके से समस्या हल करता है?
  7. उन्हें 5 की जगह खुशी-खुशी 1 इस्तेमाल कराने के लिए क्या करना होगा?
• जब बनानी वाली चीज़ स्पष्ट हो गई, तो ऊपर वाले app से generated 'PRD creation prompt' को LLM में डालकर PRD बनवाया

3) बहुत जल्दी और बार-बार अपनी आँखों से आउटपुट का काम करना जाँचना

• vibe coding का सबसे बड़ा फायदा यह है कि बहुत शुरुआती चरण में ही एक 'working app' मिल सकता है। गैर-डेवलपर्स के motivation के लिए भी यह बहुत महत्वपूर्ण है
• इसी वजह से मैं गैर-डेवलपर्स को Cursor से vibe coding शुरू करने की ज़्यादा सलाह नहीं देता। मेरा मानना है कि app चलाने तक पहुँचने में बहुत-सी छोटी-बड़ी बाधाएँ हैं
• इसके बजाय, अगर PRD दे दें और उससे working prototype निकल आए, तो Lovable जैसी services बेहतर शुरुआती बिंदु हैं। public link भी तुरंत बन जाता है, इसलिए परिचितों को दिखाकर feedback लेना आसान है
• लेकिन अगर जो app बनाना है वह web-based नहीं है, तो चीज़ें थोड़ी जटिल हो जाती हैं, क्योंकि prototyping tools आम तौर पर web app बनाते हैं
• ऐसे में technical decision और execution environment setup की ज़रूरत होती है, और उसके लिए मुझे और AI दोनों को ज़्यादा समझदार होना पड़ेगा

4) AI अच्छी coding कर सके, इसके लिए prompting के साथ लगातार संवाद करना

• मैं और AI दोनों ज़्यादा समझदार बनते हैं <-> prompt बेहतर बनता है <-> output ज़्यादा तेज़ और बेहतर आता है
• जितना बेहतर prompt होगा, लक्ष्य तक पहुँचने के लिए उतनी कम ping-pong rounds (= समय और पैसा) लगेंगे
• अलग-अलग prompt engineering guides में एक सामान्य बात मिलती है: prompt के भीतर role, context और task को अच्छी तरह define करें

role, context, task

• vibe coding में 'role' उतना महत्वपूर्ण नहीं है
  • coding agents में पहले से उपयुक्त role defined होते हैं, इसलिए यह उलझ भी सकता है
  • शायद coding एक महत्वपूर्ण benchmark होने की वजह से, LLM भी बिना role assignment के coding अच्छी तरह कर लेते हैं
  • हाँ, अगर जो app आप बना रहे हैं वह विशेष है, तो उपयुक्त role देना अच्छा हो सकता है
• 'context' के लिए अगर PRD अच्छी तरह बनाया है, तो वह पर्याप्त है
• 'task' का मतलब है लक्ष्य और completion criteria को अच्छी तरह तय करना। completion criteria
  • prompt के भीतर सीधे लिखा हो सकता है (few-shot prompting)
  • किसी external file या code में define हो सकता है (TODOs.md या test code)
  • या सिर्फ मेरे दिमाग में हो सकता है (यह style अच्छा नहीं है)
• vibe coding का अंतिम लक्ष्य है AI को अच्छी coding के लिए निर्देश देकर PRD के अनुसार काम करने वाला app जल्दी बनाना। इसके लिए 3 मध्यवर्ती लक्ष्य रखना अच्छा है
  • मैं ज़्यादा समझदार बनूँ
  • AI ज़्यादा समझदार बने
  • features spec के अनुसार काम करें

मैं ज़्यादा समझदार बनूँ?

• अगर आप गैर-डेवलपर हैं, या domain नया है, या tech stack नया है, तो सटीक शब्दों में निर्देश देना कठिन होता है
• ऐसे समय में अपनी कमी LLM को बताकर उसी से सीख सकते हैं
  • "(स्क्रीनशॉट देकर) ऐसे गेम आम तौर पर किससे बनाए जाते हैं?"
  • "मैं ऐसा कुछ बनाऊँगा, तुम होते तो data कैसे जुटाते?"
  • "native app का core behavior जितनी जल्दी हो सके verify करना हो तो कौन-सी technology इस्तेमाल करनी चाहिए?"
• ऐसे सवालों के ज़रिए देखें कि क्या आप इस तरह बदल रहे हैं
  • technical keywords: क्या मैं सटीक technical/domain terms इस्तेमाल कर रहा हूँ?
  • data flow: क्या मैं समझा सकता हूँ कि app की core functionality के लिए data कैसे लाया, process किया और दिखाया जाएगा?
  • execution environment: क्या मैंने ऐसा environment तैयार किया है जहाँ AI द्वारा लिखे code को चलाकर अपनी आँखों से verify कर सकूँ?
• आदर्श रूप से unknown unknowns को पहले काफी हद तक दूर करके PRD लिखने के बाद coding शुरू करना बेहतर है, लेकिन ऐसा करना अनिवार्य नहीं है
• coding शुरू करने के बाद भी बहुत कुछ सीखा जाता है, और ज़रूरत पड़े तो शुरू से दोबारा बनाया जा सकता है। (कभी-कभी पहले से बनी चीज़ सुधारने से भी तेज़)

AI ज़्यादा समझदार बने?

• जो technical keywords या data flow समझ में आए हैं, उन्हें system prompt (जैसे Cursor Rules) के रूप में AI को बताना
• मेरी दखलअंदाजी कम हो और AI का code मुझे ज़्यादा पसंद आए, इसके लिए दो बड़ी चीज़ें चाहिए: constraints और documentation के लिए guidelines
• constraints guidelines AI को ज़्यादा consistent code लिखने में मदद करती हैं। उदाहरण के लिए:
  • tech stack: NextJS app router इस्तेमाल करो, Tailwind और ShadCN से styling करो, icons के लिए सिर्फ Lucid इस्तेमाल करो, payments के लिए Stripe इस्तेमाल करो आदि
  • structure और patterns: folders को ऐसे organize करो, filenames ऐसे रखो, UI style Material जैसा रखो आदि
  • (execution environment के अनुसार) output format: Electron Fiddle इस्तेमाल होगा, इसलिए उसी हिसाब से 4 files दो; CodePen इस्तेमाल होगा, इसलिए HTML, CSS, JS एक-एक दो आदि
• documentation guidelines AI की फोकस और memory बेहतर करने में मदद करती हैं। दो ideas खास तौर पर उपयोगी लगे
  • Cline's Memory Bank: किए गए और किए जाने वाले कामों को files में लिखते हुए काम करने वाला workflow define करना
  • Kang Dong-yun ke prompt context: पूरे project के लिए एक लंबा निर्देश top-level folder में छोड़ने के बजाय folder-wise instructions बनाना
• Memory Bank में अभी क्या हो रहा है, इसे observe और learn करना आसान हो जाता है, इसलिए गैर-डेवलपर्स के लिए यह खास तौर पर recommend है

features spec के अनुसार काम करें?

• यह project level की नहीं, बल्कि (coding agent के साथ) chat करते समय की prompting strategy है
• features को spec के अनुसार काम कराने की सबसे अच्छी strategy मुझे लगती है: test pass हो जाए तो commit
  • "X implement करो. पहले test लिखो, फिर coding करो, फिर test चलाओ, और pass होने तक code ठीक करते रहो."
• यह इसलिए संभव है क्योंकि coding agent के पास test code लिखने, terminal में चलाने और उसका result पढ़ने की permission और capability होती है
• जब test pass हो जाए, तो commit message suggest कराया जा सकता है, और फिर test code व feature code को साथ commit किया जा सकता है। मैं commit खुद करता हूँ, लेकिन agent auto-commit भी कर सकता है
• सिर्फ unit test ही नहीं, integration test और E2E test भी AI लिख सकता है, चला सकता है और खुद ठीक कर सकता है (संदर्भ: Cursor + Playwright automated testing)
• यह सब 'क्या individual features spec के अनुसार implement हुए हैं, और क्या पूरा app PRD के अनुसार काम करता है?'—इसे vibe coder और AI दोनों के लिए आसान बनाता है

5) असामान्य व्यवहार और सुधार के बिंदुओं को पहचानना, सुधारना और finish करना

• मेरी नज़र में vibe coding 'बस क्लिक करो और हो जाए' वाली चीज़ से काफी दूर है, और इसमें सीखने के लिए बहुत कुछ है
• इनमें से भी, 'मेरे अपने छोटे prototype' से आगे बढ़कर solo founder के रूप में commercial product level का app बनाने के लिए 3 क्षमताएँ अनिवार्य लगती हैं: recognition capability, coding capability, और product engineering capability

recognition capability

• PRD (या मेरी मूल मंशा) से अलग तरीके से काम कर रही screen या feature को संवेदनशीलता से पहचानना
• अगर यह क्षमता कम हो, तो AI की गलती पकड़कर उसे ठीक करने को कहना बहुत मुश्किल हो जाता है
  • चरण 4 वाले 'tests' शुरुआत से ही AI की गलतियों को कम करते हैं और साथ ही मेरी क्षमता भी बढ़ाते हैं
  • क्योंकि spec को AI जब test code में बदलता है, तो उसे पढ़ते हुए सिर्फ 'यह feature चाहिए' नहीं बल्कि 'इस feature implementation को पूरा मानने के लिए ये conditions चाहिए'—यह भी सीखा जा सकता है
• लेकिन 'app spec के अनुसार implemented है' और 'app अच्छा है'—ये दोनों अलग बातें हैं। इसलिए सुधार के बिंदु ढूँढने वाली 'product sense' महत्वपूर्ण है (विस्तार के लिए linked Lenny newsletter देखें)

coding capability

• कम-से-कम अभी तक तो, चाहे काम को कितना भी अच्छी तरह तोड़कर AI को सौंप दें, लगभग 5% हिस्सा ऐसा रहता है जहाँ finish करने के लिए सीधे code को हाथ लगाना पड़ता है
  • SNS पर ऐसे ढेरों apps हैं जो यह नहीं कर पाने की वजह से 80% स्तर पर अटके रहते हैं और launch नहीं हो पाते
• बेशक यह अनुपात app के प्रकार के अनुसार बदल सकता है, और सिर्फ AI से अंत तक implementation कराना पूरी तरह असंभव भी नहीं है, लेकिन वह बहुत inefficient है
• vibe के हवाले पूरी तरह खुद को छोड़ देने के बजाय (Memory Bank, test code आदि के ज़रिए) AI द्वारा generated documentation को देखते हुए coding भी सीखने की सलाह दूँगा। किसी developer से coaching लेना भी अच्छा रहेगा
• खास तौर पर backend की चीज़ें, जो अपेक्षाकृत कम दिखाई देती हैं (user authentication, external API integration, data input/output, payments आदि) और deployment strategy (main branch और feature branch, environment variable management आदि) सीखना बहुत प्रभावी होगा

product engineering capability

• app launch अंत नहीं, शुरुआत है। सही ढंग से करना हो तो पूरे product development lifecycle को समझना ज़रूरी है
  • समस्या की पहचान, solution ideas निकालना, planning, design, implementation, testing, deployment, promotion, error monitoring, feedback collection, operations...
• इन सभी चरणों को बहुत गहराई से समझना ज़रूरी नहीं, लेकिन कम-से-कम यह जानना अच्छा है कि हर चरण में क्या काम होता है और कौन-से keywords इस्तेमाल होते हैं
• तभी आप अज्ञात चीज़ें सीख पाएँगे, और जब अकेले संभालना मुश्किल हो, तब साथ काम करने के लिए सही सहयोगी की क्षमता पहचान पाएँगे

समापन

• vibe coding के ज़रिए किसी app को commercial product level तक ले जाना बिल्कुल आसान नहीं है। लेकिन 'शुरू' करना पहले से कहीं ज़्यादा आसान हुआ है—यह बात शायद ही कोई नकारेगा
• अपने छोटे आइडिया को सचमुच जीवित होकर चलते देख, मेरे परिचितों को खुशी से कहते हुए ("वाह, मैं coding कर रहा/रही हूँ!") देखना मुझे भी बहुत सुखद लगा
• यह लेख पढ़ने वाले दूसरे गैर-डेवलपर्स से भी कहूँगा कि इस मौके पर आनंद के साथ 'maker' बनकर देखें
• अगर आप अपनी domain expertise का उपयोग करके ऐसा छोटा, तेज़ और उपयोगी टूल (vibe coding से) बनाते हैं जो किसी खास समस्या को बेहतरीन ढंग से हल करता हो, तो मुझे लगता है कि AI युग में भी आप पर्याप्त रूप से प्रतिस्पर्धी रह सकते हैं

[jk34011]

वाह~ मैं तो सोच रहा था कि vibe coding सिर्फ़ एक भ्रम है
इतने पेशेवर तरीके से लिखा गया लेख काफ़ी समय बाद देखने को मिला
बहुत मज़े से पढ़ा।

[spilist2]

धन्यवाद! मुझे इसकी संभावनाएँ बहुत बड़ी लगती हैं हाहा

[jk34011]

अरे;; अब देखकर लग रहा है कि मेरी टिप्पणी थोड़ी अजीब थी।
भ्रम जैसी अभिव्यक्ति से ज़्यादा, शायद यह कहना ठीक होगा कि अभी वहाँ तक पहुँचना बाकी है?
आखिरकार मुझे लगता है कि vibe coding की अपनी सीमाएँ हैं, और development की जानकारी के बिना यह मुश्किल है।
बेशक, AI के आगे बढ़ने के साथ मुझे लगता है कि बाद में यह बहुत बेहतर होगा।

मुझे लगा कि मेरी टिप्पणी से ऐसा महसूस हो सकता है कि vibe coding का कोई मतलब नहीं है, इसलिए मैं फिर से यूँ ही लंबा जवाब लिख रहा हूँ।
मैं भी vibe coding का काफ़ी इस्तेमाल करता हूँ, हा हा

[spilist2]

अरे, नहीं नहीं. haha मैंने भी आपकी बात का nuance समझ लिया था.

इसलिए, जैसा कि मैंने मूल लेख में भी लिखा है, मेरे लिए vibe coding का मतलब 'क्लिक करके हो जाने वाली' चीज़ से काफ़ी दूर है, और स्तर ऊँचा करने के लिए engineers को काफ़ी मेहनत करनी पड़ती है.

[bbulbum]

मैं हमेशा इसे रुचि से पढ़ता हूँ.

[spilist2]

धन्यवाद!

[spilist2]

मैंने इसका YouTube वीडियो भी बनाया है haha https://www.youtube.com/watch?v=ecY5VBpruOA