मैं आपको ठीक-ठीक बताना चाहता हूँ कि यह वेबसाइट कैसे बनी — क्योंकि मुझे लगता है कि प्रक्रिया उतनी ही दिलचस्प है जितना परिणाम।
bhopali.in का ज़्यादातर हिस्सा मैंने नहीं लिखा — कम से कम पारंपरिक अर्थ में नहीं। मैंने कोड एडिटर नहीं खोला, HTML और TypeScript नहीं टाइप किया। इसके बजाय, मैंने एक बातचीत की। एक बहुत लंबी, बहुत विस्तृत बातचीत Claude Code (Anthropic के AI कोडिंग असिस्टेंट) के साथ, जिसमें मैंने बताया कि मैं क्या चाहता हूँ और Claude ने कोड लिखा।
वो पूरी बातचीत प्रोजेक्ट की STORY.md फ़ाइल में दर्ज है — हर वो प्रॉम्प्ट जो मैंने दिया और उससे क्या बना। यह लेख उस अनुभव पर मेरी मानवीय सोच है।
शुरुआत कैसे हुई
मेरे पास bhopali.in डोमेन था और दिमाग में एक साफ़ तस्वीर थी: एक कंटेंट-समृद्ध, द्विभाषी (हिंदी + अंग्रेज़ी), तेज़, सुलभ, SEO-अनुकूलित साइट — WordPress की कैद के बिना, पोर्टेबिलिटी के साथ, और आधुनिक UI/UX।
पहली बातचीत कोड के बारे में बिल्कुल नहीं थी। वो आर्किटेक्चर के बारे में थी। मैंने पूछा: “WordPress या कुछ और? Node.js या VPS?”
Claude का जवाब था — सवाल को ही नए नज़रिए से देखना। पोर्टेबिलिटी की ज़रूरत hosting की समस्या नहीं, content की समस्या है। जवाब था — Git में Markdown, Astro से बनाया। इस बातचीत से पहले मुझे Astro के बारे में पता नहीं था।
मैंने क्या दिया, Claude ने क्या बनाया
ईमानदार हिसाब:
मैंने दिया:
- विज़न और ज़रूरतें (सरल भाषा में)
- व्यावसायिक संदर्भ (MFD, YouTube चैनल की पहचान, “जिज्ञासु होना…”)
- कंटेंट की दिशा और संपादकीय मानक (“AI जैसा नहीं, इंसानी आवाज़”)
- हर फ़ैसला जहाँ विकल्प था
- मेरे WhatsApp नंबर, सोशल लिंक आदि (जो सिर्फ मैं जान सकता था)
- हर चरण के बाद समीक्षा और फ़ीडबैक
Claude ने बनाया:
- पूरा तकनीकी ढाँचा (Astro + Tailwind + TypeScript + i18n)
- हर component (Header, Footer, BaseHead, ContactForm, AuthorBio, आदि)
- द्विभाषी रूटिंग सिस्टम और content collections
- Design system (lake-teal + saffron palette — भोपाल को “झीलों का शहर” बताने पर Claude ने खुद यह रंग चुने)
- PHP contact form handler
- .htaccess security configuration
- पूरी documentation (STORY.md, DECISIONS.md, ARCHITECTURE.md, SETUP-GUIDE.md)
- सही commit messages के साथ Git commits
क्या चौंकाया
Design decisions अक्सर उम्मीद से बेहतर निकले। जब मैंने भोपाल के बारे में बताया, तो Claude ने बिना माँगे lake-teal palette और saffron accent (विरासत/सूर्यास्त के रंग) चुने। यह तुरंत सही लगा।
Documentation वास्तव में उपयोगी निकली। STORY.md हर फ़ैसले को उसके कारण सहित दर्ज करती है। छह महीने बाद जब मैं इस प्रोजेक्ट पर वापस आऊँगा, तो यह समझने की ज़रूरत नहीं पड़ेगी कि चीज़ें इस तरह क्यों हैं।
Claude ने तब वापस धकेला जब मैं गलत था। मुझे लगता था कि contact form के लिए VPS या Node.js चाहिए। Claude ने साफ़ समझाया कि यह गलत क्यों है और shared hosting पर PHP मेरे use case के लिए बेहतर क्यों है। उस तरह की ईमानदार सुधार की मुझे ज़रूरत थी।
अगर दोबारा करूँ तो
Content पहले शुरू करूँगा। Architecture में कई घंटे की बातचीत लगी। पहला असली लेख (Explore section में Upper Lake वाला) सिस्टम तैयार होने के बाद लगभग 20 मिनट में लिखा गया। System ज़रूरी है, लेकिन content ही लोगों को साइट पर लाती है।
क्रेडेंशियल पहले तैयार रखूँगा। GA4 ID, WhatsApp number और AMFI ARN जैसी चीज़ें पहले session में ही दे सकता था। इसके बजाय वे placeholders हैं। कोई बड़ी बात नहीं, लेकिन पहली deployment साफ़ होती।
इसका मतलब क्या है
bhopali.in ने मुझे सिखाया कि AI-assisted build में मेरा काम एक स्पष्ट, माँग करने वाले client का है — निष्क्रिय दर्शक का नहीं। मैं जितना specific था (brand voice, साइट कैसी feel करनी चाहिए, क्या छोड़ना है), नतीजे उतने बेहतर थे। अस्पष्ट prompts से अस्पष्ट नतीजे मिले।
जो skills काम आईं: जो चाहिए वो जानना, उसे सटीक शब्दों में बताना, और जब सुझाव सही न लगे तो वापस धकेलना।
जो skills अब कम मायने रखती हैं: TypeScript syntax जानना, Astro i18n configure करना जानना, .htaccess security headers कैसे लिखें जानना।
यह एक सार्थक बदलाव है। और यह पूरी साइट उसका सबूत है।
पूरी build बातचीत docs/STORY.md में दर्ज है — एक जीवंत दस्तावेज़ जो हर बदलाव के साथ अपडेट होता है।