GPT 5.2 Codex ने पाँच मिनट में मेरे लिए वेबसाइट बना दी और तब से मैं रुका नहीं हूँ

मैंने एक ही वाक्य टाइप किया। बीस सेकंड बाद पहला HTML टैग दिखने लगा। मेरी डेस्क की दाईं ओर रखी कॉफ़ी ठंडी होने तक, मेरी ब्राउज़र विंडो में एक पूरी तरह संरचित, स्टाइल की गई और आंशिक रूप से कार्यशील वेबसाइट मौजूद थी। वह वाक्य ही प्रॉम्प्ट था। बाकी का काम GPT-5.2 ने किया।

यह कोई विचार-प्रयोग नहीं था। मैंने यह एक मंगलवार दोपहर को किया, बिना किसी तैयारी के, बिना स्टार्टर टेम्पलेट्स के, बिना npm install के। बस एक प्रॉम्प्ट, एक खाली फ़ाइल और एक टाइमर। मिनट-दर-मिनट क्या हुआ, मॉडल ने बिल्कुल सही क्या किया, कहाँ वह लड़खड़ाया, और अगर आप खुद आज़माएँ तो अलग क्या करें, यह सब नीचे है।

GPT 5.2 Codex असल में है क्या

ज़्यादातर लोग GPT-5.2 को एक चैटबॉट समझ लेते हैं। यह उसे कम करके आंकना है। हाँ, आप उससे बात कर सकते हैं, लेकिन GPT-5.2 को बेहतर ढंग से रीज़निंग-फ़र्स्ट कोड इंजन कहा जा सकता है, जो सादी अंग्रेज़ी में संवाद करता है। इसे दर्जनों भाषाओं, फ़्रेमवर्क्स और पैराडाइम्स के कोड की भारी मात्रा पर प्रशिक्षित किया गया है, इसलिए यह सिर्फ़ सिंटैक्स नहीं लिखता, बल्कि इरादा लिखता है।

Codex बनाम चैट: दोनों एक चीज़ नहीं हैं

मूल Codex मॉडल, जो GPT-5.2 से कई साल पहले जारी हुआ था, पहले ही उल्लेखनीय था। आप बताते थे कि आपको क्या चाहिए और वह काम करने वाला कोड बना देता था। लेकिन उसमें व्यापक रीज़निंग की कमी थी। वह एक फ़ंक्शन भर सकता था, पर पूरे सिस्टम का आर्किटेक्चर बनाने में दिक्कत होती थी। GPT-5.2 अलग तरीके से काम करता है। वह आपके पूरे प्रोजेक्ट का मानसिक मॉडल संदर्भ में रख सकता है, सक्रिय रूप से संरचनात्मक फ़ैसले ले सकता है, और अपनी मान्यताओं को बग बनने से पहले ही चिह्नित कर सकता है।

5.2 अलग क्यों लगता है

5.2 वर्ज़न ने वेब डेवलपमेंट के लिए सबसे ज़रूरी दो चीज़ों में खास सुधार किया:

• लंबे संदर्भों में एकरूपता: सेशन की शुरुआत में आपने जो बताया, वह उसे नहीं भूलता।
• इरादतन संरचना: बिना कहे भी यह HTML को सिमेंटिक और CSS को व्यवस्थित बनाता है।

इन्हीं दो गुणों की वजह से पाँच मिनट में वेबसाइट बनना संभव है। पिछले मॉडल भी कोड लिख सकते थे। यह मॉडल ऐसा कोड लिखता है जिस पर एक इंसानी डेवलपर भी उचित रूप से गर्व कर सके।

पाँच मिनट की वेबसाइट चैलेंज

मैंने टाइमर लगाया। पाँच मिनट, एक प्रॉम्प्ट, और जनरेशन के दौरान शून्य फ़ॉलो-अप सुधार। लक्ष्य यह देखना था कि बिना हाथ पकड़े GPT-5.2 क्या बनाता है।

मैंने जो प्रॉम्प्ट इस्तेमाल किया

यह रहा बिल्कुल वही प्रॉम्प्ट, बिना बदलाव के:

