ChatGPT वेबसाइट एडिटर: Chrome में मौजूदा साइट को ठीक करें

किसी मौजूदा प्रोजेक्ट के लिए ChatGPT को वेबसाइट एडिटर की तरह इस्तेमाल करने के लिए कोडिंग सेशन को रेंडर हुए पेज और उसके सोर्स फ़ोल्डर, दोनों से कनेक्ट करें। फिर कोई खास बदलाव मांगें, फ़ाइल का डिफ़ देखें और पेज रीलोड करें। Lizard Studio में आप Chrome में कोई एलिमेंट चुनकर उसे ChatGPT पैनल में भेज सकते हैं, जो लोकल Codex CLI के ज़रिए चलता है।

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

Lizard Studio हम बनाते हैं। इस गाइड में मोबाइल लेआउट का एक छोटा बग है जिसे आप किसी ऐप फ़्रेमवर्क के बिना रिप्रोड्यूस कर सकते हैं। 14 सितंबर 2026 को हमने उदाहरण को ब्राउज़र में चलाकर और लिंक किए गए प्रोडक्ट डॉक्यूमेंटेशन को पढ़कर जांचा। यह उदाहरण एक CSS फ़िक्स को वेरिफ़ाई करता है, एजेंट की स्पीड या सफलता दर को नहीं।

अपने प्रोजेक्ट के लिए एडिटिंग वर्कफ़्लो चुनें

अगर आप ChatGPT के अंदर ही साइट बनाना और होस्ट करना चाहते हैं, तो ChatGPT Sites पर विचार करें। OpenAI के डॉक्यूमेंटेशन के मुताबिक आप किसी प्रॉम्प्ट से या किसी कम्पैटिबल मौजूदा लोकल प्रोजेक्ट से शुरू कर सकते हैं। प्रोजेक्ट को उस वर्कफ़्लो में ले जाने से पहले कम्पैटिबिलिटी जांचें। ChatGPT Sites डॉक्यूमेंटेशन।

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

स्क्रीनशॉट से समस्या समझाई जा सकती है, लेकिन उससे यह पता नहीं चलता कि लेआउट किस फ़ाइल में तय होता है। एक उपयोगी एडिटिंग सेशन दोनों चीज़ें जांचता है।

पेज और सोर्स फ़ोल्डर कनेक्ट करें

ChatGPT सेटअप गाइड पूरी करें: एक्सटेंशन और लोकल होस्ट इंस्टॉल करें, Codex CLI में साइन इन करें, फिर Lizard Studio में ChatGPT और अपना प्रोजेक्ट फ़ोल्डर चुनें। एक्सटेंशन और होस्ट मुफ़्त हैं; प्रोवाइडर अकाउंट की शर्तें और उपयोग की सीमाएँ फिर भी लागू होती हैं।

अपने प्रोजेक्ट का डेवलपमेंट सर्वर शुरू करें और उसका लोकल URL Chrome में खोलें। एडिट मांगने से पहले यह पूछें:

Report the current page URL and the project folder you can edit.
Find the source file for this page. Do not change it yet.

जवाब जांचें। डिप्लॉय किया गया पेज और लोकल पेज एक जैसे दिख सकते हैं, जबकि दोनों अलग कोड लोड कर रहे हों। अगर सेशन किसी दूसरे फ़ोल्डर की ओर इशारा करता है, तो आगे बढ़ने से पहले उसे ठीक करें।

इस एक्सरसाइज़ के लिए responsive-card.html को एक खाली लोकल फ़ोल्डर में डाउनलोड करें। ब्राउज़र का Save Page As कमांड इस्तेमाल करें और HTML only चुनें, या लिंक की गई सोर्स फ़ाइल सेव करें। उस फ़ोल्डर को लोकल HTTP सर्वर से सर्व करें:

python3 -m http.server 8080

http://localhost:8080/responsive-card.html खोलें और Lizard Studio में वही फ़ोल्डर चुनें। उदाहरण में सादा HTML और CSS है। अगर आप यह फ़ाइल अकेले डाउनलोड करते हैं, तो इसका वैकल्पिक फ़ॉन्ट sans-serif पर फ़ॉलबैक हो जाता है। Open बटन सिर्फ़ दिखाने के लिए है, वह कुछ नहीं करता।

