00:00:00हमारे डिज़ाइन सीरीज़ के एक और एपिसोड में आपका स्वागत है,
00:00:02जहाँ हम ऐसे नए AI टूल्स खोजते हैं जो आपको AI के साथ बेहतर डिज़ाइन करने में मदद कर सकते हैं। Opus 4.5 और Gemini 3 Pro जैसे मॉडल्स के साथ,
00:00:09सिंगल प्रॉम्प्ट डिज़ाइनिंग काफी आगे बढ़ गई है। लेकिन अभी भी बहुत सारे अलग-अलग टूल्स और वर्कफ़्लोज़ हैं जो हम आपको इस वीडियो में दिखाने वाले हैं जो वाकई शानदार डिज़ाइन बनाने में आपकी मदद करते हैं। ShadCN एक लाइब्रेरी है जो सुंदर,
00:00:21पूरी तरह से कस्टमाइज़ेबल और एक्सेसिबल UI कंपोनेंट्स प्रदान करती है जो आपके React और Next.js प्रोजेक्ट्स के साथ सहजता से इंटीग्रेट होते हैं। इसकी नई सुविधा आपको अपने प्रोजेक्ट में इंपोर्ट करने के लिए प्रीसेट्स बनाने देती है। New Project पर क्लिक करें,
00:00:34और आप पेज के एक ओर सैंपल कंपोनेंट्स और दूसरी ओर प्रीसेट्स देखेंगे,
00:00:37जिनके साथ आप तब तक खेल सकते हैं और एक्सपेरिमेंट कर सकते हैं जब तक आपको वह कंपोनेंट स्टाइल न मिल जाए जो आपको सबसे अच्छी लगे। जब आपने तय कर लिया कि कौन सी स्टाइल इंपोर्ट करनी है,
00:00:46तो Create Project पर क्लिक करें,
00:00:48अपने प्रोजेक्ट की फ्रेमवर्क चुनें,
00:00:50इंस्टॉल कमांड कॉपी करें और अपने टर्मिनल में पेस्ट करें,
00:00:52और नए प्रीसेट्स के साथ एक नया प्रोजेक्ट तुरंत इंस्टॉल हो जाएगा। अपने कोडिंग एजेंट के पास जाने से पहले हमेशा अपनी वेबसाइट के लिए डिज़ाइन तैयार रखना बेहतर होता है,
00:01:01ताकि आपको अपने एजेंट से बार-बार चेंज करने के लिए न कहना पड़े जो आप चाहते हैं। इसके लिए,
00:01:05Google Stitch डिज़ाइन करने के लिए सबसे अच्छा टूल है,
00:01:08क्योंकि यह अब Gemini 3 Pro थिंकिंग और Nano Banana को सीधे इंटीग्रेट करता है जो जेनरेटेड इमेजेज़ का उपयोग करके डिज़ाइन को बेहतर बनाने के लिए होते हैं। लेकिन डिज़ाइन में जाने से पहले,
00:01:17आपके एप्लिकेशन के लिए कलर थीम तय करना सबसे महत्वपूर्ण कदम है। इसके लिए,
00:01:21सबसे अच्छी जगह है Coolers,
00:01:22एक कलर पैलेट जेनरेटर जहाँ आप कई रंगों को एक साथ देख सकते हैं और उनके कॉम्बिनेशन्स का विश्लेषण कर सकते हैं।
00:01:28तब तक एडजस्ट करते रहें जब तक आपको वह न मिल जाए जो आपको पसंद हो,
00:01:31फिर कलर पैलेट को उस फॉर्मेट में एक्सपोर्ट करें जो आपके लिए सबसे अच्छा हो। लगभग 4 मिनट के बाद,
00:01:36Stitch द्वारा बनाया गया UI बहुत मिनिमल था जिसमें मुख्य रंगों और एक्सेंट रंगों के बीच स्पष्ट संतुलन था। Google Stitch के नए फीचर अपडेट में से एक यह है कि आप डिज़ाइन की सभी स्क्रीन्स चुन सकते हैं और टेस्टिंग के उद्देश्य के लिए एक प्रोटोटाइप जेनरेट कर सकते हैं। प्रोटोटाइप मूलतः प्रोजेक्ट के काम करने का एक डेमो है,
00:01:52चाहे वह वेब या मोबाइल ऐप हो। यह स्वचालित रूप से नेविगेशन फ़्लोज़ को एडजस्ट करता है,
00:01:57क्लिकेबल एरियाज़ को ढूंढता है,
00:01:58और डिज़ाइन से सीधे आपके लिए एक पूरी तरह से काम करने वाला प्रोटोटाइप बनाता है। भले ही AI अपने आप में बहुत अच्छे डिज़ाइन बना सकता है,
00:02:05लेकिन किसी अच्छे स्रोत से प्रेरणा लेने में कोई बुराई नहीं है। इसके लिए,
00:02:09कई गैलरीज़ हैं जिनमें हीरो सेक्शन्स,
00:02:11नेव बार्स,
00:02:11फुटर्स और यहाँ तक कि कस्टम 404 पेजेज़ भी हैं जहाँ आप रचनात्मक और आकर्षक प्रेरणा के स्रोत पाएंगे। आप सभी इन संसाधनों के लिंक्स नीचे विवरण में पा सकते हैं,
00:02:19जिनसे मैंने हीरो सेक्शन डिज़ाइन प्रेरणा के लिए Superhero का उपयोग किया,
00:02:23पेज का एक स्क्रीनशॉट Stitch को दिया ताकि वह डिज़ाइन को हमारी वेबसाइट के अनुरूप रेप्लिकेट कर सके।
00:02:28एक और महत्वपूर्ण नई सुविधा है। Google Stitch ने अपने डिज़ाइन्स को एक्सपोर्ट करने के तरीके को बेहतर बनाया है। यह आपको सीधे AI Studio,
00:02:34उनके AI कोडिंग एजेंट Jules में एक्सपोर्ट करने देता है,
00:02:37या कोड को क्लिपबोर्ड में कॉपी करता है,
00:02:39लेकिन मैं इसे एक ज़िप फ़ाइल के रूप में एक्सपोर्ट करूंगा और इसे Claude में इंपोर्ट करूंगा।
00:02:43Claude के माध्यम से सब-एजेंट्स के साथ काम करते समय,
00:02:45वे दूसरों के लिए काम संभालते समय आपका बहुत समय बर्बाद करते थे,
00:02:48जिससे महत्वपूर्ण देरी होती थी। Claude ने हाल ही में इसे ठीक किया है सब-एजेंट्स को बैकग्राउंड में चलने की क्षमता देकर। मैंने ब्राउज़र टेस्टिंग के लिए Puppeteer MCP को कॉन्फ़िगर किया है,
00:02:57जो Claude को ब्राउज़र एक्सेस के माध्यम से UI को टेस्ट करने देता है। चूंकि ब्राउज़र टेस्टिंग में बहुत समय लगता है,
00:03:03आप इस कार्य को बैकग्राउंड में चला सकते हैं और एजेंट को इसी बीच दूसरा कार्य दे सकते हैं। इस तरह,
00:03:07आप एक साथ कई एजेंट्स को अलग-अलग कार्यों पर काम करवा सकते हैं,
00:03:10जिससे आपके समय का बेहतर उपयोग होता है। लेकिन ये एजेंट्स टोकन्स का उपयोग करेंगे,
00:03:14इसलिए आपको टोकन उपयोग और लागत पर ध्यान रखना होगा। आप जितने चाहें उतने एजेंट्स को एक साथ चला सकते हैं और उन्हें जैसे चाहें कार्य दे सकते हैं। प्रत्येक एजेंट अपना आउटपुट लौटाएगा जब वह कार्य पूरा कर लेगा। हम इन बैकग्राउंड एजेंट्स को एक अलग वीडियो में अधिक विस्तार से कवर करेंगे,
00:03:27तो बने रहिए। Claude अक्सर छोटे UI समस्याओं को ठीक करने में संघर्ष करता है,
00:03:31चाहे आप कितनी भी बार पूछें। यहीं एक सच में अद्भुत टूल Drawbridge आता है जो इस खालीपन को भरता है। हमने पहले ही इसे अपने चैनल पर कवर किया है। पहले,
00:03:38यह केवल Cursor पर काम करता था,
00:03:39लेकिन अब इसमें Claude कोड इंटीग्रेशन और अन्य शानदार अपडेट्स हैं। उन्होंने हमारे एक रिलीज़ में हमारा भी शुक्रिया अदा किया,
00:03:45और हम इस शानदार प्रोजेक्ट के लिए वाकई आभारी हैं। आप हमारे चैनल पर जा सकते हैं और Drawbridge का उपयोग कैसे करें इस पर वीडियो देख सकते हैं,
00:03:52लेकिन उन्होंने हमारे पिछले वीडियो के बाद से फीचर्स को बेहतर बनाया है जो आपको सेक्शन्स को अधिक सटीकता से चुनने देते हैं,
00:03:58जिससे गैर-तकनीकी उपयोगकर्ताओं के लिए समस्याओं को बताना आसान हो जाता है। उन्होंने स्क्रीनशॉट समस्या को भी ठीक कर दिया है जिसका हम पिछली बार सामना कर रहे थे।
00:04:06इसके अलावा,
00:04:06उन्होंने Claude कोड के लिए स्लैश कमांड को स्वचालित रूप से सेट कर दिया है,
00:04:10जिसे हमें पहले मैन्युअली करना पड़ता था। कुल मिलाकर,
00:04:12ये सुधार आपके वर्कफ़्लो को बहुत अधिक कुशल और प्रभावशाली बनाते हैं। लाखों लोगों को AI के साथ बनाना सिखाने के बाद,
00:04:17हमने इन वर्कफ़्लो को स्वयं लागू करना शुरू किया। हमने पाया कि हम अब से पहले कभी भी बेहतर उत्पाद तेजी से बना सकते हैं। हम आपके विचारों को जीवन में लाने में मदद करते हैं,
00:04:25चाहे वह ऐप्स हों या वेबसाइटें। शायद आपने हमारे वीडियो देखे हैं और सोचा हो,
00:04:29"मेरे पास एक बढ़िया विचार है,
00:04:30लेकिन मेरे पास इसे बनाने के लिए टेक टीम नहीं है।" यह बिल्कुल वह जगह है जहाँ हम आते हैं। हमें अपने तकनीकी सहपायलट के रूप में सोचें। हम वही वर्कफ़्लो लागू करते हैं जो हमने लाखों लोगों को सिखाए हैं,
00:04:39सीधे आपके प्रोजेक्ट पर,
00:04:40विचारों को वास्तविक,
00:04:41काम करने वाले समाधानों में बदल देते हैं,
00:04:43बिना किसी परेशानी के कि एक डेव टीम को नियुक्त करें या प्रबंधित करें। क्या आप अपने विचार को वास्तविकता में तेजी से बदलने के लिए तैयार हैं?
00:04:50hello@autometer.dev पर संपर्क करें।.
00:04:52यह हमें इस वीडियो के अंत में लाता है। यदि आप चैनल को सपोर्ट करना चाहते हैं और हमें इस तरह के वीडियो बनाने में मदद करना चाहते हैं,
00:04:58तो आप नीचे सुपर थैंक्स बटन का उपयोग करके ऐसा कर सकते हैं। हमेशा की तरह,
00:05:01देखने के लिए धन्यवाद और मैं आपको अगले में देखूंगा।