"मेरे लिए एक फ़्रीलांस फ़ोटोग्राफ़र की सिंगल-पेज वेबसाइट बनाओ। इसमें एक नेविगेशन बार, टैगलाइन वाला हीरो सेक्शन, छह प्लेसहोल्डर इमेज वाला पोर्टफ़ोलियो ग्रिड, छोटी बायो वाला अबाउट सेक्शन और एक कॉन्टैक्ट फ़ॉर्म होना चाहिए। सिमेंटिक HTML5 इस्तेमाल करो, गर्म ऑफ़-व्हाइट और गहरे ऑलिव रंग पैलेट के साथ वेनिला CSS, और कॉन्टैक्ट फ़ॉर्म वैलिडेशन के लिए न्यूनतम JavaScript। कोई बाहरी लाइब्रेरी नहीं।"

बस इतना ही। कोई वायरफ़्रेम नहीं। कोई रेफ़रेंस साइट नहीं। कोई कलर कोड नहीं दिया।

पहला मिनट: ढाँचा प्रकट होता है

पहले 30 सेकंड के भीतर GPT-5.2 ने उचित lang एट्रिब्यूट के साथ <!DOCTYPE html> घोषणा, उन <meta> टैग्स के साथ <head> बना दिया जिनमें वे Open Graph प्रॉपर्टीज़ शामिल थीं, जो मैंने नहीं बताई थीं, और aria labels के साथ एक सिमेंटिक <nav>। वह आखिरी बात मेरे प्रॉम्प्ट में नहीं थी। मॉडल ने इसे खुद जोड़ा, क्योंकि वह एक्सेसिबिलिटी को वैकल्पिक चीज़ नहीं, बल्कि वेब स्टैंडर्ड मानता है।

दूसरे से चौथे मिनट तक: ढाँचे पर मांस चढ़ता है

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

मुझे जो बात चौंकाने वाली लगी, वह सिर्फ़ रफ़्तार नहीं थी। असली बात फ़ैसलों की थी। मॉडल ने बिना कहे .portfolio-item:hover ट्रांज़िशन चुने। उसने फ्लूइड टाइपोग्राफ़ी के लिए clamp() इस्तेमाल किया। उसने फ़ॉर्म वैलिडेशन ऐसे लिखा, जिसमें रियल-टाइम एरर स्टेट थे, सिर्फ़ सबमिट के समय दिखने वाला अलर्ट नहीं। ये वे चुनाव हैं जो एक सीनियर फ़्रंटएंड डेवलपर करता।

पहली बार में क्या सही निकला

तीन क्षेत्र सचमुच प्रभावशाली लगे, ऐसा आउटपुट जिसे बनाने में एक जूनियर डेवलपर को पूरी दोपहर लगती।

ऐसा सिमेंटिक HTML जो सचमुच समझ में आता है

दस्तावेज़ की संरचना ने <main>, <section>, <article>, <aside> और <footer> का सही इस्तेमाल किया। सिर्फ़ div की जगह भरने के लिए नहीं, बल्कि सही नेस्टिंग और ARIA लैंडमार्क रोल्स के साथ। यह SEO और स्क्रीन रीडर की संगतता के लिए मायने रखता है।

ऐसा CSS जिसे ज़्यादा सुधार की ज़रूरत नहीं पड़ी

स्टाइलशीट ने पहली लाइन से ही CSS कस्टम प्रॉपर्टीज़ इस्तेमाल कीं:

:root {
  --color-bg: #faf8f4;
  --color-accent: #5a6437;
  --color-text: #2c2c2c;
  --space-unit: 1rem;
}

प्रॉम्प्ट कॉपी करें

यह अच्छे अर्थ में अपनी स्पष्ट राय वाला है। मैंने जिस गर्म ऑफ़-व्हाइट और गहरे ऑलिव का ज़िक्र किया था, वह एक सुसंगत डिज़ाइन सिस्टम बन गया, सिर्फ़ पेज पर फेंके गए दो रंग नहीं। स्पेसिंग --space-unit के गुणकों में थी। कलर वेरिएबल्स बिना दोहराव के, लगातार लागू हुए।

JavaScript जो काम करता था

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

कहाँ लड़खड़ाया

इस तरह के आउटपुट में कुछ भी पूरी तरह परफ़ेक्ट नहीं आता। साइट को प्रोडक्शन-तैयार होने से पहले दो क्षेत्रों पर ध्यान देना पड़ा।

