Cursor Design Mode Annotate: AI एजेंट से वेबसाइट का UI कैसे बदलें

Cursor Design Mode Annotate से चालू वेब पेज पर बदलाव बताते समय एलिमेंट की जानकारी और स्क्रीनशॉट भी कोडिंग एजेंट को भेज सकते हैं। Cursor 3.24.18 या बाद के संस्करण में Agents Window का ब्राउज़र खोलें और Annotate चुनें या Cmd/Ctrl + Shift + D दबाएँ। कई जुड़े बदलाव एक साथ भेजने के लिए Batch edits चालू करें।

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

Annotate कहाँ मिलता है और केवल पेन का आइकन क्यों दिख रहा है?

Annotate, Cursor के Agents Window के अंदर ब्राउज़र की टूलबार में मिलता है। कौन-सा बटन दिखाई देगा, यह आपके संस्करण और इस्तेमाल किए जा रहे इंटरफ़ेस पर निर्भर करता है।

इसे खोलने के लिए ये चरण अपनाएँ:

1. Cursor में अपना प्रोजेक्ट और Agents Window खोलें।
2. एजेंट का नया सेशन शुरू करें या मौजूदा सेशन खोलें। फिर वह ब्राउज़र खोलें जिसमें आपका ऐप चल रहा है।
3. ब्राउज़र की टूलबार में Annotate पर क्लिक करें। दूसरा विकल्प है ब्राउज़र पर फ़ोकस लाना और macOS पर Cmd + Shift + D दबाना। Windows और Linux पर Ctrl + Shift + D दबाएँ।
4. इसके बजाय कमांड पैलेट खोलकर Toggle Design Mode भी खोज सकते हैं।
5. पेज के ऊपरी हिस्से में दी गई संकेत-पंक्ति देखें। इसमें उपलब्ध क्लिक और ड्रैग संबंधी कार्रवाइयों की जानकारी मिलती है।

Cursor के आधिकारिक Design Mode दस्तावेज़ों के अनुसार, Annotate के लिए Cursor 3.24.18 या बाद का संस्करण चाहिए।

अगर पेन के आइकन पर Design Mode लिखा है, तो पहले अपना संस्करण जाँचें। पुराने संस्करणों में नए Annotate बटन की जगह यही विकल्प मिलता है। दस्तावेज़ों में बताया गया Annotate इंटरफ़ेस पाने के लिए Cursor अपडेट करें।

टूलबार का रूप बदलने के दो अन्य कारण भी हैं। पहली बार Design Mode खोलने से पहले बटन पर Try Annotate का पूर्वावलोकन और छोटा प्रदर्शन दिखाई देता है। पाँच से अधिक नोट बनाने के बाद बटन पर केवल आइकन दिखता है।

Design Mode से बाहर निकलने के लिए संकेत-पंक्ति में निकास बटन दबाएँ, वही शॉर्टकट दोबारा दबाएँ या Esc दबाएँ। Esc पहले खींची जा रही रेखा, टेक्स्ट का संपादन या खुला नोट रद्द करता है। ये कार्रवाइयाँ बंद होने के बाद ही वह Design Mode से बाहर निकलता है।

Cursor के सार्वजनिक दस्तावेज़ों में यह स्पष्ट नहीं है कि Annotate किन सदस्यता योजनाओं में मिलता है। सभी खातों तक इसे पहुँचाने की समय-सारणी भी नहीं दी गई है। केवल सही संस्करण होने से हर खाते में इसकी उपलब्धता न मानें।

एलिमेंट कैसे चुनें, निशान कैसे बनाएँ और CSS कैसे बदलें?

जिस कंपोनेंट में बदलाव चाहिए, वह पता हो तो उसका एलिमेंट चुनें। समस्या दूरी, संरेखण या कई हिस्सों की व्यवस्था से जुड़ी हो तो पूरा क्षेत्र चिह्नित करें।

एक या कई एलिमेंट चुनें

चल रहे ऐप में किसी एलिमेंट पर क्लिक करें। वह चुना जाएगा और एक नोट खुलेगा। उसमें बदलाव का निर्देश लिखें।

उदाहरण के लिए, एक SaaS डैशबोर्ड की कल्पना करें। उसकी हेडर पट्टी में बहुत सारे हिस्से, एक खोज फ़ील्ड और फ़िल्टर बटनों की कतार है। खोज फ़ील्ड चुनें और यह निर्देश दें:

