Transcript
00:00:00एक अच्छा डिज़ाइन वाकई बहुत मायने रखता है क्योंकि यदि आप ग्राहक चाहते हैं, तो आपकी साइट का लुक
00:00:05सबसे पहली चीज़ है जिसका वे मूल्यांकन करते हैं। ऐसे कई टूल हैं जो इसमें मदद करते हैं और Claude Design
00:00:09इस समय सबसे शक्तिशाली टूल में से एक है। लेकिन एक अच्छा डिज़ाइन केवल टूल को प्रॉम्प्ट करने से नहीं मिलता।
00:00:14इसलिए इस वीडियो में हम एक पाँच-चरणीय प्रक्रिया से गुजरेंगे जिसे आप खुद Claude Design के साथ
00:00:18चला सकते हैं। चाहे आपने कभी Claude Design न खोला हो या आप इसे महीनों से इस्तेमाल कर रहे हों,
00:00:22यहाँ आपके लिए कुछ न कुछ है। यदि आपने इसे पहले कभी नहीं खोला है, तो कोई बात नहीं क्योंकि हम शुरुआत
00:00:27इसी बात से करते हैं कि यह टूल असल में क्या है। और यदि आप पहले से ही इसमें डिज़ाइन कर रहे हैं,
00:00:32तो हम इस पर चर्चा करते हैं कि इसे और अधिक शक्तिशाली बनाने के लिए Claude Design को Claude Code के साथ कैसे एकीकृत करें।
00:00:37अब यदि आप इस चैनल पर नए हैं, तो आपका स्वागत है। हम असल में एक सॉफ्टवेयर कंपनी हैं और हमने
00:00:41अपनी आंतरिक प्रक्रियाओं के आधार पर Claude Design के इर्द-गिर्द आपके लिए एक संपूर्ण प्रणाली बनाई है। इसलिए बिना कोई समय बर्बाद किए,
00:00:47आइए वीडियो में आगे बढ़ते हैं। यह खंड केवल उनके लिए है जो नहीं जानते कि Claude Design क्या है।
00:00:52इसलिए यदि आप इसके बारे में पहले से जानते हैं, तो आप अगले भाग पर जा सकते हैं। यह सबसे पहले
00:00:57एक रिसर्च प्रीव्यू के रूप में सामने आया था जब Claude ने अपना Opus 4.7 मॉडल लॉन्च किया था। यह मूल रूप से
00:01:02एक ऐसा डिज़ाइन टूल है जिसका इंटरफ़ेस उपयोग करने में बहुत आसान है जो किसी को भी, यहाँ तक कि तकनीकी रूप से गैर-कुशल लोगों को भी,
00:01:07केवल साधारण प्रॉम्प्टिंग के साथ अच्छे डिज़ाइन बनाने की अनुमति देता है। और यह सभी भुगतान किए गए प्लान्स में उपलब्ध है।
00:01:12यह सिर्फ वेबसाइटों पर नहीं रुकता। आप इसके साथ अपनी स्लाइड, दस्तावेज़ और यहाँ तक कि एनिमेशन भी डिज़ाइन कर सकते हैं।
00:01:17इसके अलावा Claude Design, Claude Desktop और Claude वेबसाइट दोनों पर उपलब्ध है। इसलिए आपको डेस्कटॉप ऐप इंस्टॉल करना आवश्यक नहीं है।
00:01:22यदि आप इसे ऐप पर उपयोग करना चाहते हैं, तो आप बस इसे डाउनलोड करें, इंस्टॉलेशन चलाएं और अपने खाते में लॉगिन करें।
00:01:27फिर आप साइडबार खोलें, डिज़ाइन पर क्लिक करें, और इसका इंटरफ़ेस खुल जाता है जहाँ आप इसका उपयोग करना शुरू कर सकते हैं।
00:01:32Claude Design आपको चुनने के लिए सभी Claude मॉडल देता है, यहाँ तक कि Fable भी, जो उनका सबसे सक्षम मॉडल है,
00:01:37हालांकि आपको इस तक सीमित पहुंच ही मिलती है। सामान्य उपयोग के लिए उनका मुख्य मॉडल अभी भी Opus है,
00:01:42और यह अभी भी डिज़ाइनिंग के लिए सबसे अच्छा है। लेकिन इन Opus मॉडल के साथ समस्या यह है कि वे
00:01:46बहुत सारे टोकन खर्च करते हैं। दूसरी ओर, Haiku उतने टोकन का उपयोग नहीं करता है, लेकिन इससे एक अच्छा डिज़ाइन पाने के लिए
00:01:51अधिक सुधार की आवश्यकता हो सकती है। और इसके अलावा, आप प्रत्येक मॉडल के लिए प्रयास स्तर (effort level) भी सेट कर सकते हैं।
00:01:55एक प्रयास स्तर मूल रूप से यह नियंत्रित करता है कि कुछ भी करने से पहले मॉडल कितना कठिन सोचता है। हम अपने डिज़ाइन कार्यों के लिए
00:02:01मध्यम प्रयास पर नवीनतम मॉडल Opus 5 का उपयोग करते हैं क्योंकि यह हमें बहुत अधिक टोकन बर्बाद किए बिना आसानी से डिज़ाइन करने देता है।
00:02:06यह आपको अपने सभी MCPs और स्किल्स को लाने की अनुमति भी देता है, जिससे इसके भीतर अपनी खुद की प्रणाली का उपयोग करना बहुत आसान हो जाता है।
00:02:12जो लोग नहीं जानते, उनके लिए MCPs मूल रूप से वे चीजें हैं जो किसी एजेंट को अपने बाहर की चीजों से कनेक्ट होने देती हैं,
00:02:18जैसे अन्य टूल और सेवाएं, और स्किल्स निर्देशों के सेट हैं जो एजेंट को सिखाते हैं कि चरण-दर-चरण मार्गदर्शन के साथ
00:02:23कुछ बेहतर कैसे किया जाए और ऐसे संदर्भ जिनका वह पालन कर सके।
00:02:28अब शुरू करने से पहले, ध्यान रखने योग्य एक बात है। आप कितने डिज़ाइन बना सकते हैं, इसकी एक सीमा है।
00:02:33Claude Design 5 घंटे की सीमा पर चलता है, लेकिन यह केवल आपके डिज़ाइनों के लिए नहीं है। आप Claude पर जो कुछ भी करते हैं,
00:02:38वह उसी में गिना जाता है। उस 5 घंटे की अवधि के भीतर, आप कितने टोकन खर्च कर सकते हैं, इसकी एक सीमा होती है,
00:02:44और एक बार जब यह समाप्त हो जाता है, तो आपको इसका दोबारा उपयोग करने से पहले उन 5 घंटों के समाप्त होने का इंतजार करना होगा।
00:02:49और भले ही यह पहली बार आने की तुलना में बहुत बेहतर हो गया है, Claude Design अभी भी बहुत अधिक टोकन की खपत करता है,
00:02:53इसलिए यदि आप इसका भारी उपयोग कर रहे हैं, तो उम्मीद करें कि आपकी सीमाएं तेजी से समाप्त हो जाएंगी।
00:02:59इसलिए व्यापक टोकन उपयोग का मुकाबला करने के लिए, सीधे प्रॉम्प्टिंग में कूदने से पहले आपको कुछ कदम उठाने होंगे।
00:03:04ये चरण महत्वपूर्ण हैं क्योंकि वे सुनिश्चित करते हैं कि आपको अधिक टोकन बर्बाद किए बिना अपनी पसंद का डिज़ाइन मिल जाए।
00:03:09सबसे पहली चीज़ जो आपको करनी है वह है design.md फ़ाइल बनाना। यह एक ऐसा प्रारूप है
00:03:15जिसे Google ने शुरू किया था, और इसमें आपके ब्रांड के डिज़ाइन का सारा विवरण होता है। आपका AI कोडिंग एजेंट कुछ भी लिखने से पहले उस फ़ाइल को पढ़ता है,
00:03:20ताकि यह सुनिश्चित हो सके कि इसके द्वारा दी जाने वाली प्रत्येक स्क्रीन ब्रांड के अनुकूल हो। इसे कभी अनुमान नहीं लगाना पड़ता,
00:03:25इसलिए यह कभी भी ब्रांड से बाहर नहीं जाता है। अब Claude Design में एक सुविधा है जो आपको डिज़ाइन सिस्टम बनाने की अनुमति देती है।
00:03:30एक डिज़ाइन सिस्टम मूल रूप से स्टाइल विकल्पों का एक सेट है जो आपकी साइट पर दिखाई देता है। इसमें आपके फोंट,
00:03:35आपके रंग, और अन्य सभी विवरण शामिल हैं जो आपके डिज़ाइन को बनाते हैं, और यह आपको अधिक डिज़ाइन बनाने के लिए उनका उपयोग करने देता है।
00:03:40इसलिए डिज़ाइन सिस्टम का उपयोग करके बनाए गए सभी डिज़ाइन एक ही स्टाइल का पालन करेंगे और एक ही साइट के हिस्से की तरह दिखेंगे।
00:03:46लेकिन पूर्व-परिभाषित design.md फ़ाइल से शुरुआत करने का मुख्य कारण यह है कि इन सभी मॉडलों के आउटपुट डिज़ाइन एक जैसे दिखते हैं।
00:03:51यदि आप Claude Design को अपने दम पर डिज़ाइन सिस्टम बनाने देते हैं, तो यह केवल सामान्य रंगों और शैलियों पर वापस आ जाता है
00:03:57जिन्हें Opus मॉडल हर जगह उपयोग करते हैं, और इस वजह से, आपकी साइट अन्य सभी AI द्वारा बनाई गई साइटों जैसी दिखने लगती है।
00:04:02लेकिन यदि आप डिज़ाइन सिस्टम को आधारित करने के लिए इसे design.md देते हैं,
00:04:07तो वह फ़ाइल इसे बताती है कि आप वास्तव में क्या चाहते हैं, इसलिए यह बहुत अधिक नियंत्रित है और उन डिफ़ॉल्ट पर वापस नहीं जाती है।
00:04:12और जैसा कि हमने पहले ही उल्लेख किया है, दूसरा कारण स्थिरता है। चूंकि पूरा डिज़ाइन सिस्टम
00:04:17उस एक फ़ाइल पर आधारित है, इसलिए प्रत्येक पृष्ठ बिल्कुल उसी शैली का अनुसरण करता है, जो आपकी बहु-पृष्ठ साइट को सुसंगत बनाए रखता है।
00:04:22तो इसके लिए, हमने एक स्किल बनाई है जो आपके लिए design.md की योजना बनाती है। इस स्किल का उपयोग करने के लिए, आप इसे Claude Code के अंदर चलाते हैं।
00:04:27और Claude Code मूल रूप से Anthropic का एक अन्य टूल है। यह अनिवार्य रूप से एक AI कोडिंग टूल है जिसे आप अपने टर्मिनल में चलाते हैं
00:04:33जो आपके लिए पूरे ऐप बना सकता है। इसे इंस्टॉल करने के लिए, आप बस उनकी आधिकारिक साइट पर जाएं, इंस्टॉलेशन कमांड कॉपी करें,
00:04:39और अपने टर्मिनल में उस कमांड को चलाएं। एक बार यह हो जाने के बाद, आप टर्मिनल में Claude टाइप करते हैं,
00:04:45और आप अपना प्रॉम्प्ट टाइप करके इसका उपयोग करना शुरू कर सकते हैं। चूंकि हम Claude Code में ऐप बनाने जा रहे थे,
00:04:49हमने इस स्किल को .claude फ़ोल्डर के अंदर स्किल्स फ़ोल्डर में डाल दिया, जो मूल रूप से
00:04:54वह जगह है जहाँ Claude Code की सभी सेटिंग्स और कॉन्फ़िगरेशन रहते हैं। संभवतः आपके पास यह फ़ोल्डर नहीं होगा,
00:04:59लेकिन आप प्रॉम्प्ट बॉक्स में Claude Code को बता सकते हैं कि आपको प्रोजेक्ट में स्किल्स इंस्टॉल करने की आवश्यकता है,
00:05:05और यह आपके लिए इसे सेट अप कर देगा और यहां तक कि स्किल को अपने आप वहां रख देगा।
00:05:10जब आप इसे Finder में खोलेंगे तो .claude फ़ोल्डर दिखाई नहीं देगा। ऐसा इसलिए है क्योंकि इसका नाम एक बिंदु से शुरू होता है,
00:05:15और एक बिंदु से शुरू होने वाली फाइलों को सिस्टम फाइलों के रूप में माना जाता है, इसलिए Finder डिफ़ॉल्ट रूप से उन्हें छिपा देता है।
00:05:20तो वहां जाने के लिए, आपको एक कोड एडिटर की आवश्यकता होती है, जो मूल रूप से एक ऐसा ऐप है जो आपको अपनी सभी प्रोजेक्ट फाइलों को
00:05:25एक व्यवस्थित जगह पर देखने देता है। जिस ऐप का हम उपयोग करते हैं वह VS Code है, जो Microsoft का है,
00:05:31और इसके साथ काम करना कितना आसान है, इसके कारण अधिकांश बिल्डर्स इसका उपयोग करते हैं। इसे इंस्टॉल करने के लिए,
00:05:36आप उनकी आधिकारिक साइट पर जाएं, जिस भी सिस्टम पर आप हैं उसके लिए इंस्टॉलर डाउनलोड करें, और इंस्टॉलेशन चलाएं।
00:05:40फिर आप इसके अंदर अपना प्रोजेक्ट फ़ोल्डर खोलते हैं, और आप छिपी हुई फाइलों सहित सब कुछ देखने में सक्षम होंगे।
00:05:45फिर जब भी आप कोई ऐप बनाना चाहते हैं, तो आप इस स्किल को इसके स्लैश कमांड के साथ कॉल करते हैं,
00:05:49जो मूल रूप से एक शॉर्टकट है जिसे आप इसे ट्रिगर करने के लिए स्लैश के साथ टाइप करते हैं और इसे क्या बनाना चाहते हैं,
00:05:54यह बताने के लिए एक प्रॉम्प्ट देते हैं। यह आपका इंटरव्यू लेता है और आपके साथ विस्तार से उत्पाद की दृश्य पहचान की योजना बनाता है,
00:05:59और एक बार जब इसके पास सब कुछ आ जाता है, तो यह पूरा design.md लिख देता है,
00:06:03और यह स्क्रिप्ट चलाकर Google के मानकों के विरुद्ध इसका सत्यापन भी करता है। इस स्किल में एंटी-स्लॉप संदर्भ भी होते हैं,
00:06:09जो मूल रूप से वे सभी सामान्य पैटर्न हैं जो किसी साइट को AI द्वारा निर्मित के रूप में उजागर करते हैं।
00:06:15इसलिए पहले design.md की योजना बनाना वास्तव में सबसे अच्छा विकल्प है। इसके अलावा, यदि आप सोच रहे हैं कि इस स्किल को कहाँ से प्राप्त करें,
00:06:21तो चिंता न करें, हम आपको वीडियो में बाद में बताएंगे। अब, इस वीडियो में हम जो ऐप बना रहे हैं
00:06:26वह एक प्रोजेक्ट प्रबंधन ऐप है जहाँ आप अपने सभी कोडिंग प्रोजेक्ट्स को एक ही स्थान पर प्रबंधित करते हैं।
00:06:31तो शुरुआत करने के लिए, पहले आप Claude Code को स्किल के लिए स्लैश कमांड के साथ एक प्रॉम्प्ट देते हैं,
00:06:36इसे उस ऐप के बारे में बताते हुए जिसे आप व्यापक शब्दों में बनाना चाहते हैं और इसका उपयोग किस लिए किया जाएगा,
00:06:41और यह आपके विचार की दृश्य पहचान का विश्लेषण करके शुरू होता है। एक बार इसके पास वह आ जाने के बाद,
00:06:46यह आपसे सवाल पूछना शुरू कर देता है, जैसे कि क्या आपकी वेबसाइट के लिए आपके दिमाग में कोई रंग है।
00:06:51यदि आपने पहले ही अपने ब्रांड के रंगों का फैसला कर लिया है, तो आप उन्हें सौंप सकते हैं, या आप इसे अपने दम पर चुनने दे सकते हैं।
00:06:55चूंकि आप स्किल का उपयोग कर रहे हैं, इसलिए यह स्लॉप रंगों पर डिफ़ॉल्ट नहीं होगा, इसलिए आपको उस सामान्य रूप के बारे में चिंता करने की आवश्यकता नहीं है,
00:07:00लेकिन फिर भी पहले से ही उनका निर्णय लेना बेहतर है। हम आमतौर पर कूलर्स का उपयोग करते हैं,
00:07:05जो वह साइट है जो रंग पट्टियों को उत्पन्न और विजुअलाइज करती है, ताकि आप देख सकें कि रंग एक साथ कैसे दिखते हैं।
00:07:09एक बार जब आपको अपनी पसंद का रंग संयोजन मिल जाता है, तो आप निर्यात पर क्लिक कर सकते हैं,
00:07:14फिर कोड विकल्प चुन सकते हैं, और यह आपको यह टेक्स्ट देगा जिसे आप बस कॉपी करके Claude Code में पेस्ट कर सकते हैं।
00:07:18Claude Code इसे आपके लिए आपकी design.md फ़ाइलों के अंदर रख देगा। उसके बाद, यह design.md फ़ाइल बनाएगा
00:07:24और कुछ सत्यापन चरण चलाएगा। और डिज़ाइन फ़ाइल ठीक उसी तरह बाहर आती है जैसे Google ने इसे तैयार किया था।
00:07:29अब वह Google प्रारूप AI मॉडल के लिए समझना आसान है, लेकिन आपके लिए वास्तव में उन डिज़ाइनों की कल्पना करना कठिन है
00:07:33जो इससे उत्पन्न होने वाले हैं, इसलिए आप यह नहीं बता सकते कि क्या यह वह डिज़ाइन है जिसे आप अंतिम रूप देना चाहते हैं या यदि इसे बदलने की आवश्यकता है।
00:07:38लेकिन इसे Claude Design के अंदर न परखें। आप वहाँ अपने डिज़ाइन तैयार करते हैं, और मान लीजिए कि वे आपको पसंद नहीं आते हैं।
00:07:43अब आपको design.md में वापस जाना होगा, इसे बदलना होगा, और सब कुछ फिर से उत्पन्न करना होगा।
00:07:48उनमें से प्रत्येक दौर आपको टोकन खर्च करता है। ऐसे कई टूल हैं जो केवल आपके लिए design.md को विजुअलाइज करेंगे,
00:07:53और उनमें से एक जिसका हमने उपयोग किया वह design.md.space है। उनमें से कोई भी आपको दिखाता है कि आपकी डिज़ाइन फ़ाइल कैसी दिखती है
00:07:59और विभिन्न क्षेत्रों के लिए इसके द्वारा चुने गए सभी रंग एक साथ कैसे काम करते हैं। यह सभी तत्वों की भी कल्पना करता है,
00:08:04जिससे उन पर निर्णय लेना बहुत आसान हो जाता है। अब यह design.md बनाने का सिर्फ एक तरीका है, लेकिन अन्य भी हैं।
00:08:10यदि आप अपने दम पर एक नहीं बनाना चाहते हैं, तो आप नमूने के रूप में किसी लोकप्रिय वेबसाइट के डिज़ाइन को कॉपी कर सकते हैं।
00:08:15और ईमानदारी से कहें तो, किसी एक को संदर्भ के रूप में कॉपी करना वह है जो बहुत से लोग पहले से करते हैं।
00:08:19आप इसे शुरुआती बिंदु के रूप में लेते हैं और इसे अपना बनाने के लिए परिवर्तन करते हैं,
00:08:24बिल्कुल वैसे जैसे कि बहुत से लोगों ने Notion के सरल रूप को लिया है और कुछ बदलावों के बाद इसे अपने खुद के डिज़ाइनों में काम में लिया है।
00:08:29इसके लिए, getdesign.md नाम की एक साइट है, जो कई ब्रांडों और उनकी सभी शैलियों को design.md फाइलों के रूप में सूचीबद्ध करती है
00:08:34वहाँ आपके डिज़ाइन हैं, और मान लीजिए कि वे आपको पसंद नहीं आते हैं। अब आपको डिज़ाइन.एमडी में वापस जाना होगा
00:08:39चूंकि हमारे पास पहले से ही अपना design.md है, हम क्लॉड डिज़ाइन के साथ आगे बढ़ सकते हैं और एक नया
00:08:44इससे डिज़ाइन सिस्टम बना सकते हैं। जब आप एक नया बनाते हैं, तो यह उत्पाद विवरण के बारे में पूछता है। लेकिन चूंकि आपके पास
00:08:49design.md है, तो आप बस उसे एक संपत्ति के रूप में अपलोड कर देते हैं। और फिर यह नई प्रणाली को उत्पन्न करना शुरू कर देता है
00:08:55फ़ाइल को पढ़कर, टू-डू बनाकर और उन पर एक-एक करके काम करके। थोड़ी देर बाद, क्लॉड डिज़ाइन
00:09:00डिज़ाइन सिस्टम बनाता है और आपके लिए हर चीज़ की कल्पना करता है, विभिन्न तत्वों का निर्माण करता है जो
00:09:06उस ऐप का हिस्सा होंगे जिसमें इसका उपयोग किया जाता है। अब इस वर्कफ़्लो का पालन करने के लिए, आपको इसकी आवश्यकता होगी
00:09:10कौशल। हमने इसे GitHub पर अपलोड कर दिया है और विवरण में लिंक किया है ताकि आप इसे मुफ़्त में पा सकें।
00:09:14तो इसका उपयोग करने के लिए, बस Claude Code को यह लिंक दें और इसे अपने लिए सेट अप करने के लिए कहें और यह इंस्टॉल हो जाएगा
00:09:19अपने खुद के डिज़ाइनों में ढाला है। इसके लिए, getdesign.md नाम की एक साइट है, जो कई ब्रांड्स को सूचीबद्ध करती है
00:09:24और उनकी सभी शैलियों को design.md फ़ाइलों के रूप में रखती है जिन्हें आप खुद जाकर प्राप्त कर सकते हैं। चूँकि हमारे पास
00:09:29अपना खुद का design.md है, हम Claude Design के साथ आगे बढ़ सकते हैं और इससे एक नई डिज़ाइन प्रणाली बना सकते हैं।
00:09:34जब आप एक नया बनाते हैं, तो यह उत्पाद विवरण के बारे में पूछता है। लेकिन चूंकि आपके पास design.md है,
00:09:39आप इसे एक परिसंपत्ति के रूप में अपलोड करते हैं। और फिर यह फ़ाइल को पढ़कर, टू-डू बनाकर और उन पर एक-एक करके काम करके नई प्रणाली को जनरेट करना शुरू कर देता है।
00:09:43थोड़ी देर बाद, Claude Design डिज़ाइन प्रणाली बनाता है और आपके लिए हर चीज़ को विज़ुअलाइज़ करता है,
00:09:48विभिन्न तत्वों का निर्माण करता है जो उस ऐप का हिस्सा होंगे जिसमें इसका उपयोग किया जाता है। अब आपके लिए इस वर्कफ़्लो का पालन करने के लिए, आपको इस
00:09:53कौशल की आवश्यकता होगी। हमने इसे GitHub पर अपलोड कर दिया है और विवरण में इसका लिंक दे दिया है ताकि आप इसे मुफ़्त में पा सकें।
00:09:58तो इसका उपयोग करने के लिए, बस यह लिंक Claude Code को दें और इसे आपके लिए सेट अप करने के लिए कहें और यह इसे इंस्टॉल कर देगा
00:10:03और बिना कुछ किए इसे .claude फ़ोल्डर में रख देगा। अब एक बार डिज़ाइन सिस्टम लॉक हो जाता है और इसका उपयोग करने का समय आ जाता है,
00:10:08तो साइट बनाना शुरू करने से पहले एक और वास्तव में महत्वपूर्ण कदम है। और वह है जो आप बनाना चाहते हैं उसके वायरफ्रेम बनाना।
00:10:12वायरफ्रेम मूल रूप से एक कच्चा स्केच है जो आपको यह देखने देता है कि सभी तत्व कहाँ जाते हैं और क्या वे सही जगह पर रखे गए हैं।
00:10:18अब आप सीधे साइट बना सकते हैं लेकिन इससे समस्याएं पैदा होती हैं। आपको लंबे समय तक इंतजार करना होगा
00:10:23क्योंकि Claude Design डिज़ाइन बनाने में धीमा है और यदि उसके बाद भी डिज़ाइन वह नहीं है जिसकी आपको आवश्यकता है, तो आपको पूरी चीज़ को फिर से करना होगा।
00:10:28तो Claude Design में ऐसा करने के लिए, आपके द्वारा अभी बनाई गई डिज़ाइन प्रणाली का चयन करें,
00:10:33वायरफ्रेम विकल्प चुनें और इसे इस बात के विवरण के साथ एक संकेत दें कि आप कितनी स्क्रीन चाहते हैं।
00:10:38उसके बाद, यह आपको प्रत्येक स्क्रीन के लिए कई विकल्प बनाने की भी अनुमति देता है ताकि Claude आपको प्रत्येक स्क्रीन की कुछ
00:10:42अलग-अलग शैलियाँ चुनने के लिए दे सके। उन्हें जनरेट होने में ज़्यादा समय नहीं लगेगा और फिर आप
00:10:48संरचना को देख सकते हैं और उसी पृष्ठ के लिए इसके द्वारा किए गए सभी परिवर्तनों से गुजर सकते हैं। इसमें
00:10:52एक टिप्पणी सुविधा भी है इसलिए किसी भी चीज़ को बदलने के लिए, आप उस पर एक टिप्पणी छोड़ दें। एक टिप्पणी मूल रूप से
00:10:57आपके संकेत के साथ उस तत्व का सटीक विवरण भेजती है ताकि Claude को ठीक से पता चल सके कि किस क्षेत्र को बदलने की आवश्यकता है
00:11:03और कैसे। यह केवल संकेत देने और Claude को यह पता लगाने देने से कहीं बेहतर है कि आपका मतलब किस क्षेत्र से है
00:11:06अपने दम पर। और एक जोड़ने के लिए, आप बस टिप्पणी सुविधा का चयन करें, उस सटीक चीज़ पर क्लिक करें जिसे आप बदलना चाहते हैं
00:11:10और आवश्यक परिवर्तन टाइप करें। और आप जितनी चाहें उतनी टिप्पणियाँ जोड़ सकते हैं।
00:11:15आप उन्हें एक-एक करके भेज सकते हैं लेकिन उन्हें समूहित करना और एक साथ भेजना बेहतर है ताकि यह
00:11:20उन्हें एक साथ हल करता है और एक ही बार में सब कुछ ठीक कर देता है। इससे आपका प्रतीक्षा समय कम से कम रहता है। तो बस
00:11:26इसे तब तक बदलते रहें जब तक आप संरचना से संतुष्ट न हो जाएं और एक बार जब आप यहाँ समाप्त कर लें, तो आप आगे बढ़ सकते हैं। और यदि
00:11:31आपको अब तक का वीडियो पसंद आ रहा है, तो चैनल को सब्सक्राइब करें और हाइप बटन दबाएं। समर्थन का यह छोटा सा इशारा
00:11:36हमारे लिए एक लंबा रास्ता तय करता है। अब एक बार जब आप वायरफ्रेम डिज़ाइन कर लेते हैं, तो वास्तविक डिज़ाइन डिज़ाइन डिज़ाइन करने का समय आ जाता है।
00:11:41आप कुछ बदलाव बनाने के लिए उसी डिज़ाइन डिज़ाइन का भी उपयोग कर सकते हैं। चूंकि आप आमतौर पर
00:11:46Claude से एक ही डिज़ाइन के कुछ बदलाव बनाने के लिए कहते हैं, तो आप पहले चुनते हैं कि आप कौन सा बदलाव चाहते हैं
00:11:50उन लोगों में से जो आपने अभी बनाए हैं। इनमें से प्रत्येक पृष्ठ की पहचान उसके कोड नंबर से होती है, इसलिए आप बस चयन करते हैं
00:11:55इसके द्वारा। उसके बाद, आप इसे यह बताने वाला एक संकेत देते हैं कि आप इन स्क्रीन को वास्तविक पूर्ण में बदलना चाहते हैं
00:12:00विस्तृत डिज़ाइन और आप इसे स्वच्छ रिक्ति के साथ वायरफ्रेम से लेआउट और संरचना को रखने के लिए कहते हैं
00:12:05और पदानुक्रम। Claude डिज़ाइन तब डिज़ाइन सिस्टम का निर्माण करते समय इसके द्वारा बनाए गए सभी तत्वों को पढ़ता है।
00:12:10और उनका उपयोग करके, यह पूरी साइट का निर्माण करता है ताकि यह डिज़ाइन सिस्टम के अनुसार बिल्कुल बाहर आ सके
00:12:15और वायरफ्रेम, ठीक वैसे ही जैसे हमें इसकी आवश्यकता है। वायरफ्रेम की तरह, आप यहाँ भी टिप्पणी कर सकते हैं और चीज़ों को ठीक कर सकते हैं।
00:12:20और आपको शायद बहुत सारे बदलावों की आवश्यकता होगी क्योंकि यह बटन के रंगों को ठीक से नहीं चुनता है।
00:12:25कुछ बटनों को ध्यान आकर्षित करने की आवश्यकता होती है और बाहर खड़े होने के लिए एक बोल्ड रंग में होना चाहिए ताकि आप पूछ सकें
00:12:29उन्हें ठीक करने के लिए। और क्योंकि यह वायरफ्रेम के शीर्ष पर बनाता है, साइट अपने दम पर थोड़ी खाली बाहर आती है
00:12:35केवल खुरदुरे स्केच पर जोड़े गए बुनियादी भागों के साथ ताकि आप बनावट जोड़ने के लिए कह सकें
00:12:40और पूर्ण रूप के लिए तत्व। आप सीधे डिज़ाइन पर संपादन भी लागू कर सकते हैं, इसलिए यदि आपके पास एक मामूली है
00:12:45कुछ तत्व को हटाने जैसे बदलाव, आप इसे Claude को संकेत दिए बिना सीधे डिज़ाइन पर कर सकते हैं
00:12:50इसके लिए। इस तरह बदलाव बिना इंतजार किए लागू हो जाता है और इतनी छोटी सी बात पर टोकन बर्बाद नहीं होते हैं।
00:12:55और एक बार जब आप परिवर्तन करना समाप्त कर लेते हैं, तो आप Claude डिज़ाइन से समग्र रूप को पॉलिश करने के लिए कह सकते हैं,
00:13:00और यह डिज़ाइन में ये सूक्ष्म, सार्थक परिवर्तन करता है। इसलिए ऐप का पहला संस्करण
00:13:05अब हो गया है, लेकिन कुछ गायब है और वह है एनिमेशन। अब वे महत्वपूर्ण हैं क्योंकि वे
00:13:10एक साइट को उपयोग करने में बेहतर महसूस कराते हैं और वास्तव में मायने रखने वाली चीज़ों की ओर आँखें मार्गदर्शन करते हैं। स्क्रॉल करने जैसी चीज़ें
00:13:15दृष्टि में या किसी अन्य छोटे स्पर्श साइट को अधिक जीवित महसूस कराते हैं। इसलिए इसके लिए, हमने Claude डिज़ाइन दिया
00:13:21सभी स्क्रीन पर एनिमेशन जोड़ने के लिए एक संकेत जैसे कि दृष्टि में स्क्रॉल करने वाली चीजें या कोई अन्य छोटा
00:13:26स्पर्श जो साइट को अधिक जीवंत महसूस कराता है। और हमने इसे सूक्ष्म रखने के लिए कहा और कुछ भी बहुत उछाल वाला नहीं बनाया
00:13:31चूंकि यह बंद महसूस कर सकता है। एक बार Claude डिज़ाइन हो जाने के बाद, आप स्क्रॉल को देख सकते हैं
00:13:36दृष्टि में और पाठ पॉप-अप एनिमेशन जो पूरी साइट को बहुत अधिक इंटरैक्टिव महसूस कराते हैं। और एक बार जब आप
00:13:42डिज़ाइन से खुश हैं, तो आप अगले चरण पर जा सकते हैं, जो हैंडऑफ़ है। इसलिए Claude में डिज़ाइन
00:13:47डिज़ाइन अब अंतिम रूप दे दिया गया है, और इसे वास्तविक उत्पाद में बदलकर जीवन देने का समय आ गया है जिसे हम
00:13:52अंत में वितरित करेंगे। Claude डिज़ाइन में यह पहले नहीं था, लेकिन अब आप अपने डिज़ाइन निर्यात कर सकते हैं
00:13:57सीधे Claude कोड में। यह Claude डिज़ाइन MCP का उपयोग करता है, जो मूल रूप से वह है जो Claude डिज़ाइन और
00:14:02Claude कोड एक दूसरे से बात करते हैं। और यह सिर्फ एक तरह से काम नहीं करता है, यह दोनों तरह से काम करता है। इसलिए आप आगे बढ़ सकते हैं
00:14:08Claude डिज़ाइन से अपने डिज़ाइन Claude कोड में और उसी तरह उन्हें वापस लाते हैं। आप Claude खोलते हैं
00:14:12फिर से कोड करें और इस संकेत को पेस्ट करें जो आपको Claude डिज़ाइन से मिला था। यह मेटाडेटा पढ़कर शुरू होता है,
00:14:17जो मूल रूप से डिज़ाइन के बारे में सारांश जानकारी है, और फिर यह प्रोजेक्ट फ़ाइलों को सूचीबद्ध करता है। यह डिज़ाइन पढ़ता है
00:14:22पहले सिस्टम, क्योंकि यहीं पर डिज़ाइन परिभाषित किया गया है, और फिर यह सभी तत्वों को एक-एक करके पढ़ता है
00:14:27एक। एक बार जब इसके पास पूरा डिज़ाइन हो जाता है, तो यह आपके प्रोजेक्ट में इसे बनाता है, सभी एनिमेशन के साथ जो में हैं
00:14:32Claude डिज़ाइन। लेकिन हमें यह सुनिश्चित करने के लिए इस रूपांतरण की दो बार जाँच करनी पड़ी कि यह सही किया गया था। नेत्रहीन,
00:14:36सब कुछ अच्छा लग रहा था, लेकिन जब Claude डिज़ाइन से कच्चा कोड होता है तब भी आंतरिक समस्याएँ हो सकती हैं
00:14:41एक असली ऐप में बदल गया। इसलिए हमने इसके गहरे, गहन समीक्षा के लिए कहा, और इसने design.md की जाँच करना शुरू कर दिया
00:14:46इसके खिलाफ जो वास्तव में यह देखने के लिए बनाया गया था कि क्या दोनों मेल खाते हैं। और इस समीक्षा ने कई मुद्दों को पकड़ा
00:14:51उत्तरदायित्व समस्याओं की तरह, जिसका अर्थ है कि ऐप विभिन्न स्क्रीन आकारों पर सही नहीं लग रहा था,
00:14:57जैसे मोबाइल या टैबलेट। Claude डिज़ाइन क्या बनाता है इस समस्या के लिए जाता है, क्योंकि यह
00:15:02अभी भी एक प्रारंभिक संस्करण है, इसलिए जो भी यह डिज़ाइन करता है वह उस सटीक चीज़ के लिए सबसे अच्छा है जिसके लिए यह बनाया गया था। एक डिज़ाइन
00:15:08एक वेबसाइट के लिए बनाया गया वहाँ बहुत अच्छा लगेगा, लेकिन हमेशा अन्य स्क्रीन आकारों पर नहीं, इसलिए हमने सुधार चलाया,
00:15:12और उसके बाद ऐप का दृश्य हिस्सा काम कर रहा था और उत्तरदायी था। अब वास्तव में इस समाप्त करने के लिए
00:15:17ऐप और इसे काम करते हैं, हमें इसे डेटाबेस नामक किसी चीज़ से कनेक्ट करने की आवश्यकता थी। तो समस्या सही है
00:15:22अब यह है कि भले ही ऐप पूरी तरह से कार्यात्मक है, और अगर हम बटन पर क्लिक करते हैं, तो यह काम करेगा और जोड़ेगा
00:15:28एक नई परियोजना पर विवरण। लेकिन अगर हम ऐप को फिर से खोलते हैं, तो वह सारी प्रगति जो हमने ऐप में की है
00:15:33चले जाएंगे। यही कारण है कि हमें एक डेटाबेस की आवश्यकता है ताकि वह सारा डेटा ऐप के अंदर संग्रहीत हो और लोग वास्तव में इसका उपयोग कर सकें।
00:15:39तो इसके लिए हमने Supabase का इस्तेमाल किया। यह वहाँ के सबसे लोकप्रिय बैकएंड प्रदाताओं में से एक है,
00:15:43और उपयोगकर्ताओं और आपके सभी डेटा को प्रबंधित करने के सर्वोत्तम तरीकों में से एक। अब Supabase हमारे लिए नया नहीं है। हम इसका उपयोग करते हैं
00:15:48लगभग हर ऐप में हम निर्माण करते हैं, चाहे हम किसके लिए निर्माण कर रहे हों, और यहाँ तक कि हमारे कई आंतरिक टूल भी
00:15:53इस पर अपना पूरा सेटअप चलाएं। ऐसा इसलिए है क्योंकि यह हमारे हाथों से बहुत काम लेता है जो हम
00:15:58अन्यथा करना होगा। यह सबसे अधिक उपयोग किए जाने वाले डेटाबेस में से एक है, सिर्फ इस वजह से कि यह कितना आसान है
00:16:04Claude Code जैसे AI एजेंटों के साथ जुड़ने के लिए। Supabase में एक एजेंट कौशल भी है, जो रखता है
00:16:08निर्देश, स्क्रिप्ट और संसाधन एजेंट अधिक मज़बूती से Supabase के साथ काम करने के लिए उपयोग कर सकते हैं। उस रास्ते,
00:16:13यह वह सब कुछ जानता है जिसकी उसे Supabase के टूल का अधिकतम लाभ उठाने की आवश्यकता है। इसे स्थापित करने के लिए, आप बस कॉपी करें
00:16:18इंस्टॉल कमांड और इसे एजेंट को दें, और उस बंडल के अंदर दो कौशल हैं। एक है
00:16:22Supabase कौशल, जो मूल रूप से इसका उपयोग करने के तरीके पर एक मार्गदर्शिका है, और दूसरा सर्वोत्तम प्रथाओं का कौशल है,
00:16:27जो आपके ऐप के प्रदर्शन को अनुकूलित करने के सर्वोत्तम तरीकों को रखता है। एक बार स्थापना हो जाने के बाद,
00:16:32आप अपने प्रोजेक्ट में जोड़े गए दोनों नए कौशल देखेंगे। Supabase कौशल तब ट्रिगर होता है जब कोई होता है
00:16:36डेटाबेस या लॉगिन कार्य, और सर्वोत्तम अभ्यास कौशल तब शुरू होता है जब आप चाहते हैं कि Claude Code आपका बनाए
00:16:41आपके संकेत में “optimize performance” शब्दों का उल्लेख करके ऐप तेज़ हो जाता है। वह सब है
00:16:46सभी प्रकार की समस्याओं के लिए संदर्भों की एक विशाल लाइब्रेरी द्वारा समर्थित। एक बार ये कौशल स्थापित हो जाने के बाद,
00:16:51आप बैकएंड बनाने और मौजूदा डिज़ाइन को इससे कनेक्ट करने के लिए Claude Code को एक संकेत दे सकते हैं,
00:16:56ताकि पूरा ऐप असल में काम करे। अब, क्योंकि हम एजेंट को इस बात की संरचना पर काम नहीं करना चाहते थे कि ऐप का डेटा कैसे व्यवस्थित किया जाता है,
00:17:01हमने इसे पहले ही अपने आप से प्री-मेड कर लिया था और इसे प्रोजेक्ट के मुख्य फ़ोल्डर में जोड़ लिया था।
00:17:05चूंकि कौशल केवल निर्देशों का एक बंडल है, इसलिए यह Supabase के सर्वर पर आपके प्रोजेक्ट तक नहीं पहुँच सकता है और वहाँ परिवर्तन कर सकता है।
00:17:10यह एजेंट को क्या करना है यह बताने वाला केवल पाठ है, इसलिए यह किसी भी ऐसे उपकरण के साथ नहीं आता है जो इसे एजेंट के बाहर की चीजों पर काम करने देता है।
00:17:15यही कारण है कि Supabase कौशल आपको या तो उनके CLI को कनेक्ट करने के लिए कहता है, जो कि वह टूल है जिसे आप टर्मिनल से चलाते हैं,
00:17:20या MCP. दोनों में से कोई भी एजेंट को सीधे आपके Supabase प्रोजेक्ट पर काम करने के लिए उपकरण देता है,
00:17:25ताकि आप कुछ भी मैन्युअल रूप से न कर रहे हों। हम MCP के साथ गए क्योंकि इसे सेट अप करना आसान है,
00:17:30और हमें उन कुंजियों से नहीं निपटना होगा जो CLI को आपके खाते में लॉग इन करने देती हैं। इसे कनेक्ट करने के लिए,
00:17:34आप उनकी आधिकारिक साइट पर जाते हैं, जिस एजेंट का आप उपयोग कर रहे हैं उसके लिए इंस्टॉल कमांड कॉपी करें,
00:17:39और इसे उस टर्मिनल में चलाएं जो आपके प्रोजेक्ट फ़ोल्डर में खुला है। उसके बाद, आप /mcp कमांड चलाते हैं
00:17:44ClaudeCode के अंदर और आप इसे जुड़ा हुआ देखेंगे, लेकिन आप इसे तुरंत उपयोग करने में सक्षम नहीं होंगे क्योंकि यह
00:17:49लॉग इन नहीं है। इसलिए एक बार जब आप प्रमाणित का चयन करते हैं, तो आपको ब्राउज़र पर रूट किया जाएगा जहाँ आप लॉग इन करते हैं,
00:17:53और फिर MCP जुड़ जाएगा। एक बार जब MCP कनेक्ट हो जाता है, तो ClaudeCode ने कौशल को लोड कर दिया
00:17:59और ऐप पर काम करने लग गए। इसने बहुत सारे बदलाव किए और सबसे अच्छा संस्करण बनाने के लिए उन डेटाबेस अनुरोधों के खिलाफ परीक्षण चलाए।
00:18:04इसने यह भी सुनिश्चित किया कि यह उन सभी क्षेत्रों को बंद कर दे जो हर उपयोगकर्ता के लिए सुलभ नहीं होने चाहिए,
00:18:08कौशल में उन दिशानिर्देशों के लिए सभी धन्यवाद। और बस की तरह,
00:18:14Superbase आपके लिए पूरे बैकएंड को संभालता है, कौशल के माध्यम से। इसलिए अब पूरा ऐप बन गया है
00:18:18और वास्तव में काम कर रहा है। बस एक कदम बचा है, जो परिनियोजन है, मूल रूप से इसे ऑनलाइन रखना
00:18:23ताकि वहाँ कोई भी इसका उपयोग कर सके। लेकिन हम यहाँ उसमें नहीं उतरने जा रहे हैं, इसलिए आने वाले वीडियो पर नज़र रखें
00:18:28जहाँ हम विस्तार से उस पर चलते हैं। अब जो कौशल हमने दिया है वह वास्तव में एक बड़े डिज़ाइन सिस्टम का हिस्सा है जिसे हम वास्तव में अपने प्रोजेक्ट्स में आंतरिक रूप से उपयोग करते हैं।
Community Posts
No posts yet. Be the first to write about this video!
Write about this video