रिस्पॉन्सिव डिज़ाइन की कमियाँ

पोर्टफ़ोलियो ग्रिड मोबाइल पर ज़्यादातर ठीक चला, लेकिन हीरो सेक्शन का दो-कॉलम टेक्स्ट लेआउट 480px और उससे नीचे सही तरह स्टैक नहीं हुआ। टेक्स्ट अपने कंटेनर से बाहर निकल गया। AI-जनरेटेड CSS की यह एक ज्ञात कमज़ोरी है: यह आम ब्रेकपॉइंट्स (768px, 1024px) पर भरोसेमंद रूप से काम करता है, लेकिन 500px से नीचे की रेंज में कभी-कभी एज केस छूट जाते हैं।

💡 फ़िक्स: 375px व्यूपोर्ट चौड़ाई पर मोबाइल-फ़र्स्ट सुधार माँगने वाला एक फ़ॉलो-अप प्रॉम्प्ट जोड़ें। एक प्रॉम्प्ट, 30 सेकंड, समस्या हल।

हर जगह प्लेसहोल्डर इमेज

छह पोर्टफ़ोलियो इमेज टेक्स्ट वाले ग्रे बॉक्स के रूप में दिख रही थीं। काम चलाऊ थीं, पर असली लॉन्च के लिए इस्तेमाल लायक नहीं। यहीं वर्कफ़्लो कुछ और दिलचस्प बन जाता है, क्योंकि स्टॉक फ़ोटो ढूँढने की बजाय इसे AI इमेज जनरेशन से हल किया जा सकता है।

आउटपुट को और आगे कैसे ले जाएँ

पाँच मिनट की वेबसाइट एक शुरुआती बिंदु है, तैयार उत्पाद नहीं। असली वर्कफ़्लो उसके बाद आता है।

फ़ॉलो-अप प्रॉम्प्ट्स से सुधार

GPT-5.2 पूरी बातचीत में संदर्भ बनाए रखता है। इसलिए शुरुआती जनरेशन के बाद आप लक्ष्य-केंद्रित निर्देश जारी रख सकते हैं:

• "CSS को 375px से मोबाइल-फ़र्स्ट बनाने के लिए रीफ़ैक्टर करो।"
• "एक स्टिकी हेडर जोड़ो जिसका बैकग्राउंड स्क्रॉल पर बदल जाए।"
• "पोर्टफ़ोलियो ग्रिड में लाइटबॉक्स इफ़ेक्ट जोड़ो।"

इनमें से हर एक में लगभग 15 से 30 सेकंड लगते हैं और यह पहले से बने कोड में ठीक से जुड़ने वाला, काम करता कोड देता है। मॉडल सब कुछ शुरू से नहीं लिखता; वह सिर्फ़ संबंधित हिस्सों में सटीक बदलाव करता है।

AI टूल्स से असली इमेज जोड़ना

यहीं वेबसाइट एक प्रोटोटाइप से दृश्य रूप से आकर्षक चीज़ में बदलती है। फ़ोटो खोजने की बजाय आप उन्हें जनरेट कर सकते हैं। Flux 2 Pro और GPT Image 1.5 जैसे मॉडल टेक्स्ट प्रॉम्प्ट से सेकंडों में फ़ोटोरियलिस्टिक इमेज बनाते हैं।

फ़ोटोग्राफ़ी पोर्टफ़ोलियो साइट के लिए आप ये जनरेट करेंगे:

• एक हीरो बैकग्राउंड: एक चौड़ा, नाटकीय लैंडस्केप शॉट
• छह पोर्टफ़ोलियो ग्रिड इमेज: अलग-अलग सब्जेक्ट, एक जैसी सौंदर्य शैली
• अबाउट सेक्शन के लिए हेडशॉट: गर्म, प्राकृतिक रोशनी, पेशेवर पर मिलनसार

Flux 1.1 Pro Ultra 8K डिटेल के साथ फ़ोटोरियलिस्टिक आउटपुट के लिए खास तौर पर मज़बूत है। Google का Imagen 4 जटिल सीन कम्पोज़िशन अच्छी तरह संभालता है। Stable Diffusion 3.5 Large कई इमेज में स्टाइल की एकरूपता पर बारीक नियंत्रण देता है, और यह तब मायने रखता है जब पोर्टफ़ोलियो इमेज को एक ही फ़ोटोग्राफ़र की खींची हुई लगना ज़रूरी हो।