इनपुट फ़ील्ड की ऊँचाई और उसके अंदर की खाली जगह बढ़ाएँ। उसके टेक्स्ट को फ़िल्टर बटनों के साथ लंबवत संरेखित करें। मौजूदा रंगों की योजना बनाए रखें।

चुना गया एलिमेंट एजेंट को बदलाव की जगह बताता है। नोट का टेक्स्ट समझाता है कि परिणाम कैसा होना चाहिए।

एक संबंधित बदलाव के लिए कई एलिमेंट चुनने हों, तो Shift दबाकर हर एलिमेंट पर क्लिक करें। मसलन, खोज फ़ील्ड और फ़िल्टर बटन चुनें। फिर एजेंट को उन्हें एक आधाररेखा पर संरेखित करने और उनकी ऊँचाई समान करने को कहें।

कई एलिमेंट एक साथ तब चुनें जब उन्हें मिलकर बदलना हो। बदलाव स्वतंत्र हों या उनके निर्देश अलग हों, तो अलग-अलग नोट अधिक स्पष्ट रहते हैं।

कोई क्षेत्र चिह्नित करें और पेज पर निशान बनाएँ

पेज पर ड्रैग करके क्षेत्र चिह्नित करें। उसके बाद बदलाव समझाएँ और ज़रूरत के अनुसार निशान जोड़ें।

संकेत-पंक्ति में चार उपकरण मिलते हैं:

• Draw: कोई आकृति बनाएँ या बदलाव वाले हिस्से को रेखा से घेरें।
• Ellipse: किसी एलिमेंट या समूह को अंडाकार निशान से घेरें।
• Rectangle: पेज के हिस्से के चारों ओर आयत बनाएँ।
• Arrow: बदलने वाली जगह की ओर तीर बनाएँ।

ड्रैग करते समय Shift दबाए रखें, ताकि गति एक अक्ष तक सीमित रहे। आयत को उसके केंद्र से बनाने के लिए macOS पर Option या Windows और Linux पर Alt दबाए रखें। निशान बनाने की पिछली कार्रवाई वापस लेने के लिए Cmd/Ctrl + Z दबाएँ।

मान लें कि डैशबोर्ड में सारांश कार्ड चार्ट के बहुत पास है। कार्ड और चार्ट के बीच वाले क्षेत्र को आयत से घेरें। फिर यह नोट जोड़ें:

सारांश कार्डों और चार्ट के बीच 24px का लंबवत अंतर जोड़ें। चार्ट के मौजूदा आयाम बनाए रखें और लेआउट को रिस्पॉन्सिव रखें।

यहाँ रिस्पॉन्सिव का मतलब है कि लेआउट अलग-अलग स्क्रीन आकारों के अनुरूप ढलता रहे। चित्र बदलाव की जगह बताता है। टेक्स्ट अपेक्षित बदलाव और बनाए रखने वाली शर्तें समझाता है।

टेक्स्ट सीधे पेज पर बदलें

किसी टेक्स्ट एलिमेंट पर डबल-क्लिक करके उसकी सामग्री बदलें। बदलाव सहेजने के लिए Return या Enter दबाएँ। उसे वापस लेने के लिए Esc दबाएँ।

उदाहरण के लिए, ब्राउज़र में हेडिंग “Usage Overview” को सीधे “API Usage” में बदलें। इसकी जगह क्या लिखना है, यह अलग से समझाने की ज़रूरत नहीं है।

एक अंतर ध्यान में रखें: टेक्स्ट के बदलाव हमेशा Send दबाने तक रुके रहते हैं, भले ही Batch edits बंद हो। पेज पर बदलाव सहेजने से वह तुरंत एजेंट तक नहीं पहुँचता।

इसे सोर्स कोड में बदलाव के प्रस्ताव की तरह समझें, केवल ब्राउज़र में हुई स्थायी तब्दीली की तरह नहीं। Cursor इसे नोट के साथ भेजता है, ताकि एजेंट मूल प्रोजेक्ट अपडेट कर सके।

इंस्पेक्टर से CSS प्रॉपर्टी बदलें

