00:00:00Claude code फ्रंट-एंड डिज़ाइन में बेकार है और यह आपकी गलती है,
00:00:04लेकिन यह एक ऐसी समस्या है जिसे हम एक सरल रोडमैप से हल कर सकते हैं।
00:00:07बस आपको यह पता होना चाहिए कि आप किस दिशा में जा रहे हैं।
00:00:09और इस वीडियो में,
00:00:10मैं Claude code फ्रंट-एंड डिज़ाइन के सात स्तरों को विस्तार से बताऊंगा
00:00:13और समझाऊंगा कि आप हर स्तर पर क्या उम्मीद कर सकते हैं,
00:00:16किन गलतियों से बचना है,
00:00:18और अगले स्तर पर जाने के लिए आपको क्या करना होगा।
00:00:21और अंत तक,
00:00:22आपके पास Claude code के साथ फ्रंट-एंड डिज़ाइन बनाने की एक सरल और दोहराने योग्य प्रक्रिया होगी
00:00:25जो कोई और साधारण या बोरिंग टेंपलेट नहीं होगी।
00:00:28अब आज के वीडियो के लिए हमारा केस स्टडी
00:00:30हमारा नकली SaaS वेब ऐप होगा जिसे Argus के नाम से जाना जाता है।
00:00:33Argus एक सोशल मीडिया इंटेलिजेंस एप्लिकेशन होने वाला है।
00:00:36तो बुनियादी तौर पर यह एक ऐसी जगह है जहाँ कंटेंट क्रिएटर्स या कोई भी
00:00:41जाकर अपने नीश (niche) में ट्रेंडिंग टॉपिक्स ढूँढ सकता है।
00:00:43और Argus के माध्यम से ही
00:00:48हम इस पूरी सात स्तरों वाली प्रक्रिया से गुजरेंगे।
00:00:49तो चलिए पहले स्तर से शुरू करते हैं।
00:00:52और दुख की बात है कि बहुत से लोग असल में यहीं फंसे हुए हैं।
00:00:53यह सिर्फ आप और एक प्रॉम्प्ट है।
00:00:55आप Claude code खोलेंगे और बस
00:00:57कुछ ऐसा कहेंगे जैसे, "हे,
00:00:59Argus के लिए एक लैंडिंग पेज बनाते हैं,
00:01:01जो मेरा सोशल मीडिया वेब ऐप है और कंटेंट क्रिएटर्स के लिए
00:01:02उनके नीश में ट्रेंडिंग टॉपिक्स खोजने और पहचानने के लिए एक इंटेलिजेंस ऐप के रूप में काम करता है।"
00:01:05अब, अगर मैं ऐसा करता हूँ और इसे प्लान मोड में डालता हूँ,
00:01:08तो हमें जो मिलेगा वह बहुत ही साधारण होगा।
00:01:09क्यों? क्योंकि हमने इसे कोई डिज़ाइन निर्देश नहीं दिया है।
00:01:12और हम एक तरह से Claude code पर निर्भर हैं कि वह खुद ही अंदाजा लगाए
00:01:15कि क्या अच्छा दिखता है।
00:01:18आपने अक्सर सुना होगा कि AI में कोई पसंद (taste) नहीं होती, सच है,
00:01:20लेकिन असल में ज़्यादातर लोगों में भी कोई पसंद नहीं होती।
00:01:22और इसी समस्या के कारण,
00:01:26वे इसे Claude code को समझा नहीं पाते, है ना?
00:01:28अगर आपको ही नहीं पता कि सही क्या है,
00:01:31तो Claude code इसे कैसे समझ पाएगा?
00:01:33तो इस सबसे बुनियादी स्तर पर हमें
00:01:35कुछ कौशल हासिल करने की ज़रूरत है।
00:01:37और वे तीन कौशल हैं: वर्णनात्मक प्रॉम्प्ट लिखना,
00:01:39फ्रेमवर्क निर्दिष्ट करना और यह समझना कि ये फ्रेमवर्क क्या हैं,
00:01:41और फिर एक बुनियादी डिज़ाइन शब्दावली बनाना शुरू करना।
00:01:43अब, इस प्रक्रिया में केवल प्लान मोड का उपयोग करके,
00:01:46आप इनमें से कुछ कौशल बनाना शुरू कर देंगे क्योंकि
00:01:46यह आपसे सवाल पूछेगा जैसे कि आप इस लैंडिंग पेज के लिए
00:01:50किस टेक स्टैक का उपयोग करना चाहते हैं?
00:01:53Next JS, plain HTML, Astro.
00:01:55आपको अंदाज़ा नहीं होगा कि इनमें से किसी का क्या मतलब है,
00:01:57लेकिन बस टाइप करके यह पूछने से कि ये
00:01:58फ्रेमवर्क क्या हैं,
00:02:00आप फ्रेमवर्क और इस तरह की चीज़ों के मामले में
00:02:02कुछ हद तक सक्षमता बनाना शुरू कर देंगे,
00:02:05आपको बस सवाल पूछने होंगे।
00:02:07प्लान मोड आपको डिज़ाइन निर्णयों और आपकी वेबसाइट के
00:02:11वास्तविक लक्ष्य के बारे में सोचने पर भी मजबूर करेगा,
00:02:13क्योंकि सिर्फ यह कहना काफी नहीं है कि, "हे,
00:02:14मुझे Argus के लिए एक लैंडिंग पेज चाहिए।"
00:02:17इसका मकसद क्या है?
00:02:19आप वास्तव में क्या परिणाम चाहते हैं?
00:02:20इस मामले में,
00:02:21हम वेटलिस्ट साइनअप और प्रोडक्ट शोकेस दोनों चाहते हैं।
00:02:23और फिर यह हमसे स्पष्ट रूप से स्टाइल के बारे में
00:02:25सवाल पूछेगा। अब, तुरंत ही आपको पता चल जाएगा कि,
00:02:26ये जिस तरह की विज़ुअल स्टाइल आपको देगा वो फिर से
00:02:29काफी साधारण हैं, जैसे डार्क और टेकी, क्लीन और मिनिमल, है ना?
00:02:32जैसे यह इतना विशिष्ट नहीं है कि हमें अभी वे परिणाम मिल सकें जो हम चाहते हैं।
00:02:35यहीं पर हर कोई रुक जाता है।
00:02:38और इसी वजह से सब कुछ इतना साधारण दिखता है।
00:02:41तो हमारे लिए, हम आगे बढ़ेंगे और क्लीन और मिनिमल चुनेंगे,
00:02:42और फिर हम सिर्फ हीरो सेक्शन,
00:02:45फीचर्स और कॉल टू एक्शन करेंगे और इसे सबमिट कर देंगे।
00:02:47अब आप शायद सोच रहे होंगे, "अगर यह सब इतना बुनियादी है,
00:02:49तो मैं वास्तव में वर्णनात्मक प्रॉम्प्ट कैसे लिखूँगा और
00:02:52वह बुनियादी डिज़ाइन शब्दावली कैसे बनाऊँगा?"
00:02:53खैर, सच कहूँ तो,
00:02:55इसमें बस कुछ समय लगेगा और अनुभव लगेगा।
00:02:58जितना अधिक आप यह देखेंगे कि
00:03:01सही क्रिएटिव फ्रंट-एंड डिज़ाइन क्या होते हैं,
00:03:03उतना ही आप इन चीज़ों को बेहतर समझेंगे।
00:03:04और हम इसके बारे में भविष्य के स्तरों में और बात करेंगे।
00:03:06तो चलिए देखते हैं कि इसने हमारे लिए क्या बनाया है और... हे भगवान, यह तो AI का कचरा है।
00:03:09यह भद्दा है, है ना? यह जितना साधारण हो सकता है, उतना है।
00:03:12हमारे पास वे पर्पल ग्रेडिएंट्स भी हैं,
00:03:13जिन्हें AI किसी वजह से बहुत पसंद करता है। तो क्या हुआ?
00:03:16कहाँ गलती हुई? प्लान मोड के बावजूद हमें यही मिला।
00:03:20सच तो यह है कि जैसा कि आप पहले से ही जानते हैं,
00:03:24Claude code और सामान्य तौर पर AI,
00:03:27फ्रंट-एंड डिज़ाइन में सबसे अच्छे नहीं हैं।
00:03:30और अगर आप इसे उबाऊ और बिना विवरण वाले प्रॉम्प्ट देते हैं,
00:03:32तो आपको इसी तरह का आउटपुट मिलेगा, है ना?
00:03:35और फिर भी यही आपको हर जगह देखने को मिलता है,
00:03:37शायद थोड़े बहुत अंतर के साथ। तो हम क्या कर सकते हैं?
00:03:38लेवल वन और डिज़ाइन के इस नरक से बाहर निकलने के लिए हम क्या कर सकते हैं?
00:03:42लेकिन उससे पहले,
00:03:44सबके पसंदीदा प्रायोजक—यानी मेरी ओर से—एक छोटी सी जानकारी।
00:03:46मैंने अभी कुछ समय पहले ही Claude code मास्टरक्लास रिलीज़ की है।
00:03:48और अगर आप तकनीकी पृष्ठभूमि से नहीं हैं, तो AI डेवलपर बनने के लिए
00:03:51यह नंबर वन जगह है।
00:03:52मैं इसे हर हफ्ते अपडेट करता हूँ। और जब से यह रिलीज़ हुई है,
00:03:55हमने पहले ही एक घंटे से ज़्यादा का नया कंटेंट जोड़ दिया है और
00:03:5820 से ज़्यादा मॉड्यूल्स अपडेट किए हैं। तो अगर आप इसे सीखना चाहते हैं,
00:03:59तो आप इसे Chase AI पर पा सकते हैं।
00:04:02साथ ही, पिन किए गए कमेंट में इसका लिंक है,
00:04:04लेकिन अगर आप AI में बिल्कुल नए हैं,
00:04:07तो शायद यह आपके लिए अभी थोड़ा ज़्यादा हो।
00:04:10तो फ्री Chase AI कम्युनिटी को ज़रूर चेक करें।
00:04:13उसका लिंक डिस्क्रिप्शन में है।
00:04:14खैर, लेवल टू पर जाने के लिए,
00:04:17हमें Claude को डिज़ाइन की शिक्षा देनी होगी।
00:04:18और यहीं से हम कौशल लाना शुरू करते हैं।
00:04:19यहीं हम बाहरी विशेषज्ञ प्रॉम्प्ट लाना शुरू करते हैं
00:04:22जो Claude code को बताते हैं कि बेहतर डिज़ाइन कैसे किया जाए।
00:04:24अब ये कौशल जिन पर हम भरोसा करते हैं जैसे कि 'फ्रंट एंड डिज़ाइन स्किल'
00:04:25और 'UI UX प्रो मैक्स स्किल', हमारे लिए बहुत सारा भारी काम करेंगे।
00:04:28वे Claude code में ऐसे प्रॉम्प्ट डालेंगे
00:04:30जो कहेंगे कि, "हे, अगर आप इस इंडस्ट्री में कोई वेबपेज बना रहे हैं,
00:04:33तो यहाँ वे चीज़ें हैं जिन पर आपको ध्यान देना चाहिए।
00:04:36यहाँ उन सभी AI कचरा डिज़ाइन तकनीकों की एक लिस्ट है,
00:04:39इनसे बचें।"
00:04:41तो असल में यह हमारे प्रॉम्प्ट्स को सुपरचार्ज कर देगा।
00:04:42भले ही हम कुछ साधारण सा लेकर आएं, और यह रहा 'UI UX प्रो मैक्स स्किल' का एक नज़ारा।
00:04:45यह GitHub पर एक ओपन सोर्स रेपो है। इसे 52,000 स्टार्स मिले हैं।
00:04:49हम यहाँ स्किल्स फोल्डर के अंदर जा सकते हैं और
00:04:51देख सकते हैं कि सब कुछ कैसे सेट किया गया है। अगर हम चाहें,
00:04:55तो यह सब सिर्फ टेक्स्ट प्रॉम्प्ट्स हैं और यह टेक्स्ट प्रॉम्प्ट्स का एक गुच्छा है
00:04:56जो Claude code के लिए एक चेकलिस्ट की तरह काम कर रहा है ताकि
00:04:58इसे इस साधारण चीज़ से बाहर निकाला जा सके।
00:05:00ताकि हम यहाँ न फंसें। अब इसे इंस्टॉल करने के लिए
00:05:03और इसके जैसे अन्य सभी कौशल,
00:05:07यह बहुत सरल है। अगर हम GitHub पर जाते हैं,
00:05:09तो हमारे लिए यहाँ निर्देश दिए गए हैं।
00:05:12हमें बस / plugin marketplace करना है,
00:05:15स्किल जोड़नी है और फिर उसे इंस्टॉल करना है।
00:05:17तो हम इसे अपने Claude code टर्मिनल के अंदर चलाते हैं।
00:05:19और अगर यह थोड़ा भ्रमित करने वाला लग रहा है, तो समझें कि,
00:05:21आप हमेशा इसका URL कॉपी-पेस्ट कर सकते हैं,
00:05:23इसे Claude code में डाल सकते हैं और कह सकते हैं,
00:05:26"हे, मैं इस स्किल को इंस्टॉल करना चाहता हूँ।"
00:05:27तो चलिए इस स्किल का परीक्षण करते हैं।
00:05:30मैंने फॉरवर्ड स्लैश के साथ स्किल को लोड कर लिया है।
00:05:32आप स्वाभाविक भाषा का भी उपयोग कर सकते हैं और कुछ ऐसा कह सकते हैं,
00:05:35"हे Claude code, UI UX प्रो मैक्स स्किल का उपयोग करो।"
00:05:37और हम कहेंगे,
00:05:40"मैं चाहता हूँ कि तुम इस स्किल का उपयोग करके लैंडिंग पेज को फिर से बनाओ।
00:05:41मुझसे कोई भी ज़रूरी सवाल पूछो।"
00:05:42अब, स्टैंडर्ड Claude code प्लान मोड की तरह ही,
00:05:44यह हमसे स्टाइल के बारे में कुछ सवाल पूछेगा।
00:05:46इस बार हम वही करेंगे जो यह सुझाव देता है, है ना?
00:05:47कुछ अच्छी टाइपोग्राफी के साथ। ज़रूर, बढ़िया लग रहा है।
00:05:50और फिर एक CTA कलर। चलिए ऑरेंज करते हैं।
00:05:51हम हर हाल में उस पर्पल कलर से दूर रहना चाहते हैं।
00:05:54तो Claude code ने रीडिज़ाइन पूरा कर लिया है। तो चलिए एक नज़र डालते हैं।
00:05:55तो यह रहा 'UI UX प्रो मैक्स स्किल' का उपयोग करके बनाया गया लैंडिंग पेज।
00:05:57और देखते ही पता चलता है कि यह एक बड़ा सुधार है, है ना?
00:05:59हमारे पास वास्तव में एक उचित बैकग्राउंड है और यह छोटा सा स्क्वायर पैटर्न है।
00:06:03बटनों में एक हल्की सी चमक है और वे रंग भी बदलते हैं
00:06:05जब आप उन पर माउस ले जाते हैं,
00:06:07हमारे पास एक ग्राफ़िक है और हर सेक्शन के साथ रंग बदलते हैं।
00:06:09तो यह बहुत, बहुत बेहतर है, भले ही इसे
00:06:12पर्पल रंग अभी भी बहुत पसंद है। इसके बावजूद,
00:06:15यह साफ तौर पर AI द्वारा बनाया गया लगता है, है ना?
00:06:18यह ऐसा कुछ नहीं है जिसे देखकर आप दंग रह जाएं
00:06:21कि यह क्या बनाया गया है। यह अभी भी एक AI टेंपलेट जैसा दिखता है।
00:06:22यह एक 'डिज़ाइन किया हुआ' AI टेंपलेट लगता है,
00:06:25लेकिन है यह फिर भी एक AI टेंपलेट ही। और बुनियादी तौर पर,
00:06:27यह वही वेबसाइट है जो आपने पहले देखी थी,
00:06:30बस थोड़ा सजा-धजा कर पेश की गई है।
00:06:33तो हम इसे वास्तव में कैसे सुधार सकते हैं?
00:06:36हम लेवल टू से लेवल थ्री पर कैसे जा सकते हैं?
00:06:38क्योंकि ये स्किल्स बेहतरीन हैं।
00:06:40वे कलर थ्योरी, टाइपोग्राफी,
00:06:43स्पेसिंग और सामान्य लेआउट डिज़ाइन के कुछ विचार ला रहे हैं, लेकिन बुनियादी तौर पर,
00:06:46यह अभी भी साधारण ही है।
00:06:48और सच तो यह है कि जब महारत हासिल करने वाले कौशलों की बात आती है,
00:06:49तो सबसे बड़ा कौशल यह है कि,
00:06:51हम एक डिज़ाइनर की नज़र से इस आउटपुट का मूल्यांकन कैसे करें और फिर
00:06:52उन आलोचनाओं को प्रॉम्प्ट्स में कैसे बदलें?
00:06:55यह अभी भी प्रॉम्प्टिंग की समस्या है, लेकिन प्रॉम्प्टिंग के साथ दिक्कत यह है,
00:06:56और यहीं हम इस जाल में फंस जाते हैं—
00:06:59कि हमारे विवरण देने की एक सीमा है,
00:07:02खासकर जब हम शुरुआत करते हैं, है ना?
00:07:04हमारे पास समस्याओं को स्पष्ट रूप से समझाने के लिए
00:07:07ज़रूरी ज्ञान की कमी होती है, है ना?
00:07:08मैं एक विज़ुअल माध्यम और एक विज़ुअल समस्या को
00:07:11टेक्स्ट के ज़रिए समझाने की कोशिश कर रहा हूँ। स्वाभाविक रूप से, उसमें कुछ कमी रह जाती है।
00:07:13तो हम वास्तव में क्या कर सकते हैं? खैर,
00:07:16हमें Claude code को 'दिखाना' शुरू करना होगा। समस्या यह थी कि,
00:07:18हमें Claude code को
00:07:21उन वास्तविक उदाहरणों को दिखाना होगा जिन्हें हम हासिल करना चाहते हैं। सही?
00:07:23तो लेवल थ्री को अनलॉक करने के लिए,
00:07:27हमें सिर्फ टेक्स्ट प्रॉम्प्ट्स से आगे बढ़ना होगा और
00:07:27विज़ुअल माध्यम में कदम रखना होगा, है ना?
00:07:31हमें इसे सिर्फ बताना नहीं, बल्कि दिखाना शुरू करना होगा।
00:07:34और लेवल थ्री वह है जहाँ आप विज़ुअल डायरेक्टर बन जाते हैं।
00:07:36यहीं पर हम Claude code को
00:07:39उन चीज़ों के ठोस उदाहरण देना शुरू करते हैं जिन्हें हम बनाना चाहते हैं, है ना?
00:07:41ताकि हम सिर्फ टेक्स्ट और स्किल्स पर निर्भर न रहें।
00:07:44अब हम टेक्स्ट + स्किल्स + विज़ुअल उदाहरणों का उपयोग करेंगे।
00:07:46अब यह दो कारणों से एक बहुत बड़ी उपलब्धि है। पहला,
00:07:49Claude code ज़ाहिर तौर पर उस इमेज की बेहतर नकल कर पाएगा जिसे आप उसे दिखाते हैं,
00:07:52हम इसे सिर्फ बता नहीं रहे, बल्कि दिखा रहे हैं।
00:07:54और इसलिए लेवल तीन वह है जहाँ आप विजुअल डायरेक्टर बन जाते हैं।
00:07:56यहाँ हम Claude को कोड देना शुरू करते हैं,
00:07:58उन चीज़ों के ठोस उदाहरण जिन्हें हम हासिल करना चाहते हैं, है ना?
00:08:01इस तरह हम सिर्फ टेक्स्ट और स्किल्स पर निर्भर नहीं रहते।
00:08:03अब हम टेक्स्ट प्लस स्किल्स प्लस विजुअल उदाहरणों का उपयोग करेंगे।
00:08:07अब यह दो कारणों से एक बहुत बड़ी कामयाबी है। पहला,
00:08:09Claude कोड ज़ाहिर तौर पर किसी ऐसी इमेज की बेहतर नकल कर पाएगा जिसे आप उसे दिखाते हैं,
00:08:12बजाय उस इमेज के आपके द्वारा किए गए वर्णन के।
00:08:15लेकिन दूसरा, क्योंकि हम इमेज का उपयोग कर रहे हैं,
00:08:17इसका मतलब है कि हम दूसरी वेबसाइटों को देख रहे हैं और अब हम
00:08:20फिर से देख पाएंगे कि असल में सही चीज़ क्या दिखती है,
00:08:23इस क्षेत्र के असली प्रोफेशनल्स क्या कर रहे हैं और हम उनकी नकल कैसे कर सकते हैं?
00:08:25अब,
00:08:26ऐसी कई जगहें हैं जहाँ आप अपने फ्रंट-एंड डिज़ाइन के लिए प्रेरणा पा सकते हैं
00:08:28और मैं उनमें से चार के नाम बताऊंगा।
00:08:31पहला है Awwwards। यह तीन 'W' वाला Awwwards है।
00:08:34यह वह जगह है जहाँ लोग अपना फ्रंट-एंड काम सबमिट करते हैं और
00:08:37उन्हें इस पर ग्रेड मिलते हैं। तो इसमें काफी रचनात्मक नज़रिया है।
00:08:40दूसरा है godly.website।
00:08:42यह एक इनफिनिट स्क्रॉलिंग वेबसाइट है जहाँ आप बस बहुत सारे अलग-अलग डिज़ाइन देख सकते हैं।
00:08:45नंबर तीन Pinterest है,
00:08:48जिसमें हैरानी की बात है कि कुछ बहुत ही शानदार चीज़ें हैं।
00:08:49यहाँ मैं बस "SaaS लैंडिंग पेज" सर्च कर रहा हूँ।
00:08:52जब मुझे कोई ऐसा मिलता है जो मुझे पसंद हो,
00:08:53तो मैं उसके जैसे कई और भी देख सकता हूँ।
00:08:56और आखिरी है Dribbble। यहाँ तीन 'B' वाला Dribbble है।
00:08:58यहाँ मैंने बस "SaaS लैंडिंग पेज" डाला है। और फिर से,
00:09:01मुझे बहुत सारी ऐसी चीज़ें दिख रही हैं जो काफी कूल लग रही हैं।
00:09:04मान लीजिए कि मैं Open Hands जैसी किसी वेबसाइट पर गया जो मुझे पसंद है।
00:09:07मुझे इसकी वह चीज़ पसंद है,
00:09:09ऊपर जो स्क्रॉलिंग हिस्सा है जिसमें "प्रूवन वर्कफ्लो" दिखाया गया है।
00:09:11मुझे इसकी अलग तरह की कलर स्कीम भी पसंद आ रही है।
00:09:14यह तुरंत ही कुछ अलग सा लगता है।
00:09:15उनका सोशल प्रूफ है और कुल मिलाकर,
00:09:19मुझे इसका स्टाइल पसंद आ रहा है। उदाहरण के लिए। तो फिर से,
00:09:22मैं जो करने जा रहा हूँ वह बहुत ही सरल है।
00:09:23मैं बस इस वेबपेज के बहुत सारे स्क्रीनशॉट लूँगा,
00:09:26उन्हें Claude कोड में डालूँगा और कहूँगा, "हे, यह वह विजुअल स्टाइल है जिसकी मुझे तलाश है।"
00:09:29तो Claude कोड के अंदर मैंने कहा,
00:09:31असल में मैं चाहता हूँ कि हमारी वेबसाइट Open Hands के स्टाइल से मेल खाए।
00:09:34मैंने उसे URL दिया। और फिर मैंने कहा,
00:09:36"संदर्भ के लिए यहाँ कुछ स्क्रीनशॉट हैं।"
00:09:38और मैंने वहां सारे स्क्रीनशॉट डाल दिए।
00:09:40तो अब उसके पास काम करने के लिए वास्तविक विजुअल संदर्भ हैं।
00:09:43मेरे लिए कम से कम यह शब्दों में समझाना थोड़ा मुश्किल होता
00:09:45कि मैं यहाँ क्या ढूंढ रहा था,
00:09:47भले ही UI UX प्रो स्किल जैसे किसी टूल की मदद ली जाती।
00:09:51और इसी प्रक्रिया के ज़रिए,
00:09:52हम वास्तव में अच्छे विजुअल संदर्भों को चुनना शुरू करेंगे।
00:09:55वहाँ ऐसे बहुत सारे मौजूद हैं।
00:09:57और जब आप उन्हें ज़्यादा से ज़्यादा देखने लगते हैं, तो पुरानी जैसी
00:10:00चीज़ें बिल्कुल भी अच्छी नहीं लगतीं। और ऐसा लगता है,
00:10:03"मैं कभी ऐसा क्यों करूँगा जब इतना कुछ शानदार उपलब्ध है?"
00:10:05और जैसे-जैसे आप उन संदर्भों को देखते हैं,
00:10:07भले ही हम Claude कोड को सिर्फ स्क्रीनशॉट दे रहे हैं,
00:10:09यह आपको यह बताने में मदद करेगा कि आप विशेष रूप से क्या पसंद करते हैं,
00:10:12क्योंकि,
00:10:12जब आप इन सभी संदर्भों को देखेंगे तो आपको वही चीज़ें
00:10:14बार-बार दिखाई देंगी।
00:10:16और आपको यह भी शुरू करना चाहिए कि
00:10:18कई साइटों के संदर्भों को आपस में मिलाया जाए, है ना?
00:10:21भले ही हम यहाँ Open Hands का उपयोग कर रहे थे,
00:10:23शायद कुछ कूल चीज़ें मुझे Pinterest या
00:10:26godly.websites पर मिली हों, जैसे, "चलो यह यहाँ से ले लेते हैं।"
00:10:28"और वह चीज़ वहाँ से लेते हैं," है ना?
00:10:29मैं इन सभी अलग-अलग साइटों की बेहतरीन चीज़ें लेकर
00:10:32उन्हें मिलाना चाहता हूँ। हालाँकि,
00:10:33इस लेवल पर इस खास जाल में फँसना बहुत आसान है।
00:10:36और मैं कहूँगा कि ज़्यादातर लोग लेवल तीन पर ही रुक जाते हैं,
00:10:39जहाँ वे समझते हैं कि, हाँ, मुझे स्किल्स का इस्तेमाल करना है।
00:10:41शुरुआत में Claude कोड उतना अच्छा नहीं है,
00:10:42लेकिन स्किल्स और स्क्रीनशॉट के साथ, मैं काफी आगे तक जा सकता हूँ।
00:10:45सच तो यह है कि यहाँ एक सीमा है क्योंकि,
00:10:49हम एक तरह के "वाइब गैप" (vibe gap) में फँस जाएँगे।
00:10:50जैसे कि आप देखेंगे कि यह जो बनाकर देता है,
00:10:52वह लगभग करीब होगा, है ना?
00:10:55लेकिन वह परफेक्ट नहीं होगा क्योंकि फिर से,
00:10:57वहाँ अभी भी वह लॉस (lossy) प्रभाव है जब
00:11:01मैं Claude कोड को कुछ बताता हूँ, जो कि सही है।
00:11:03यह सब कुछ कोड में करता है, इसे एक विजुअल इमेज दिखाना और
00:11:05कहना, "हे, इस विजुअल को कोड में बदल दो।"
00:11:08और बहुत सारे फ्रंट-एंड डिज़ाइन के साथ यही समस्या है।
00:11:10जैसे कि, यह एक विजुअल माध्यम है फिर भी
00:11:12मैं इसे टेक्स्ट में टाइप करने की कोशिश कर रहा हूँ, और साथ ही,
00:11:15अगर मैं इसे विजुअल स्क्रीनशॉट देता हूँ,
00:11:17तो भी वह अनुवाद वाला हिस्सा बाकी रहता है।
00:11:18जैसे कि यह वास्तव में इसे ठीक से कैसे करता है? खैर,
00:11:20सच तो यह है कि इसकी एक सीमा है और हम उस
00:11:22सीमा को यहाँ काम करते हुए देख सकते हैं,
00:11:24क्योंकि उन सभी स्क्रीनशॉट्स के साथ इसने यही बनाया है।
00:11:28यहाँ मूल वर्शन है और यहाँ हमारा है।
00:11:31और जैसा कि मैंने पहले भी कहा है,
00:11:32यहीं पर लोग अटक जाते हैं।
00:11:33क्योंकि अगर हम इसे ध्यान से देखें, जैसे,
00:11:36अगर आप अपनी आँखें सिकोड़कर देखें,
00:11:37तो आप देख सकते हैं कि यह क्या करने की कोशिश कर रहा था।
00:11:39और शायद यह 50% तक वहाँ पहुँच गया।
00:11:41और कुछ चीज़ें हैं जो हमें पसंद आती हैं,
00:11:43लेकिन अब लोग क्या करते हैं कि वे बस यहाँ जाएँगे,
00:11:46हीरो सेक्शन का एक और स्क्रीनशॉट लेंगे। ठीक है।
00:11:49चलो हीरो वाले हिस्से पर बार-बार काम करते हैं,
00:11:51बहुत सारी प्रॉम्प्टिंग, ठीक है, वापस जाओ स्क्रीनशॉट लो, फिर वापस आओ।
00:11:53और इसमें बस बहुत समय लगता है और आप कभी भी इसे ठीक से हासिल नहीं कर पाते।
00:11:56है ना?
00:11:57क्योंकि स्क्रीनशॉट से कोड में अनुवाद करने की वह समस्या बनी रहती है।
00:11:59और इसलिए लेवल तीन से बाहर निकलने और लेवल चार की ओर
00:12:02बढ़ने के लिए,
00:12:03हमें इन वेबसाइटों की सिर्फ ऊपरी सतह को नहीं देखना है,
00:12:06जो हमें पसंद हैं और जिनसे हम प्रेरणा लेते हैं।
00:12:08हमें यह सीखना होगा कि उन्हें असल में ठीक से कैसे क्लोन किया जाए और
00:12:11असल में वह बुनियादी कोड कैसे प्राप्त किया जाए जो
00:12:15Open Hands जैसी किसी चीज़ को चला रहा है। और यह सिर्फ इससे आगे की बात है,
00:12:18"ओह, हम बस इसे क्लोन करना चाहते हैं और हम बस उनकी नकल कर रहे हैं।"
00:12:20नहीं, इसे क्लोन करने की प्रक्रिया और फिर यह समझना कि
00:12:23वास्तव में इन चीज़ों की नकल कैसे की जाए, हमारे लिए कुछ बड़े फायदे लेकर आती है,
00:12:26न केवल टेम्पलेटिंग के लिहाज़ से, जो कि बहुत अच्छा है,
00:12:30बल्कि आप उस वास्तविक कोड से भी परिचित होंगे
00:12:34जो सतह के नीचे चल रहा है और एक तरह से
00:12:36लेवल तीन से लेवल चार पर पहुँच जाएँगे।
00:12:38अब हमें इन वेबसाइटों को सिर्फ प्रेरणा के लिए स्क्रीनशॉट के साथ
00:12:41सतही तौर पर देखने से आगे जाना होगा।
00:12:44अब हमें उनकी सतह के नीचे जाना सीखना होगा,
00:12:48परदे के पीछे देखना होगा और देखना होगा कि ये वेबसाइटें
00:12:51अपने वास्तविक कोडिंग कंपोनेंट्स, उनके HTML,
00:12:54उनके CSS और उनके JavaScript के मामले में कैसे बनी हैं।
00:12:56और इसलिए लेवल चार है "द क्लोनर" (The Cloner)।
00:12:59यह वह जगह है जहाँ हम प्रोफेशनल्स से सीखकर अपनी कला को निखारते हैं।
00:13:02अब, मैं बहुत स्पष्ट कर दूँ।
00:13:04यह लेवल इसके बारे में नहीं है कि, "ओह,
00:13:05हम बस वेबसाइटों की चोरी करने जा रहे हैं और कॉपी करके
00:13:08उसे अपना कहेंगे।" यहाँ ऐसी बात नहीं है।
00:13:10बात यह है कि हम ऐसी वेबसाइटें ढूंढेंगे जो हमें पसंद हैं
00:13:13और हम उन्हें डिकंस्ट्रक्ट करेंगे और फिर उन्हें एक
00:13:16टेम्पलेट के रूप में उपयोग करेंगे जिस पर हम अपना काम करेंगे। और ऐसा करने की प्रक्रिया में,
00:13:20हम बहुत कुछ सीखेंगे, जैसे किसी भी क्षेत्र के किसी भी हुनर में होता है।
00:13:24आप इसमें बेहतर कैसे होते हैं? आप देखते हैं कि प्रोफेशनल्स क्या करते हैं।
00:13:27आप उनकी नकल करने की कोशिश करते हैं।
00:13:28आप उनकी बराबरी करने की कोशिश में बहुत कुछ सीखते हैं।
00:13:30और समय के साथ आप उसमें अपना खुद का अंदाज़ जोड़ते हैं और
00:13:33कुछ ओरिजिनल बनाते हैं। यह लेवल इसी के बारे में है।
00:13:35और इसलिए इसका अधिकतम लाभ उठाने के लिए,
00:13:37हमें यह समझना शुरू करना होगा कि फ्रंट-एंड डिज़ाइन के साथ क्या हो रहा है।
00:13:39फ्रंट-एंड डिज़ाइन को सरल बनाने के लिए इसके
00:13:42तीन भाग होते हैं। इसमें HTML होता है।
00:13:45उसे वेबसाइट की हड्डियों की तरह समझें, है ना?
00:13:47कि वह वास्तव में कैसे संरचित है। हमारे पास CSS है।
00:13:50वह वेबसाइट की स्टाइलिंग है, है ना?
00:13:52इसे वेबसाइट के कपड़ों की तरह समझें।
00:13:55और फिर हमारे पास JavaScript है।
00:13:56JavaScript को मांसपेशियों की तरह समझें, ठीक है?
00:13:59यही वह चीज़ है जो वास्तव में तब काम करती है जब आप किसी बटन पर
00:14:01क्लिक करते हैं या कुछ और करते हैं।
00:14:02और वेबसाइट के इन तीन हिस्सों को देखकर ही हम
00:14:05वेबसाइट को बेहतर ढंग से क्लोन या टेम्पलेट कर पाएंगे,
00:14:08और यह भी समझ पाएंगे कि वे कैसे काम करते हैं, है ना?
00:14:10वेबसाइट को डिकंस्ट्रक्ट करने और यह सीखने का पूरा विचार कि
00:14:13वे चीज़ों को कैसे करते हैं। तो हम यह कैसे करते हैं?
00:14:15हम उदाहरण के तौर पर Open Hands को कैसे डिकंस्ट्रक्ट कर सकते हैं?
00:14:17ज़ाहिर है कि स्क्रीनशॉट काम नहीं करते क्योंकि यह वैसी चीज़ नहीं है।
00:14:21खैर, यह अपेक्षाकृत सरल है। तो HTML हासिल करने के लिए,
00:14:25हम बस वेबसाइट पर जाएँगे और फिर Control+U दबाएँगे।
00:14:28आप यहाँ जो देख रहे हैं वह पूरी HTML है।
00:14:33तो हम जो करने जा रहे हैं वह यह है कि हम इसे कॉपी करेंगे,
00:14:37ठीक है? हम इस पूरी चीज़ को कॉपी करेंगे।
00:14:39और फिर हम इसे Claude कोड में पेस्ट कर देंगे।
00:14:42अब यह आमतौर पर काफी बड़ा होगा।
00:14:44इस मामले में, यह HTML की 1,152 लाइनें हैं। अब बिल्कुल,
00:14:48इसके सबसे नीचे,
00:14:50आप देख सकते हैं कि CSS फाइलों
00:14:54और JavaScript के लिंक भी हैं।
00:14:56और यही मैं यहाँ नीचे हाईलाइट कर रहा हूँ।
00:14:58अब यह लगभग इन सभी HTML फाइलों के नीचे होगा और मैं
00:15:01थोड़ा ज़ूम आउट करूँगा।
00:15:04यह देखना थोड़ा मुश्किल है, लेकिन नीचे की तरफ,
00:15:06हमारे पास JavaScript के साथ-साथ CSS भी है।
00:15:09तो ये वास्तविक फाइलें हैं जिनमें बहुत सारा कोड भी शामिल है।
00:15:13तो हम जो करने जा रहे हैं वह यह है कि इसे HTML देने के बाद,
00:15:17हम Claude कोड को यह भी बताएँगे, "हे,
00:15:19वास्तव में क्या हो रहा है यह समझने के लिए JavaScript और CSS फाइलों को भी देखें।"
00:15:22तो मैंने लिखा,
00:15:24"CSS और JS फाइलों को भी देखें।" अब आप यहाँ रुक सकते हैं।
00:15:29और यह उन्हें देखने के लिए अपने आप वेब फेच (web fetch) का उपयोग करेगा।
00:15:31समस्या यह है कि वेब फेच जिस तरह से काम करता है, Claude कोड खुद वेब फेच करता है।
00:15:35यह अपने लिए काम करने के लिए एक छोटे मॉडल को कॉल करता है, है ना?
00:15:39तो Claude कोड का यह इंस्टेंस वास्तव में उस वेबपेज पर नहीं जाता है।
00:15:42यह एक छोटे मॉडल का उपयोग करता है। छोटा मॉडल उसे देखता है, उसका सारांश बनाता है और
00:15:46वापस Claude कोड को दे देता है।
00:15:47इसके साथ समस्या यह है कि CSS और JS फाइलें काफी बड़ी होती हैं और उनमें
00:15:51फिर से, वे बहुत ही खास तरीके शामिल होते हैं जिनसे यह वेबसाइट बनाई गई थी।
00:15:54इसलिए हमें यह सब चाहिए, ठीक है? मुझे इन फाइलों का सारांश नहीं चाहिए।
00:15:58तो मैंने जो किया है वह यह कि मैंने एक ऐसी स्किल बनाई है जो Claude कोड को इसे
00:16:03बेहतर ढंग से करने की अनुमति देती है। यह मूल रूप से एक उन्नत प्रॉम्प्ट है।
00:16:04तो यह उतनी CSS और JavaScript ले लेता है जितनी इसे ज़रूरत है।
00:16:07तो मैं बस कहता हूँ "साइकिल टीयर डाउन स्किल (site tear down skill)" का उपयोग करें।
00:16:12अब मैं इस साइट टीयर डाउन स्किल को फ्री स्कूल कम्युनिटी के अंदर डाल दूँगा और
00:16:16उसका लिंक डिस्क्रिप्शन में है।
00:16:18तो आपको बस उसे लोड करना होगा और आप भी ऐसा कर पाएंगे।
00:16:21और कुल मिलाकर, मैंने क्या कहा? मैंने कहा, "यहाँ Open Hands की HTML है।"
00:16:25CSS और JS फ़ाइलों पर भी एक नज़र डालें।
00:16:28साइट टियर डाउन स्किल का उपयोग करें और इस जानकारी का उपयोग ओरिजिनल ओपन हैंड्स साइट को बेहतर ढंग से क्लोन करने के लिए करें।
00:16:31अब, यह हमें कैसे शिक्षित करने वाला है? तो सबसे पहली बात,
00:16:36आपको शायद अंदाज़ा भी नहीं होगा कि मैं इस बैकग्राउंड जैसा काम कैसे कर पाया, है ना?
00:16:39ठीक?
00:16:40आपको शायद यह भी नहीं पता होगा कि इसे बेहतर ढंग से कॉपी करने के लिए
00:16:43आपको किस तरह की शब्दावली का उपयोग करना चाहिए था, है ना?
00:16:46जब हमने इसे सिर्फ स्क्रीनशॉट दिए, तो हमें कुछ ऐसा मिला जो,
00:16:50काफी हद तक उसके करीब तो था,
00:16:52लेकिन क्लाउड कोड से असल में यह दिखवाकर कि पर्दे के पीछे क्या चल रहा है,
00:16:56अब हम क्लाउड कोड पर भरोसा कर सकते हैं कि वह हमें ये चीज़ें सिखाए क्योंकि अब क्लाउड कोड
00:17:01कोडिंग के स्तर पर असलियत समझता है कि क्या हो रहा है।
00:17:04अब हम क्लाउड कोड के साथ एक समझदारी भरी बातचीत कर सकते हैं और कह सकते हैं, "अरे,
00:17:07उन्होंने यह कैसे किया? इसका क्या मतलब है? GSAP क्या है?"
00:17:11जैसे कि उन्होंने स्क्रॉलिंग एनिमेशन कैसे बनाए? उन्होंने यह कैसे किया?
00:17:13उन्होंने वह कैसे किया?
00:17:14और समय के साथ जब आप ऐसी और भी वेबसाइट्स क्लोन करेंगे और उन्हें अपने काम के लिए
00:17:18टेंप्लेट के रूप में इस्तेमाल करेंगे, क्योंकि फिर से कह दूँ,
00:17:19आप हमेशा उसमें अपना एक मौलिक अंदाज़ जोड़ेंगे।
00:17:21आप इसे बस एक आधार या नींव की तरह इस्तेमाल कर रहे हैं।
00:17:23आप फ्रंट-एंड डिज़ाइन में बेहतर होते जाएँगे,
00:17:26ठीक वैसे ही जैसे आप किसी भी दूसरे हुनर में होते हैं।
00:17:29और यही वह प्रक्रिया है जिसके ज़रिए आप न केवल रूबरू होते हैं,
00:17:31बल्कि अपने प्रोजेक्ट्स में प्रोफेशनल तकनीकों का इस्तेमाल करना भी शुरू कर देते हैं,
00:17:34लेकिन अगले लेवल पर जाने के लिए, जैसा कि मैंने कहा, आप क्लाउड कोड के साथ
00:17:38सिर्फ एक नौसिखिए की तरह कीबोर्ड नहीं पीट सकते,
00:17:41ठीक वैसा ही जैसा हमने पहले चर्चा की थी। आप बस एक्सेप्ट, एक्सेप्ट, एक्सेप्ट या नेक्स्ट, नेक्स्ट नहीं करते रह सकते,
00:17:43क्योंकि फिर आप खुद को दूसरों से अलग कैसे साबित करेंगे?
00:17:46तो इस प्रक्रिया में हमें किन स्किल्स में महारत हासिल करने की ज़रूरत है?
00:17:48हमें सोर्स कोड को पढ़ना और समझना सीखना होगा।
00:17:51क्लाउड कोड इसमें हमारी मदद करता है।
00:17:52हमें यह पहचानना होगा कि कौन सी तकनीक से कौन सा इफेक्ट बनता है क्योंकि
00:17:57एक निश्चित बिंदु के बाद हमें इन वेबसाइटों को देखकर
00:18:02तुरंत पहचानने के काबिल होना होगा कि, "ओह, यहाँ यह हो रहा है।" और अंत में,
00:18:04हमें इन क्लोन पैटर्न्स को अपने डिज़ाइन के हिसाब से ढालना सीखना होगा, ठीक है?
00:18:09हम चोरी नहीं कर रहे हैं। हम प्रेरणा ले रहे हैं।
00:18:12और अगर आप इन स्किल्स में माहिर नहीं होते,
00:18:13तो आप इस जाल में फँस जाएँगे, है ना? क्लोन सीलिंग,
00:18:16जहाँ आप सिर्फ कॉपी करेंगे, लेकिन कुछ नया नहीं बना पाएंगे।
00:18:18आप उसके पीछे के "क्यों" को समझना नहीं चाहेंगे।
00:18:20और इस तरह आप एक कठिन सीमा से टकरा जाएँगे।
00:18:22और अंत में, मैं आपकी जगह सड़क से चलते किसी भी इंसान को रख सकता हूँ और
00:18:25उसे बस स्टेप एक, दो और तीन करने के लिए कह सकता हूँ, है ना?
00:18:27वह आपको वहाँ तक नहीं ले जाएगा जहाँ आप पहुँचना चाहते हैं।
00:18:29तो चलिए देखते हैं कि जब हमने क्लाउड कोड को यह सारा अतिरिक्त कोडिंग संदर्भ दिया तो वह क्या बना पाया,
00:18:32और यहाँ इसका अपडेटेड वर्शन है।
00:18:35और यह वर्शन ज़ाहिर तौर पर ओरिजिनल के बहुत करीब दिखता है,
00:18:39खासकर अब जब बैकग्राउंड वैसा ही दिख रहा है।
00:18:41तो अगर हम अब इन दोनों की तुलना करें, तो ज़ाहिर है कि यह अभी पूरी तरह से हूबहू नहीं है।
00:18:45यह मूल रूप से इसका पहला प्रयास था, लेकिन काफी बेहतर है,
00:18:48हमारे पास जो था उसके बहुत करीब है।
00:18:50और अगर हम यहाँ से आगे बढ़ना जारी रखना चाहते हैं और इसे अपनी पसंद के
00:18:54और भी करीब लाना चाहते हैं, तो वह बहुत आसान है, है ना?
00:18:57क्योंकि अब यह मूल रूप से उसी नुस्खे को देख रहा है,
00:19:01जिसे ओपन हैंड्स देख रहा है, और हम कह सकते हैं, ठीक है, मुझे इसे बदलने दो।
00:19:04मुझे उसे बदलने दो। मैं देख रहा हूँ उन्होंने इसे कैसे किया। यहाँ बताया गया है कि हम इसकी नकल कैसे कर सकते हैं। ठीक है।
00:19:07और फिर से, यहीं से हम सीखने की प्रक्रिया शुरू कर सकते हैं। उदाहरण के लिए,
00:19:10यह शानदार बैकग्राउंड कैसे काम कर रहा था?
00:19:12और साथ ही हम ओपन हैंड्स जैसा इफेक्ट कैसे पा सकते हैं जहाँ माउस हिलाने पर
00:19:17बैकग्राउंड का कुछ हिस्सा हट जाता है।
00:19:19और आपको बस क्लाउड कोड से पूछना है कि बैकग्राउंड कैसे काम कर रहा है?
00:19:22हम उस इफेक्ट से कैसे मेल खा सकते हैं? और हर बार जब आप ऐसा करते हैं,
00:19:25तो आप बस अपने हुनर के पिटारे में एक और औज़ार जोड़ रहे होते हैं।
00:19:27तो क्लाउड कोड समझाता है कि यह इफेक्ट कैसे काम करता है और इससे भी बेहतर यह है कि अब यह
00:19:32हमारे अपने बैकग्राउंड पर भी सही तरीके से काम करता है। काफी बढ़िया है।
00:19:35लेकिन स्पष्ट कारणों से, हम लेवल चार पर ही नहीं बैठे रहना चाहते।
00:19:38हम सिर्फ नकलची नहीं बनना चाहते, है ना? हम इसमें अपनी छाप छोड़ना चाहते हैं।
00:19:42हम इसे अपना बनाना शुरू करना चाहते हैं। हम वह कैसे करें?
00:19:45हम लेवल पांच पर कैसे पहुंचें और चीजों में अपना नया मोड़ कैसे दें? खैर,
00:19:48यहीं से हम कंपोनेंट्स और अपने खुद के कस्टम एसेट
00:19:53डिज़ाइन के साथ मज़ा करना शुरू करते हैं। यहाँ हम अपनी चीज़ें लाते हैं। और हम अब सिर्फ
00:19:56वही कॉपी नहीं कर रहे हैं जो कोई दूसरी वेबसाइट कर रही है।
00:19:57अब इसे शुरू करने का सबसे आसान तरीका 21st.dev जैसी वेबसाइटों पर
00:20:02बेहतरीन कंपोनेंट्स ढूंढना है। तो कई मायनों में,
00:20:04यह वेबसाइटों के लिए प्रेरणा खोजने और उन हिस्सों को लाने जैसा ही है,
00:20:08लेकिन एक सूक्ष्म स्तर पर, कंपोनेंट लेवल पर।
00:20:11तो 21st.dev जैसी जगह पर, उदाहरण के लिए,
00:20:14मैं यहाँ बाईं ओर बटन्स जैसी चीज़ें देख सकता हूँ।
00:20:17और मुझे वहाँ बहुत सारे अलग-अलग,
00:20:21बटन डिज़ाइन मिलेंगे। और अगर मुझे कोई बटन डिज़ाइन पसंद आता है, मान लीजिए,
00:20:26कुछ ऐसा। तो मैं बस इस प्रॉम्प्ट को कॉपी कर सकता हूँ,
00:20:29इसे क्लाउड कोड में ला सकता हूँ और कह सकता हूँ, "अरे, चलो इस बटन डिज़ाइन को जोड़ते हैं।"
00:20:33और यह मूल रूप से किसी भी तरह के बटन पर लागू होता है, है ना?
00:20:36हमारे पास कैरोसेल, स्क्रॉल एरिया, मैप्स,
00:20:40नेविगेशन मेनू, इमेजेस... सब कुछ है।
00:20:42और यह सिर्फ 21st.dev तक ही सीमित नहीं है। हमारे पास CodePen जैसी अन्य वेबसाइटें भी हैं।
00:20:46CodePen में बहुत सारे अच्छे डिज़ाइन हैं जिन्हें हम इस्तेमाल कर सकते हैं।
00:20:50Monet एक और बहुत बढ़िया साइट है। वास्तव में,
00:20:52ऐसी बहुत सी जगहें हैं जहाँ आप इस तरह के शानदार कंपोनेंट्स पा सकते हैं और
00:20:57उन्हें अपने वेबपेज में शामिल करना शुरू कर सकते हैं।
00:20:59लेकिन क्या होगा अगर हमें कुछ और ज़्यादा कस्टम चाहिए?
00:21:01मैं बस कहीं और से मिले हुए रैंडम कंपोनेंट्स को कॉपी नहीं करना चाहता।
00:21:04मैं इसे वास्तव में ओरिजिनल कैसे बनाऊं? खैर, आपके पास दो विकल्प हैं।
00:21:08पहला यह कि आप अभी भी 21st.dev के इन कंपोनेंट्स का उपयोग करते हैं,
00:21:11लेकिन हम क्लाउड कोड को इसे बदलने के लिए प्रॉम्प्ट देते हैं, है ना? आखिर यह सिर्फ कोड ही तो है।
00:21:14यह प्रॉम्प्ट हमें सटीक कोड देता है और फिर हम इसे अपनी इच्छा के अनुसार
00:21:18बदल सकते हैं या हम इसे सचमुच खुद बना सकते हैं। मेरा मतलब है,
00:21:21अगर हम Pinterest पर जाते हैं और इस तरह के शानदार लैंडिंग पेज देखते हैं जो
00:21:25कलात्मक रूप से बहुत उन्नत हैं, तो ऐसा कुछ भी नहीं है जो कहे कि,
00:21:29हम इस तरह की इमेज बनाने के लिए AI का उपयोग नहीं कर सकते और इसे
00:21:34अपने पेज पर आने वाले लोगों के लिए एक मुख्य आकर्षण नहीं बना सकते।
00:21:36और ये सिर्फ स्थिर चित्र नहीं होने चाहिए। मेरा मतलब है,
00:21:39हमारे पास अपने बैकग्राउंड में वीडियो जोड़ने की पूरी क्षमता है,
00:21:42ताकि इसे कुछ स्क्रॉलिंग एनिमेशन से जोड़ा जा सके और फिर से,
00:21:45उन आइडियाज को लिया जा सके जिन्हें हमने स्टेप चार में खोजा था और उन्हें अपना बनाया जा सके।
00:21:49तो चलिए वास्तव में ऐसा करते हैं। चलिए जल्दी से अपने वेबपेज को फिर से डिज़ाइन करते हैं,
00:21:53इस ओपन हैंड्स क्लोन से दूर हटते हैं और वास्तव में AI आर्ट का कोई
00:21:57शानदार पीस डिज़ाइन करते हैं और वही वो चीज़ हो जिसे आप हमारी साइट पर आने पर सबसे पहले देखें।
00:22:01और अब तक तो आप तरीका जानते ही हैं,
00:22:02सबसे पहले हमें किसी तरह की प्रेरणा ढूंढनी होगी और कुछ देर तक
00:22:06Pinterest पर स्क्रॉल करने के बाद,
00:22:07मुझे इस तरह की बहुत सी साइटें दिख रही हैं जहाँ हीरो सेक्शन के बैकग्राउंड के लिए
00:22:10किसी तरह की कार्टून जैसी या स्टाइलिश इमेज है।
00:22:14और फिर हमारे पास बाईं ओर हमारा कुछ टेक्स्ट होगा।
00:22:16अब यहाँ आप अपनी विज़ुअल स्टोरीटेलिंग लाना शुरू कर सकते हैं, है ना?
00:22:19हम कौन सा ऐप बना रहे हैं? ऐप का नाम Argus है, ठीक है?
00:22:22और हमें किसी ऐसी टैगलाइन के साथ आना होगा जो आदर्श रूप से इमेज के साथ
00:22:27मेल खाती हो। जैसे कि हम Argus के साथ यहाँ क्या हासिल करने की कोशिश कर रहे हैं? खैर,
00:22:30Argus, पौराणिक पात्र, जिसकी 10,000 आँखें हैं।
00:22:33हम सोशल मीडिया की बात कर रहे हैं।
00:22:34हम लोगों से पहले चीज़ें खोजने की बात कर रहे हैं।
00:22:37तो जो टैगलाइन मैंने सोची वह थी "देखें आगे क्या है" (see what's next), सरल है।
00:22:41यह सटीक है। और आप जानते हैं कि इसे सोचने में मेरी मदद किसने की।
00:22:44ज़ाहिर है, वह क्लाउड कोड था। और फिर मैंने क्लाउड कोड के साथ जो किया वह यह था कि,
00:22:47मैंने मूल रूप से कहा कि, "अरे,
00:22:49हम यहाँ विज़ुअल स्टोरीटेलिंग के बारे में बात कर रहे हैं।
00:22:51इमेजरी के लिए हम किन आइडियाज के साथ आ सकते हैं?"
00:22:54क्योंकि इस स्टेज पर, हम अपनी खुद की चीज़ कर रहे हैं, है ना?
00:22:57मैं इमेज के मामले में सामान्य कॉन्सेप्ट्स को वहाँ से ले सकता हूँ जिस तरह से
00:23:01उन्होंने चीज़ें सेट की हैं, लेकिन इमेज मेरी अपनी होनी चाहिए। और फिर से,
00:23:04ऐसी विज़ुअल स्टोरीटेलिंग होना जो आपके एप्लिकेशन के वास्तविक काम से
00:23:07जुड़ी हो, बहुत प्रभावी साबित होगी।
00:23:10तो मैंने अंत में क्लाउड कोड द्वारा दिए गए कुछ आइडियाज के आधार पर
00:23:15एक इमेज बनाई, और इसके लिए मैंने Midjourney का सहारा लिया; अब,
00:23:18आप अपनी पसंद का कोई भी इमेज जनरेटर इस्तेमाल कर सकते हैं,
00:23:21चाहे वह Nano Banana Pro हो या Seed Dream, इससे कोई फर्क नहीं पड़ता।
00:23:24मुझे इस तरह के कॉन्सेप्ट आर्ट के लिए Midjourney बहुत पसंद है
00:23:28क्योंकि Midjourney, खासकर वर्शन सात,
00:23:31मैंने वर्शन आठ का अभी ज़्यादा टेस्ट नहीं किया है।
00:23:33आप इसे एक तरह का अजीब प्रॉम्प्ट दे सकते हैं। जैसे मैंने इसे जो प्रॉम्प्ट दिया वह था,
00:23:38"मुझे एक बैकग्राउंड इमेज चाहिए जो Argus नाम की वेबसाइट का लैंडिंग पेज होगी।
00:23:41इसकी टैगलाइन 'देखें आगे क्या है' (see what's next) है।"
00:23:43और बस इस तरह के एक साधारण और अस्पष्ट प्रॉम्प्ट के साथ,
00:23:47मुझे बहुत सारी अलग-अलग शानदार चीज़ें मिलीं जिनमें से मैं चुनाव कर सकता था।
00:23:50और मैंने इसे देखा और मुझे लगा कि यह काफी ज़बरदस्त लग रहा है, है ना? और मैं अभी कल्पना कर सकता हूँ,
00:23:54जैसे कि बाईं ओर जानकारी हो,
00:23:55हम शायद कुछ चीज़ें ऊपर भी रख सकते हैं। मैं इसके साथ खेल सकता हूँ। जैसे,
00:23:59मुझे लगता है कि यह बहुत शानदार है। शायद हम किसी बिंदु पर कुछ एनिमेशन भी करें।
00:24:02तो एक बार जब मेरे पास मेरी इमेज आ गई, तो उसके बाद काम काफी आसान है।
00:24:06मैं बस इस इमेज को डाउनलोड करूँगा, इसे क्लाउड कोड को दूँगा और कहूँगा, "अरे,
00:24:10मैं इस इमेज को बैकग्राउंड के रूप में इस्तेमाल करके हीरो पेज को फिर से डिज़ाइन करना चाहता हूँ।"
00:24:13और क्लाउड कोड के अंदर, मैंने कहा,
00:24:17"मैं वास्तव में फ्रंट एंड को पूरी तरह से बदलना चाहता हूँ।
00:24:19मैं हीरो सेक्शन के बैकग्राउंड के रूप में इस इमेज का उपयोग करना चाहता हूँ।
00:24:21Argus ऐप के बारे में जानकारी बाईं ओर रखते हैं,
00:24:24इमेज दिखाने के लिए दाईं ओर कुछ खाली जगह (negative space) छोड़ देते हैं और टैगलाइन
00:24:27'देखें आगे क्या है' बना देते हैं।" तो देखते हैं कि यह इस लेवल पर क्या करता है। और फिर से,
00:24:30यह वह लेवल है जहाँ आपको अपनी रचनात्मकता को थोड़ा
00:24:34आज़ाद छोड़ना होगा क्योंकि अब तक,
00:24:37आप बहुत सारे ऐसे फ्रंट एंड डिज़ाइनों से रूबरू हो चुके हैं जो
00:24:39हर SaaS टेंप्लेट में दिखने वाली पुरानी और घिसी-पिटी चीज़ों से अलग हैं।
00:24:43इसका मतलब है कुछ शानदार आर्ट, जो भी हो, फिर से कहूँ तो,
00:24:46विज़ुअल स्टोरीटेलिंग ही हमारा लक्ष्य है और यह वास्तव में आपके काम को अगले लेवल पर ले जाएगा।
00:24:48और यहाँ हमारा नया हीरो सेक्शन है जो उस बिल्कुल नए
00:24:52बैकग्राउंड इमेज के साथ अपडेट किया गया है। और मैंने इसे थोड़ा छोटा कर दिया है,
00:24:52ताकि आप इसे पूरा देख सकें और क्लाउड कोड ने आगे बढ़कर,
00:24:56सारे कलर्स को भी अपडेट कर दिया है। अब, फिर से कह दूँ, यह सिर्फ पहला प्रयास था।
00:24:58हमने सिर्फ यह बैकग्राउंड जोड़ा है, लेकिन तुरंत ही,
00:25:02आप देख सकते हैं कि यह थोड़ा और ओरिजिनल और
00:25:06ज़्यादा क्रिएटिव महसूस होता है जो दूसरों से अलग दिखता है, है ना?
00:25:09और अब हम इसमें अपनी और भी खूबियाँ जोड़ना शुरू करते हैं।
00:25:12और शुरू करने के लिए, यह इस इमेज को अपस्केल करने जितना सरल हो सकता है।
00:25:15आप इसे Midjourney के अंदर कर सकते हैं, क्योंकि जैसा कि हम यहाँ देख रहे हैं,
00:25:19इमेज थोड़ी खिंची हुई और उतनी विस्तृत नहीं लग रही जितनी आप चाहेंगे,
00:25:21या हम इसमें मोशन जोड़ने जैसा कुछ कर सकते हैं।
00:25:24हमें बैकग्राउंड को स्थिर रखने की ज़रूरत नहीं है।
00:25:28हम वास्तव में वहाँ पीछे एक वीडियो भी लगा सकते हैं।
00:25:30इसे वीडियो में बदलना बहुत आसान है।
00:25:32आप बस Kling 3.0 या Veo 3.1 जैसी किसी जगह पर जाएँगे,
00:25:34जहाँ भी आप शुरुआती फ्रेम दे सकें।
00:25:36आदर्श रूप से आप एंड फ्रेम (end frame) भी दे सकें। जैसा कि आप यहाँ बाईं ओर देख रहे हैं,
00:25:40ताकि यह कोई अजीबोगरीब मोशन न करे क्योंकि आपको याद रखना होगा कि,
00:25:41आदर्श रूप से यह एक कम्पलीट लूप (loop) होना चाहिए।
00:25:45कभी-कभी AI इमेज को सही ढंग से लूप कराना मुश्किल हो सकता है।
00:25:49तो दूसरा सबसे अच्छा विकल्प लगभग 15 सेकंड का एक लंबा वीडियो बनाना है।
00:25:52और आप चाहेंगे कि मोशन बहुत ही सूक्ष्म हो। जैसा आप यहाँ देख रहे हैं, ठीक है?
00:25:55अगर मेरे पास यह बैकग्राउंड के रूप में हो, भले ही पक्षी पूरी तरह से स्थिर हों,
00:25:59जो कि बिल्कुल ठीक है, यह लगभग एक 'पैरालैक्स' (parallax) टाइप की चीज़ जैसा लगेगा।
00:26:03और चूँकि यह हीरो पेज है और यह 15 सेकंड तक चल रहा है,
00:26:07तो इस बात की संभावना कम है कि कोई वहाँ 30 सेकंड तक बैठकर
00:26:11पूरे वीडियो को देखेगा। इसलिए अगर अंत में कोई मामूली झटका महसूस होता भी है,
00:26:14तो भी कोई बात नहीं। लेकिन सौभाग्य से इसके लिए,
00:26:18चूँकि हमने मोशन को इतना सूक्ष्म रखा है,
00:26:22आप यह भी नहीं बता पाएंगे कि यह कब 15वें सेकंड से वापस पहले सेकंड पर आ गया।
00:26:24तो हम इसी का इस्तेमाल करेंगे। और आप शायद यह भी पूछ रहे होंगे कि,
00:26:25परफॉरमेंस का क्या? खैर, डेस्कटॉप पर परफॉरमेंस के मामले में,
00:26:29वीडियो के साथ यह बिल्कुल ठीक चलेगा, लेकिन हम क्लाउड कोड से कहेंगे, "अरे,
00:26:31अगर कोई मोबाइल यूज़र आपके मोबाइल वेबपेज पर आता है,
00:26:35तो उनके लिए वीडियो लोड नहीं होगा। इसके बजाय बस वही स्थिर इमेज लोड होगी।"
00:26:38तो मैंने इसे नई अपस्केल की गई इमेज दी और कहा कि मोबाइल के लिए इसका इस्तेमाल करें।
00:26:42यह उनके लिए वीडियो लोड नहीं करेगा। यह सिर्फ वही स्थिर छवि लोड करेगा।
00:26:45तो मैंने इसे नई अपस्केल की गई इमेज दी और कहा, मोबाइल के लिए इसका इस्तेमाल करो।
00:26:50और फिर मैंने इसे वीडियो का एक लिंक दिया और कहा, हे,
00:26:52इसे हीरो सेक्शन में बदल दो।
00:26:54और यहाँ अब मोशन के साथ पेज का लुक है, ठीक है?
00:26:58मुझे लगता है कि यह काफी अच्छा दिख रहा है। दूसरी बात यह है कि यह सूक्ष्म है, है ना?
00:27:02आप पागलपन भरा मोशन नहीं चाहते और बैकग्राउंड में कोई पूरा वीडियो गेम नहीं चलाना चाहते,
00:27:06जब तक कि आपको पता न हो कि आप क्या कर रहे हैं,
00:27:07लेकिन बादलों की सूक्ष्म हलचल जैसा कुछ,
00:27:11नीचे पानी हिल रहा है, है ना? फिर से, यह इसे देता है,
00:27:14यह आपके वेबपेज को,
00:27:15एक चरित्र देता है और अपने वेबपेज को मौलिक चरित्र का कुछ स्तर देना ही लेवल फाइव का मकसद है।
00:27:19जैसा कि मैं कहता रहता हूँ, पहले चार स्तरों में, हम बुनियादी बातें सीख रहे थे।
00:27:22हम देख रहे थे कि पेशेवर क्या करते हैं, यहाँ लेवल फाइव में, हम वास्तव में इसे कस्टमाइज़ कर रहे हैं।
00:27:25तो जैसे आपने हीरो सेक्शन के साथ किया,
00:27:28वैसे ही आपको हर दूसरे सेक्शन की ओर बढ़ना शुरू करना होगा, है ना?
00:27:32जैसे ये कार्ड्स, ये कार्ड्स भद्दे हैं। यहाँ का बैकग्राउंड थोड़ा उबाऊ है।
00:27:36यह हर बार बिल्कुल एक जैसा ही है। तो मैं क्या करने वाला हूँ?
00:27:38मैं प्रेरणा ढूँढूँगा। मैं 21st thought dev पर जाऊँगा। मैं Awwwards पर जाऊँगा।
00:27:42मैं इसे Claude Code में लाऊँगा। और फिर मैं इसे तब तक दोहराता जाऊँगा,
00:27:45जब तक कि मुझे यह पसंद न आ जाए। अब इस स्तर पर,
00:27:48जैसे-जैसे आप ये सभी विजुअल एडिट्स कर रहे होंगे, आपको Claude Code के अंदर बैठे हुए
00:27:51थोड़ी बाधा महसूस होगी। फिर से,
00:27:54टर्मिनल के अंदर होने, टेक्स्ट का उपयोग करने और एक विजुअल माध्यम में चीजों को बदलने की कोशिश के बीच
00:27:58हमेशा एक तनाव रहता है। इसलिए स्टेप सिक्स में,
00:28:03हम Claude Code से थोड़ा बाहर निकलना शुरू करेंगे क्योंकि लेवल सिक्स में ही
00:28:06हम कुछ बाहरी टूल्स लाना शुरू करते हैं जो हमें और भी अधिक बारीकी से काम करने देते हैं
00:28:11कि ये विजुअल चीजें कैसे एक साथ आ रही हैं।
00:28:14और हमारे पास बहुत सारे टूल्स उपलब्ध हैं।
00:28:17हमारे पास paper.design जैसी चीज़ें हैं। हमारे पास Stitch है, Figma है, है ना?
00:28:21हमारे पास pencil.dev है।
00:28:22यहीं पर अब आपके पास इन बाहरी प्रोग्राम्स को लाने की क्षमता और कौशल है
00:28:26ताकि आप थोड़ा और बदलाव कर सकें। और आज़माने के लिए एक बेहतरीन टूल, क्योंकि यह काफी AI-फ्रेंडली
00:28:29और उपयोग में सरल है, वह है Stitch। यह मुफ़्त भी है, है ना?
00:28:33यह Google की ओर से है और अनिवार्य रूप से हमें फ्रंट-एंड डिज़ाइन जैसी चीज़ों के साथ प्रयोग करने के लिए एक विजुअल कैनवास देता है।
00:28:37तो मैंने यहाँ जो किया वह यह है कि हम कुछ भी शुरू से शुरू नहीं कर रहे हैं।
00:28:38हम एक नया डिज़ाइन (redesign) कर रहे हैं। इसलिए मैंने इसे अपनी वेबसाइट के स्क्रीनशॉट दिए,
00:28:42हीरो पेज और बाकी के हिस्से दोनों के।
00:28:45और मैंने कहा, यहाँ वर्तमान वेबपेज सेटअप की एक झलक है। मुझे हीरो सेक्शन बहुत पसंद है।
00:28:47मुझे वहाँ का एस्थेटिक और रंग पसंद हैं,
00:28:51लेकिन मैं अपनी वेबसाइट के पूरे निचले आधे हिस्से को अपडेट करना चाहता हूँ, ठीक है?
00:28:53यह बहुत ही सपाट लगता है, है ना?
00:28:57मैं ऊपर वाली इमेजरी और कलर्स को नीचे भी लाना चाहता हूँ। देखते हैं आप क्या बना पाते हैं।
00:28:59तो चलिए देखते हैं कि इसने हमारे लिए नए डिज़ाइन के रूप में क्या तैयार किया है।
00:29:03और यह रहा वो जो हमें मिला।
00:29:05अब Stitch की अच्छी बात यह है कि मैं इससे उस नए डिज़ाइन का भी नया डिज़ाइन करवा सकता हूँ।
00:29:08तो अगर मैंने इसे चुना है,
00:29:10आप देख सकते हैं कि यह नीचे जाता है और मैं इसे किसी भी चैटबॉट की तरह प्रॉम्प्ट दे सकता हूँ।
00:29:14मैं इस पर राइट क्लिक करके वैरियंट्स पर भी जा सकता हूँ और फिर से,
00:29:15लेआउट, कलर स्कीम, इमेज आदि बदल सकता हूँ।
00:29:18चूंकि यह Stitch में किया गया एक नया डिज़ाइन था और मैं इसे शुरू से नहीं बना रहा था,
00:29:22तो यह सिर्फ एक इमेज है जो इसने बनाई है।
00:29:24लेकिन यह ऐसी चीज़ है जिसे मैं पूरी तरह से राइट क्लिक करके कॉपी कर सकता हूँ।
00:29:28और फिर अब उसे वापस Claude Code में ला सकता हूँ और कह सकता हूँ, हे,
00:29:30तुम इसके बारे में क्या सोचते हो? ठीक है? फिर से,
00:29:34ये विजुअल एडिटर टूल्स आइडिया बनाने की प्रक्रिया के लिए बहुत अच्छे हैं।
00:29:37और फिर से, ऐसे बहुत सारे टूल्स हैं। Pencil.dev एक और है।
00:29:38आप इसे हर जगह देखेंगे।
00:29:43यह वास्तव में तब अच्छी तरह काम करता है जब आप Cursor या VS Code के अंदर होते हैं,
00:29:46क्योंकि आपके पास वास्तव में कैनवास हो सकता है और आप वास्तविक समय में चीज़ों को एडिट कर सकते हैं।
00:29:47तो इस क्षेत्र में बहुत सारे टूल्स हैं और हर हफ्ते बाज़ार में नए टूल्स आ रहे हैं।
00:29:50तो मैंने उस इमेज को वापस Claude Code में डाला और बस इतना कहा, हे,
00:29:54तुम इसके बारे में क्या सोचते हो? तुम इस "ग्लास मॉर्फिज्म" इफ़ेक्ट के बारे में क्या सोचते हो
00:29:58जो हमें बैकग्राउंड इमेज के साथ मिला है? चलो इसे आज़माते हैं।
00:30:01और अब से लेकर वेबसाइट के मनचाहे रूप में आने तक आप यही करने वाले हैं,
00:30:03क्योंकि फ्रंट-एंड डिज़ाइन का यह वह चरण है जहाँ अब आप बस बारीक बदलाव कर रहे हैं।
00:30:06आप बस बदलाव करते रहेंगे, करते रहेंगे।
00:30:08अब तक आपने यह समझने का कौशल विकसित कर लिया है कि आप किस दिशा में जा रहे हैं,
00:30:12लेकिन यह एक बेहद दोहराव वाली प्रक्रिया है और इसका कोई वास्तविक शॉर्टकट नहीं है।
00:30:12लेकिन फिर से, अब आपके पास प्रेरणा खोजने और वास्तव में प्रयोग करने के लिए सभी टूल्स मौजूद हैं।
00:30:15तो खुद करीब 20 मिनट तक काम करने के बाद,
00:30:16Argus के साथ मुझे यह परिणाम मिला। तो सबसे पहले,
00:30:21आप कुछ छोटे बदलाव देखेंगे जो इसे एक वजन और एक प्रीमियम एहसास देते हैं।
00:30:25सबसे पहले लोडिंग सेक्शन है, ठीक है? जब मैं इसे रिफ्रेश करता हूँ, तो आप क्या देखते हैं?
00:30:27आप देखते हैं कि सारा टेक्स्ट लोड होने से पहले एक हल्की सी हिचकिचाहट होती है
00:30:31और यह इसे एक वजन देता है, यह इसे भारी महसूस कराता है।
00:30:34आपने यह भी गौर किया होगा कि मैंने फोंट बदल दिए हैं। फोंट बहुत महत्वपूर्ण हैं। टाइपोग्राफी बहुत बड़ी चीज़ है।
00:30:37अलग-अलग फोंट देखने और प्रेरणा लेने के लिए आप कहाँ जा सकते हैं?
00:30:40एक बेहतरीन जगह Google Fonts है। उनके पास अनगिनत फोंट हैं और वे सभी मुफ़्त हैं।
00:30:43वे अलग-अलग प्रकारों में बँटे हुए हैं और Claude Code उन सभी का उपयोग कर सकता है।
00:30:45तो अगर आप सोच रहे हैं कि मुझे कौन सा इस्तेमाल करना चाहिए, तो Google Fonts को ज़रूर देखें।
00:30:49हमने यहाँ नीचे एक स्क्रॉल सेक्शन जोड़ा है। हमने नीचे की तरफ यह टिकर जोड़ा है
00:30:52जो हमारे वीडियो और नीचे की बैकग्राउंड इमेज के बीच एक बॉर्डर का काम भी करता है।
00:30:57पहले, वीडियो हीरो सेक्शन से सीधे उसी बैकग्राउंड इमेज पर जाना काफी अजीब लग रहा था,
00:31:00लेकिन यह इसे एक अच्छा और स्वाभाविक बॉर्डर देता है।
00:31:03आप उन बदलावों को भी देखेंगे जो हम Stitch से लेकर आए हैं।
00:31:06अब हमारे पास यह ग्लास मॉर्फिज्म इफ़ेक्ट है जिसे हमें अभी थोड़ा और एडिट करने की ज़रूरत है।
00:31:08आप देखेंगे कि बाउंस होने पर यह थोड़ा कट सकता है, लेकिन फिर से यह उस बैकग्राउंड आर्टवर्क को
00:31:11दिखाता है जो हमारी चीज़ों को एक चरित्र देता है। और फिर आप कुछ सूक्ष्म चीज़ें भी देख सकते हैं।
00:31:14अगर मैं यहाँ रिफ्रेश करूँ, तो आप देखेंगे कि काउंटर बस शून्य से 10 मिलियन तक तेज़ी से बढ़ता है।
00:31:19मेरा मतलब है, ये वो छोटी-छोटी बारीकियाँ हैं जो दिखाती हैं कि आपने वास्तव में वेबसाइट की परवाह की है
00:31:25और इसमें कुछ स्तर का व्यावसायिक गर्व (professional pride) है।
00:31:30आप यह भी देखेंगे कि AI टूल्स और कंटेंट स्ट्रैटेजी पर एक लाइटिंग ज़ूम जैसा कुछ जाता है।
00:31:35और फिर से, यह बस ये छोटी-छोटी चीज़ें ही हैं। ये वो छोटी चीज़ें हैं
00:31:38जो सच तो यह है कि ज़्यादातर लोग शायद गौर भी नहीं करेंगे।
00:31:41फिर भी जब आप इन सभी को मिलाते हैं, तो अंततः आपको कुछ ऐसा मिलता है जो सुसंगत दिखता है
00:31:44और जिसे आपने परवाह के साथ बनाया है, चाहे आपने टूल के रूप में AI का उपयोग किया हो।
00:31:48मुद्दा यह है कि इसे बारीकी से गढ़ा (crafted) गया था। इसमें वो सभी छोटी चीज़ें हैं।
00:31:52मेरा मतलब है, जैसे ऊपर का स्क्रॉल बार, आप देखते हैं कि वह कैसे आगे बढ़ता है।
00:31:54फिर से, यह बस ये बहुत ही छोटी चीज़ें हैं। और मैंने इसे कैसे प्रॉम्प्ट दिया?
00:31:59सच कहूँ तो, यह उन सभी चीज़ों का मिश्रण था जिनके बारे में हमने अब तक बात की है।
00:32:03जैसे, मैंने देखा है कि मुझे किस तरह की चीज़ें पसंद हैं।
00:32:07मैं उनके स्क्रीनशॉट लेता हूँ और उन्हें Claude Code में लाता हूँ, लेकिन उससे भी ज़्यादा,
00:32:10मैं वेब डिज़ाइन का कोई एक्सपर्ट नहीं हूँ। इसलिए मैंने कुछ चीज़ों पर जो किया,
00:32:12जैसे मुझे तुरंत पता चल गया था कि मुझे Stitch में देखे गए ग्लास मॉर्फिज्म कार्ड्स पसंद आए,
00:32:16क्योंकि याद रखें, Stitch ने ही हमें सबसे पहले यह विचार दिया था।
00:32:20और जब Claude Code ने उन्हें मूल रूप से बनाया था, तो वे बस थोड़े सपाट थे।
00:32:24उनमें पेज से बाहर उभरने वाला कोई प्रभाव नहीं था। तो मैंने कहा, हे,
00:32:27चलो इन्हें थोड़ा वजन देते हैं। इन्हें पेज से उभरने वाला बनाते हैं।
00:32:31लेकिन मैंने Claude Code से यह भी कहा कि मैं चाहता हूँ कि तुम वेब सर्च करो
00:32:34कि इस तरह की चीज़ें करने के लिए सबसे अच्छे वेब डिज़ाइन अभ्यास (best practices) क्या हैं।
00:32:38और यह पता लगाने के साथ-साथ कि हम इन कार्ड्स को कैसे उभारना और वजन देना चाहते हैं,
00:32:40कुछ और चीज़ें लेकर आओ जो हमारी वेबसाइट को और अधिक प्रीमियम लेकिन सूक्ष्म तरीके से दिखा सकें।
00:32:42और यह बहुत सारे अलग-अलग आइडिया लेकर आया। मैंने उन सभी आइडियाज़ को देखा,
00:32:45कुछ को छोड़ दिया और कुछ को रख लिया, लेकिन ऐसा ही सामान्य तरीका होता है, है ना?
00:32:48आपको पूरी तरह से खुद पर निर्भर रहने की ज़रूरत नहीं है।
00:32:52Claude इंटरनेट पर जा सकता है और फिर से बेहतरीन तरीकों को देख सकता है,
00:32:53लेकिन याद रखें, नियंत्रण हमेशा आपके हाथ में है। आप ड्राइवर की सीट पर हैं
00:32:57और इसके साथ मजे करने से न डरें। जैसा कि मैंने कहा, ये सभी छोटी चीज़ें,
00:32:59यहीं पर आप इसे चरित्र देते हैं और इसे अपना बनाते हैं, है ना?
00:33:03जितना अधिक हम इसे आपका और आपकी रचनात्मक भावना का प्रतिबिंब बना सकें,
00:33:06यह उतना ही बेहतर दिखेगा। सचमुच, क्योंकि अगर यह आपका प्रतिबिंब है
00:33:08और जो आप स्क्रीन पर दिखाना चाहते हैं उसका चित्रण है, तो उसे AI का कचरा कहना मुश्किल है।
00:33:12उसे AI टेम्पलेट कहना मुश्किल है क्योंकि यह आपका है।
00:33:17और हालाँकि यह लेवल ऊपरी तौर पर Stitch जैसे बाहरी टूल्स के इस्तेमाल के बारे में है,
00:33:20मुझे लगता है कि वास्तव में यह लेवल सिक्स वही सब है जो मैंने अभी कहा।
00:33:22जैसे सुधार के लिए Stitch जैसे बाहरी टूल्स का उपयोग करना। लेकिन अंततः इस लेवल पर,
00:33:25अब आप अंततः रचनात्मक रूप से सोचने और फ्रंट-एंड डिज़ाइन में खुद को व्यक्त करने में सक्षम हैं
00:33:29और Claude Code को एक टूल की तरह इस्तेमाल कर रहे हैं, जबकि पहले कुछ लेवल्स में,
00:33:32हम बस साथ चल रहे थे। इसके साथ अब हमारे पास अंतिम लेयर बचती है, लेयर सेवन, है ना?
00:33:36और वहाँ क्या हो रहा है? 3D के बारे में यह सब क्या है? खैर, पहले ही बता दूँ,
00:33:40यह एक ऐसी जगह है जहाँ हम में से कोई भी शायद काम नहीं करने वाला है।
00:33:41जब हम आर्किटेक्ट और 3D चीज़ों की बात करते हैं, तो यह वो जगह है जहाँ बड़े खिलाड़ी खेलते हैं।
00:33:45यह वास्तव में ऐसी चीज़ नहीं है जो हम कर पाएंगे। मुझे लगता है कि आज,
00:33:47मार्च 2026 के अंत तक, मुझे नहीं पता कि यह वास्तव में अभी हमारे बस की बात है या नहीं
00:33:50क्योंकि यह तब की बात है जब हम कस्टम WebGL, शेडर्स और 3D अनुभवों की बात करते हैं।
00:33:53हम उन वेबसाइटों की बात कर रहे हैं जो लगभग एक वीडियो गेम जैसी दिखती हैं।
00:33:57उदाहरण के लिए, इस वेबसाइट को ही देख लीजिए।
00:34:02क्या आपको लगता है कि यह कुछ ऐसा है जहाँ हम बस Control+U, Control+A करके
00:34:04HTML और CSS देख सकते हैं और समझ सकते हैं कि क्या हो रहा है?
00:34:08नहीं, यह सब कला की तरह है, है ना?
00:34:11यह डिज़ाइनर्स की एक टीम है जिसने इसे बनाने में बहुत लंबा समय बिताया है
00:34:14 और यह वाकई शानदार है। अब, सिद्धांत रूप में, क्या AI ऐसा कर सकता है?
00:34:17शायद, लेकिन मैं ईमानदार रहूँगा। यह आपके या मेरे लिए बहुत दूर की बात है।
00:34:19और मैंने इसे यहाँ बस यह दिखाने के लिए रखा है कि क्या संभव है।
00:34:23क्योंकि जब आप ऐसी वेबसाइटें देखते हैं, और अगर आप ऐसी और देखना चाहते हैं,” तो Awwwards पर जाएँ,
00:34:25जिसके बारे में मैंने पहले बात की थी, और उनके 'साइट्स ऑफ द डे' या 'साइट्स ऑफ द मंथ' पर जाएँ।
00:34:27उन सभी में एक ही चीज़ होती है कि वे पूरी तरह से कस्टम होती हैं।
00:34:31और शायद AI हमें कुछ सालों में इस क्षेत्र में काम करने की अनुमति दे दे।
00:34:34लेकिन यह वाकई बहुत कूल है। पूरी वेबसाइट डिज़ाइन की दुनिया बहुत दिलचस्प है।
00:34:37यह सब सीधा कला जैसा है। और जैसा कि मैंने कहा,
00:34:41जब आप पहली बार इस क्षेत्र में आते हैं, तो आप बस एक ही जैसा सास (SaaS) कंटेंट बार-बार देखते हैं।
00:34:45लेकिन जब आप ऐसा कुछ देखते हैं, तो आपका दिमाग चकरा जाता है।
00:34:51तो यह पूरी तरह से लेवल सेवन है। और अगर आप जानते हैं कि AI के साथ ऐसा कैसे किया जाता है,
00:34:55तो आपको यूट्यूब पर वीडियो बनाने चाहिए क्योंकि मैं भी सीखना चाहूँगा।
00:34:57लेकिन मैंने यह लेवल सिर्फ इस Igloo वेबसाइट को दिखाने के लिए बनाया है।
00:35:02क्योंकि यह बहुत कूल है। तो इसे ज़रूर देखें और बस इसे देखकर दंग रह जाएँ
00:35:05और सोचें कि भविष्य में आप क्या कर सकते हैं।
00:35:07तो Claude Code के साथ फ्रंट-एंड डिज़ाइन के हमारे सात स्तरों के अंत में मैं आपको यहीं छोड़ूँगा।
00:35:12मुझे उम्मीद है कि आपको इससे कुछ और मिले न मिले, लेकिन इस तरह के मुकाम तक पहुँचने के लिए
00:35:13कौशल के विकास का जो विचार है, वह ज़रूर मिला होगा। क्योंकि यह पूरी तरह से संभव है।
00:35:17और विचार यह है कि पहले हमें वो चीज़ें देखनी होंगी जो हमें पसंद हैं, फिर हमें उन्हें डिकोड करना सीखना होगा।
00:35:20वेबसाइटों की नकल (cloning) करने का विचार बहुत महत्वपूर्ण है, है ना?
00:35:25क्योंकि आप Claude Code के माध्यम से बहुत कुछ सीखेंगे कि किसी और ने आपकी पसंद की वेबसाइट कैसे बनाई।
00:35:30और उस प्रक्रिया के दौरान, आप उन सभी विभिन्न तकनीकों और प्रभावों के बारे में शिक्षित होंगे
00:35:34जिनके बारे में आप जानते भी नहीं थे कि वे संभव हैं।
00:35:37और उसी प्रक्रिया के साथ, आप अपनी वेबसाइट पर जा सकते हैं और उन्हें अपनी रचनात्मक शैली में लागू करना शुरू कर सकते हैं।
00:35:41यही सब कुछ है। यह इस बारे में नहीं है कि कोई एक विशेष हुनर है
00:35:45और आप उस हुनर का Claude Code में इस्तेमाल करते हैं और वाह, वेबसाइट देखो!
00:35:47सच तो यह है कि अगर यह इतना आसान होता, तो हर किसी की वेबसाइट अच्छी दिखती।
00:35:50हर किसी की वेबसाइट अच्छी नहीं दिखती। तो ज़ाहिर है कि यह इतना आसान नहीं है, है ना?
00:35:53इसमें थोड़ा और काम है। मेरा मतलब है, पसंद (taste) का विचार और यह कि AI में पसंद नहीं होती,
00:35:54मुझे लगता है कि यह कुछ हद तक सच है, लेकिन मुझे लगता है कि ज़्यादा सटीक बात यह है
00:35:57कि हमें अपनी पसंद को व्यक्त करने में बहुत कठिनाई होती है।
00:36:00हमें अपनी पसंद व्यक्त करने में मुश्किल होती है क्योंकि हमें सही शब्दों का पता ही नहीं होता,
00:36:03क्योंकि हम वेब डिज़ाइनर नहीं हैं। हमें उसकी शब्दावली नहीं पता।
00:36:07हमें उसका नामकरण (nomenclature) नहीं पता। और यह वास्तव में सामान्य AI चीज़ों के साथ बहुत होता है,
00:36:09सिर्फ वेब डिज़ाइन में ही नहीं। वह किसी भी कोडिंग वाली चीज़ पर भी लागू होता है।
00:36:12जैसे अगर आप उस क्षेत्र से नहीं हैं, तो आप बस उस भाषा को बोलना नहीं जानते।
00:36:16और इससे आपके और Claude Code के बीच एक अनुवाद की समस्या पैदा होती है,
00:36:17और अंतिम परिणाम कुछ खराब और साधारण सा निकलता है।
00:36:19लेकिन उम्मीद है कि इस रोडमैप से गुजरते हुए, आपने समय के साथ इन चीज़ों को कम करने का रास्ता देखा होगा।
00:36:22तो उम्मीद है कि आपको इससे कुछ मिला होगा। मुझे यह करने में मज़ा आया।
00:36:24मुझे कमेंट्स में बताएं कि आपने क्या सोचा। हमेशा की तरह Chase AI Plus को ज़रूर देखें,
00:36:27अगर आप Claude Code मास्टरक्लास सीखना चाहते हैं। हम आपको वहाँ पाकर खुश होंगे, फिर मिलेंगे।
00:36:29Porque adoraria aprender como, mas enfim,
00:36:30eu criei este nível puramente para, honestamente, exibir este site da Igloo.
00:36:34Porque é muito legal. Então, hum, com certeza dê uma olhada e tipo,
00:36:38apenas deixe sua mente explodir e pense no que você poderia fazer
00:36:42no futuro.
00:36:43E então é aqui que vou deixar vocês ao final dos nossos sete níveis de
00:36:46design front-end com Claude Code. O que espero que tenham tirado disso mais do que
00:36:51qualquer coisa é a ideia da progressão das habilidades para chegar
00:36:56a algo assim. Porque é algo totalmente factível.
00:36:58E é a ideia de que primeiro precisamos ver coisas de que gostamos,
00:37:01depois precisamos aprender como desconstruí-las.
00:37:03Essa ideia de clonar sites, eu acho que é super, super importante, certo?
00:37:06Porque você aprenderá muito ao ter, essencialmente, o Claude Code te guiando
00:37:10sobre como outra pessoa criou um site que você amou. E através desse processo,
00:37:14você será educado em todas essas técnicas e efeitos diferentes.
00:37:18Que você nem sabia que eram possíveis. E através desse processo,
00:37:21você pode então ir para o seu próprio site e começar a aplicá-los no seu estilo
00:37:26criativo, certo? É sobre isso que realmente se trata. O que não é, é tipo, 'Ei,
00:37:30existe essa habilidade super especial e você usa essa habilidade especial no Claude Code'.
00:37:33E uau, olha o site. Tipo, a verdade seja dita, se fosse tão fácil,
00:37:37o site de todo mundo seria bonito. O site de todo mundo não é bonito.
00:37:40Então, claramente não é tão fácil, certo? Há um pouco mais envolvido. Digo,
00:37:44acho que toda essa ideia de gosto e da IA não ter gosto,
00:37:47acho que isso é meio verdade,
00:37:48mas acho que o mais preciso é a ideia de que temos
00:37:53muita dificuldade em articular nosso gosto e temos dificuldade em
00:37:57articular nosso gosto porque nem sabemos as palavras corretas para usar
00:38:02porque não somos web designers. Não conhecemos o vocabulário.
00:38:05Não conhecemos a nomenclatura.
00:38:06E isso é, na verdade, algo muito comum com tudo que envolve IA em
00:38:10geral. É como se a IA pudesse fazer qualquer coisa se você soubesse como pedir.
00:38:13E saber como pedir significa que você precisa entender o que
00:38:15é possível e quais são as palavras para descrever essas coisas. E
00:38:19espero que, ao passar por esses sete níveis, agora você tenha uma
00:38:21compreensão muito melhor do que é possível com o Claude Code e as ferramentas
00:38:25que você tem à sua disposição. Então, muito obrigado por assistir.
00:38:29Eu realmente espero que você tenha achado isso útil. Se achou, por favor
00:38:32considere se inscrever no canal. Significa muito para mim.
00:38:37E, você sabe, deixe um comentário abaixo se tiver alguma dúvida.
00:38:40Eu adoraria ouvir de vocês. Então, sim, obrigado novamente.
00:38:43E nos vemos no próximo vídeo. Tchau!