फ़िक्स मांगने से पहले मोबाइल ओवरफ़्लो रिप्रोड्यूस करें

रिस्पॉन्सिव प्रीव्यू या Chrome DevTools से व्यूपोर्ट की चौड़ाई 390 CSS पिक्सेल सेट करें। कार्ड में एक लंबा फ़ाइल नाम और एक Open बटन है। नाम पंक्ति में उपलब्ध जगह से ज़्यादा जगह लेता है, और पेज साइड में स्क्रॉल होने लगता है।

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

मौजूदा Studio सेशन में इंस्पेक्टर और टूलबार। अपने कार्ड की जांच के लिए इन कंट्रोल्स का उपयोग करें; यहां दिखाई गई वैल्यू स्क्रीनशॉट में चुने गए एलिमेंट की हैं।

एजेंट को ऐसा नतीजा बताएँ जिसे वह खुद जांच सके:

At a viewport width of 390px, the selected file card makes the
page scroll horizontally. Find the cause in responsive-card.html
and fix the source CSS.

Keep the full file name readable and the Open button visible.
Keep the colors, labels and desktop layout. Do not hide overflow
on the page or shrink the font to make the content fit.

Show the diff. Reload and check the page at 390px and 1280px.
Report the viewport width and the document scroll width at each.

आखिरी पंक्तियां ज़रूरी हैं: ओवरफ़्लो छिपाने से स्क्रॉलबार तो हट सकता है, लेकिन किसी कंट्रोल का हिस्सा पहुंच से बाहर रह सकता है। लक्ष्य में पढ़ने लायक कंटेंट और काम करने वाला बटन, दोनों शामिल हैं।

CSS बदलाव की समीक्षा करें

इस फ़िक्स्चर में .file-info एक फ़्लेक्स आइटम है। इसका डिफ़ॉल्ट न्यूनतम साइज़ और लंबा फ़ाइल नाम पंक्ति को संकरे कार्ड में फ़िट नहीं होने देते। एक छोटा-सा फ़िक्स आइटम को सिकुड़ने देता है और नाम को ज़रूरत के हिसाब से टूटकर अगली लाइन में जाने देता है:

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  margin: 0;
  color: #e9edf4;
  overflow-wrap: anywhere;
}

यह इस सैंपल का जवाब है, वेबसाइट के हर एलिमेंट पर लगाने वाला नियम नहीं। किसी दूसरे प्रोजेक्ट में ओवरफ़्लो की वजह कोई फ़िक्स्ड चौड़ाई, ग्रिड ट्रैक या इमेज हो सकती है। फ़िक्स लगाने से पहले एजेंट से वह CSS नियम पहचानने को कहें।

सोर्स डिफ़ पढ़ें। उसमें फ़ाइल नाम, बटन लेबल और रंग वैसे ही रहने चाहिए। इस एक्सरसाइज़ को पास करने के लिए डिफ़ में पेज पर overflow-x: hidden नहीं जुड़ना चाहिए, नाम छोटा नहीं होना चाहिए और साझा टाइपोग्राफ़ी नहीं बदलनी चाहिए।

रीलोड के बाद नतीजा जांचें

390px पर पूरा नाम कार्ड के अपने हिस्से में ही रैप होकर अगली लाइन में जाना चाहिए। Open बटन कार्ड के अंदर ही रहना चाहिए। 1280px पर जांचें कि डेस्कटॉप वाली पंक्ति अब भी सही दिखती है।

यह रीड-ओनली जांच आप ब्राउज़र कंसोल में चला सकते हैं, या एजेंट से यही वैल्यू रिपोर्ट करने को कह सकते हैं:

({
  viewportWidth: document.documentElement.clientWidth,
  scrollWidth: document.documentElement.scrollWidth,
  hasHorizontalOverflow:
    document.documentElement.scrollWidth >
    document.documentElement.clientWidth
})

सुधरे हुए फ़िक्स्चर को दोनों चौड़ाई पर hasHorizontalOverflow: false रिपोर्ट करना चाहिए। कार्ड को भी खुद जांचें: सिर्फ़ डॉक्यूमेंट की चौड़ाई की जांच से यह साबित नहीं होता कि हर एलिमेंट पढ़ने लायक है।