एक एलिमेंट से जुड़े नोट में Edit CSS properties चुनें। इससे उस एलिमेंट का CSS इंस्पेक्टर खुलता है। सूची फ़िल्टर करके प्रॉपर्टी खोजें, उसका मान बदलें और CSS बदलाव नोट के साथ भेजें।

यह तरीका अंदरूनी दूरी, फ़ॉन्ट का आकार, display का व्यवहार या स्थिति बदलने जैसे कामों में उपयोगी है। हर बात शब्दों में समझाने के बजाय सीधे प्रॉपर्टी का मान तय कर सकते हैं।

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

बोलकर नोट लिखें

नोट में टेक्स्ट या CSS बदलाव होने पर आवाज़ से निर्देश जोड़ने का विकल्प मिलता है। Dictate पर क्लिक करें या बोलते समय बटन दबाए रखें।

बोले गए निर्देश और चित्र साथ इस्तेमाल कर सकते हैं। उदाहरण के लिए, प्रचार वाले बैनर को घेरें। फिर कहें कि टेक्स्ट छोटा करें, बटन दाईं ओर संरेखित करें और मोबाइल पर हिस्सों को एक के नीचे एक रखें।

भेजने से पहले तैयार नोट पढ़ें। निशान बदलाव की जगह बताते हैं और बोले गए निर्देश अपेक्षित परिणाम समझाते हैं। एक कंपोनेंट पर कई बदलाव करने हों, तो निर्देश खास तौर पर स्पष्ट रखें।

Batch edits कब चालू करना चाहिए?

कई संबंधित बदलाव इकट्ठे करके एजेंट को साथ भेजने हों, तो Batch edits चालू करें। एलिमेंट या क्षेत्र का नोट तुरंत भेजकर अगला कदम तय करने से पहले परिणाम देखना हो, तो इसे बंद रखें।

यह स्विच शुरू में बंद रहता है। इससे एलिमेंट और क्षेत्र वाले नोट भेजने का तरीका बदलता है। सीधे पेज पर किए गए टेक्स्ट बदलाव हमेशा Send दबाने तक रुके रहते हैं।

व्यवहार	Batch edits बंद	Batch edits चालू
एलिमेंट या क्षेत्र वाले नोट	अलग-अलग भेजे जाते हैं	क्रमांक वाले पिन के रूप में इकट्ठे होते हैं
एलिमेंट या क्षेत्र का नोट भेजना	नोट में Return या Enter दबाकर तुरंत भेजें	टूलबार का Send बटन दबाकर सभी लंबित नोट भेजें
संदेशों का समूह	हर नोट अलग संदेश में जाता है	सभी लंबित नोट एक संदेश में जाते हैं
सीधे पेज पर टेक्स्ट के बदलाव	Send दबाने तक रुके रहते हैं	Send दबाने तक रुके रहते हैं
लंबित नोट देखना	लंबित टेक्स्ट बदलाव हों, तो उन्हें Send की सूची में देखें	Send के पास की सूची में इकट्ठे नोट देखें
लंबित नोट हटाना	Clear All से लंबित नोट हटाएँ; पहले भेजे नोट नहीं हटते	Clear All से लंबित नोट हटाएँ

तुरंत भेजे जाने वाले नोट और लंबित टेक्स्ट बदलाव अलग हैं। Batch edits बंद होने पर एलिमेंट या क्षेत्र का नोट Return या Enter से तुरंत भेज सकते हैं। पेज पर किया गया टेक्स्ट बदलाव भेजने तक लंबित रहता है। ऐसे बदलाव Send की सूची में देखें या Clear All से लंबित नोट हटा दें।

Batch edits चालू होने पर टूलबार में Annotate की जगह Send बटन दिखता है। उसके साथ लंबित नोटों की संख्या भी आती है। भेजने से पहले क्रमांक वाले पिन जाँच सकते हैं। सभी लंबित नोट भेजने पर Design Mode भी बंद हो जाता है।

अगर नोट भेजे बिना Design Mode से बाहर निकलें, तो Send बटन टूलबार में बना रहता है। वह नोट भेजने या हटाने तक दिखाई देता है।

उदाहरण: कीमतों वाले पेज का डिज़ाइन सुधारें

मान लें कि कीमतों वाले पेज पर तीन समस्याएँ हैं:

