00:00:00आपके AI एजेंट्स अब डिजाइनिंग में काफी माहिर हो गए हैं।
00:00:02अब उनमें वे समस्याएं नहीं रहीं, जहाँ उनके द्वारा बनाई गई साइट्स में कुछ न कुछ टूटा हुआ होता था।
00:00:06लेकिन चूँकि सभी मॉडल्स को एक ही डेटा पर ट्रेन किया गया है, इसलिए डिजाइन हमेशा बहुत
00:00:10एक जैसे और साधारण होते हैं।
00:00:11यहाँ तक कि Claude के मॉडल्स को भी यह सुनिश्चित करने के लिए एक विशेष प्रॉम्प्ट की आवश्यकता होती है कि वे यह गलती न करें।
00:00:15Google Stitch एक ऐसा टूल है जिसे विशेष रूप से डिजाइन के लिए बनाया गया है, और यह सीधे
00:00:19आपके Claude Code वर्कफ़्लो से जुड़ सकता है।
00:00:21तो इस वीडियो में, हम Claude Code के साथ Stitch का उपयोग करने के 4 तरीकों को देखेंगे, ताकि यह सुनिश्चित हो सके
00:00:26कि आपके ऐप्स हर दूसरी AI द्वारा जनरेट की गई साइट की तरह न दिखें।
00:00:30नया Stitch अपडेट आपके UI को बनाने के लिए एक डिजाइन सिस्टम का उपयोग करता है, और ये सिस्टम
00:00:34उन सभी विशेषताओं पर आधारित हैं जो वेबसाइटों के लिए UI गाइड बनाती हैं, जिनमें विभिन्न
00:00:38क्षेत्र जैसे रंग, थीम, फोंट और बहुत कुछ शामिल हैं।
00:00:41ये विशेषताएं वास्तव में design.md फ़ाइल का उपयोग करके बनाई जाती हैं।
00:00:45यही वह फ़ाइल है जो डिजाइन को एक एजेंट से दूसरे एजेंट में स्थानांतरित करने योग्य बनाती है।
00:00:49आप इस design.md फ़ाइल को किसी भी एजेंट को दे सकते हैं जिसके साथ आप यह डिजाइन लागू करना चाहते हैं, और
00:00:54यह पूरी स्टाइलिंग थीम को पूरी तरह से मैच कर देगा।
00:00:56यह इसलिए काम करता है क्योंकि यह फ़ाइल विशेष रूप से एजेंट्स के लिए बनाई गई है।
00:00:59इसमें अधिक सटीक भाषा होती है ताकि वे डिजाइन के उद्देश्य को आसानी से समझ सकें।
00:01:04यह स्क्रीन पर सभी डिजाइन सिस्टम को विजुअलाइज भी करता है, ताकि आपको केवल
00:01:08टेक्स्ट का उपयोग करके स्टाइल का अनुमान न लगाना पड़े।
00:01:10आप वास्तव में रंगों और फोंट को एक साथ देखकर यह अंदाजा लगा सकते हैं कि ऐप
00:01:14लागू होने पर कैसा दिखेगा।
00:01:16जब भी आप Stitch के साथ कुछ भी बनाते हैं, तो Stitch का पहला कदम एक design.md
00:01:21और एक डिजाइन सिस्टम बनाना होता है।
00:01:22भले ही आप अपने प्रॉम्प्ट में स्पष्ट रूप से ऐसा करने के लिए न कहें।
00:01:25एक बार डिजाइन सिस्टम तय हो जाने के बाद, जब भी यह कोई साइट बनाता है, तो यह कई पेजों
00:01:30और पुनरुत्पादन (regeneration) के दौरान एकरूपता सुनिश्चित करने में सक्षम होता है।
00:01:32यह Stitch के साथ काम करते समय हमारी सबसे बड़ी समस्या को हल करता है, क्योंकि पहले यह
00:01:36डिजाइन की एकरूपता को उतने अच्छे से बनाए नहीं रख पाता था जितना अब कर सकता है।
00:01:39लेकिन Stitch द्वारा खुद बनाए गए डिजाइन सिस्टम पर भरोसा करने के बजाय, आप अपने
00:01:43स्वयं के डिजाइन सिस्टम भी बना सकते हैं।
00:01:45आप अपनी आवश्यकताओं के अनुसार थीम सेट कर सकते हैं, या यदि आपके पास कोई डिजाइन फ़ाइल है, तो आप बस
00:01:49उसे अपलोड कर सकते हैं, और यह स्वचालित रूप से उस फ़ाइल को डिजाइन सिस्टम के रूप में शामिल कर लेगा और
00:01:53इसे आपके लिए विजुअलाइज कर देगा।
00:01:54महत्वपूर्ण बात यह है कि आपको यह सुनिश्चित करना होगा कि आप जिस भी design.md का उपयोग करें, वह एक
00:01:58उचित संरचना का पालन करे।
00:01:59यह संरचना एजेंट्स, विशेष रूप से Stitch के लिए अनुकूलित मानी जाती है, और उन्हें
00:02:04उद्देश्यों को कुशलतापूर्वक समझने में मदद करती है।
00:02:06अक्सर हम Claude या अन्य एजेंट्स के साथ अपने ऐप आइडियाज पर विचार-मंथन करते हैं।
00:02:09इसलिए यदि आप Stitch में उन विचार-मंथन सत्रों से डिजाइन बनाना चाहते हैं, तो आप
00:02:13डिजाइन स्टाइल को design.md फ़ाइल के रूप में Stitch में ले जा सकते हैं।
00:02:17आप Claude को डिजाइन फ़ाइल की एक संरचना दे सकते हैं जो आप Google के आधिकारिक स्किल्स
00:02:21रेपो से प्राप्त कर सकते हैं जिसमें Stitch से संबंधित सभी स्किल्स हैं।
00:02:25उदाहरणों से आप एक डिजाइन फ़ाइल टेम्पलेट प्राप्त कर सकते हैं जो Stitch के लिए अनुकूलित है।
00:02:29तो आप जिस भी एजेंट का उपयोग कर रहे हैं, उसे आप जिस वेबसाइट को बनाना चाहते हैं उसकी स्टाइल
00:02:33टेम्पलेट के साथ प्रदान कर सकते हैं, ताकि यह स्टाइल गाइड का ठीक से पालन करते हुए
00:02:38टेम्पलेट के आधार पर design.md जनरेट कर सके।
00:02:39एक बार जब आपका एजेंट विस्तृत design.md फ़ाइल जनरेट कर लेता है, तो आप इसे Stitch में ले जा सकते हैं और बस
00:02:44नया डिजाइन सिस्टम बनाने के अंतर्गत design.md सेक्शन में पेस्ट कर सकते हैं।
00:02:48जैसे ही आप सेव डिजाइन दबाते हैं, यह इस डिजाइन के लिए एक विजुअलाइजेशन बना देता है।
00:02:52एक बार विजुअलाइज हो जाने के बाद, आप इसका उपयोग कर सकते हैं और Stitch को नए बनाए गए
00:02:56डिजाइन सिस्टम को आधार मानकर UI लागू करने के लिए कह सकते हैं।
00:02:59Stitch फिर डिजाइन को लागू करता है, जो आपके द्वारा बनाए गए सिस्टम को दर्शाता है, और design.md से
00:03:03सटीक स्टाइलिंग को अपनाता है।
00:03:05तो इन डिजाइन सिस्टम का उपयोग करके, आप बार-बार जितने चाहें उतने पेज बना सकते हैं, और हर एक
00:03:10उसी डिजाइन स्टाइल का पालन करेगा।
00:03:12यदि आपने पहले ही Stitch पर प्रोजेक्ट्स बनाए हैं और आप उनके लिए design.md निकालना चाहते हैं,
00:03:16तो आप Google द्वारा बनाए गए स्किल्स का उपयोग करके ऐसा कर सकते हैं।
00:03:19उनके द्वारा बनाए गए स्किल्स में, design.md स्किल Stitch प्रोजेक्ट्स को टेम्पलेट के अनुसार
00:03:25एक design.md में बदल देती है, जो Stitch के वर्कफ़्लो के लिए अनुकूलित है।
00:03:28साथ ही अगर आप हमारे कंटेंट का आनंद ले रहे हैं, तो हाइप बटन दबाने पर विचार करें, क्योंकि यह
00:03:32हमें ऐसा और कंटेंट बनाने और अधिक लोगों तक पहुँचने में मदद करता है।
00:03:35Stitch की क्षमताएं प्रभावशाली हैं, लेकिन आप जिस विशेष श्रेणी की वेबसाइट बना रहे हैं, उसके लिए
00:03:39अच्छा UX लागू करने में अभी भी कुछ कमियां हैं।
00:03:42हमेशा शून्य से डिजाइन करना पसंद नहीं किया जाता है।
00:03:44मौजूदा वेबसाइटें उन पैटर्न पर बनी होती हैं जो वास्तव में उस विशेष श्रेणी के लिए काम करते हैं
00:03:48जिसके लिए वे बनी हैं, इसलिए उनके पैटर्न की नकल करना आपको एक ऐसी वेबसाइट बनाने में मदद करता है जो वास्तव में
00:03:53आपके यूजर्स के लिए काम करती है।
00:03:54पहले, AI के साथ निर्माण करते समय, हम एक स्क्रीनशॉट प्रदान करते थे और फिर डिजाइन टूल से
00:03:58उस डिजाइन को कॉपी करने के लिए कहते थे।
00:04:00यह लेआउट, कंपोनेंट्स, सब कुछ वैसा ही दोहराने की कोशिश करता था।
00:04:04लेकिन Stitch के नए अपडेट ने इसे बदल दिया है।
00:04:06Stitch के रिडिजाइन फीचर के साथ, आप अभी भी इसे एक स्क्रीनशॉट देते हैं, लेकिन अब यह
00:04:10इसे कॉपी नहीं करता।
00:04:11यह उस स्क्रीनशॉट को एक स्टाइल गाइड के रूप में उपयोग करता है।
00:04:12यह उस संदर्भ से पैटर्न, कंपोनेंट प्लेसमेंट और डिजाइन भाषा निकालता है और
00:04:17इसे आपकी अपनी वेबसाइट पर लागू करता है।
00:04:18तो आप मूल रूप से एक मौजूदा पैटर्न के ऊपर कुछ मौलिक बना रहे हैं।
00:04:22रिडिजाइन फीचर का उपयोग करने के लिए, आपको एक स्क्रीनशॉट की आवश्यकता होती है।
00:04:25लेकिन एक-एक सेक्शन का स्क्रीनशॉट लेना एक थकाऊ तरीका है।
00:04:28इसके बजाय, पूरे पेज के स्क्रीनशॉट के लिए GoFullPage जैसे किसी भी एक्सटेंशन का उपयोग करें ताकि आप
00:04:33एक ही बार में स्टाइल रेफरेंस प्रदान कर सकें।
00:04:35एक बार जब आप उस वेबसाइट का स्क्रीनशॉट देते हैं जिसकी डिजाइन आप दोहराना चाहते हैं, तो यह
00:04:39उस स्क्रीनशॉट को स्टाइल और कंपोनेंट प्लेसमेंट रेफरेंस के रूप में उपयोग करता है और स्क्रीनशॉट में मौजूद
00:04:44UI के समान एक दूसरा UI बनाता है।
00:04:45यह UI स्टाइल से मेल खाने वाले विभिन्न सेक्शन्स के लिए इमेज जनरेट करने के लिए Nano Banana की इमेज जनरेशन क्षमताओं का उपयोग करता है।
00:04:50जो UI स्टाइल के साथ मेल खाते हों।
00:04:51किसी अन्य वेबसाइट से स्टाइल कॉपी करने के और भी तरीके हैं।
00:04:54आप लिंक को कॉपी करके पूरी वेबसाइट के स्टाइल की नकल कर सकते हैं और फिर डिजाइन सिस्टम से,
00:04:59आप किसी भी वेबसाइट से डिजाइन को design.md फ़ाइल के रूप में इम्पोर्ट कर सकते हैं।
00:05:03बस लिंक प्रदान करें और यह वेबसाइट को क्रॉल करके और उससे स्टाइल और
00:05:06टाइपोग्राफी प्राप्त करके डिजाइन सिस्टम को इम्पोर्ट कर लेगा।
00:05:09लेकिन अक्सर Stitch को वह स्टाइल नहीं मिल पाता जो आपके दिमाग में था।
00:05:12ऐसे मामलों में, आप बस उस स्टाइल के साथ एक रफ स्केच या वायरफ्रेम अपलोड कर सकते हैं जो
00:05:17आप वास्तव में चाहते हैं।
00:05:18आप वह डिजाइन थीम भी निर्दिष्ट कर सकते हैं जिसे आप चाहते हैं कि आपकी वेबसाइट उपयोग करे।
00:05:21रेफरेंस और थीम स्पेसिफिकेशन के साथ, Stitch द्वारा जनरेट किया गया UI वायरफ्रेम
00:05:26और स्टाइल गाइड से बिल्कुल मेल खाएगा, जिससे वेबसाइट आपकी आवश्यकताओं के अनुरूप बन जाएगी।
00:05:31और यदि कुछ विशेष है जिसे आप संशोधित करना चाहते हैं, तो आप Stitch के
00:05:34एनोटेटिंग और एडिटिंग फीचर्स का उपयोग करके ऐसा कर सकते हैं।
00:05:36आप जिस हिस्से को पसंद नहीं करते उसे अपनी इच्छा के अनुसार एनोटेट कर सकते हैं, अप्लाई पर क्लिक करें और यह
00:05:40आपके द्वारा चाही गई स्टाइल को लागू कर देगा।
00:05:42लेकिन इससे पहले कि हम आगे बढ़ें, आइए अपने प्रायोजक के बारे में कुछ शब्द कहें।
00:05:45Uptime Robot.
00:05:46आप AI APIs, OpenAI, Anthropic, या किसी भी अन्य के साथ निर्माण कर रहे हैं।
00:05:49सब कुछ ठीक लग रहा है, 200 OK, लेकिन रिस्पॉन्स बेकार है।
00:05:52आपका ऐप क्रैश हो जाता है और आपको तब पता चलता है जब यूजर्स शिकायत करना शुरू करते हैं।
00:05:56यहीं पर Uptime Robot काम आता है।
00:05:57यह उनके जानने से पहले ही इसे पकड़ लेता है।
00:05:59यह आपके APIs को पिंग करता है, न केवल स्टेटस कोड बल्कि वास्तविक रिस्पॉन्स की जांच करता है, और आपको तुरंत
00:06:04Slack, ईमेल या जहाँ भी आप काम करते हैं, सूचित करता है।
00:06:06AI एंडपॉइंट्स की निगरानी करें, लिमिट्स तक पहुँचने से पहले API क्रेडिट्स को ट्रैक करें, और त्रुटियों को
00:06:10सपोर्ट टिकट बनने से पहले ही पकड़ लें।
00:06:12आपको लाइव अपटाइम आंकड़े और इंसिडेंट हिस्ट्री दिखाने वाले पब्लिक स्टेटस पेज भी मिलते हैं।
00:06:16इसे सेटअप करने में केवल कुछ सेकंड लगते हैं।
00:06:18अपना एंडपॉइंट जोड़ें, अपेक्षित रिस्पॉन्स सेट करें, अपने अलर्ट चुनें, और आप लाइव हैं।
00:06:21इसे आज़माने के लिए 50 मॉनिटर्स वाला एक फ्री टियर है।
00:06:24API मॉनिटरिंग केवल $7 प्रति माह में शामिल है, जो इसे खुद होस्ट करने से सस्ता है।
00:06:2810% छूट के लिए AI Labs कोड का उपयोग करें, जो साल के अंत तक मान्य है।
00:06:32पिन किए गए कमेंट में दिए गए लिंक पर क्लिक करें और आज ही बनाना शुरू करें।
00:06:35बनाने का एक और तरीका Stitch की क्षमताओं को अपनी किसी भी मौजूदा एजेंट क्षमता जैसे
00:06:40Claude Code या किसी अन्य एजेंट के साथ जोड़ना है जो एजेंट स्किल्स को सपोर्ट करता है।
00:06:44Google ने इस उद्देश्य के लिए कई स्किल्स विकसित की हैं और ऐसी स्किल्स प्रदान की हैं जो एजेंट को
00:06:48Stitch के साथ काम करने के लिए अतिरिक्त क्षमताएं देती हैं।
00:06:51आप रेपो में दिए गए स्टेप्स का पालन करके अपनी ज़रूरत की किसी भी स्किल को इंस्टॉल कर सकते हैं।
00:06:54अपने वर्कफ़्लो में उपयोग करने के लिए सबसे महत्वपूर्ण Enhance Prompt स्किल है।
00:06:58यह आपके द्वारा दिए गए अस्पष्ट प्रॉम्प्ट्स को Stitch-अनुकूलित प्रॉम्प्ट्स में बदल देता है, जिससे वे
00:07:02बिल्कुल वैसे बन जाते हैं जैसे Stitch काम करने के लिए अनुकूलित है।
00:07:05इसमें सामान्य कीवर्ड्स के संदर्भ होते हैं क्योंकि Stitch डिजाइन के सटीक विवरण के बजाय
00:07:09मूड की पहचान करने के लिए विशेषणों (adjectives) पर निर्भर करता है।
00:07:12इसके अलावा, पूरी वेबसाइट बनाने के लिए एक स्किल है जिसे Stitch Loop कहा जाता है।
00:07:16यह एजेंट को Chrome dev tools का उपयोग करने और प्रॉम्प्ट में विस्तृत रूप से बताए गए
00:07:20एक ऑटोनॉमस लूप पैटर्न का उपयोग करके Stitch से बार-बार वेबसाइट बनाने की अनुमति देता है।
00:07:23इसका विचार उचित प्रॉम्प्ट ट्रैकिंग बनाए रखना और प्रॉम्प्ट्स को एक स्टेज से दूसरे स्टेज में पास करना है।
00:07:28चूँकि ये स्किल्स सब कुछ खुद मैनेज करती हैं, इसलिए यह वर्कफ़्लो एक बार में
00:07:32ऐप बनाने के सबसे करीब है।
00:07:33लेकिन वास्तव में इन स्किल्स का उपयोग करने से पहले, आपको यह सुनिश्चित करना होगा कि Stitch MCP जुड़ा हुआ है
00:07:38क्योंकि Stitch डिजाइन बनाने और प्राप्त करने के लिए बैकएंड में इसी का उपयोग करता है।
00:07:41चैनल पर एक वीडियो है जो MCP इंस्टॉलेशन प्रक्रिया और इंस्टॉलेशन की
00:07:46सामान्य समस्याओं को हल करने का तरीका बताता है, जिसे आप देख सकते हैं।
00:07:49अब जब आप Stitch से डिजाइन एक्सपोर्ट करते हैं, चाहे MCP के माध्यम से या कोड के माध्यम से, तो यह आमतौर पर
00:07:53एक बड़ी HTML फ़ाइल देता है जहाँ सब कुछ एक ही फ़ाइल में सिमटा होता है।
00:07:56चूँकि अधिकांश एप्लिकेशन React-आधारित और कंपोनेंट-स्ट्रक्चर्ड होते हैं, इसलिए यह
00:08:01एजेंट्स के लिए HTML को React में मैप करने के लिए एक अतिरिक्त बोझ बन जाता है।
00:08:03तो इसे सरल बनाने के लिए, आप React component स्किल का उपयोग कर सकते हैं।
00:08:06यह Stitch डिजाइन को उचित सत्यापन मेट्रिक्स का उपयोग करके मॉड्यूलर कंपोनेंट्स में बदल देता है।
00:08:10यह डिजाइन को वैलिडेट करने और प्राप्त करने के लिए स्क्रिप्ट्स का उपयोग करता है ताकि कंपोनेंट्स को आसानी से मैप किया जा सके।
00:08:15इस वर्कफ़्लो के साथ, आप एक Clod.md बना सकते हैं जो आपके द्वारा उपयोग किए जाने वाले वर्कफ़्लो को सूचीबद्ध करता है।
00:08:20इसे इस क्रम का पालन करना होगा।
00:08:21सबसे पहले आप अपने अस्पष्ट प्रॉम्प्ट्स को Stitch-विशिष्ट प्रॉम्प्ट्स में बदलने के लिए Enhance prompt स्किल का उपयोग करते हैं,
00:08:26यह सुनिश्चित करते हुए कि Stitch को इनपुट सही ढंग से मिले।
00:08:28फिर इसे Stitch loop का उपयोग करके डिजाइन बनाना चाहिए।
00:08:31एक बार निर्माण हो जाने के बाद, इसे React components का उपयोग करके ऐप में डिजाइन को लागू करना होगा।
00:08:35जब आप उस लैंडिंग पेज के लिए प्रॉम्प्ट देते हैं जिसे आप बनाना चाहते हैं, तो यह
00:08:39Clod.md में दिए गए निर्देशों का पालन करेगा।
00:08:41यह पहले Enhance prompt स्किल को लोड करता है, जो फिर उपलब्ध स्किल्स और टूल्स का
00:08:45उपयोग करके बेहतर प्रॉम्प्ट जनरेट करता है।
00:08:47एक बार प्रॉम्प्ट तैयार हो जाने के बाद, यह अगले स्टेप पर जाने के लिए आपकी अनुमति मांगता है।
00:08:50अनुमति मिलने के बाद, यह Stitch loop स्किल लोड करता है और प्रोजेक्ट बनाने के लिए Stitch MCPs का उपयोग करता है।
00:08:56प्रोजेक्ट बन जाने के बाद, यह Enhance prompt स्किल द्वारा जनरेट किए गए प्रॉम्प्ट को Stitch को भेजता है,
00:09:00जो पहले डिजाइन सिस्टम और फिर वास्तविक डिजाइन जनरेट करता है।
00:09:04इमेज की सुविधा के लिए, यह डिजाइन प्रक्रिया के हिस्से के रूप में इमेज जनरेशन का उपयोग करता है।
00:09:08एक बार डिजाइन पूरा हो जाने के बाद, यह अगले स्टेप पर जाता है जहाँ React component स्किल का उपयोग करके
00:09:12एक कंपोनेंट-वार संरचना बनाई जाती है और ऐप को ठीक से लागू किया जाता है, जो आपके द्वारा उपयोग किए जा रहे
00:09:17फ्रेमवर्क के लिए अनुकूलित होता है।
00:09:18यदि आप देव सर्वर चलाते हैं, तो आप देख सकते हैं कि एप्लिकेशन Stitch के डिजाइन को बिल्कुल मैप करता है,
00:09:22जिसमें बटनों पर होवर इफेक्ट्स भी शामिल हैं, जिससे यह वर्कफ़्लो पूरी तरह से कार्यात्मक ऐप्स बनाने के लिए
00:09:26बहुत आसान और तेज़ हो जाता है।
00:09:28अब, यहाँ उपयोग किया गया Clod.md, और बनाए गए सभी संसाधन AI
00:09:33Labs Pro में उपलब्ध हैं।
00:09:34इसमें इस वीडियो के साथ-साथ पिछले सभी वीडियो के संसाधन शामिल हैं, जिन्हें आप
00:09:38डाउनलोड कर सकते हैं और अपने स्वयं के प्रोजेक्ट्स के लिए उपयोग कर सकते हैं।
00:09:40यदि आपको हमारे काम में मूल्य मिला है और आप चैनल का समर्थन करना चाहते हैं, तो यह
00:09:43सबसे अच्छा तरीका है।
00:09:44लिंक डिस्क्रिप्शन में है।
00:09:46शून्य से निर्माण करना हमेशा एक अच्छा विचार नहीं होता है, और यह कंपोनेंट्स पर भी लागू होता है।
00:09:50सामान्य React कंपोनेंट्स द्वारा जनरेट किया गया UI बहुत ही स्थिर होता है और केवल लुक पर केंद्रित होता है
00:09:54इसलिए आपको इंटरैक्शन और एनीमेशन इफेक्ट्स जोड़ने के लिए अतिरिक्त मेहनत की आवश्यकता होगी।
00:09:58शून्य से निर्माण करने के बजाय, आपको अपने ऐप्स में UI लाइब्रेरीज़ का उपयोग करना चाहिए क्योंकि वे
00:10:02निर्माण को आसान बनाती हैं और उनमें इंटरैक्शन फीचर्स पहले से ही मौजूद होते हैं
00:10:07जिनका उपयोग आप अपने UI को और अधिक जीवंत बनाने के लिए कर सकते हैं।
00:10:08इसे और भी आसान बनाने के लिए, Google एक ShadCN UI स्किल प्रदान करता है, जो Stitch से
00:10:13ShadCN कंपोनेंट्स में एप्लिकेशन को कन्वर्ट करते समय मार्गदर्शन प्रदान करती है।
00:10:16यह स्किल मूल रूप से एक विस्तृत गाइड है कि इन कंपोनेंट्स को पूरे ऐप में
00:10:21ठीक से कैसे लागू किया जाए।
00:10:22चूँकि ShadCN कई रजिस्ट्रियों के साथ जुड़ने का समर्थन करता है, आप उन्हें एकीकृत करके
00:10:26और उनकी विशेषताओं का उपयोग करके अपनी क्षमताओं को और भी बढ़ा सकते हैं।
00:10:30लेकिन निर्माण से पहले ShadCN MCP सेटअप करने की अनुशंसा की जाती है ताकि
00:10:35वर्कफ़्लो सुचारू बना रहे।
00:10:36इसका प्रभावी ढंग से उपयोग करने के लिए, आपको एक Clod.md फ़ाइल भी सेटअप करनी चाहिए और निर्देश शामिल करने चाहिए
00:10:41ताकि जब भी आप Stitch MCP का उपयोग करें, यह स्वचालित रूप से डिजाइन को कंपोनेंट्स में
00:10:47बदलने के लिए ShadCN स्किल का उपयोग करे।
00:10:48चूँकि आप रजिस्ट्रियां जोड़ सकते हैं, आप निर्दिष्ट कर सकते हैं कि आप अपने प्रोजेक्ट में कौन सी रजिस्ट्रियां उपयोग करना चाहते हैं।
00:10:52उदाहरण के लिए, जब हम साइट बना रहे थे, हमने Glassmorphism और Motion Primitives को चुना
00:10:57क्योंकि उनमें ऐसे कंपोनेंट्स हैं जो एक प्रीमियम फील देते हैं।
00:11:00आप उन्हें चुन सकते हैं जो आपके प्रोजेक्ट की आवश्यकताओं के लिए सबसे उपयुक्त हों।
00:11:03यदि आपने पहले Stitch में UI बनाया है, तो आप इसे ShadCN
00:11:07कंपोनेंट्स वाले ऐप में बदल सकते हैं।
00:11:08आपको उस प्रोजेक्ट का नाम निर्दिष्ट करना होगा जिसे आप लागू करना चाहते हैं और इसे
00:11:12ऐप में लागू करने के लिए कहना होगा।
00:11:13यह पहले निर्दिष्ट नाम वाले प्रोजेक्ट को प्राप्त करेगा, फिर ShadCN UI स्किल लोड करेगा और पूरे ऐप को
00:11:18लागू करने के लिए आपके द्वारा निर्दिष्ट रजिस्ट्रियों के साथ ShadCN MCP टूल कॉल्स का
00:11:23उपयोग करेगा।
00:11:24एक बार कार्यान्वयन पूरा हो जाने के बाद, ऐप बिल्कुल वैसा ही दिखाई देगा जैसा आप Stitch में देखते हैं
00:11:27लेकिन यह ShadCN UI कंपोनेंट्स के साथ बना होगा।
00:11:29इससे बहुत बड़ा अंतर पड़ता है क्योंकि एक बार में जनरेट किया गया ऐप कार्यान्वयन की आसानी के कारण
00:11:34बहुत अधिक इंटरैक्टिव हो जाता है।
00:11:36इसी के साथ हम इस वीडियो के अंत में पहुँच गए हैं।
00:11:38यदि आप चैनल का समर्थन करना चाहते हैं और हमें इस तरह के वीडियो बनाने में मदद करना चाहते हैं, तो आप
00:11:42नीचे दिए गए सुपर थैंक्स बटन का उपयोग करके ऐसा कर सकते हैं।
00:11:44हमेशा की तरह, देखने के लिए धन्यवाद और मैं आपसे अगले वीडियो में मिलूँगा।