अलग-अलग साइट प्रकारों के लिए GPT 5.2 का उपयोग

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

लैंडिंग पेज बनाम पूरी साइट

लैंडिंग पेज वह जगह है जहाँ GPT-5.2 सचमुच चमकता है। सिंगल-पेज, साफ़ पदानुक्रम, एक कन्वर्ज़न लक्ष्य। मॉडल स्वाभाविक रूप से सोशल प्रूफ़ सेक्शन, लाभ-केंद्रित हेडिंग्स और स्पष्ट कॉल टू एक्शन शामिल कर देता है, भले ही आप इनका ज़िक्र न करें।

डायनामिक डेटा वाले मल्टी-पेज साइट्स की बात अलग है। CMS वाले ब्लॉग, डेटाबेस वाले ई-कॉमर्स स्टोर, या ऑथेंटिकेशन वाले SaaS ऐप के लिए आप मॉडल से ऐसा आर्किटेक्चर माँग रहे हैं जो एक प्रॉम्प्ट में उचित रूप से नहीं समा सकता। इन्हें सेशनों में बाँटें: पहले आर्किटेक्चर, फिर पेज-दर-पेज, फिर अलग-अलग कंपोनेंट्स।

फ़्रेमवर्क कब इस्तेमाल करें

GPT-5.2 उत्कृष्ट React, Vue और Svelte कंपोनेंट्स लिखता है। स्टैटिक साइट्स के लिए वेनिला HTML और CSS जल्दी जनरेट होते हैं और डिप्लॉय करना आसान है। किसी भी बड़े पैमाने के इंटरैक्टिव प्रोजेक्ट के लिए शुरू से ही अपने पसंदीदा फ़्रेमवर्क में लिखने को कहें, क्योंकि प्रोजेक्ट के बीच में वेनिला से React में रीफ़ैक्टर करना इंसान खुद करे तब भी दर्दनाक होता है।

इसका डेवलपर्स के लिए मतलब

इस सब के नीचे का सीधा सवाल: क्या यह डेवलपर्स की जगह ले लेगा? नहीं, और इसके कारण ठोस हैं, सिर्फ़ दिलासा देने वाले नहीं।

यह आपकी जगह नहीं लेगा

GPT-5.2 आपके क्लाइंट का असली बिज़नेस लॉजिक नहीं जानता। उसे नहीं पता कि आपके चेकआउट फ़्लो में पेमेंट प्रोसेसर की ज़रूरत की वजह से तीन-चरण का सत्यापन है। उसे नहीं पता कि नेव को 768px की बजाय 920px पर collapse होना चाहिए, क्योंकि कुछ मॉनिटरों पर सबसे लंबा मेन्यू आइटम असामान्य रूप से चौड़ा है। उसे नहीं पता कि कॉन्टैक्ट सेक्शन को क्लाइंट के दशक पुराने CRM से एक मालिकाना XML API के ज़रिए जुड़ना है।

यह सारा संदर्भ-आधारित, संस्थागत और संबंधों से जुड़ा ज्ञान आपके पास है।

यह आपको तेज़ बनाएगा

यह जो करता है वह है बोरिंग स्कैफ़ोल्डिंग को खत्म करना। बेसलाइन HTML दस्तावेज़ सेट करना, CSS रीसेट लिखना, कंपोनेंट की संरचना बनाना, बॉयलरप्लेट फ़ॉर्म वैलिडेशन लिखना, रिस्पॉन्सिव ग्रिड बनाना, ये काम गायब हो जाते हैं। जो बचता है वह असली सोच है: आर्किटेक्चर के फ़ैसले, क्लाइंट की ज़रूरतें, एज केस, परफ़ॉर्मेंस और सुरक्षा।

💡 सीधी बात: AI कोड जनरेशन का प्रभावी उपयोग करने वाले डेवलपर्स अपना समय डिज़ाइन सिस्टम, क्लाइंट कम्युनिकेशन और परफ़ॉर्मेंस ऑप्टिमाइज़ेशन पर लगाते हैं। ये दिन का बारहवाँ फ़्लेक्स कंटेनर लिखने से कहीं ज़्यादा मूल्यवान काम हैं।