1. मुख्य हेडिंग ऊँचाई में बहुत अधिक जगह लेती है।
2. मुख्य कार्रवाई वाला बटन कीमत के साथ संरेखित नहीं है।
3. तुलना वाली तालिका छोटी स्क्रीन पर बहुत भरी हुई दिखती है।

Batch edits चालू करें और हर समस्या के लिए नोट बनाएँ।

हेडिंग का टेक्स्ट चुनें और उसका आकार घटाने को कहें, पर बाकी सामग्री के मुकाबले उसका महत्त्व स्पष्ट रहे। बटन और कीमत साथ चुनें, ताकि उनका अपेक्षित संरेखण समझ आए। तालिका का संबंधित क्षेत्र चिह्नित करें और बताएँ कि छोटी स्क्रीन पर वह कैसे दिखनी चाहिए।

भेजने से पहले क्रमांक वाले पिन देखें। हर नोट सही एलिमेंट या क्षेत्र से जुड़ा होना चाहिए। फिर पूरा समूह एक संदेश में भेजें।

यह तरीका तब उपयोगी है जब बदलाव एक ही काम के जुड़े हुए हिस्से हों। एजेंट सभी नोट साथ देखकर उनके आपसी संबंध समझ सकता है। फिर भी इससे हर निर्देश के सही लागू होने की गारंटी नहीं मिलती।

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

नोट के अंदर या पेज पर टेक्स्ट संपादित करते समय Cmd/Ctrl + L भी दबा सकते हैं। इससे सामग्री तुरंत भेजने या Send के लिए रोकने के बजाय चैट के इनपुट बॉक्स में आती है। Option/Alt दबाकर किसी एलिमेंट पर क्लिक करें, तो वह सीधे चैट के इनपुट बॉक्स में जुड़ता है। नोट पहले से खुला हो, तो यही शॉर्टकट एलिमेंट को उस नोट में जोड़ता है।

एजेंट को वास्तव में कौन-सी जानकारी मिलती है?

हर भेजे गए नोट में आपके निर्देश, एलिमेंट का व्यवस्थित विवरण और चुने हुए हिस्से का स्क्रीनशॉट शामिल होता है। समर्थित React, Vue और Svelte ऐप में कंपोनेंट की जानकारी भी मिलती है। इससे एजेंट को संबंधित सोर्स कोड खोजने में मदद मिलती है।

Cursor के दस्तावेज़ हर चुने गए एलिमेंट के लिए यह जानकारी बताते हैं:

जानकारी	Cursor क्या भेजता है	इससे क्या मदद मिलती है
HTML टैग	एलिमेंट के टैग का नाम	एलिमेंट का प्रकार पता चलता है
एट्रिब्यूट	एलिमेंट का id, क्लास और एट्रिब्यूट	उसे दूसरे एलिमेंट से अलग पहचान सकते हैं
सेलेक्टर का पथ	CSS सेलेक्टर जैसी संरचना वाला पथ	ब्राउज़र में बने पेज पर एलिमेंट खोज सकते हैं
दिख रहा टेक्स्ट	दिखाई देने वाले टेक्स्ट के पहले 200 अक्षर	चुने गए एलिमेंट को उसकी सामग्री से जोड़ सकते हैं
आकार और स्थान	एलिमेंट के आयाम और स्थिति	उसकी जगह और माप समझ आते हैं
कंप्यूटेड स्टाइल	रंग, पृष्ठभूमि का रंग, फ़ॉन्ट का आकार, फ़ॉन्ट परिवार, display और position	ब्राउज़र में लागू स्टाइल की जानकारी मिलती है
कंपोनेंट का संदर्भ	React, Vue और Svelte ऐप में कंपोनेंट का नाम और कंपोनेंट स्टैक	पेज पर दिख रहे एलिमेंट को सोर्स कोड से जोड़ने में मदद मिलती है
स्क्रीनशॉट	चुने गए एलिमेंट या निशान सहित चिह्नित क्षेत्र का कटा हुआ चित्र	बदलाव का दृश्य संदर्भ मिलता है

यह “हेडर बेहतर बनाओ” जैसे सामान्य निर्देश से अधिक स्पष्ट है। एजेंट को बदलाव की जगह, ब्राउज़र में लागू गुण, दिख रहा टेक्स्ट और चित्र मिलता है।

