Claude Code विज़ुअल एडिटर: एलिमेंट चुनें और उसकी CSS ठीक करें

Lizard Studio के साथ Chrome: पेज, इंस्पेक्टर और चैट एक ही विंडो में रहते हैं। इस स्क्रीनशॉट में ChatGPT कनेक्शन दिखाया गया है।

Claude Code के लिए विज़ुअल एडिटर ऐसा होना चाहिए जो पेज का वह हिस्सा पहचानने में मदद करे जिसे आप बदलना चाहते हैं, और सोर्स में नतीजा जांचने में भी। Lizard Studio में आप Chrome में कोई एलिमेंट चुनते हैं, उसे चैट में अटैच करते हैं और Claude Code से अपने लोकल प्रोजेक्ट में एडिट करने को कहते हैं। ब्राउज़र बातचीत के बगल में ही रहता है, ताकि आप नतीजा इंस्पेक्ट कर सकें।

यह गाइड स्पेसिंग की एक छोटी एक्सरसाइज़ पर आधारित है, जिसका नतीजा आप माप सकते हैं: दो बटनों के बीच का गैप 4px से 24px करना। आप सोर्स डिफ़ जांचेंगे, पेज रिफ्रेश करेंगे और गैप को फिर से इंस्पेक्ट करेंगे। यह ऐसी एक्सरसाइज़ है जिसे कोई भी दोहरा सकता है; यह न तो परफ़ॉर्मेंस बेंचमार्क है और न ही इस बारे में कोई दावा कि एजेंट आपका प्रोजेक्ट कितनी जल्दी पूरा करेगा।

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

यहाँ विज़ुअल एडिटिंग का क्या मतलब है

Lizard Studio एजेंट को कॉन्टेक्स्ट देने के लिए एलिमेंट सेलेक्टर और डिज़ाइन टूल्स का उपयोग करता है। आप बताते हैं कि सोर्स में क्या बदलना है; फ़ाइल में एडिट Claude Code करता है। यह वर्कफ़्लो उस तरीके से अलग है जिसमें आप किसी एलिमेंट को हाथ से ड्रैग करते हैं और उम्मीद करते हैं कि एडिटर तुरंत उसके हिसाब से CSS लिख देगा।

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

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

उदाहरण डाउनलोड करें

यहाँ उपयोग होने वाले छोटे स्टैटिक सर्वर के लिए आपको Python 3 चाहिए, साथ ही Chrome, Lizard Studio और साइन-इन किया हुआ Claude Code इंस्टॉलेशन भी। किसी मौजूदा ऐप के लिए उसका सामान्य डेवलपमेंट सर्वर ही उपयोग करें।

एक्सरसाइज़ के लिए एक खाली फ़ोल्डर बनाएँ। ब्राउज़र के Save page as कमांड से spacing.html को उसमें डाउनलोड करें, या उस फ़ोल्डर में यह चलाएँ:

curl -fsS https://lizard.build/studio-examples/spacing.html -o spacing.html
python3 -m http.server 4175 --bind 127.0.0.1

Chrome में http://127.0.0.1:4175/spacing.html खोलें। काम करते समय सर्वर को चलने दें। अगर पोर्ट 4175 पहले से उपयोग में है, तो कोई दूसरा पोर्ट चुनें और URL में वही नंबर डालें।

पेज पर दो सैंपल बटन हैं, जो कुछ नहीं करते। उनकी रो में जानबूझकर यह CSS रखी गई है:

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 24px;
}

Lizard Studio में यही फ़ोल्डर चुनें, ताकि एजेंट spacing.html को एडिट कर सके। lizard.build पर उदाहरण खोलने से सिर्फ़ पब्लिश की गई एक्सरसाइज़ दिखती है; अपनी डाउनलोड की गई कॉपी बदलने के लिए लोकल URL चाहिए।

वह रो चुनें जिसे आप बदलना चाहते हैं

साइड पैनल में Claude Code चैट शुरू करें। Selector का उपयोग करके वह .actions रो अटैच करें जिसमें दोनों बटन हैं। अगर गलती से कोई एक बटन चुन लिया जाए, तो उसकी पैरेंट रो चुनें या बता दें कि टारगेट रो का गैप है।

एडिट करने से पहले आप read-only जांच के लिए कह सकते हैं:

Inspect the selected action row. Report its computed gap and the
local file that defines it. Do not change any files yet.

शुरुआती गैप 4px होना चाहिए। सोर्स आपकी डाउनलोड की गई spacing.html के अंदर की स्टाइलशीट है। अगर एजेंट कोई दूसरी फ़ाइल या पेज बताता है, तो एडिट की रिक्वेस्ट करने से पहले प्रोजेक्ट फ़ोल्डर या ब्राउज़र टैब ठीक करें।

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

सोर्स में एक छोटा एडिट मांगें

चुनी गई रो को ऐसी रिक्वेस्ट के साथ भेजें जिसमें नतीजा और दायरा, दोनों साफ़ लिखे हों:

