चैट एजेंट्स के साथ काम करने का एक इंटरफ़ेस है, लेकिन UI का काम अक्सर स्थानिक होता है। डिज़ाइनर, PMs और frontend डेवलपर्स अक्सर annotations के ज़रिए संवाद करते हैं, जो elements, regions या पेज की स्थिति की ओर इशारा करते हैं।

Design Mode, जिसे हम आज अपडेट कर रहे हैं, इस दूरी को कम करने का एक हिस्सा है कि आप जो देखते हैं और एजेंट जो समझता है, उनके बीच कितना फ़ासला है। यह आपको flow में बने रहते हुए संदर्भ के भीतर अपने उत्पाद को संपादित करने देता है।

Cursor ब्राउज़र से आप किसी भी element पर क्लिक कर सकते हैं, पेज पर ड्रॉ कर सकते हैं, या आवाज़ में बदलाव का वर्णन कर सकते हैं, और Cursor वह संदर्भ प्राप्त कर लेता है जिसकी उसे कोड संपादित करने के लिए ज़रूरत होती है, जबकि आप अगले संपादन पर आगे बढ़ जाते हैं।

एजेंट्स के साथ डिज़ाइन बदलावों पर iterate करने का यह एक तेज़ और आसान तरीका है, क्योंकि अब निर्देश सिर्फ़ एक वाक्य नहीं रह गया है—इसके बजाय इसमें चुना गया element, उसके पीछे का कोड, आसपास का लेआउट और पेज पर मौजूद विज़ुअल संबंध भी शामिल हो सकते हैं।

इससे किसी चीज़ को नोटिस करने और उसे संपादित करने के बीच का लूप और छोटा हो जाता है। आप चल रहे उत्पाद से बाहर निकले बिना इंटरफ़ेस के ठीक उस हिस्से की ओर इशारा कर सकते हैं, जिसकी आप बात कर रहे हैं, और फिर उत्पाद के भीतर ही उसी के आधार पर संदर्भ देते रह सकते हैं, जबकि एजेंट्स पीछे से संपादन करते रहते हैं।

#बदलाव को इंगित करें, बनाकर दिखाएँ, या बताकर समझाएँ

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

जब बदलाव elements के बीच के संबंध पर निर्भर करता है, तब multi-select उपयोगी होता है। आप दो कंपोनेंट का संदर्भ दे सकते हैं और एजेंट से कह सकते हैं कि एक को दूसरे जैसा बना दे, दोहराई गई सामग्री हटा दे, या कंपोनेंट के किसी समूह को एक साथ समायोजित करे।

जब एजेंट को यह जानने की आवश्यकता हो कि निर्देश पेज के किस हिस्से पर लागू होता है, तब drawing उपयोगी होती है। आप किसी भरे हुए section को घेर सकते हैं, किसी क्षेत्र को बॉक्स कर सकते हैं, या किसी animated page के हिस्से को चिह्नित कर सकते हैं। annotation viewport के एक स्थिर frame के ऊपर रहती है, इसलिए एजेंट ठीक वही page state देखता है, जिस पर आप प्रतिक्रिया दे रहे थे।

इस release में, आप अपनी आवाज़ का इस्तेमाल करके निर्देश बता भी सकते हैं, और हमने targeting को अधिक सटीक और अनुभव को तेज़ बनाया है। कुल मिलाकर, इससे Design Mode में visual interactions सामान्य editing loop का अधिक स्वाभाविक हिस्सा लगती हैं।

अंदरूनी तौर पर, किसी element को चुनने से संदर्भ में दो पूरक संकेत जुड़ जाते हैं: element की identity (xpath, कंपोनेंट, attributes, computed styles, fiber tree से props) और स्थानिक संदर्भ के लिए एक स्क्रीनशॉट (लेआउट, आसपास के elements, और पेज की सटीक स्थिति)। इससे एजेंट को स्रोत खोजने और कोड को कुशलता से संपादित करने के लिए ठीक वही जानकारी मिल जाती है, जिसकी उसे ज़रूरत होती है।

#काम की लय के साथ मॉडल का तालमेल

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

Design Mode आपको ये बदलाव जैसे ही नज़र आएँ, वैसे ही भेजने देता है। आप किसी एक element की ओर इशारा कर सकते हैं, बदलाव बता सकते हैं, पेज के किसी दूसरे हिस्से पर जा सकते हैं, और पहला संपादन पूरा होने से पहले एक और संपादन भेज सकते हैं। Design Mode आपके लिए एक साथ कई काम करना आसान बनाता है और कई उप-एजेंट्स को प्रबंधित करना संभव करता है।

यह कार्यप्रवाह ऐसे मॉडल के साथ सबसे अच्छा काम करता है, जो तेज़ी से लक्षित UI परिवर्तन कर सके। Composer 2.5 इसमें बेहतरीन है, क्योंकि यह तेज़ भी है और इंटरफ़ेस के काम में भी मजबूत है। जैसे-जैसे एजेंट्स अपना काम पूरा करते हैं, ऐप हॉट रीलोड होता रहता है। आप बदलावों को चलते हुए उत्पाद में उभरते देखते हैं और तब तक आगे बढ़ते रहते हैं, जब तक इंटरफ़ेस बिल्कुल सही न लगने लगे।

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

एजेंट्स विंडो में Design Mode आज़माएँ। और जानने के लिए ब्राउज़र दस्तावेज़ पढ़ें, या शुरू करने के लिए Cursor डाउनलोड करें।