फिर भी यह पेज की सीमित झलक है। दस्तावेज़ पूरे DOM, पूरी स्टाइलशीट या हर पूर्वज एलिमेंट के कंप्यूटेड स्टाइल भेजने का वादा नहीं करते। ऐप की पूरी स्थिति या पूरे पेज का स्क्रीनशॉट भी सुनिश्चित नहीं है। सूचीबद्ध फ़्रेमवर्क में कंपोनेंट स्टैक मिलता है, पर इससे हर प्रोजेक्ट में सही सोर्स फ़ाइल मिलने की गारंटी नहीं है।

मसलन, बटन चुनने पर एजेंट को उसका प्रकार, क्लास, आयाम, टेक्स्ट और कंप्यूटेड स्टाइल मिलते हैं। स्क्रीनशॉट से कीमत के पास उसकी स्थिति समझने में मदद मिल सकती है। React ऐप में कंपोनेंट की जानकारी उस बटन को उसके कंपोनेंट स्टैक से जोड़ने में मदद कर सकती है।

Vue और Svelte के लिए भी इसी तरह के कंपोनेंट संदर्भ का उल्लेख है। Cursor इनमें भी कंपोनेंट का नाम और कंपोनेंट स्टैक शामिल करता है। दस्तावेज़ अलग-अलग फ़्रेमवर्क या प्रोजेक्ट में सोर्स कोड खोजने के एक जैसे परिणाम का वादा नहीं करते।

एजेंट को फिर भी रिपॉज़िटरी देखनी होगी, आसपास का कोड समझना होगा और बदलाव का तरीका तय करना होगा। काम पूरा होने के बाद कोड के बदलाव और चालू पेज जाँचें।

Annotate के स्क्रीनशॉट और एलिमेंट विवरण की टोकन लागत निकालने का सूत्र Cursor के दस्तावेज़ों में नहीं दिया गया है। हर नोट की लागत तय मानकर न चलें। नोट साथ भेजने से मॉडल का कुल इस्तेमाल हमेशा घटेगा, यह भी न मानें। Batch edits नोट भेजने का तरीका बदलता है। वास्तविक लागत एजेंट के काम करने के तरीके और मॉडल के इस्तेमाल पर निर्भर करती है।

एजेंट के बदलावों की जाँच कैसे करें?

Annotate से निर्देश स्पष्ट करें। फिर प्रोजेक्ट के कोड और ब्राउज़र में दिख रहे पेज, दोनों में परिणाम जाँचें।

नोट भेजने के बाद ये चरण अपनाएँ:

1. एजेंट को संबंधित बदलाव पूरे करने दें।
2. कोड में असंबंधित बदलाव, गलत सेलेक्टर और प्रोजेक्ट के कंपोनेंट संबंधी नियमों से हटकर किए गए बदलाव देखें।
3. डेवलपमेंट सर्वर हॉट रीलोड का समर्थन करता हो, तो उसके बाद चालू पेज जाँचें।
4. ऐप के लिए ज़रूरी व्यूपोर्ट आकारों पर लेआउट फिर देखें। व्यूपोर्ट ब्राउज़र में पेज का दिखाई देने वाला क्षेत्र है।
5. जहाँ आवश्यक हो, क्लिक जैसी कार्रवाइयाँ और सुगम्यता जाँचें। कीबोर्ड फ़ोकस और टेक्स्ट की पठनीयता भी देखें।

Cursor के 28 अक्टूबर 2026 के ऐलान में अलग-अलग स्क्रीन आकारों पर डिज़ाइन की समीक्षा का उल्लेख है। लेकिन उपलब्ध सार्वजनिक Design Mode दस्तावेज़ स्वचालित रिस्पॉन्सिव जाँच का तरीका नहीं बताते। इसलिए व्यूपोर्ट की जाँच अलग चरण में करें, जब तक आपके स्थापित संस्करण के लिए इसकी स्वचालित प्रक्रिया दस्तावेज़ों में न दी गई हो।

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

पूरी विकास प्रक्रिया के लिए उपकरण चुन रहे हों, तो 2026 में Cursor और Codex की तुलना पढ़ें। इसमें काम करने के तरीके, कीमतों और माँग के अनुसार इस्तेमाल की तुलना दी गई है।