Set the selected action row's gap to 24px in spacing.html.
Keep the button labels, colors and card margin unchanged.
Show the source diff. Refresh the page and check that the
computed gap is 24px.

एजेंट के सुझाए गए एडिट को रिव्यू करें। संबंधित बदलाव असल में इसके बराबर होना चाहिए:

- .actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 24px; }
+ .actions { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; }

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

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

असली रिक्वेस्ट फ़ील्ड में अटैच किया गया एलिमेंट “1 selection” के रूप में दिखता है। इस स्क्रीनशॉट में ChatGPT और ब्राइटनेस बदलने की रिक्वेस्ट है; इस एक्सरसाइज़ के लिए Claude Code चुनें और ऊपर दी गई स्पेसिंग वाली रिक्वेस्ट का उपयोग करें।

रिफ्रेश के बाद पेज जांचें

Python सर्वर में हॉट रीलोड नहीं होता। फ़ाइल बदलने के बाद Chrome रिफ्रेश करें, फिर एजेंट से .actions को दोबारा इंस्पेक्ट करने को कहें।

आप Chrome DevTools में computed value भी जांच सकते हैं:

getComputedStyle(document.querySelector('.actions')).gap
// Expected: "24px"

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

काम पूरा होने की जांच के लिए यह चेकलिस्ट उपयोग करें:

• लोकल सोर्स में .actions के लिए gap: 24px है।
• पेज रिफ्रेश करने के बाद भी नया गैप बना रहता है।
• बटन का टेक्स्ट और रंग नहीं बदलते।
• .card का मार्जिन 32px ही रहता है।
• कम चौड़ाई पर भी पेज ठीक से उपयोग किया जा सकता है।

अगर प्रोजेक्ट Git का उपयोग करता है, तो git diff पढ़ें। इस अकेली फ़ाइल के लिए आपके एडिटर का कंपेयर व्यू भी वही बदलाव दिखा सकता है। एक्सरसाइज़ तब पूरी होती है जब फ़ाइल और ब्राउज़र में एक ही वैल्यू दिखे।

बदलाव गायब क्यों हो सकता है

कोई ब्राउज़र टूल प्रोजेक्ट की किसी भी फ़ाइल को बदले बिना लाइव DOM बदल सकता है या इनलाइन स्टाइल जोड़ सकता है। इससे किसी आइडिया का प्रीव्यू देखने में मदद मिल सकती है, लेकिन रिफ्रेश करने पर ब्राउज़र ओरिजिनल सोर्स दोबारा लोड कर लेता है।

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

React या किसी दूसरे फ़्रेमवर्क में सोर्स कोई अलग स्टाइलशीट नहीं, बल्कि कोई कंपोनेंट, CSS मॉड्यूल या utility class भी हो सकता है। एजेंट से वह CSS रूल ढूंढने को कहें जिससे यह स्पेसिंग तय होती है। जब सिर्फ़ एक एक्शन रो बदलनी हो, तो सभी बटनों पर लागू होने वाले ग्लोबल रूल को बदलने से बचें।

असली UI समस्या पर भी यही तरीका अपनाएँ

ऐसी समस्या चुनें जिसका नतीजा आप साफ़ बता सकें: कोई कार्ड जो एक तय चौड़ाई पर ओवरफ़्लो होता है, कोई हेडिंग जिसे अपने कंटेनर में फ़िट होने के लिए रैप होना चाहिए, या गलत अलाइनमेंट वाली बटन रो। संबंधित एलिमेंट या एनोटेट किया गया स्क्रीनशॉट अटैच करें, फिर बताएँ कि क्या नहीं बदलना चाहिए।

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

आप यही एक्सरसाइज़ साइड पैनल में ChatGPT के साथ भी कर सकते हैं। अगर आप दोनों एजेंटों की तुलना करना चाहते हैं, तो शुरुआती फ़ाइल और जांच की शर्तें वही रखें। नाकाम कोशिशें और एजेंट को दिए गए स्पष्टीकरण नोट करें, और सिर्फ़ एक रन के आधार पर स्पीड के बारे में दावे न करें।

आम सवाल

क्या CSS एडिट करने के लिए Claude Code को स्क्रीनशॉट चाहिए?

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

क्या मैं किसी भी वेबसाइट को हमेशा के लिए एडिट कर सकता हूँ?

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

क्या यह मेरे एडिटर की जगह ले लेगा?

कोड और डिफ़ के लिए आप अपना एडिटर उपयोग करते रह सकते हैं। Lizard Studio ब्राउज़र का साइड पैनल और पेज टूल्स देता है। इंटरफ़ेस के बाकी विकल्पों की तुलना Claude Code GUI गाइड में देखें।

अगर पैनल कनेक्ट न हो, तो कहाँ से शुरू करूँ?

इंस्टॉलेशन और ट्रबलशूटिंग गाइड फ़ॉलो करें। सोर्स एडिट टेस्ट करने से पहले लोकल होस्ट, अपना एजेंट लॉगिन और चुना गया प्रोजेक्ट फ़ोल्डर जांचें।