Sketch:
इसे बनाएँ, और एजेंट समझ जाता है कि आपका मतलब क्या है
Sketch एक ड्रॉइंग कैनवस है जो सीधे AI एजेंट कंपोज़र में बना हुआ है। एक मॉकअप या डायग्राम स्केच करने के लिए एक खाली कैनवस खोलें, या एनोटेट करने के लिए एक स्क्रीनशॉट खोलें। बग पर गोला लगाएँ, एक तीर खींचें, हिस्से को हाइलाइट करें, एक नोट जोड़ें। ड्रॉइंग आपके मैसेज से अटैच होकर आपके AI कोडिंग एजेंट को भेजी जाती है।
एक तस्वीर हज़ार शब्दों के बराबर है, और एक AI एजेंट के लिए यह दोगुना सच है। 'मॉडल के ऊपर-दाईं ओर का बटन किनारे के बहुत पास है' लिखने के बजाय, आप उस पर गोला लगा देते हैं। स्केच आपके प्रॉम्प्ट के बगल में आ जाता है, एजेंट को विज़ुअल फ़ीडबैक एक ही बार में मिल जाता है, और आपने कभी टर्मिनल नहीं छोड़ा।
Sketch एक्शन में: कंपोज़र से कैनवस खोलें, किसी स्क्रीनशॉट पर विज़ुअल बग को गोले से घेरें, ड्रॉइंग अटैच करें, उसे एजेंट को भेजें।
यह रही वह समस्या जिसे Sketch हल करता है। आप किसी AI एजेंट के साथ vibe coding कर रहे हैं और स्क्रीन पर कुछ गलत दिख रहा है। एक कार्ड ओवरफ़्लो हो रहा है, एक बटन कुछ पिक्सेल खिसका हुआ है, एक row की स्पेसिंग टूटी हुई है। एजेंट से इसे ठीक करवाने के लिए, आपको दृश्य समस्या को शब्दों में बयान करना पड़ता है। 'बीच वाले कॉलम में दूसरा कार्ड, अवतार वाला, उसकी padding दाईं ओर बहुत कसी हुई है।' आप तीन वाक्य लिखते हैं, एजेंट अंदाज़ा लगाता है, वह गलत एलिमेंट ठीक कर देता है, आप तीन और लिखते हैं।
Sketch अंदाज़े को हटा देता है। आप एक स्क्रीनशॉट लेते हैं, उसे Sketch कैनवस में खोलते हैं, टूटे हुए कार्ड के चारों ओर एक लाल गोला बनाते हैं, एक तीर और शब्द 'यहाँ बहुत कसा हुआ' जोड़ते हैं, और इसे अपने मैसेज से अटैच कर देते हैं। एजेंट अब किसी पैराग्राफ की व्याख्या नहीं करता। वह ड्रॉइंग को देखता है। विज़ुअल फ़ीडबैक साफ़ है क्योंकि वह दृश्य है।
Sketch दूसरी दिशा में भी काम करता है। एक खाली कैनवस से शुरू करें और एजेंट के बनाने से पहले स्केच करें कि आप क्या चाहते हैं: एक स्क्रीन का कच्चा मॉकअप, एक लेआउट का wireframe, एक flow का त्वरित डायग्राम। एक हाथ से बनाया स्केच एजेंट को टेक्स्ट की दीवार से बेहतर ढाँचा देता है। आप प्रोटोटाइप बनाते हैं, एजेंट उसे कोड करता है।
कंपोज़र से खुला Sketch कैनवस: किसी स्क्रीनशॉट पर एनोटेशन करें, आकार और तीर बनाएँ, फिर ड्रॉइंग को अपने एजेंट को भेजे जाने वाले मैसेज से अटैच करें।
Sketch आपके एजेंट वर्कफ़्लो में क्यों जरूरी है
सटीकता। किसी स्क्रीनशॉट पर एक गोला ठीक एक एलिमेंट पर इशारा करता है। एक वाक्य एक अनुमान पर इशारा करता है। जब आप समस्या बनाते हैं, तो एजेंट वही चीज़ ठीक करता है जो आपका सचमुच मतलब था, उसके बगल वाली चीज़ नहीं। फिर से 'नहीं, वह दूसरा बटन, उसके नीचे वाला' नहीं।
रफ़्तार। किसी हिस्से के चारों ओर एक आयत बनाने में तीन सेकंड लगते हैं। उसी हिस्से को शब्दों में बयान करने में तीन वाक्य लगते हैं, और वे वाक्य फिर भी अस्पष्ट रहते हैं। Sketch किसी विज़ुअल बग को एनोटेट करना एक झंझट से एक रिफ़्लेक्स में बदल देता है।
अभिव्यक्ति। कुछ विचार आकार होते हैं, वाक्य नहीं। एक लेआउट, एक flow, एक स्क्रीन। Sketch के साथ आप मॉकअप या डायग्राम को सीधे बनाते हैं, फ़्रीहैंड या आकारों और तीरों के साथ, और ड्रॉइंग को एजेंट को spec के रूप में सौंप देते हैं।
Flow। Sketch कंपोज़र के अंदर रहता है। आप एक अलग ड्रॉइंग ऐप नहीं खोलते, आप कोई फ़ाइल एक्सपोर्ट नहीं करते, आप कुछ भी इधर-उधर नहीं खींचते। ड्रॉइंग और आपका लिखा प्रॉम्प्ट एक ही मैसेज में साथ चलते हैं, इसलिए एजेंट को पूरा संदर्भ एक साथ मिल जाता है।
Sketch कैसे काम करता है, शुरू से अंत तक
कंपोज़र में Sketch बटन से लेकर एजेंट मैसेज से अटैच एक ड्रॉइंग तक।
कंपोज़र से Sketch खोलें
हर एजेंट कंपोज़र में एक Sketch बटन होता है। उस पर क्लिक करें और एक पूरी-स्क्रीन ड्रॉइंग कैनवस खुल जाती है, इस्तेमाल के लिए तैयार, जिसमें rectangle टूल पहले से सक्रिय होता है ताकि आप तुरंत चीज़ों को घेर सकें।
खाली कैनवस पर बनाएँ, या किसी इमेज पर एनोटेट करें
एक मॉकअप, एक wireframe या एक डायग्राम स्केच करने के लिए खाली कैनवस से शुरू करें। या कोई मौजूदा इमेज खोलें: कंपोज़र में एक स्क्रीनशॉट डालें, फिर उसके थंबनेल पर पेंसिल (या फ़ाइल प्रीव्यू में Annotate) पर क्लिक करके उस पर बनाएँ।
स्केच, गोला, तीर, हाइलाइट, टाइप
कैनवस आपको फ़्रीहैंड ड्रॉइंग, rectangles, ellipses, तीर, लाइनें और टेक्स्ट देता है। किसी टूटे एलिमेंट पर गोला लगाएँ, उस पर एक तीर डालें, किसी zone को हाइलाइट करें, उसके बगल में एक छोटा नोट लिखें। जो भी विज़ुअल फ़ीडबैक को साफ़ बनाए।
ड्रॉइंग को अपने मैसेज से अटैच करें
Attach to message पर क्लिक करें। कैनवस एक PNG के रूप में एक्सपोर्ट होकर कंपोज़र में एक थंबनेल के रूप में जुड़ जाता है, ठीक एक डाली गई फ़ाइल की तरह। जब आप किसी मौजूदा इमेज पर एनोटेशन करते हैं, तो एनोटेट किया गया वर्शन मूल थंबनेल की जगह ले लेता है, ताकि एजेंट को दोनों कभी न मिलें।
इसे एजेंट को भेजें
हमेशा की तरह अपना प्रॉम्प्ट टाइप करें और भेजें। PNG आपके मैसेज से उसी पाइपलाइन से अटैच होता है जैसे कोई भी दूसरी फ़ाइल। ड्रॉइंग और आपका टेक्स्ट एक ही टर्न में, साथ-साथ एजेंट तक पहुँचते हैं।
एजेंट ड्रॉइंग पढ़ता है
आपका AI कोडिंग एजेंट स्केच को एक इमेज अटैचमेंट के रूप में पाता है। जब तक उसका मॉडल इमेज इनपुट सपोर्ट करता है, वह ठीक वही देखता है जिस पर आपने गोला लगाया, तीर खींचा और हाइलाइट किया, और किसी बयान को पढ़ने के बजाय विज़ुअल फ़ीडबैक पर काम करता है।
Sketch इस्तेमाल करने के दो तरीके
शून्य से शुरू करें, या जो पहले से वहाँ है उस पर बनाएँ।
खाली कैनवस: एक मॉकअप स्केच करें
एक खाली कैनवस खोलें और बनाएँ कि आप एजेंट से क्या बनवाना चाहते हैं। एक स्क्रीन का कच्चा मॉकअप, एक लेआउट का wireframe, एक कॉम्पोनेंट का प्रोटोटाइप, एक डेटा flow का डायग्राम। फ़्रीहैंड स्ट्रोक, बॉक्स, तीर और टेक्स्ट लेबल। एक हाथ से बनाया स्केच एक ऐसा spec है जिसका एजेंट UI के बयान का एक भी पैराग्राफ लिखे बिना पालन कर सकता है।
एनोटेट: किसी स्क्रीनशॉट पर बनाएँ
कैनवस में एक स्क्रीनशॉट या कोई भी इमेज लोड करें और उसे मार्क करें। टेढ़े एलिमेंट पर गोला लगाएँ, ओवरफ़्लो पर एक तीर खींचें, गलत रंग को हाइलाइट करें, बग के बगल में 'इसे ठीक करो' लिखें। Sketch कैनवस आपकी इमेज को बैकग्राउंड लेयर के रूप में लेकर खुलता है, आप उसके ऊपर बनाते हैं, और एनोटेट किया गया स्क्रीनशॉट सीधे एजेंट को विज़ुअल फ़ीडबैक के रूप में चला जाता है।
Sketch असल में क्या है
Sketch एक पूरा ड्रॉइंग कैनवस है जो AgentsRoom डेस्कटॉप ऐप में जुड़ा हुआ है, जिसे किसी भी AI एजेंट के कंपोज़र से खोला जाता है। यह ऊपर मार्कर वाला कोई स्क्रीनशॉट व्यूअर नहीं है। आपको असली ड्रॉइंग टूल मिलते हैं: फ़्रीहैंड पेन, rectangles, ellipses, तीर, लाइनें और टेक्स्ट, वही टूलकिट जिसकी आप एक ढंग की स्केचिंग सतह से उम्मीद करते हैं।
कैनवस दो मोड में चलता है। Blank मोड आपको मॉकअप, wireframes और डायग्राम के लिए एक खाली सतह देता है। Annotate मोड किसी मौजूदा इमेज को बैकग्राउंड के रूप में लोड करता है और आपको उसके ऊपर बनाने देता है। आप annotate मोड तक कंपोज़र से पहले से अटैच किसी भी इमेज के थंबनेल से, या फ़ाइल प्रीव्यू में Annotate बटन से पहुँचते हैं।
जब आप ड्रॉइंग अटैच करते हैं, तो Sketch कैनवस को एक सफ़ेद बैकग्राउंड पर एक PNG के रूप में एक्सपोर्ट करता है ताकि हर स्ट्रोक पढ़ने लायक रहे, फिर फ़ाइल को कंपोज़र की अटैचमेंट ट्रे में डाल देता है। वहाँ से ड्रॉइंग सामान्य रास्ते पर चलती है: यह आपके प्रॉम्प्ट के साथ चलती है और एजेंट को एक इमेज के रूप में भेजी जाती है। Sketch कोई नया भेजने का तरीका नहीं जोड़ता, यह उसी में जुड़ जाता है जो पहले से वहाँ है।
सब कुछ आपकी मशीन पर ही रहता है। स्केच लोकल रूप से डिस्क पर सेव होते हैं और आपकी repository में कमिट नहीं किए जाते या किसी थर्ड-पार्टी सर्विस पर पुश नहीं किए जाते। वे डिज़ाइन के हिसाब से क्षणिक होते हैं: एक ड्रॉइंग एक मैसेज के लिए संदर्भ है, ऐसी फ़ाइल नहीं जिसे आपको संभालना पड़े। Sketch लोकल, निजी और provider-agnostic है: यह जिस भी एजेंट का मॉडल एक इमेज स्वीकार करता है उसके साथ काम करता है, इसलिए Claude Code और Codex सेटअप, दोनों को वही drawing-to-agent फ़्लो मिलता है।
लोग Sketch से क्या बनाते हैं
तीन पैटर्न जो एक ड्रॉइंग को एजेंट से बात करने का सबसे तेज़ तरीका बना देते हैं।
एक विज़ुअल बग रिपोर्ट करें
टूटे UI का स्क्रीनशॉट लें, एलिमेंट पर गोला लगाएँ, ओवरफ़्लो पर तीर खींचें, गलत स्पेसिंग को हाइलाइट करें। एजेंट उसके बयान को समझने के बजाय विज़ुअल बग देखता है। किसी AI एजेंट को UI रिग्रेशन रिपोर्ट करने का अकेला सबसे तेज़ तरीका।
एक मॉकअप या wireframe स्केच करें
एजेंट के बनाने से पहले स्क्रीन बनाएँ। एक कच्चा wireframe, एक लेआउट स्केच, एक कॉम्पोनेंट का low-fidelity मॉकअप। ड्रॉइंग को एजेंट को brief के रूप में सौंपें और उसे आपके स्केच को कोड में बदलने दें।
एक डायग्राम या flow बनाएँ
कुछ व्याख्याएँ डायग्राम होती हैं। एक डेटा flow, एक state machine, एक पेज की संरचना, दो कॉम्पोनेंट कैसे बात करते हैं। इसे बॉक्स और तीरों से स्केच करें और डायग्राम को एजेंट को संदर्भ के रूप में भेजें।
इसे शब्दों में बयान करना बनाम इसे बनाना
वही विज़ुअल फ़ीडबैक, वही एजेंट। एक रास्ता धीमा और अस्पष्ट है, दूसरा एक स्केच है।
Sketch के बिना
- : आप दृश्य समस्या को शब्दों में बयान करते हैं और उम्मीद करते हैं कि एजेंट भी वही चित्र बनाए।
- : आप एक एलिमेंट पर इशारा करने के लिए तीन वाक्य लिखते हैं, और वह फिर भी अस्पष्ट रहता है।
- : एक मॉकअप बनाने के लिए आप एक अलग ऐप खोलते हैं, एक फ़ाइल एक्सपोर्ट करते हैं, फिर उसे कंपोज़र में खींचते हैं।
- : संदर्भ बदलाव आपके flow और एजेंट के साथ बातचीत को तोड़ देता है।
- : एजेंट गलत एलिमेंट ठीक कर देता है, आप दोबारा समझाते हैं, चक्कर लंबा खिंचता है।
Sketch के साथ
- : आप किसी स्क्रीनशॉट पर एलिमेंट को गोले से घेरते हैं और फ़ीडबैक साफ़ हो जाता है।
- : एक ड्रॉइंग तीन सेकंड में बयान के तीन वाक्यों की जगह ले लेती है।
- : कैनवस कंपोज़र में है: न कोई अलग ऐप, न एक्सपोर्ट, न खींचकर डालना।
- : आप कभी टर्मिनल नहीं छोड़ते और एजेंट के साथ धागा कभी नहीं तोड़ते।
- : एजेंट ठीक वही देखता है जो आपका मतलब था और पहली बार में ही उसे ठीक करता है।
Sketch एक दृश्य समस्या और उसे समझने वाले एक AI एजेंट के बीच का सबसे छोटा रास्ता है।
FAQ
AgentsRoom में Sketch क्या है?
Sketch एक ड्रॉइंग कैनवस है जो AI एजेंट कंपोज़र में बना हुआ है। आप इसे कंपोज़र से खोलते हैं, एक खाली कैनवस पर एक स्केच बनाते हैं या किसी मौजूदा स्क्रीनशॉट पर एनोटेशन करते हैं, और ड्रॉइंग एक PNG के रूप में एक्सपोर्ट होकर आपके AI कोडिंग एजेंट को भेजे जाने वाले मैसेज से अटैच हो जाती है। यह विज़ुअल फ़ीडबैक को किसी ऐसी चीज़ में बदल देता है जिसे आप बनाते हैं, न कि किसी ऐसी चीज़ में जिसे आप बयान करते हैं।
मैं किसी AI एजेंट को ड्रॉइंग कैसे भेजूँ?
एजेंट कंपोज़र में Sketch बटन पर क्लिक करें, कैनवस पर बनाएँ, फिर Attach to message पर क्लिक करें। ड्रॉइंग कंपोज़र में एक PNG थंबनेल बन जाती है। अपना प्रॉम्प्ट लिखें और भेजें: स्केच मैसेज से अटैच होकर आपके टेक्स्ट के साथ एजेंट तक पहुँचता है।
क्या मैं किसी स्क्रीनशॉट पर एनोटेशन कर सकता हूँ?
हाँ। कंपोज़र में एक स्क्रीनशॉट डालें, फिर उसके थंबनेल पर पेंसिल पर क्लिक करें, या फ़ाइल प्रीव्यू खोलकर Annotate पर क्लिक करें। Sketch कैनवस आपके स्क्रीनशॉट को बैकग्राउंड लेयर के रूप में लेकर खुलता है ताकि आप उसके ऊपर बना सकें: बग पर गोला लगाएँ, एक तीर जोड़ें, किसी हिस्से को हाइलाइट करें, एक नोट लिखें। जब आप अटैच करते हैं तो एनोटेट किया गया स्क्रीनशॉट मूल की जगह ले लेता है।
मैं Sketch से क्या बना सकता हूँ?
कैनवस आपको फ़्रीहैंड ड्रॉइंग, rectangles, ellipses, तीर, लाइनें और टेक्स्ट देता है। आप एक मॉकअप स्केच कर सकते हैं, एक wireframe बना सकते हैं, एक डायग्राम बिछा सकते हैं, या किसी स्क्रीनशॉट को गोलों, तीरों और हाइलाइट्स से मार्क कर सकते हैं। rectangle टूल डिफ़ॉल्ट रूप से सक्रिय रहता है ताकि आप कैनवस खुलते ही किसी एलिमेंट को घेर सकें।
क्या AI एजेंट सचमुच मेरा स्केच देखता है?
ड्रॉइंग आपके मैसेज से एक PNG इमेज के रूप में अटैच होती है। जब तक एजेंट का मॉडल इमेज इनपुट सपोर्ट करता है, वह स्केच देखता है और उस पर काम करता है। Claude और GPT-4 श्रेणी के मॉडल जो Claude Code और Codex को चलाते हैं, इमेज पढ़ते हैं, इसलिए एजेंट को आपका विज़ुअल फ़ीडबैक सीधे मिल जाता है।
Sketch के साथ कौन-से एजेंट और प्रोवाइडर काम करते हैं?
Sketch एक मानक PNG इमेज अटैच करता है, इसलिए यह provider-agnostic है। जिस भी एजेंट का मॉडल एक इमेज इनपुट स्वीकार करता है वह काम करता है: Claude Code, Codex और AgentsRoom द्वारा समर्थित बाकी CLIs। कोई प्रोवाइडर-विशिष्ट सेटअप नहीं है।
क्या मुझे किसी अलग ड्रॉइंग ऐप या whiteboard की ज़रूरत है?
नहीं। Sketch का यही मकसद है। ड्रॉइंग कैनवस कंपोज़र के अंदर है। आप किसी दूसरी विंडो में Excalidraw, Figma या कोई स्क्रीनशॉट एनोटेटर नहीं खोलते, आप कोई फ़ाइल एक्सपोर्ट नहीं करते, आप उसे वापस नहीं खींचते। Sketch पूरे draw-and-send चक्र को टर्मिनल में ही रखता है।
मेरे स्केच कहाँ सेव होते हैं? क्या वे निजी हैं?
स्केच आपकी अपनी मशीन पर लोकल रूप से सेव होते हैं। वे आपकी git repository में कमिट नहीं होते और किसी थर्ड-पार्टी सर्विस पर अपलोड नहीं किए जाते। वे क्षणिक होते हैं: एक स्केच एक मैसेज के लिए संदर्भ है, और पुराने स्केच अपने आप साफ़ हो जाते हैं।
क्या मैं किसी स्केच को दोबारा एडिट या दोबारा एनोटेट कर सकता हूँ?
हाँ। कंपोज़र में कोई भी इमेज, उस स्क्रीनशॉट सहित जिस पर आप पहले एनोटेशन कर चुके हैं, उस पर फिर से बनाने के लिए Sketch कैनवस में दोबारा खोली जा सकती है। जब आप नया वर्शन अटैच करते हैं, तो वह पिछले थंबनेल की जगह ले लेता है ताकि एजेंट को वही इमेज दो बार न मिले।
बग को बयान करने के बजाय उसे क्यों बनाएँ?
क्योंकि बयान एक अनुमान है और ड्रॉइंग नहीं। जब आप लिखते हैं 'ऊपर-दाईं ओर का बटन टेढ़ा है', तो एजेंट को स्क्रीन अपने दिमाग में फिर से बनानी पड़ती है। जब आप किसी स्क्रीनशॉट पर बटन को गोले से घेरते हैं, तो फिर से बनाने को कुछ नहीं रहता। एक तस्वीर हज़ार शब्दों के बराबर है, और किसी AI एजेंट को विज़ुअल फ़ीडबैक के लिए यह कई बर्बाद हुए टर्न के बराबर भी है।
इसके साथ अच्छा लगता है
Browser Automation
आपका QA एजेंट एक असली ब्राउज़र चलाता है और स्क्रीनशॉट कैप्चर करता है। Sketch वह तरीका है जिससे आप उन स्क्रीनशॉट में से एक पर एनोटेशन करके मार्क किया गया फ़ीडबैक वापस भेजते हैं।
Scratchpad
AgentsRoom के अंदर प्रॉम्प्ट और नोट्स के लिए एक नोटपैड। Scratchpad शब्द संभालता है, Sketch ड्रॉइंग संभालता है: दोनों एक ही एजेंट कंपोज़र को खिलाते हैं।
Vibe Coding Review
एजेंट जो भी फ़ाइल बदलता है उसे रियल टाइम में देखें। जब कोई बदलाव स्क्रीन पर गलत दिखे, तो Sketch उस पर इशारा करने का सबसे तेज़ तरीका है।
Figma to AI Agents
किसी Figma डिज़ाइन को एजेंट वर्कफ़्लो में लाएँ। Sketch उसका ज़्यादा कच्चा, ज़्यादा तेज़ रिश्तेदार है: जब आपको पूरी डिज़ाइन फ़ाइल की ज़रूरत न हो तब सीधे कंपोज़र में एक हाथ से बना मॉकअप।
बग को बयान करना बंद करें। उसे बनाएँ।
AgentsRoom डाउनलोड करें और Sketch इस्तेमाल करें: एजेंट कंपोज़र में एक ड्रॉइंग कैनवस ताकि मॉकअप स्केच करें और स्क्रीनशॉट पर एनोटेशन करें, फिर टर्मिनल कभी छोड़े बिना ड्रॉइंग अपने AI कोडिंग एजेंट को भेजें।
कंपेनियन ऐप: चलते-फिरते अपने एजेंट्स मॉनिटर करें
Claude, Codex, Antigravity CLI या किसी अन्य AI प्रदाता का उपयोग करें।
बग और अनुरोध सीधे अपने सार्वजनिक बैकलॉग में भेजें।
AgentsRoom को कार्य करते देखें।