एक बार और रीलोड करें। अगर बग वापस आ जाता है, तो पुष्टि करें कि एजेंट ने वही फ़ाइल एडिट की है जिसे आपका सर्वर सर्व करता है। जो बदलाव सिर्फ़ लाइव DOM पर किया गया हो, वह ब्राउज़र के सोर्स दोबारा लोड करते ही आम तौर पर गायब हो जाता है।

हमने मूल और सुधरे हुए फ़िक्स्चर को 390px और 1280px पर जांचा, जिसमें डॉक्यूमेंट ओवरफ़्लो, बटन की सीमाएँ और बिना बदला टेक्स्ट शामिल थे। आप लिंक की गई शुरुआती फ़ाइल और ऊपर दिए गए CSS से यही जांच दोहरा सकते हैं। हमने अलग-अलग एजेंट्स के बीच नियंत्रित तुलना नहीं की।

ये माप Chromium में साइट का Geist फ़ॉन्ट लोड करके लिए गए हैं। डाउनलोड की गई कॉपी में फ़ॉलबैक फ़ॉन्ट इस्तेमाल हो सकता है और मूल चौड़ाई अलग आ सकती है; स्वीकार करने की वही शर्तें जांचें।

उदाहरण से अपनी वेबसाइट पर आएँ

एक समस्या चुनें और उससे प्रभावित रूट, व्यूपोर्ट और अपेक्षित नतीजा बताएँ। React ऐप में यह फ़िक्स किसी कंपोनेंट, CSS मॉड्यूल या यूटिलिटी क्लास में हो सकता है। सेशन को असली प्रोजेक्ट का एक्सेस दें और उससे वह सोर्स ढूंढने को कहें।

लोकल जांच के बाद वे जांचें चलाएँ जिनकी आपके प्रोजेक्ट को आम तौर पर ज़रूरत होती है। साझा कार्ड कई रूट पर दिख सकता है; कमिट करने से पहले उसके किसी दूसरे इस्तेमाल को भी देखें। बदलाव तैयार होने पर उसे अपनी सामान्य रिलीज़ प्रक्रिया से पब्लिश करें। सिर्फ़ लोकल फ़ाइल एडिट करने से आपकी डिप्लॉय की गई साइट अपने आप अपडेट नहीं होती।

अगर आप अभी ब्राउज़र टूल चुन रहे हैं, तो डेवलपर्स के लिए ChatGPT Chrome एक्सटेंशन पढ़ें। उसमें आधिकारिक एक्सटेंशन और Lizard Studio की तुलना उनके डॉक्यूमेंटेशन में बताए गए वर्कफ़्लो के आधार पर की गई है।

आम सवाल

क्या ChatGPT किसी मौजूदा वेबसाइट को एडिट कर सकता है?

हाँ, अगर चुने गए टूल के पास प्रोजेक्ट या उसके एडिटर का एक्सेस है। यह गाइड Lizard Studio के Codex CLI कनेक्शन के ज़रिए लोकल सोर्स फ़ोल्डर का उपयोग करती है। ChatGPT Sites के लिए जांचें कि मौजूदा प्रोजेक्ट उसके सपोर्टेड वर्कफ़्लो में फ़िट होता है या नहीं।

क्या यह स्क्रीनशॉट से CSS ठीक कर सकता है?

स्क्रीनशॉट दिखने वाली समस्या समझाने में मदद करता है। सेशन को सोर्स और रेंडर हुए नतीजे को जांचने का तरीका भी दें। ओवरफ़्लो के लिए व्यूपोर्ट की चौड़ाई बताएँ और यह भी कि कौन-सा कंटेंट पढ़ने लायक रहना चाहिए।

क्या Lizard Studio आधिकारिक ChatGPT एक्सटेंशन है?

नहीं। Lizard Studio एक स्वतंत्र, ओपन-सोर्स एक्सटेंशन है। OpenAI का अपना अलग आधिकारिक एक्सटेंशन है; डेवलपर तुलना देखें।

क्या लोकल एडिट से लाइव वेबसाइट बदल जाएगी?

सिर्फ़ तब, जब आप बदला हुआ सोर्स उस साइट की रिलीज़ प्रक्रिया से पब्लिश करेंगे। लोकल नतीजा टेस्ट करें, डिफ़ की समीक्षा करें और रिलीज़ के बाद डिप्लॉय किया गया रूट वेरिफ़ाई करें।