00:00:00AI डिज़ाइन टूल्स तेज़ी से विकसित हो रहे हैं और जबकि कई आपके वर्कफ़्लो में क्रांति लाने का वादा करते हैं,
00:00:05वास्तव में कुछ ही परिणाम देते हैं। मैंने वास्तव में उपयोगी चीज़ों को शोर से अलग करने के लिए विभिन्न टूल्स का परीक्षण करने में काफी समय बिताया है। इस वीडियो में,
00:00:12मैं उन टूल्स को साझा कर रहा हूँ जिन्होंने मेरी डिज़ाइन प्रक्रिया पर वास्तविक प्रभाव डाला। ये प्लानिंग और एसेट जनरेशन से लेकर एनिमेशन और डिज़ाइन कन्वर्ज़न तक हैं। कुछ फ्री हैं,
00:00:21कुछ पेड हैं और कुछ में बेहतरीन फ्री विकल्प हैं जो उतने ही अच्छे से काम करते हैं। शुरुआत एक वास्तव में शक्तिशाली और आवश्यक प्लानिंग टूल से करते हैं जो आपके अव्यवस्थित विचारों को एक संरचित तकनीकी ब्लूप्रिंट में बदल सकता है। बिल्डर मेथड्स का एक प्रोडक्ट जिसे Design OS कहा जाता है। यह सचमुच आपकी प्रक्रिया में लापता हिस्सा है। आप GitHub पर ओपन सोर्स रिपॉज़िटरी को एक्सेस कर सकते हैं जहाँ से आप इसे डाउनलोड और उपयोग कर सकते हैं। Design OS को विशेष रूप से सॉफ़्टवेयर डेवलपमेंट वर्कफ़्लो की नकल करने के लिए डिज़ाइन किया गया है। आप स्टेकहोल्डर के रूप में काम करते हैं जबकि Design OS प्रोडक्ट प्लानिंग,
00:00:50डिज़ाइन सिस्टम और आवश्यकता विनिर्देशों को संभालता है। अंत में,
00:00:53यह आपकी सॉफ़्टवेयर डिज़ाइन योजना की पुष्टि करता है जिसके बाद आप इसे एक्सपोर्ट कर सकते हैं। यह टूल तकनीकी और गैर-तकनीकी दोनों बिल्डर्स के लिए उपयुक्त है। यह Claude Code,
00:01:01Cursor और Copilot जैसे सभी लोकप्रिय AI टूल्स के साथ संगत है।
00:01:05इंस्टॉलेशन सरल है। बस git clone कमांड को कॉपी करें,
00:01:07इसे अपने प्रोजेक्ट फ़ोल्डर में पेस्ट करें और डिफ़ॉल्ट नाम को अपने वास्तविक प्रोजेक्ट नाम में बदलें। इंस्टॉल होने के बाद,
00:01:13प्रोजेक्ट को विशेष कमांड्स और डिज़ाइन स्किल्स की एक श्रृंखला तक पहुँच मिलेगी। जब आप localhost 3000 पर नेविगेट करते हैं,
00:01:19तो सभी स्टेप्स एक-एक करके सूचीबद्ध होते हैं ताकि आप भ्रमित न हों कि पहले किस कमांड का पालन करना है।
00:01:24यह आपके प्रोजेक्ट आइडिया के हर विवरण की पहचान करने के लिए आपसे कई सवाल पूछता है। यह आगे बढ़ते हुए योजना को परिष्कृत करता है,
00:01:30रूपरेखा प्रदान करता है,
00:01:31बीच में आपकी स्वीकृति मांगता है और सब कुछ इस तरह से दस्तावेज़ित करता है जो AI मॉडल के लिए अनुकूलित है। यह एक समय लेने वाली प्रक्रिया है इसलिए आपको अपनी वेबसाइट के लिए सर्वोत्तम परिणाम प्राप्त करने के लिए धैर्य रखना होगा और लगातार पूछे जाने वाले सवालों को सहना होगा। एक बार जब आप सभी सेक्शन्स से गुज़र जाते हैं,
00:01:46तो योजना एक्सपोर्ट के लिए तैयार हो जाएगी। एक्सपोर्ट की गई योजना में डेटा मॉडल्स,
00:01:50सैंपल डेटा और डॉक्यूमेंटेशन के साथ इसका उपयोग कैसे करें,
00:01:53इसके निर्देश शामिल हैं। इसमें TypeScript टाइप्स,
00:01:55CSS टोकन और सभी आवश्यक डिज़ाइन फ़ाइलें भी शामिल हैं। आप यहाँ निर्देश पा सकते हैं कि ऐप बनाने के लिए एक्सपोर्ट का उपयोग कैसे करें,
00:02:01चाहे आप इंक्रीमेंटल मेथड चुनें या वन-शॉट प्रॉम्प्ट। कुल मिलाकर,
00:02:04यह एक वास्तव में दिलचस्प टूल है जिसने डिज़ाइन के प्लानिंग हिस्से को काफी आसान और सुचारू बना दिया। उच्च गुणवत्ता वाले एसेट्स किसी भी बेहतरीन वेबसाइट की रीढ़ हैं और यदि आप पेशेवर प्रोडक्ट विज़ुअल्स को जल्दी से जनरेट करने का कोई तरीका ढूंढ रहे हैं,
00:02:16तो VSCOM वह टूल है जिसके बारे में आपको जानना चाहिए।
00:02:19इसमें शानदार विज़ुअल इमेजरी जनरेट करने के लिए प्रॉम्प्ट्स का उपयोग करने,
00:02:22रेंडर्स बनाने के लिए स्केचेज़ का उपयोग करने और यहाँ तक कि आपके लिए उन्हें मॉडल करने की प्रभावशाली क्षमता है। यह अद्भुत टूल्स से भरा हुआ है और एनिमेशन भी प्रदान कर सकता है। इसका उपयोग करने के लिए,
00:02:31आप बस एक स्केच और विवरण प्रदान करते हैं और AI आपके इनपुट के आधार पर विज़ुअल्स जनरेट करता है। आप इसके साथ बहुत कुछ कर सकते हैं,
00:02:36जिसमें व्यक्तिगत तत्वों को संपादित करना,
00:02:38उन्हें संशोधित करने के लिए AI का उपयोग करना और अपने हीरो सेक्शन विज़ुअल्स के लिए 4k गुणवत्ता में परिणाम डाउनलोड करना शामिल है।
00:02:43VSCOM एक पेड टूल है लेकिन आप फ्री में शुरुआत कर सकते हैं। फ्री टियर उदार है और उपयोगी फीचर्स प्रदान करता है जबकि मासिक योजना और भी अधिक क्षमताएँ प्रदान करती है। यदि आपको अक्सर विभिन्न क्षेत्रों में अपने प्रोडक्ट्स को मॉडल करने की आवश्यकता होती है तो यह एक शानदार विकल्प है। लेकिन यदि आप पेड टूल्स का उपयोग नहीं करना चाहते हैं,
00:02:59तो आप Mixed Board नामक एक अंडररेटेड Google प्रोजेक्ट का उपयोग कर सकते हैं। यह अभी भी प्रयोगात्मक चरण में है इसलिए फिलहाल यह फ्री है। यह टूल आपको मूड बोर्ड बनाने और अपनी वेबसाइट के लिए इमेज जनरेट करने के लिए नैनो बनाना की प्रभावशाली क्षमताओं की शक्ति का उपयोग करने देता है। आप इमेज को संशोधित करने के लिए प्रॉम्प्ट्स का उपयोग कर सकते हैं और यह बिल्कुल वैसे ही नए इमेज जनरेट करेगा जैसे आप चाहते हैं। आप सैंपल इमेज भी अपलोड कर सकते हैं और यह मेल खाने वाले विज़ुअल्स जनरेट करने के लिए अपनी क्षमताओं का उपयोग करेगा। आप जितनी चाहें उतनी जनरेशन बना सकते हैं और अपने प्रोडक्ट कॉन्सेप्ट को विज़ुअलाइज़ करने के लिए एक पूरी प्रेजेंटेशन भी बना सकते हैं,
00:03:29सब कुछ नैनो बनाना का उपयोग करके। यदि आपको कोई इमेज पसंद नहीं है,
00:03:32तो आप इसे पुनः जनरेट कर सकते हैं,
00:03:34मॉडल से समान इमेज बनाने के लिए कह सकते हैं,
00:03:36किसी इमेज को डुप्लिकेट कर सकते हैं या मॉडल को अधिक दिशा देने के लिए इसे एनोटेट भी कर सकते हैं। फिर यह आपकी विशिष्टताओं के अनुसार सभी विवरण जनरेट करेगा। यह बहुत अविश्वसनीय है क्योंकि आप इन एसेट्स को ले सकते हैं और उन्हें सीधे अपनी वेबसाइट पर उपयोग के लिए डाउनलोड कर सकते हैं। अपनी खुद की वेबसाइट डिज़ाइन करने से पहले प्रतिस्पर्धी वेबसाइटें अपनी वेबसाइटों को कैसे संरचित करती हैं,
00:03:54इसका विश्लेषण करना हमेशा बेहतर होता है। इस उद्देश्य के लिए मैंने GoFullPage नामक एक एक्सटेंशन का उपयोग किया जो किसी भी वेबसाइट का पूर्ण पेज स्क्रीनशॉट कैप्चर करता है। इसने मुझे संदर्भ के लिए पूर्ण वेबसाइट स्क्रीनशॉट डाउनलोड करने की अनुमति दी। फिर मैंने Claude को ये स्क्रीनशॉट UI तत्वों को निकालने के लिए डिज़ाइन किए गए एक विशेष प्रॉम्प्ट के साथ प्रदान किए। इस प्रॉम्प्ट ने Claude को इमेज से सभी बाधाओं,
00:04:13ऑब्जेक्ट प्लेसमेंट और UI थीम विवरणों की पहचान करने का निर्देश दिया। जब मैंने Claude को इस विशेष प्रॉम्प्ट के साथ स्क्रीनशॉट दिए,
00:04:19तो इसने सभी UI स्टाइल विवरणों को व्यापक रूप से निकाला। एक बार जब मेरे पास निकाली गई स्टाइल गाइडलाइन्स थीं,
00:04:24तो मैंने उन्हें उपयोग के लिए डाउनलोड किए गए एसेट्स वाले प्रोजेक्ट फ़ोल्डर में Claude code को प्रदान किया। फिर Claude ने प्रतिस्पर्धी विश्लेषण से निकाली गई सभी स्टाइल्स और डिज़ाइन गाइडलाइन्स को लागू करते हुए पूरी वेबसाइट जनरेट की।
00:04:35यूज़र रिटेंशन के लिए मोशन महत्वपूर्ण है जिसके लिए आप लोगो से लेकर पूर्ण इंटरफेस तक सब कुछ केवल कुछ क्लिक में एनिमेट करने के लिए AI संचालित Figma प्लगइन्स का उपयोग कर सकते हैं। Magic Animator एक वास्तव में शानदार और शक्तिशाली वेबसाइट है जो आपके सभी डिज़ाइनों को एनिमेट करने के लिए AI का उपयोग करती है। यह लोगो से लेकर सोशल मीडिया पोस्ट से लेकर यूज़र इंटरफेस तक सब कुछ एनिमेट कर सकती है और आपके एप्लिकेशन में माइक्रो इंटरैक्शन बना सकती है जो यूज़र रिटेंशन और रुचि बनाए रखने में मदद करते हैं। Magic Animator एक Figma प्लगइन के रूप में उपलब्ध है जो आपको अपने UI डिज़ाइनों में आसानी से एनिमेशन जोड़ने की अनुमति देता है। जब आप प्लगइन चलाते हैं तो यह स्वचालित रूप से आपके UI में लेयर्स का पता लगाता है और आपके चुनने के लिए चार एनिमेशन जनरेट करता है। फिर आप अपने चुने गए एनिमेशन को Lottie फ़ाइल के रूप में एक्सपोर्ट कर सकते हैं जो एनिमेशन जोड़ने के लिए विशेष JSON फॉर्मेट है। अब Magic Animator एक पेड टूल है लेकिन यदि आप समान विकल्प की तलाश में हैं तो आप Lottie files का उपयोग कर सकते हैं जो Figma प्लगइन के रूप में भी उपलब्ध है। यह आपको अपनी वेबसाइट डिज़ाइनों में एनिमेशन लागू करने और उन्हें विभिन्न प्रकार की Lottie JSON फ़ाइलों सहित कई फॉर्मेट में एक्सपोर्ट करने की अनुमति देता है। आप एनिमेशन फ़ाइल को Claude code को भी दे सकते हैं और यह आपके लिए आपके UI में एनिमेशन लागू कर देगा। यदि आप शुरुआत से Figma पर डिज़ाइन नहीं करना चाहते हैं तो आप HTML में किसी भी वेबसाइट को पूरी तरह से संपादन योग्य Figma डिज़ाइन में बदलने के लिए HTML to design प्लगइन का उपयोग कर सकते हैं। यह फ्री और पेड दोनों योजनाओं पर उपलब्ध है और फ्री योजना पर आपको हर 30 दिनों में 10 इम्पोर्ट्स मिलते हैं। बढ़िया बात यह है कि आप इसे MCP के रूप में उपयोग कर सकते हैं और अपने Figma डिज़ाइन के भीतर सीधे अपने AI एजेंट की डिज़ाइन क्षमताओं तक पहुँच सकते हैं। ऐसा करने के लिए आप इसे Claude या Cursor जैसे अपने AI टूल्स से कनेक्ट करते हैं और सेटअप गाइड का पालन करके MCP को कॉन्फ़िगर करते हैं।
00:06:05जब भी आप कोई डिज़ाइन जनरेट करना चाहते हैं,
00:06:07बस अपने AI एजेंट को प्रॉम्प्ट करें और 'send to Figma' या 'send it to HTML to design' कीवर्ड का इस्तेमाल करें। यह डिज़ाइन युक्त एक JSON जनरेट करता है और आपकी स्वीकृति के बाद इसे Figma में भेज देता है। फिर आप Figma में डिज़ाइन देख सकते हैं और अपने पसंदीदा AI टूल के साथ मिलकर शानदार डिज़ाइन बना सकते हैं और जो कुछ भी पसंद न आए उसे तुरंत एडिट कर सकते हैं। अब Automata के बारे में बात करते हैं। लाखों लोगों को AI के साथ बिल्ड करना सिखाने के बाद,
00:06:28हमने खुद इन वर्कफ़्लो को लागू करना शुरू किया। हमने पाया कि हम पहले से बेहतर प्रोडक्ट्स और तेज़ी से बना सकते हैं। हम आपके आइडिया को जीवंत करने में मदद करते हैं,
00:06:36चाहे वह ऐप्स हों या वेबसाइट्स। शायद आपने हमारे वीडियो देखते हुए सोचा हो कि मेरे पास एक शानदार आइडिया है लेकिन इसे बनाने के लिए कोई टेक टीम नहीं है। यहीं पर हम काम आते हैं। हमें अपना टेक्निकल को-पायलट समझें। हम वही वर्कफ़्लो लागू करते हैं जो हमने लाखों लोगों को सिखाए हैं,
00:06:49सीधे आपके प्रोजेक्ट पर,
00:06:50और कॉन्सेप्ट्स को वास्तविक काम करने वाले सॉल्यूशन में बदल देते हैं,
00:06:53बिना किसी डेव टीम को हायर करने या मैनेज करने की परेशानी के।
00:06:57अपने आइडिया को तेज़ी से हकीकत में बदलने के लिए तैयार हैं तो hello@automata.dev पर संपर्क करें। इसके साथ हम इस वीडियो के अंत पर पहुंच गए हैं। अगर आप चैनल को सपोर्ट करना चाहते हैं और हमें इस तरह के वीडियो बनाते रहने में मदद करना चाहते हैं,
00:07:07तो आप नीचे दिए गए सुपर थैंक्स बटन का इस्तेमाल कर सकते हैं। हमेशा की तरह देखने के लिए धन्यवाद और मैं आपसे अगले वीडियो में मिलूंगा।