PicassoIA पर GPT 5.2 कैसे उपयोग करें

PicassoIA आपको अलग API सब्सक्रिप्शन या IDE प्लगइन के बिना सीधे GPT-5.2 तक पहुँच देता है। आप इससे वेब इंटरफ़ेस के ज़रिए बात करते हैं और उसी सेशन में इमेज जनरेशन मॉडल के साथ जोड़ सकते हैं।

चरण-दर-चरण: आपका पहला AI-बनाया पेज

चरण 1: PicassoIA पर GPT-5.2 खोलें और नया सेशन शुरू करें।

चरण 2: ऐसा प्रॉम्प्ट लिखें जो निर्दिष्ट करे:

• साइट का प्रकार (पोर्टफ़ोलियो, लैंडिंग पेज, SaaS होमपेज, आदि)
• कलर पैलेट या दृश्य मूड
• आपको किस क्रम में कौन-से सेक्शन चाहिए
• कोई भी बाधाएँ (कोई फ़्रेमवर्क नहीं, मोबाइल-फ़र्स्ट, एक्सेसिबल, आदि)

चरण 3: आउटपुट को .html फ़ाइल में कॉपी करें और उसे ब्राउज़र में खोलें। देखें कि क्या काम करता है और किसमें बदलाव चाहिए।

चरण 4: GPT-5.2 पर लौटें और विशेष सुधारों के लिए लक्ष्य-केंद्रित फ़ॉलो-अप प्रॉम्प्ट दें। एलिमेंट्स को उनके क्लास नाम या ID से साफ़-साफ़ बताएँ।

चरण 5: जब ढाँचा मज़बूत हो जाए, तब अपने विज़ुअल्स जनरेट करें। सामान्य फ़ोटोरियलिस्टिक इमेज के लिए Flux 2 Pro, विशेष टेक्स्ट या प्रोडक्ट प्लेसमेंट वाले सीन के लिए GPT Image 1.5, और हाई-फ़िडेलिटी प्रयोगात्मक आउटपुट के लिए Flux Dev इस्तेमाल करें।

चरण 6: HTML में प्लेसहोल्डर्स को अपनी जनरेट की गई इमेज URL से बदलें, किसी होस्टिंग सेवा पर डिप्लॉय करें, और आपकी साइट लाइव है।

ऐसे सुझाव जो सचमुच काम आते हैं

• पैलेट के बारे में शुरू में ही साफ़-साफ़ बताएँ: रंगों के फ़ैसले हर CSS सेलेक्टर पर असर डालते हैं। पहले प्रॉम्प्ट में अपना सटीक मूड बताएँ (गर्म अर्थ टोन, ठंडे मोनोक्रोम, बोल्ड प्राइमरी)।
• सेक्शन के नाम रखें: मॉडल को बताएँ कि हर सेक्शन की ID क्या हो। इससे फ़ॉलो-अप प्रॉम्प्ट कहीं ज़्यादा तेज़ होते हैं।
• आउटपुट में कमेंट माँगें: मॉडल से इनलाइन CSS कमेंट जोड़ने को कहें। इससे सुधार के दौरान सेक्शन ढूँढना आसान होता है।
• CSS वेरिएबल ब्लॉक माँगें: भले ही आपको पूरा डिज़ाइन सिस्टम न चाहिए, सारी वैल्यूज़ :root में रखने से रंग और स्पेसिंग बदलना बेहद आसान हो जाता है।

आज ही अपनी पहली AI-जनरेटेड साइट बनाएँ

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

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

PicassoIA GPT-5.2 को Flux 2 Pro, GPT Image 1.5, Imagen 4 और दर्जनों दूसरे इमेज और भाषा मॉडल के साथ एक ही जगह पर रखता है। एक मॉडल से कोड लिखें, दूसरे से विज़ुअल जनरेट करें, और दोनों पर उसी सेशन में काम करें। कोई टैब बदलना नहीं, अलग सब्सक्रिप्शन नहीं, टूल्स के बीच संदर्भ बदलने की झंझट नहीं।

एक सेशन खोलें। अपना प्रॉम्प्ट टाइप करें। टाइमर लगाएँ। देखें आप कितना बना सकते हैं।