00:00:00हर नए टूल रिलीज़ और मॉडल अपडेट के साथ AI डिज़ाइन बेहतर से बेहतर होता जा रहा है,
00:00:04लेकिन एक अच्छा डिज़ाइन सिर्फ़ एक टूल पर निर्भर रहने और यह उम्मीद करने से नहीं आता कि आपका ऐप शानदार दिखेगा।
00:00:09डिज़ाइन को बेहतर बनाने के लिए हमेशा टूल्स और रिसोर्सेज का तालमेल काम आता है,
00:00:12पर उससे भी ज़रूरी बात यह है कि आप सही काम के लिए सही टूल का चुनाव करें।
00:00:16Google के AI डिज़ाइन टूल Stitch को हाल ही में एक शानदार अपडेट मिला है, जिसने UI डिज़ाइनिंग को काफी आसान बना दिया है।
00:00:21और Vercel ने भी हाल ही में कुछ ऐसा रिलीज़ किया है जिसने Claude के Chrome extension को पीछे छोड़ दिया है
00:00:26और अब यह ब्राउज़र टेस्टिंग के लिए मेरा सबसे पसंदीदा टूल बन गया है।
00:00:29आज हमारे पास बात करने के लिए बहुत कुछ है क्योंकि मुझे उम्मीद नहीं थी कि
00:00:32इस कॉम्बिनेशन से इतना बेहतरीन डिज़ाइन निकलकर आएगा।
00:00:34Google Stitch अब AI एजेंट को कनेक्ट करने के लिए MCP के रूप में उपलब्ध है,
00:00:39जिससे यह प्रोजेक्ट्स बनाने, उन्हें मैनेज करने और एजेंट की मदद से डिज़ाइन तैयार करने में सक्षम हो गया है।
00:00:43इस अपडेट के बाद, मुझे खुद Stitch को बारीकी से प्रॉम्प्ट देने की ज़रूरत नहीं पड़ी और यह काम मैंने Claude पर छोड़ दिया।
00:00:48यह प्रोजेक्ट मैनेजमेंट और नए प्रोजेक्ट बनाने जैसी कई सुविधाएँ देता है,
00:00:53साथ ही आपके सभी एक्टिव प्रोजेक्ट्स को फेच कर सकता है। यह लिस्ट स्क्रीन और प्रोजेक्ट्स/स्क्रीन्स को एक्सेस करके उन्हें मैनेज कर पाता है।
00:00:57यह एजेंट को टेक्स्ट प्रॉम्प्ट से सीधे नए डिज़ाइन बनाने की अनुमति भी देता है।
00:01:02इसके इंस्टॉलेशन की पूरी प्रक्रिया उनके डॉक्यूमेंटेशन में स्टेप-बाय-स्टेप समझाई गई है।
00:01:06इसके लिए curl का उपयोग करके Google Cloud SDK इंस्टॉल करना पड़ता है, लेकिन चूँकि मैं Mac यूज़र हूँ,
00:01:11तो मैंने इसे brew के ज़रिए इंस्टॉल किया और Google Cloud CLI डाउनलोड होने दिया।
00:01:14आपको दो बार लॉग इन करना होगा—एक बार यूज़र के तौर पर और एक बार एप्लिकेशन के तौर पर, क्योंकि
00:01:19आपको इसे Google Cloud के किसी प्रोजेक्ट से जोड़ना होगा ताकि उस प्रोजेक्ट के अंदर Stitch API इनेबल हो सके,
00:01:24क्योंकि यह डिज़ाइन बनाने के लिए उसी प्रोजेक्ट के रिसोर्सेज का इस्तेमाल करता है।
00:01:27एक बार प्रक्रिया पूरी हो जाने के बाद, आप Stitch को किसी भी एडिटर से कनेक्ट कर सकते हैं।
00:01:31चूँकि मैं Claude Code का इस्तेमाल कर रहा था, मैंने इसे उसी में सेट किया और सारे टूल्स उपयोग के लिए तैयार थे।
00:01:35अब किसी ने हमारे लिए इस पूरी लंबी सेटअप प्रोसेस को आसान बना दिया है और एक Stitch MCP बनाया है,
00:01:41जो इस पूरी प्रक्रिया को खुद संभाल लेता है। Google Cloud इंस्टॉलेशन से लेकर प्रोजेक्ट सेटअप तक,
00:01:45यह सब कुछ अपने आप कर देता है। हालाँकि यह अनौपचारिक है। यह सिर्फ़ एक इंडिपेंडेंट एक्सपेरिमेंटल टूल है,
00:01:50पर अभी के लिए यह बहुत अच्छे से काम करता है। चाहे हम कुछ भी बना रहे हों,
00:01:54काम शुरू करने से पहले प्लानिंग करना बहुत ज़रूरी है। मैं एक मॉक टेक्निकल इंटरव्यू ऐप पर काम कर रहा था
00:01:59जो सिर्फ़ टेक्निकल इंटरव्यू तक ही सीमित नहीं है, बल्कि टेक इंडस्ट्री की नौकरियों से जुड़े अन्य इंटरव्यूज़ को भी कवर करता है।
00:02:03पूरे वीडियो के दौरान, मुझे Stitch MCP के काम करने के तरीके में कई कमियाँ मिलीं और यह भी पता चला कि इसे डिज़ाइन प्रोसेस के लिए और बेहतर कैसे बनाया जा सकता है।
00:02:08मैंने वे सभी नियम Claude.md फ़ाइल में, इस ऐप के सोर्स कोड के साथ AI Labs Pro पर डाल दिए हैं।
00:02:13जो लोग नहीं जानते, उनके लिए बता दूँ कि यह हमारी हाल ही में लॉन्च की गई कम्युनिटी है जहाँ हम इस वीडियो
00:02:18और पिछले सभी वीडियो के रिसोर्सेज एक जगह उपलब्ध कराते हैं, चाहे वो प्रॉम्प्ट हों,
00:02:23रीयूज़ेबल कमांड्स, स्किल्स या हमारे प्रोजेक्ट्स। अगर आपको हमारे काम से मदद मिलती है
00:02:28और आप चैनल को सपोर्ट करना चाहते हैं, तो यह सबसे अच्छा तरीका है। लिंक्स डिस्क्रिप्शन में हैं।
00:02:33मैं अपने ऐप्स की प्लानिंग Claude Code के 'plan mode' में करना पसंद करता हूँ क्योंकि यह मेरे सामान्य से आइडिया पर गहराई से काम करता है
00:02:38और एक विस्तृत डॉक्यूमेंट तैयार करता है, लेकिन आप अपनी पसंद के किसी भी IDE का इस्तेमाल कर सकते हैं।
00:02:43मैंने Claude Code को प्लानिंग मोड में अपना ऐप आइडिया दिया और एक UI गाइड बनाने को कहा,
00:02:48ताकि UI वैसा जेनेरिक AI डिज़ाइन न लगे जैसा वह अक्सर बनाता है।
00:02:53भले ही इसमें बहुत समय लगा, लेकिन मैंने पूरी प्लानिंग प्रोसेस को फॉलो किया। पूरे प्लान को ध्यान से पढ़ना बहुत ज़रूरी है
00:02:58क्योंकि मुझे कई बदलाव करके उसे अपनी पसंद के हिसाब से रिफ़ाइन करना पड़ा।
00:03:03मैं तब तक प्लान में सुधार करता रहा जब तक कि मैं पूरी तरह संतुष्ट नहीं हो गया
00:03:09और अंत में, मेरे पास ठीक वैसा ही प्लान था जैसा मैं चाहता था। जब डिज़ाइन प्लान फाइनल हो गया,
00:03:14तब उसे लागू करने का समय आया। सच कहूँ तो, मुझे Claude के मॉडल की तुलना में Gemini की डिज़ाइन क्षमताएँ ज़्यादा पसंद हैं।
00:03:19इसलिए मैंने Claude से कहा कि वह अभी बनाए गए प्लान को ले और Stitch MCP का इस्तेमाल करके एक नया प्रोजेक्ट शुरू करे।
00:03:24उसने एक नया प्रोजेक्ट बनाने के लिए MCP टूल का उपयोग किया और फिर सेक्शन जनरेट करना शुरू किया।
00:03:29उसने प्रोजेक्ट ID का इस्तेमाल करके प्रोजेक्ट को पहचाना और Stitch को एक विस्तृत प्रॉम्प्ट भेजा,
00:03:35जिसके बाद Stitch ने स्क्रीन्स जनरेट करना शुरू किया। पहला सेक्शन बनाने के लिए इसने Gemini 3 flash का उपयोग किया।
00:03:40एक चीज़ जो मुझे पसंद नहीं आई, वो यह थी कि इसने लैंडिंग पेज के सभी सेक्शन्स के लिए अलग-अलग प्रॉम्प्ट भेजे,
00:03:45बजाय एक लंबा डिज़ाइन बनाने के जैसा कि आमतौर पर वेब डिज़ाइन में होता है।
00:03:50इससे तब मुश्किल हो सकती थी जब हमें उन्हें एक ही ऐप में साथ जोड़ना पड़ता। इसलिए मैंने Claude से कहा
00:03:55कि वह अलग-अलग कंपोनेंट्स के बजाय एक पूरा लंबा पेज डिज़ाइन तैयार करे।
00:04:00तब Claude ने एक बहुत ही विस्तृत प्रॉम्प्ट तैयार किया जिसे Stitch ने रिसीव किया और
00:04:05सेक्शन-बाय-सेक्शन वाली एप्रोच के सभी आइडियाज़ को बरकरार रखते हुए पूरा लैंडिंग पेज जनरेट किया।
00:04:10डिज़ाइन में मुझे यह बात बहुत अच्छी लगी कि इसने कमेंट्स और टर्मिनल कमांड्स जैसे रिफरेन्स दिए
00:04:15ताकि डेवलपर्स को यह अपना सा लगे। मैंने Stitch के प्रीव्यू फीचर का इस्तेमाल किया
00:04:20ताकि देख सकूँ कि UI अलग-अलग प्लेटफॉर्म्स पर कैसा दिख रहा है, और इसमें स्मूथ होवर इफेक्ट्स भी थे।
00:04:25डिज़ाइन रिस्पॉन्सिव था और मोबाइल और डेस्कटॉप दोनों पर अच्छे से काम कर रहा था।
00:04:30Stitch द्वारा बनाए गए डिज़ाइन से संतुष्ट होने के बाद, मैं इसे अपने Next.js प्रोजेक्ट में लाना चाहता था,
00:04:34जिसे मैं Claude Code की मदद से बना रहा था। मैंने Claude से कहा कि वह Stitch MCP का इस्तेमाल करके
00:04:40लैंडिंग पेज का पूरा कोड निकाले और उसे मेरे नए Next.js प्रोजेक्ट में लागू करे।
00:04:45स्क्रीन्स को फ़ेच करने के लिए उसने 'get screen' टूल का इस्तेमाल किया। इस टूल ने कोड के लिए डाउनलोड लिंक दिए,
00:04:51तो Claude ने उन लिंक्स से कोड निकालने के लिए curl कमांड्स का उपयोग किया।
00:04:56HTML मिल जाने के बाद, उसे मौजूदा Next.js प्रोजेक्ट में शामिल करना आसान हो गया।
00:05:01उसने ऐप में डिज़ाइन को इंटीग्रेट करना शुरू किया, लेकिन उसने सारा बदलाव सिर्फ़ 'main page.tsx' फ़ाइल में किया।
00:05:06उसने सब कुछ एक ही फ़ाइल में डाल दिया और प्रॉपर कंपोनेंट स्ट्रक्चर फॉलो नहीं किया,
00:05:11जो कि React-आधारित एप्लिकेशन्स के लिए सही तरीका माना जाता है। फिलहाल के लिए,
00:05:17मैंने यह देखने के लिए डेव सर्वर चलाया कि लागू किया गया UI कैसा दिख रहा है।
00:05:22डिज़ाइन लगभग वैसा ही था जैसा Stitch ने बनाया था, बस हीरो सेक्शन के टेक्स्ट प्लेसमेंट में थोड़ा फर्क था।
00:05:26उसने सभी होवर इफेक्ट्स, बेंटो ग्रिड्स के लिए एनिमेशन और बैकग्राउंड में पैरालैक्स स्क्रॉलिंग को सफलतापूर्वक लागू किया था।
00:05:31एक ही फ़ाइल में भरे हुए कोड को ठीक करने के लिए, मैंने Claude से इसे व्यवस्थित करने के लिए प्रॉपर कंपोनेंट स्ट्रक्चर इस्तेमाल करने को कहा।
00:05:36उसने कोड को रिफ़ैक्टर किया और उसे UI कंपोनेंट्स और पेजेज के एक साफ़-सुथरे सेट में बदल दिया,
00:05:41जिससे नेविगेशन आसान हो गया। Claude Code और Stitch की मदद से, मैंने टर्मिनल एस्थेटिक वाला एक ऐप तैयार कर लिया।
00:05:46हालाँकि, इसमें अभी भी कुछ UI कमियाँ थीं। उदाहरण के लिए, कोड पैनल एडिटेबल होना चाहिए
00:05:51क्योंकि वहीं पर यूज़र्स अपने इंटरव्यू के दौरान कोड टाइप करेंगे। साथ ही,
00:05:57सवाल सबसे ऊपर दिखना चाहिए क्योंकि इसकी अभी की जगह यूज़र्स के लिए थोड़ा अजीब अनुभव (UX) पैदा कर रही है।
00:06:02एप्लिकेशन को टेस्ट करने के लिए, मैंने Vercel के Agent Browser का इस्तेमाल किया। यह AI एजेंटों के लिए बनाया गया
00:06:08एक CLI टूल है जो Rust और Node.js पर आधारित है, जिसका अर्थ है कि यह सामान्य ब्राउज़र ऑटोमेशन टूल्स से बहुत तेज़ है।
00:06:14इसका इंस्टॉलेशन आसान है, बस इंस्टॉल कमांड चलाएँ और यह आपके सिस्टम पर ग्लोबली इंस्टॉल हो जाता है।
00:06:19अभी के लिए यह सिर्फ़ Chromium-आधारित ब्राउज़रों तक सीमित है और Firefox या Safari में उपलब्ध नहीं है।
00:06:24Agent Browser, Claude के Chrome एक्सटेंशन, Playwright या Puppeteer से बेहतर फीचर्स देता है।
00:06:29इसका कारण यह है कि Chrome एक्सटेंशन पूरा ब्राउज़र चलाने, स्क्रीनशॉट लेने और पिक्सेल मैपिंग पर निर्भर करता है।
00:06:34इसके विपरीत, Agent Browser एक CLI टूल है जो बैश कमांड्स की तरह चलता है और स्क्रीनशॉट के बजाय 'स्नैपशॉट्स' पर काम करता है।
00:06:40अनिवार्य रूप से, स्नैपशॉट पूरे पेज का एक एक्सेसिबिलिटी ट्री होता है जिसमें कंपोनेंट्स को पहचानने के लिए सेलेक्टर्स होते हैं।
00:06:44एजेंट इन सेलेक्टर्स का इस्तेमाल पेज को कुशलतापूर्वक नेविगेट करने के लिए करता है। यह आपके मौजूदा ब्राउज़र सेशन को शेयर नहीं करता,
00:06:50बल्कि एक अलग ब्राउज़र में चलता है, इसलिए यह वो काम नहीं कर पाएगा जिनके लिए एक्टिव सेशन की ज़रूरत होती है।
00:06:55Claude का एक्सटेंशन आपके अपने ब्राउज़र के अंदर चलता है और आपकी ओर से काम कर सकता है। अगर आप
00:07:00उपलब्ध कमांड्स देखना चाहते हैं, तो GitHub रेपो चेक कर सकते हैं जहाँ सभी कोर कमांड्स की लिस्ट दी गई है।
00:07:05ये बताते हैं कि UI को कैसे नेविगेट करना है, सेलेक्टर्स का उपयोग कैसे करना है, माउस कंट्रोल और नेटवर्क एक्टिविटी कैसे मॉनिटर करनी है।
00:07:10अपने ऐप के लिए, मैंने एक 'Claude.md' फ़ाइल जोड़ी और उसे सभी तरह की टेस्टिंग के लिए एजेंट ब्राउज़र टूल्स इस्तेमाल करने का निर्देश दिया।
00:07:14मैंने उसे यह भी बताया कि अगर उसे कोई कमांड समझ न आए तो 'help' कमांड का उपयोग करे।
00:07:19आप ये नियम और पूरी वर्कफ़्लो गाइडलाइन्स AI Labs Pro पर भी प्राप्त कर सकते हैं।
00:07:24भले ही यह एक हेडलेस ब्राउज़र ऑटोमेशन टूल है, हम 'headed' ऑप्शन इनेबल करके इसे देख भी सकते हैं,
00:07:30जिससे ब्राउज़र विंडो सामने आ जाती है। मैंने Claude से एप्लिकेशन UI टेस्ट करने के लिए ब्राउज़र को हेडेड मोड में चलाने को कहा।
00:07:35उसने पहले सभी कमांड्स देखने के लिए 'help' का उपयोग किया और फिर ब्राउज़र खोला।
00:07:40उसने उसी एप्रोच का इस्तेमाल किया जो हमने Claude ब्राउज़र यूज़ के लिए सुझाई थी, यानी स्क्रीनशॉट के बजाय
00:07:45पूरे पेज का स्नैपशॉट लेना, जिससे टेस्टिंग प्रोसेस बहुत तेज़ हो गई और सटीकता भी बनी रही।
00:07:50एजेंट ने कई काम किए, पूरे ऐप को नेविगेट किया और अलग-अलग UI और विजुअल लेआउट की जाँच की।
00:07:55उसने पूरी टेस्टिंग प्रक्रिया सिर्फ़ चार मिनट में पूरी कर ली, जबकि अन्य टूल्स इसमें बहुत ज़्यादा समय लेते,
00:07:59क्योंकि यह स्क्रीनशॉट के बजाय एक्सेसिबिलिटी ट्री पर निर्भर करता है। उसने यह भी पहचान लिया
00:08:05कि कोड एडिटर को एडिटेबल होना चाहिए और तुरंत उस फिक्स को लागू कर दिया।
00:08:09फिर उसने स्नैपशॉट लेकर, एडिटर सिलेक्टर को ढूँढकर और क्लिकिंग/टाइपिंग फ़ंक्शंस का इस्तेमाल करके उसे टेस्ट किया।
00:08:14इसी के साथ हम इस वीडियो के अंत में पहुँच गए हैं। अगर आप चैनल को सपोर्ट करना चाहते हैं
00:08:19ताकि हम ऐसे ही वीडियो बनाते रहें, तो आप AI Labs Pro से जुड़ सकते हैं।
00:08:24हमेशा की तरह, देखने के लिए धन्यवाद और आपसे अगले वीडियो में मिलते हैं।
00:08:29entire testing process in just four minutes, whereas other browser automation tools would have taken
00:08:34much longer because it relies on accessibility trees, not the screenshot approach. It also
00:08:39identified that the code editor needed to be editable and implemented that fix right away.
00:08:43It then tested it in the browser by taking a snapshot, finding the editor selector and using
00:08:48the agent browser's clicking and typing functions to edit a part of the code to see if it was
00:08:53implemented correctly. That brings us to the end of this video. If you'd like to support the channel
00:08:57and help us keep making videos like this, you can do so by joining AI Labs Pro. As always,
00:09:02thank you for watching and I'll see you in the next one.