Transcript
00:00:00हर किसी की पहुँच एक जैसे AI मॉडल तक है, लेकिन किसी ने भी उनके इर्द-गिर्द प्रक्रियाएं नहीं बनाई हैं।
00:00:05आपने शायद यह वाक्यांश सुना होगा कि अब मॉडल मायने नहीं रखता, बल्कि हार्नेस मायने रखता है।
00:00:09हार्नेस मूल रूप से वे प्रक्रियाएं हैं जिन्हें आप अपने AI मॉडल के पालन के लिए बनाते हैं।
00:00:13लेकिन एक बात जो आपको समझनी होगी, वह यह है।
00:00:14मॉडल लगातार विकसित हो रहे हैं, इसलिए तीन महीने पहले जो हार्नेस आपने बनाया था, वह पहले ही पुराना हो चुका है।
00:00:19इस वीडियो के रिकॉर्ड होने के समय, सबसे बेहतरीन मॉडल एंथ्रोपिक का फ्लैगशिप मॉडल Fable 5 है,
00:00:24लेकिन चिंता न करें, हम आपको अलग-अलग तरीके बताएंगे जिससे यह सुनिश्चित हो सके कि आपका हार्नेस
00:00:27किसी भी मॉडल के लिए विकसित होता रहे।
00:00:30एंथ्रोपिक के पास वास्तव में फ्रंट-एंड डिज़ाइन के लिए एक आधिकारिक कौशल (skill) है,
00:00:34और इसके होने का कारण एक ऐसी समस्या है जिसका नाम उन्होंने खुद रखा है।
00:00:37होता यह है कि मॉडल उस डिज़ाइन के सबसे सुरक्षित और सबसे औसत संस्करण की ओर झुक जाता है
00:00:42जिसके लिए आपने कहा था।
00:00:43वे इसे 'कन्वर्जिंग ऑन द डिस्ट्रिब्यूशन' कहते हैं, जिसका सीधा सा मतलब है कि यह वही चीज़ बनाता है
00:00:47जो उसने पहले हज़ारों बार देखी है।
00:00:49अब नवीनतम मॉडलों के विज्ञापित किए गए शक्तिशाली होने के कारण, आपको लग सकता है कि यह समस्या नहीं है,
00:00:53लेकिन मैंने ऐसा नहीं पाया है।
00:00:56उदाहरण के लिए, इस प्रॉम्प्ट में, हमने बस एक प्लांटेशन वेबसाइट के लिए लैंडिंग पेज बनाने को कहा।
00:01:01इसे सही दिशा में ले जाने के लिए, हमने इसे जितना संभव हो उतना रचनात्मक होने के लिए कहा और
00:01:06कंटेंट पर बहुत ज़्यादा ध्यान केंद्रित न करने को कहा।
00:01:07हमने इसे स्पष्ट रूप से कोई कौशल (skill) लोड न करने के लिए भी कहा क्योंकि हमारे सिस्टम में कई कौशल उपलब्ध हैं
00:01:13और हम यह सुनिश्चित करना चाहते थे कि यह उनका फायदा न उठाए।
00:01:16यह वह है जो अंत में बनकर तैयार हुआ।
00:01:18अब यह कोई खराब डिज़ाइन नहीं है, लेकिन यह निश्चित रूप से सबसे बेहतरीन भी नहीं है।
00:01:22उदाहरण के लिए, इसमें कुछ कॉन्ट्रास्ट की समस्याएँ हैं और कुछ इमेज ठीक से लोड नहीं हो रही हैं।
00:01:26लेकिन जब हमने यहाँ कौशल का इस्तेमाल किया, तो चीज़ें काफी बदल गईं।
00:01:29अब इस कौशल में कुछ भी विशेष नहीं है।
00:01:31इसमें कोई संदर्भ या कोई बाहरी संसाधन नहीं है।
00:01:34यह सचमुच सिर्फ एक प्रॉम्प्ट है।
00:01:35अकेले उसका इस्तेमाल करके, इसने बहुत बेहतर डिज़ाइन तैयार किया।
00:01:37डिज़ाइन काफी अधिक परिष्कृत और सौंदर्यपूर्ण रूप से मनभावन था।
00:01:41इसमें सूक्ष्म एनिमेशन और विस्तार पर कहीं अधिक ध्यान दिया गया था।
00:01:45कुल मिलाकर, परिणाम उस चीज़ से काफी बेहतर था जो मॉडल सामान्य रूप से खुद तैयार करता।
00:01:49हर नए मॉडल के साथ, ये AI कंपनियाँ मॉडल API का उपयोग करने वाले लोगों के लिए नई प्रॉम्प्टिंग गाइड जारी करती हैं।
00:01:55और Fable 5 की गाइड का उपयोग करके, हमने डिज़ाइन स्किल को संशोधित किया।
00:01:58आप बस सामान्य प्रयोजन डिज़ाइन प्रॉम्प्ट और प्रॉम्प्टिंग गाइड को कॉपी कर सकते हैं।
00:02:02उन दोनों को क्लाउड (Claude) में पेस्ट करें, उसे बताएं कि आपके पास मॉडल के लिए प्रॉम्प्टिंग गाइड है
00:02:06और उसे उसके आधार पर एक अद्यतन संस्करण बनाने के लिए कहें।
00:02:09यह प्रॉम्प्ट का विश्लेषण करता है और आपको नए मॉडल के लिए एक पुनर्लिखित संस्करण देता है।
00:02:12और आप वास्तव में देख सकते हैं कि नई साइट कहीं बेहतर दिखती है।
00:02:15इसकी संरचना बहुत बेहतर है और इसने सभी अलग-अलग तत्वों को कार्ड में बदल दिया है।
00:02:19हमें लगता है कि यह क्लॉड द्वारा सामान्य रूप से पेश किए जाने वाले डिज़ाइन से कहीं अधिक रचनात्मक दिखता है क्योंकि छोटे विवरणों की वजह से
00:02:24जैसे कि कैसे CTA सेक्शन को उसके ऊपर स्टैम्प लगे पोस्टकार्ड पत्र में बदल दिया गया।
00:02:29ये छोटे-छोटे विवरण ही हैं जो इसे इतना अधिक रचनात्मक बनाते हैं।
00:02:32अब, एक और कारण है कि ये कंपनियाँ प्रॉम्प्टिंग गाइड जारी करती हैं।
00:02:35अक्सर, मॉडलों में व्यवहार संबंधी समस्याएँ होती हैं और गाइड आपको बताती हैं कि उन्हें कैसे ठीक करना है।
00:02:39जब Opus 4.8 जारी हुआ था, तो एंथ्रोपिक ने बताया कि मॉडल एक विशेष डिज़ाइन शैली की ओर झुक जाता था।
00:02:45उनका समाधान यह था कि पहले मॉडल से कई डिज़ाइन विकल्प मांगें, फिर आपको चुनने दें कि किस दिशा में आगे बढ़ना है।
00:02:51लेकिन जब Fable 5 आया, तो इस गाइड में इस समस्या का उल्लेख नहीं था।
00:02:56और हमने जो देखा, मॉडल अभी भी उसी पुरानी शैली पर वापस चला जाता है।
00:02:59ऐसा हर बार नहीं होता है।
00:03:01लेकिन हमारे परीक्षण से, लगभग तीन में से दो निर्मित साइटें अभी भी समान स्टाइल के साथ समाप्त होती हैं।
00:03:07तो इसे कभी पूरी तरह से ठीक नहीं किया गया था।
00:03:08इसलिए पिछले मॉडलों के दस्तावेज़ों को देखना भी सार्थक है।
00:03:11आपको अक्सर उपयोगी चीज़ें मिलेंगी जो नवीनतम गाइड में शामिल नहीं हो सकीं।
00:03:15इसलिए Opus 4.8 के लिए प्रॉम्प्ट गाइड का उपयोग करके, हम एक अलग डिज़ाइन कौशल पर चले गए
00:03:20जिसने वास्तव में हमसे पूछा कि हम किस तरह की डिज़ाइन दिशा चाहते हैं।
00:03:23उसके आधार पर, इसने यह डिज़ाइन तैयार किया।
00:03:25यह भी अच्छा लग रहा है।
00:03:26लेकिन ईमानदारी से, यहाँ design.md फाइलों का उपयोग करना एक बेहतर दृष्टिकोण है।
00:03:30इन फाइलों में ब्रांड भाषा होती है जिसे आप बस अपने पेज पर डाल देते हैं।
00:03:33Get design.md एक बहुत अच्छा स्रोत है जहाँ आप कई ब्रांडों की फाइलें प्राप्त कर सकते हैं।
00:03:38लेकिन तब भी, इनका उपयोग तब करें जब मॉडल ने पहले ही लैंडिंग पेज बना लिया हो।
00:03:42और यह विशेष रूप से लैंडिंग पेजों के लिए है क्योंकि यदि आप वास्तव में design.md फाइलों के अंदर देखते हैं,
00:03:47तो वे सब कुछ लॉक कर देते हैं, यहाँ तक कि फ़ॉन्ट भी।
00:03:50और जैसा कि आपने उदाहरणों में देखा, फ़ॉन्ट उस चीज़ का एक बड़ा हिस्सा है जिसने उन साइटों को इतना अधिक रचनात्मक बनाया।
00:03:55जब एनिमेशन जोड़ने की बात आती है तो दो स्तर होते हैं।
00:03:58मार्केटिंग UI और कार्यात्मक (functional) UI।
00:04:00डैशबोर्ड जैसे कार्यात्मक UI पर डिज़ाइन कौशल का उपयोग करना इसे सुंदर बना देगा,
00:04:05लेकिन लोग वास्तव में इसका उपयोग नहीं कर पाएंगे।
00:04:07इसलिए एनिमेशन जोड़ने के लिए, हम दो चीजों का उपयोग करते हैं।
00:04:10मार्केटिंग पेजों के लिए, यह कौशल पहले ही मॉडल को CSS-आधारित एनिमेशन जोड़ने के लिए कहता है,
00:04:15लेकिन GSAP एनिमेशन कहीं बेहतर होते हैं।
00:04:17यहीं पर प्रॉम्प्टिंग गाइड का एक और कदम काम आता है।
00:04:20प्रयास (effort) ही मुख्य लीवर है जो अब मॉडल को नियंत्रित करता है।
00:04:22सरल कार्यों के लिए, आप इसे कम से मध्यम तक रख सकते हैं,
00:04:25लेकिन एनिमेशन जोड़ने जैसे कार्यों के लिए, X-High का उपयोग करना एक बहुत बेहतर विकल्प है,
00:04:30और आपको कम रिट्राय (retries) की आवश्यकता होगी।
00:04:32हमारे मार्केटिंग UI कौशल में, एक नियम है जो निर्दिष्ट करता है कि GSAP का उपयोग कब किया जाना चाहिए।
00:04:36जब भी वह शर्त पूरी होती है, तो यह अपने आप GSAP कौशल को भी लोड कर लेता है।
00:04:41हमने वास्तव में उस सेटअप का उपयोग यहाँ दिखाए गए उसी लैंडिंग पेज पर किया था।
00:04:44हमारी ओर से उस सीमित योजना के साथ भी, इसने आश्चर्यजनक रूप से अच्छा काम किया।
00:04:48इसने उस स्थान को एकदम सही तरीके से पकड़ा जहाँ स्क्रीन एनिमेशन पोस्टकार्ड के अंदर चलता है,
00:04:52और मौसम एक के बाद एक बदल जाते हैं।
00:04:55यह एक अच्छा उदाहरण है कि कैसे ये विशिष्ट कौशल कार्यान्वयन के बहुत सारे विवरणों को स्वचालित रूप से संभाल सकते हैं।
00:04:59हम इस कौशल प्रणाली को बहुत सारी कोशिशों और गलतियों के माध्यम से प्राप्त कर पाए हैं।
00:05:00हम इस कौशल प्रणाली को बहुत सारी कोशिशों और गलतियों के माध्यम से प्राप्त कर पाए हैं।
00:05:03और मेरा मतलब है कि बार-बार 5 घंटे की उपयोग सीमा तक पहुँचना।
00:05:07यदि आप उन सबको छोड़ना चाहते हैं, तो आप इसे हमारे Community AI Labs Pro से प्राप्त कर सकते हैं।
00:05:11लिंक डिस्क्रिप्शन में दिया गया है।
00:05:12तो, जैसा कि हमने पहले ही उल्लेख किया है, दो तरह के UI होते हैं।
00:05:15कार्यात्मक (functional) UI के पीछे का पूरा कार्यप्रवाह मार्केटिंग UI से बिल्कुल अलग होता है।
00:05:20उदाहरण के लिए, योजना बनाना पहला कदम है, और यह बहुत मायने रखता है।
00:05:23हम इस वीडियो में इसकी गहराई में नहीं जाएंगे, लेकिन एक बार जब आपकी योजना तैयार हो जाए,
00:05:27तो आप इसे क्लाउड (Claude) को दे सकते हैं।
00:05:27उसके बाद, ऐप बनाने के बजाय, आपको इसे HTML का उपयोग करके मॉकअप बनाने के लिए कहना चाहिए।
00:05:33हमारी प्रक्रिया design.md के साथ शुरू होती है।
00:05:36यदि आपने पहले ही तय कर लिया है कि आप किस design.md का उपयोग करना चाहते हैं, तो यह बहुत अच्छा है।
00:05:40यदि आपके पास कोई नहीं है, तो भी कोई बात नहीं।
00:05:42आप इसके बिना आगे बढ़ सकते हैं।
00:05:43उदाहरण के लिए, यदि आप हमारे कस्टम-निर्मित समुदाय को देखते हैं,
00:05:45तो आप तुरंत देखेंगे कि बाहर का डिज़ाइन और अंदर का डिज़ाइन पूरी तरह से
00:05:50अलग है।
00:05:51हमारे मामले में, सब कुछ पहले HTML मॉकअप का उपयोग करके नियोजित किया गया था।
00:05:54हमने एक design.md बनाकर शुरुआत की, जो आंशिक रूप से नोशन (Notion) से प्रेरित था।
00:05:58उस डिज़ाइन प्रणाली का उपयोग करके, हमने वास्तविक एप्लिकेशन लिखने से पहले सभी स्क्रीन को मॉकअप के रूप में बनाया।
00:06:04एक बार जब हमने उन मॉकअप को अंतिम रूप दिया और सत्यापित किया, तो हमने उन्हें इस पूरी तरह कार्यात्मक एप्लिकेशन में परिवर्तित कर दिया।
00:06:09अब, कार्यात्मक UI डिज़ाइन करने के सबसे महत्वपूर्ण हिस्से पर आगे बढ़ने से पहले, चलिए हमारे
00:06:13प्रायोजक से एक बात सुनते हैं।
00:06:14क्लाउड कोड (Claude Code) का उपयोग करने वाले बहुत से लोगों ने हाल ही में देखा कि उनकी लागत आसमान छू रही है।
00:06:18ईमानदारी से, इसीलिए किमी (Kimi) ने मेरा ध्यान खींचा।
00:06:20उन्होंने एक ओपन-सोर्स मॉडल बनाया है जो कोडिंग में वास्तव में बहुत अच्छा है और Opus की कीमत का लगभग 1/8 है।
00:06:26उनका नवीनतम मॉडल, Kimi K2.6, अभी Sweebench Pro पर नंबर एक पर पहुँचा है,
00:06:30जो मूल रूप से अभी सबसे कठिन वास्तविक दुनिया का कोडिंग बेंचमार्क है।
00:06:33उन्होंने सिर्फ मॉडल ही जारी नहीं किया, उन्होंने K2.6 के ऊपर ऐसे उत्पाद बनाए जो वास्तव में उपयोगी हैं।
00:06:38आप अच्छे फ्रंट-एंड डिज़ाइन के साथ प्रोडक्शन-रेडी वेबसाइटें बना सकते हैं,
00:06:41एक ही प्रॉम्प्ट से पूरे स्लाइड डेक बना सकते हैं, और यहाँ तक कि डेटाबेस और ऑथेंटिकेशन को भी सीधे संभाल सकते हैं।
00:06:47लेकिन सबसे अजीब फीचर शायद एजेंट स्वार्म (Agent Swarm) है।
00:06:49आप एक ही कार्य पर 300 AI एजेंटों को समानांतर में स्पिन कर सकते हैं।
00:06:53एक एजेंट के धीरे-धीरे सब कुछ संभालने के बजाय, आपको पूरी AI टीम एक साथ काम करते हुए मिलती है।
00:06:58और यह सब एक ओपन-सोर्स मॉडल पर चलता है जिसकी लागत उन क्लोज्ड-सोर्स विकल्पों से कहीं कम है
00:07:03जिनके लिए लोग भुगतान कर रहे हैं।
00:07:05तो, अगर आप रोज़ाना Claude Code या Cursor का इस्तेमाल कर रहे हैं और हाल ही में आपका API बिल आपको परेशान करने लगा है
00:07:09तो किमी (Kimi) आज़माने लायक है।
00:07:11यदि आप हमारे लिंक के माध्यम से साइन अप करते हैं, तो आपको अपनी पहली खरीद पर 10% अतिरिक्त कोटा बोनस भी मिलेगा
00:07:1630 जून से पहले। डिस्क्रिप्शन में दिए गए लिंक पर क्लिक करें और बनाना शुरू करें।
00:07:19अब, कार्यात्मक UI डिज़ाइन करने का एक और बहुत महत्वपूर्ण हिस्सा है, जो कि प्रयोग (experimentation) है।
00:07:24समय के साथ, हमने इस समस्या को हल करने के लिए कई अलग-अलग दृष्टिकोणों का प्रयास किया है।
00:07:28शुरू में, हमने समानांतर में काम करने वाले कई एजेंटों के साथ टास्क लिस्ट का उपयोग किया,
00:07:32जहाँ प्रत्येक एजेंट UI का एक अलग रूपांतर तैयार करेगा।
00:07:35लक्ष्य कई डिज़ाइनों के साथ प्रयोग करना और यह पता लगाना था कि वास्तव में कौन सा दृष्टिकोण सबसे अच्छा काम करता है।
00:07:40बाद में, हमने इस कार्यप्रवाह के लिए उप-एजेंटों (sub-agents) का उपयोग करना शुरू किया, लेकिन अब यह मायने नहीं रखता।
00:07:45दस लाख टोकन संदर्भ के साथ, आप इसे प्राथमिक एजेंट के साथ भी कर सकते हैं।
00:07:48हमने आंतरिक रूप से गैलरी व्यूअर (Gallery Viewer) नाम की एक चीज़ भी बनाई है।
00:07:51गैलरी व्यूअर का उद्देश्य सरल है।
00:07:53जब आप कई HTML मॉकअप तैयार करते हैं, तो उन्हें दर्जनों फाइलों के बीच खो नहीं जाना चाहिए।
00:07:58इसके बजाय, वे स्वचालित रूप से एक ही व्यू में एक साथ खुल जाते हैं, जिससे उनकी तुलना करना आसान हो जाता है
00:08:03बगल-बगल में। उदाहरण के लिए, जब हम सामुदायिक प्लेटफ़ॉर्म बना रहे थे, तो हमें शुरू में नहीं पता था
00:08:08कि सामुदायिक इंटरेक्शन स्पेस कैसा दिखना चाहिए। हम जानते थे कि हम एक सामुदायिक अनुभव चाहते थे,
00:08:12लेकिन उपयोगकर्ता एक-दूसरे के साथ कई अलग-अलग तरीकों से बातचीत कर सकते थे। इसलिए किसी एक डिज़ाइन के लिए
00:08:17प्रतिबद्ध होने के बजाय, हमने HTML मॉकअप का उपयोग करके प्रयोग किया। हमने एजेंट को कई
00:08:22सामुदायिक चैनल UI को HTML मॉकअप के रूप में बनाने का कार्य दिया, ताकि हम उनकी तुलना कर सकें। फिर एजेंट स्वचालित रूप से
00:08:28एजेंट तब स्वचालित रूप से कई संस्करण बनाएगा और उन्हें गैलरी व्यूअर में खोल देगा।
00:08:33विविधता की तुलना कर सकते थे और तय कर सकते थे कि कौन सी दिशा सबसे मजबूत है। एक चीज़ जो आप इस उदाहरण में देखेंगे
00:08:37वह यह है कि डिज़ाइन सभी दृश्य रूप से सुसंगत नहीं दिखते। आदर्श रूप से, उन्हें एक ही डिज़ाइन
00:08:42भाषा साझा करनी चाहिए जबकि अलग-अलग UX पैटर्न की खोज करनी चाहिए। इसका कारण यह है कि यहाँ
00:08:46कोई design.md प्रदान नहीं किया गया था। जब एक design.md मौजूद होता है, तो मॉडल रंगों, रिक्ति, टाइपोग्राफी, घटकों और समग्र स्टाइलिंग के लिए
00:08:53इसे सत्य के स्रोत (source of truth) के रूप में उपयोग करता है। इसलिए सभी उत्पन्न मॉकअप बने रहते हैं
00:08:59दृश्य रूप से सुसंगत जबकि अभी भी अलग-अलग UX दृष्टिकोणों की खोज कर रहे हैं। कुछ छोटे विवरण भी हैं जो
00:09:04बड़ा अंतर ला सकते हैं, जैसे कि कार्यात्मक UI में एनिमेशन जोड़ना। हमने अपने स्वयं के कौशल में एनिमेशन
00:09:10दिशानिर्देशों का एक सेट प्रलेखित किया है और यदि आप चाहें तो आप उन्हें कॉपी करने के लिए स्वागत है। वे हमारे लिए अब तक
00:09:15काफी अच्छा काम कर रहे हैं और हम लगातार उन्हें परिष्कृत कर रहे हैं। हालांकि, मैं एक चीज़ की पुरज़ोर सलाह दूंगा, वह है
00:09:20अपने एप्लिकेशन के कार्यात्मक भाग में एनिमेशन को ज़्यादा न करना। अत्यधिक एनिमेशन पहले प्रभावशाली
00:09:25दिख सकते हैं, लेकिन वे अक्सर उत्पादकता-केंद्रित इंटरफेस को अधिक विचलित करने वाला बनाते हैं। एक बार जब आप
00:09:29डिज़ाइन को अंतिम रूप दे देते हैं, तो अगला कदम ShadCN कौशल का उपयोग करना है। मैंने पहले ही कार्यात्मक UI
00:09:35कौशल को ShadCN कौशल से जोड़ दिया है, इसलिए यह अधिकांश कार्यप्रवाह को स्वचालित रूप से संभालता है। पहले, हमारे पास बहुत अधिक
00:09:40विस्तृत कार्यप्रवाह थे। हम विशेष रूप से ShadCN के लिए एक विस्तृत कार्यान्वयन योजना तैयार करेंगे
00:09:45MCP और हम पूरे इंटरफ़ेस को बनाने के लिए उस योजना का उपयोग करेंगे। हालाँकि वह दृष्टिकोण काम कर गया, लेकिन इसने
00:09:50काफी जटिलता भी जोड़ दी। आज, कार्यप्रवाह काफी सरल है। आपको बस अंतिम
00:09:55HTML मॉकअप और ShadCN कौशल की आवश्यकता है। यह इतना अच्छा काम करने का कारण यह है कि ShadCN कौशल में पहले से ही
00:10:01ShadCN के रचनाकारों द्वारा स्वयं पैक किया गया बहुत सारा संदर्भ और कार्यान्वयन ज्ञान होता है।
00:10:06इस वजह से, यह एक अंतिम HTML मॉकअप ले सकता है और वास्तविक ShadCN घटकों का उपयोग करके इसे लगभग एक-से-एक पुन: उत्पन्न कर सकता है।
00:10:11तो इस स्तर पर, आपको जटिल कार्यान्वयन योजनाओं या रूपांतरण कार्यप्रवाह बनाने के बारे में चिंता करने की आवश्यकता नहीं है।
00:10:16यदि आप इन डिज़ाइन प्रक्रियाओं को पसंद करते हैं, तो चैनल को सब्सक्राइब करें
00:10:21और हाइप बटन पर भी क्लिक करें। हम ऐसी सामग्री पोस्ट करते हैं जो आपको AI के साथ विभिन्न व्यवसायों में
00:10:26विभिन्न प्रक्रियाओं को अनुकूलित करने के नए तरीके सीखने में मदद करती है। यहाँ आपका समर्थन हमारे लिए बहुत मायने रखेगा।
00:10:31गाइड आपसे इन मॉडलों के लिए स्व-सत्यापन (self-verification) को स्पष्ट बनाने के लिए भी कहती है। आप Claude.md में एक प्रॉम्प्ट डाल सकते हैं
00:10:36जो एजेंट को अपने आउटपुट को सत्यापित करने के लिए कहता है। अब, मुख्य एजेंट का उपयोग करने के बजाय,
00:10:41आपको एक उप-एजेंट (sub-agent) का उपयोग करना चाहिए जो आउटपुट को सत्यापित कर सके। और इसे सत्यापित करने के लिए, आपको किसी ऐसी चीज़ की आवश्यकता है
00:10:46जिसकी आप तुलना कर सकें। उसके लिए, हमेशा उप-एजेंट को अपने design.md की ओर इंगित करें।
00:10:50गाइड में उल्लेख की गई एक और बात यह है कि मॉडल बेहतर प्रदर्शन करते हैं जब उनके पास अपने
00:10:55कार्य के बारे में संदर्भ होता है। डिज़ाइन के लिए, इसका मतलब है कि उत्पाद वास्तव में क्या है, इसके बारे में ज्ञान होना।
00:10:59अब, बहुत से फ्रेमवर्क ने एक अलग product.md सेट किया है, लेकिन हमारी राय में,
00:11:03जब आप एक Claude.md सेट करते हैं, तो इसमें मॉडल के लिए यह समझने के लिए पर्याप्त संदर्भ होता है कि आपका
00:11:09प्रोजेक्ट किस बारे में है। तो कार्यात्मक UI कौशल क्या करता है, जब भी उसे कोई नया कार्य मिलता है,
00:11:13यह मॉडल को Claude.md पढ़ने के लिए भी कहता है। इसके अलावा, इसमें एक mox फ़ोल्डर भी होता है
00:11:18जिसमें सभी HTML फाइलें होती हैं ताकि आप जब भी अपने ऐप में नए तत्व जोड़ रहे हों तो आप उन्हें संदर्भित कर सकें।
00:11:24इसके ऊपर, यह बहुत अच्छा होगा यदि आपके पास design.md भी हो। ये वे फाइलें हैं
00:11:28जिन्हें आपको अपने प्रोजेक्ट में रखने की आवश्यकता है। आजकल, बहुत सारे SaaS ऐप्स आसानी से क्लोन किए जा सकते हैं।
00:11:32हम खुद टीम प्रबंधन के लिए कस्टम-निर्मित सॉफ़्टवेयर का उपयोग करते हैं। हमने अपना संस्करण बनाया है क्योंकि
00:11:37हमें बहुत सारे लोगों को होस्ट करने की आवश्यकता नहीं है। उस स्थिति में, आपको वास्तव में इसे खरोंच से बनाने की आवश्यकता नहीं है।
00:11:42आपको बस यह सुनिश्चित करना है कि आप उनके UI को उतनी पूर्णता से क्लोन कर रहे हैं जितना आप कर सकते हैं। नए मॉडलों के साथ,
00:11:46इमेजों को समझने की उनकी क्षमता बहुत बेहतर हो गई है, इसलिए यहाँ कार्यप्रवाह बहुत आसान हो जाता है।
00:11:51क्लोनिंग में, दो अलग-अलग मोड होते हैं। मोड B मार्केटिंग UI के लिए है। इसके लिए,
00:11:56सिंगल-फाइल CLI नामक एक बहुत उपयोगी CLI टूल है। इसका उपयोग करके, आप एक पेज पर सब कुछ कैप्चर कर सकते हैं,
00:12:01जिसमें HTML, CSS और उस वेबसाइट पर उपयोग की गई इमेज भी शामिल हैं। यदि साइट में कई पेज हैं,
00:12:07तो आप उसकी sitemap.xml फाइल को भी फेच कर सकते हैं, जो अनिवार्य रूप से वेबसाइट का एक नक्शा है। उस साइटमैप का उपयोग करके,
00:12:13मॉडल अन्य पेजों को भी खोज और फेच कर सकता है। समस्या तब शुरू होती है जब आप उन पेजों पर आते हैं जो
00:12:19ऑथेंटिकेशन के पीछे हैं। उदाहरण के लिए, यदि आप नोशन (Notion) के UI को क्लोन करना चाहते हैं, तो आप बस टूल को नोशन की वेबसाइट की ओर इंगित नहीं कर सकते।
00:12:23जब आप नोशन का URL प्रदान करते हैं, तो आपको केवल लैंडिंग पेज मिलेगा।
00:12:28आप जो वास्तव में चाहते हैं वह लॉगिन स्क्रीन के पीछे का एप्लिकेशन इंटरफ़ेस है। सौभाग्य से, मॉडल
00:12:34इमेजों से इंटरफेस को समझने में बहुत अच्छे हो गए हैं, इसलिए उन स्थितियों में, स्क्रीनशॉट
00:12:40सबसे अच्छा विकल्प हैं। आपको इंटरफ़ेस की विभिन्न स्थितियों को बहुत सावधानी से कैप्चर करना होगा। मान लीजिए आपके पास एक
00:12:45पेज खुला है, आप स्क्रीनशॉट चाहेंगे जो दिखाएं कि हॉवर पर क्या होता है और विभिन्न इंटरैक्शन लेआउट को कैसे प्रभावित करते हैं।
00:12:50चलिए एक और उदाहरण लेते हैं। मान लीजिए आप एक पेज खोलते हैं जहाँ दो पेज एक कॉलम में हैं। यदि आप केवल यह प्रदान करते हैं,
00:12:56तो मॉडल को यह पता नहीं चलेगा कि आप दो कॉलम बना सकते हैं। आपको अत्यंत संपूर्ण होने और मॉडल को आवश्यक सभी
00:13:01संदर्भ प्रदान करने की आवश्यकता है। एक बार जब आप स्क्रीनशॉट कैप्चर कर लेते हैं, तो इमेजों को सीधे प्रॉम्प्ट में पेस्ट न करें। इसके बजाय,
00:13:07उन्हें क्लाउड (Claude) में ड्रैग करें। यह सिस्टम को उन इमेज पथों तक पहुंच प्रदान करता है जिनका मोड A उपयोग कर सकता है। मोड A फिर
00:13:13उन सभी स्क्रीनशॉट को इकट्ठा करेगा, उन्हें क्लोन फ़ोल्डर के अंदर रखेगा और उन्हें संदर्भ सामग्री के रूप में उपयोग करेगा।
00:13:19वे स्क्रीनशॉट प्रभावी रूप से क्लोनिंग प्रक्रिया के लिए आधार बन जाते हैं। वहाँ से, आप इंटरफ़ेस का
00:13:25प्रारंभिक HTML संस्करण बना सकते हैं और फिर अंतिम एप्लिकेशन बनाने के लिए आगे बढ़ सकते हैं।
00:13:29यह हमें इस वीडियो के अंत तक लाता है। यदि आप चैनल का समर्थन करना चाहते हैं और हमें इस तरह के वीडियो
00:13:35बनाते रहने में मदद करना चाहते हैं, तो आप नीचे दिए गए सुपर थैंक्स बटन का उपयोग करके ऐसा कर सकते हैं। हमेशा की तरह, देखने के लिए
00:13:39धन्यवाद और मैं आपको अगले वीडियो में देखूँगा।
Community Posts
No posts yet. Be the first to write about this video!
Write about this video