80/20 इंजीनियरिंग: मैंने एक सप्ताहांत में अपनी साइट कैसे फिर से बनाई
मैं आपको एक राज़ बताता हूँ: मैंने अपने व्यक्तिगत वेबसाइट को एक सप्ताहांत में इसलिए नहीं लिखा क्योंकि मैं कोडिंग में खास तेज़ हूँ। मैंने यह इसलिए किया क्योंकि मैंने लगभग कोड ही नहीं किया।
उसके बजाय, मैंने अपना अधिकांश समय उस काम में बिताया जिसे ज्यादातर डेवलपर्स बीमारी की तरह टालते हैं — तैयारी करना। दस्तावेज़ बनाना। चीज़ों को लिखना। और जब मैंने आखिरकार अपना एडिटर खोला और OpenAI के Codex के साथ काम शुरू किया, तो असली कार्यान्वयन एक अच्छी तरह से अभ्यास किए गए जादू के करतब की तरह तेजी से हो गया।
यह कहानी है कोड की एक भी लाइन लिखने से पहले 80% काम करने की, और इसने कैसे सब कुछ बदल दिया।
साइट को फिर से लिखने की वजह क्या थी?
मेरी साइट Qwik v3 पर चल रही थी। अच्छी तकनीक, सही माहौल, लेकिन मैं अधिक लचीलेपन चाहتا था — खासकर रूटिंग में। मैंने React Router को फ्रेमवर्क मोड में स्विच किया। यह एक पूर्ण पुनर्निर्माण था, रीफैक्टर नहीं। नई आर्किटेक्चर, साफ फ़ाइल संरचना, अपडेटेड स्टाइलिंग (नमस्ते Tailwind v4), और एक खाली स्लेट।
पर जो बात मुझे आश्चर्यचकित कर गई: असली कोडिंग में लगभग 2-3 घंटे लगे। शुरुआत से अंत तक। और यह पहली बार में काम कर गया।
तो बाकी 5 घंटे में क्या हुआ?
80%: एक सलाहकार की तरह Codex की तैयारी
अधिकतर मेहनत एक "मेगा प्रॉम्प्ट सिस्टम" बनाने में गई — कोई भड़कीला UI नहीं, बल्कि मेरे प्रोजेक्ट फ़ोल्डर में। मैंने Codex से कोई भी कंपोनेंट लिखवाने से पहले ये किया:
-
मैंने पूरा React Router डाक्यूमेंटेशन डाउनलोड किया और इसे
/guidesडायरेक्टरी में सेव किया। -
मैंने Tailwind CSS v4 के लिए भी ऐसा ही किया, सबसे प्रासंगिक पेजों को Markdown में बदलने के लिए Firecrawl का इस्तेमाल किया।
-
मैंने एक
PROMPT.mdफ़ाइल लिखी जिसमें प्रोजेक्ट का अवलोकन था:- "लेगेसी कोड
/पर रहता है, नया कोड/appमें जाएगा।" - "केवल न्यूनतम UI, बिजनेस लॉजिक पर ध्यान।"
- "Tailwind v4 उपयोग करें। React Router में फ्रेमवर्क मोड का पालन करें।"
- और इसी तरह।
- "लेगेसी कोड
यह कोई औपचारिकता नहीं थी। यह ऑपरेशनल संदर्भ था — उस तरह का विस्तृत ब्रीफ जो आप नए टीम सदस्य को पहले दिन देते हैं। Codex सिर्फ अनुमान नहीं लगा रहा था कि मैं क्या चाहता हूँ। उसके पास दस्तावेज़ थे। उसके पास सटीक नियम अंग्रेज़ी में थे। उसके पास प्रतिबंध थे।
जब मैंने अंत में लिखा:
"PROMPT.md पढ़ो। सबसे पहले, सभी रूट्स को नई ऐप में माइग्रेट करो।"
Codex ने ऐसा जवाब दिया जैसे यह पूरी ज़िंदगी इस असाइनमेंट के इंतजार में था।
मेगा प्रॉम्प्ट्स, न्यूनतम कल्पनाएँ
परिणाम आश्चर्यजनक थे। Codex ने निर्देशों का सख्ती से पालन किया। वह भ्रमित नहीं हुआ। उसने कुछ नया नहीं बनाया। उसने "UI पर ध्यान न देना" वाली हिदायत का सम्मान किया। सर्वर लॉजिक सटीक रूप से माइग्रेट हुआ। रूट कॉन्फ़िगरेशन ऐसा दिखा जैसे मैंने खुद लिखा हो — यदि मैं एक कंपाइलर की धैर्य रखता।
यह सिर्फ "प्रॉम्प्ट इंजीनियरिंग" की बात नहीं थी। यह Codex को वास्तविक और वर्तमान स्पेक्स में स्थिर करने की बात थी। न कि कामों की अस्पष्ट सूची। न ही सुविधाओं के इच्छानुसार समूह। बल्कि संरचित इनपुट, स्पष्ट उदाहरण, और आवश्यक डॉक्युमेंट्स का स्थानीय एक्सेस।
समय कहाँ लगा? कोड में नहीं
जब बुनियाद तैयार हो गई, तो काम दो अलग चरणों में बंट गया:
- Codex मोड – तेज़, संरचित, बार-बार दोहराने वाला निष्पादन। माइग्रेशन, लॉजिक, और कुछ लेआउट स्कैफोल्डिंग को लगभग पूर्ण सटीकता के साथ किया।
- डिजाइन अन्वेषण मोड – धीमा, मैनुअल, और खुला। यह मानव हिस्सा था: लुक चुनना, लेआउट आज़माना, कंपोनेंट पर प्रयोग करना। एक बार जब मेरे पास एक कामकाजी विज़ुअल स्टाइल था, तो Codex फिर से डिज़ाइन पैटर्न्स को फैलाने लगा।
वास्तविक धीमापन केवल इसलिए आया क्योंकि मुझे नहीं पता था कि मैं कुछ चीज़ को कैसे दिखना चाहता हूँ — न कि यह कैसे काम करे।
असली ज्ञान: Codex उतना ही अच्छा है जितनी आपकी तैयारी
इस सप्ताहांत ने मेरे काम में एक बदलाव को पुष्ट किया है:
कोडिंग आसान हिस्सा होता जा रहा है। योजना बनाना कठिन और सबसे महत्वपूर्ण हिस्सा है।
छोटे से मध्यम आकार के प्रोजेक्ट्स के लिए, मैं अब इम्प्लीमेंटेशन को 20% काम मानता हूँ। 80% काम पहले से होता है: दस्तावेजीकरण, विशिष्ट कार्य लिखना, संदर्भित प्रॉम्प्ट बनाना।
Codex इस तरह की संरचना के साथ फलता-फूलता है। अगर आप उसे अस्पष्टता देंगे, तो वह आपको अस्पष्टता देगा। लेकिन अगर आप अपना पर्यावरण इरादे से बनाते हैं — डॉक्यूमेंट्स, प्रतिबंध, स्पष्ट विवरण — तो यह एक वरिष्ठ डेवलपर की तरह प्रदर्शन करता है जिसके पास परफेक्ट याददाश्त और कोई अहंकार नहीं है।
आगे का रास्ता: AI को साथी समझो, जादूगर नहीं
निष्कर्ष सरल है: अपने AI कोडिंग टूल्स को सहयोगी की तरह समझें। उन्हें वही सामग्री दें जो आप असली इंजीनियर को देते। संदर्भ तैयार करें। विशिष्ट और व्यापक बनें।
अगली बार एक बड़े प्रोजेक्ट में, मैं और आगे जाऊंगा:
- एक मास्टर प्लान डॉक जो पूरे प्रोजेक्ट के दायरे को परिभाषित करे।
- सबसिस्टम या कंपोनेंट के लिए व्यक्तिगत टास्क स्पेसिफिकेशन।
- लोकल संदर्भ आधार के लिए Markdown डॉक्स और उदाहरण फ़ाइलों का कार्यशील सेट।
Codex को जादुई शब्दों की ज़रूरत नहीं — उसे संरचना चाहिए।
तेज़ निर्माण करना चाहते हैं? शुरुआत करें निर्माण न करके। पहले योजना बनाएं। फिर प्रॉम्प्ट करें जैसे मतलब हो।
डिज़ाइन का विकास: एक दृश्य यात्रा
समय के साथ, मेरी साइट कई रूपांतरणों से गुज़री है—हर एक नए विचारों, टूल्स, और सीखों का प्रतिबिंब। यहाँ एक संक्षिप्त दृश्य यात्रा है कि चीज़ें कैसे विकसित हुईं:
संस्करण 1: शुरुआत का बिंदु
संस्करण 2: अधिक परिभाषित आवाज़
संस्करण 2.1: सूक्ष्म बदलाव और परिशोधन
संस्करण 3: क्विक युग
संस्करण 4: Remix के साथ केंद्रित सरलता
प्रत्येक संस्करण ने यह सिखाया कि एक साइट को प्रभावी बनाने में क्या चीजें मायने रखती हैं — न केवल सौंदर्यशास्त्र में, बल्कि स्पष्टता, उपयोगिता, और अनुरक्षण में भी। डिज़ाइन यात्रा ने विकास की यात्रा को प्रतिबिंबित किया है: योजनाबद्ध, पुनरावृत्तिमूलक, और हमेशा आगे देखती हुई।