00:00:00Claude code के अंदर एक दानव छिपा है और इसे AI Slop कहा जाता है।
00:00:03हर चीज़ के लिए पर्पल ग्रेडिएंट्स और इंटर फ़ॉन्ट, और हर एक वेबसाइट पर
00:00:09वही कार्ड सेटअप। आप जानते हैं, मैं किस तरह के AI Slop की बात कर रहा हूँ,
00:00:12लेकिन आज मैं आपको इस दानव को मारने में मदद करने के लिए 10 अलग-अलग टूल देने जा रहा हूँ
00:00:16और नहीं, उनमें से कोई भी फ्रंट एंड डिज़ाइन स्किल नहीं है। वास्तव में,
00:00:20इनमें से बहुत से टूल अपेक्षाकृत नए हैं।
00:00:22इसलिए भले ही आप कुछ समय से Claude code डिज़ाइन क्षेत्र में हों,
00:00:26मैं वादा करता हूँ कि आज आप कुछ नया सीखेंगे।
00:00:28अब आज हम जिन सभी टूल्स के बारे में बात करेंगे, वे मूल रूप से एक ही उद्देश्य को पूरा करते हैं
00:00:31और वह है आपको Claude code के साथ उच्च गुणवत्ता वाला फ्रंट एंड वेब डिज़ाइन बनाने का
00:00:35एक मौका देना, क्योंकि Claude code जितना अच्छा है,
00:00:39यह एक ऐसा क्षेत्र है जहाँ यह बेहद कमज़ोर है।
00:00:42और लिस्ट में पहला टूल Impeccable है।
00:00:44यह एक एकल स्किल है जिसमें 18 कमांड शामिल हैं।
00:00:46और मैं इसका लिंक, साथ ही आज कवर किए जाने वाले हर दूसरे टूल का लिंक
00:00:50डिस्क्रिप्शन में दूँगा।
00:00:51अब मुझे Impeccable वास्तव में पसंद है क्योंकि यह जो करने में सक्षम है वह बहुत ही व्यापक है।
00:00:55यह एक स्किल है, लेकिन इसमें 18 कमांड हैं।
00:00:58और अगर हम GitHub पर दिए गए लिंक से impeccable.style पर जाएँ,
00:01:01तो हम उनके सभी कमांड्स को एक्शन में देख सकते हैं। और इससे भी बेहतर,
00:01:05हम सामान्य AI आउटपुट देख सकते हैं—जैसे इंटर फ़ॉन्ट, पर्पल ग्रेडिएंट्स,
00:01:09और फिर अलग-अलग कमांड्स का उपयोग करने के बाद का परिणाम। उदाहरण के लिए,
00:01:15हमारे पास 'clarify' जैसा कुछ है,
00:01:16जो पूरी तरह से UX गलतियों और एरर मैसेज के बारे में है।
00:01:19और आप यहाँ दोनों के बीच का अंतर देख सकते हैं।
00:01:21इसमें एक क्रोम एक्सटेंशन भी है,
00:01:23जो आपकी वेबपेज पर सीधे AI slop एस्थेटिक्स को हाईलाइट कर देगा,
00:01:28जैसा कि इस उदाहरण में है। और मुझे वास्तव में पसंद है कि यह स्किल एंटी-पैटर्न का उपयोग कैसे करती है।
00:01:32तो यह मूल रूप से लार्ज लैंग्वेज मॉडल्स को सिखाता है
00:01:34कि AI slop वास्तव में कैसा दिखता है—ये बॉर्डर एक्सेंट्स,
00:01:38ये साइड टैब एक्सेंट बॉर्डर्स जो आप हर जगह देखते हैं, आप जानते हैं,
00:01:42स्पार्क लाइन्स, ग्लास मॉर्फिज्म, सही है?
00:01:45हम बस इन चीजों को बार-बार और बार-बार देखते हैं।
00:01:47तो क्यों न हम एक ऐसी स्किल का उपयोग करें जो LLMs को बताती है कि यह स्पष्ट रूप से AI slop है?
00:01:52इसके बजाय कि 'फ्रंट एंड डिज़ाइन' जैसी स्किल का उपयोग करें, जो कहती है कि
00:01:54"कृपया AI slop न करें," क्योंकि वह काम नहीं करता है। और जैसा कि आप कल्पना कर सकते हैं,
00:01:58यह स्किल काफी सघन है जैसा कि हम यहाँ देखते हैं। और मैं स्क्रॉल करना जारी रखता हूँ।
00:02:03और ऐसा इसलिए है क्योंकि इसमें प्रत्येक विशिष्ट डिज़ाइन डोमेन के लिए
00:02:07कई संदर्भ हैं।
00:02:08आप इन्हें सब-स्किल्स और उपर्युक्त 18 अलग-अलग कमांड्स के रूप में सोच सकते हैं।
00:02:13अब,
00:02:14इन सभी कमांड्स को एक्शन में देखने का सबसे आसान तरीका वास्तव में impeccable docs पर जाना है।
00:02:17और जैसा कि आपने हीरो पेज पर देखा था,
00:02:21आप पहले और बाद के उदाहरण देख सकते हैं।
00:02:25और इसलिए यह सब कुछ विजुअली देखना, केवल डिस्क्रिप्शन को देखने
00:02:29और यह उम्मीद करने से बहुत बेहतर है कि Claude code वही उपयोग करेगा जिसकी आप अपेक्षा करते हैं।
00:02:33और यह केवल विशुद्ध रूप से विजुअल चीज़ नहीं है।
00:02:35जब आप 'adapt' जैसी स्किल्स को देखते हैं,
00:02:37तो यह सुनिश्चित करता है कि यह वास्तव में मोबाइल और टैबलेट जैसे विभिन्न प्लेटफार्मों पर
00:02:41काम करे, न कि केवल डेस्कटॉप पर। इसलिए मेरा सुझाव है कि आप इसे ज़रूर देखें।
00:02:45इसे आए हुए केवल एक महीना हुआ है। अब, टूल नंबर दो पर जाने से पहले,
00:02:48मेरे Claude code मास्टरक्लास का एक छोटा सा प्रचार, जिसे मैंने पिछले महीने ही रिलीज़ किया था।
00:02:52और मैंने पहले ही इसमें बहुत सारे अपडेट डाल दिए हैं।
00:02:54जीरो से AI देव बनने के लिए यह नंबर एक जगह है।
00:02:57और इसकी कीमत बस कुछ ही दिनों में बढ़ने वाली है।
00:03:01इसलिए यदि आप इसे प्राप्त करना चाहते हैं, तो इसे ज़रूर चेक करें।
00:03:04पिन किए गए कमेंट में एक लिंक है। अब टूल नंबर दो के बारे में बात करते हैं,
00:03:06जो कि Skill UI है। अब यह एक ऐसा टूल है जिसके बारे में मुझे आज सुबह ही पता चला है।
00:03:12इसे आए हुए अभी 24 घंटे भी नहीं हुए हैं। इसे सात स्टार मिले हैं।
00:03:15हम एकदम शुरुआती दौर में हैं। मैंने इसे नहीं बनाया। मैं इस व्यक्ति को नहीं जानता।
00:03:18मैंने बस उसे इसके बारे में ट्विटर पर पोस्ट करते हुए देखा।
00:03:21मैं बस स्क्रॉल कर रहा था। मैंने देखा, और सोचा कि यह एक बेहतरीन स्किल लग रही है।
00:03:24और यह हमें किसी भी डिज़ाइन सिस्टम को क्लाउड-रेडी स्किल में रिवर्स इंजीनियर करने की अनुमति देता है।
00:03:29इसका क्या मतलब है? इसका मतलब है कि हम इस स्किल को लेते हैं।
00:03:31हम इसे किसी ऐसी वेबसाइट की ओर इशारा करते हैं जो पहले से मौजूद है।
00:03:34और यह मूल रूप से विश्लेषण करता है कि वह वेबसाइट कैसे बनाई गई थी और उसे एक
00:03:39टेम्पलेट में, एक स्किल में बदल देता है। चलिए मैं इसे एक्शन में दिखाता हूँ। तो यहाँ,
00:03:45हमारे पास Stripe वेबसाइट है, बहुत अच्छी वेबसाइट है, बहुत कुछ चल रहा है।
00:03:49जाहिर है इसमें बहुत सारे कस्टम ग्राफिक्स और ऐसी चीजें हैं।
00:03:52Claude code के लिए इन ग्राफिक्स और विजुअल्स के बिना इसे फिर से बनाना
00:03:56अनिवार्य रूप से असंभव है। अभी के लिए। मान लीजिए मुझे सामान्य डिज़ाइन पसंद है,
00:04:00बस यह कि कार्ड और लेआउट के मामले में इसे कैसे सेट किया गया है।
00:04:03और मैं इसे अपनी खुद की वेबसाइट के आधार के रूप में उपयोग करना चाहता था। खैर,
00:04:06हमने पिछले वीडियो में उन तरीकों के बारे में बात की है जिनसे हम ऐसा कर सकते हैं।
00:04:08जैसे हम HTML और इन सभी चीजों को देखेंगे, लेकिन आप जानते हैं,
00:04:11यह अंततः 60, 70% समाधान जैसा ही होता है। इसलिए मैंने वह Skill UI स्किल ली।
00:04:15मैंने इसे Stripe की ओर इशारा किया और फिर मैंने कहा, हे,
00:04:17मुझे उसी स्टाइल में एक नकली Stripe वेबसाइट बना कर दो।
00:04:21और यह वह चीज़ है जो इसने वन-शॉट में तैयार की। मैंने उसे बस इतना ही कहा था।
00:04:25मैंने उसे और कोई जानकारी नहीं दी और उसने इसे बना दिया।
00:04:27और इसमें निश्चित रूप से एक Stripe वाली वाइब है। फिर से,
00:04:32ये Stripe पर कस्टम ग्राफिक्स हैं।
00:04:34यह सिर्फ एक प्रॉम्प्ट के आधार पर उसे फिर से बनाने में सक्षम नहीं होगा, लेकिन आप जानते हैं,
00:04:39यह वास्तव में काफी अच्छा है। अगर आप मुझसे पूछें तो,
00:04:44इसमें अभी भी कुछ मानक AI चीज़ें हैं।
00:04:47जैसे कि चीज़ें कैसे सेट अप की गई हैं और आइकन,
00:04:50लेकिन इसने केवल कार्ड्स के साथ दो-बाई-दो का बेंटो बॉक्स जैसा काम नहीं किया।
00:04:55मुझे उनके द्वारा उपयोग किए गए रंग पसंद हैं। मुझे ग्राफ़िक पसंद है, लेकिन यहाँ,
00:04:59यह ईमानदारी से मेरे लिए बहुत अच्छा है क्योंकि मैंने बस कहा था कि Stripe की
00:05:03वेबसाइट देखो और मुझे एक आधार बना कर दो। और चूँकि इसने इसे एक स्किल में बदल दिया,
00:05:06अब मेरे पास एक Stripe डिज़ाइन स्किल है, जो अभी प्रोजेक्ट लेवल पर है,
00:05:10लेकिन मैं इसे किसी भी समय उपयोग कर सकता हूँ।
00:05:12तो मान लीजिए कि मैं एक और वेबसाइट बनाना चाहता हूँ जो Stripe स्टाइल का उपयोग करती हो।
00:05:16मैं ऐसा कर सकता हूँ, क्योंकि मैं Skill UI को किसी भी चीज़ पर पॉइंट कर सकता हूँ।
00:05:18और आप इसे यहाँ GitHub पर उनके उदाहरण वीडियो में एक्शन में देख सकते हैं,
00:05:22जहाँ उन्होंने इस टूल को Notion की ओर पॉइंट किया था।
00:05:24और फिर उन्होंने Claude code को बताया कि मुझे मूल रूप से एक Notion क्लोन बना कर दो।
00:05:27और वही है जो आप वहाँ देख रहे हैं। तो इस स्किल का उपयोग करने के लिए,
00:05:30आप बस यहाँ GitHub पेज पर दिए गए इंस्टॉल कमांड्स का पालन करें।
00:05:33और इसके दो अलग-अलग मोड हैं। इसलिए यदि आप कुछ ऐसा चाहते हैं जो मूल रूप से,
00:05:38स्क्रॉल स्क्रीनशॉट और विभिन्न इंटरैक्शन जैसी हर चीज़ को कैप्चर करे,
00:05:41जैसे जब आपका माउस चीज़ों के ऊपर जाता है, तो यह Playwright का उपयोग करता है।
00:05:45यह सब समझने के लिए। इसलिए यह सिर्फ HTML को नहीं देख रहा है,
00:05:48जैसे सामान्य चीज़ें करती हैं, जैसा कि मेरी कस्टम साइट ब्रेकडाउन स्किल ने
00:05:52अतीत में किया है। इसलिए यदि आप अल्ट्रा मोड का उपयोग करते हैं, तो यह वास्तव में Playwright को लाता है।
00:05:55तो यहाँ परिष्कार का एक निश्चित स्तर है। कुल मिलाकर,
00:05:58बहुत ही चालाक स्किल है, आप एकदम शुरुआती दौर में हैं। यदि आप इसका उपयोग करना शुरू करते हैं,
00:06:00तो अब आप एक 'हिपस्टर GitHub रेपो स्किल' यूजर की तरह हैं।
00:06:03और यदि आप एक नई वेबसाइट शुरू कर रहे हैं और आपको कोई अंदाज़ा नहीं है कि
00:06:07शुरुआत कैसे करनी चाहिए, तो मैं आपको ऐसा करने का सुझाव दूँगा, क्योंकि फिर से,
00:06:10यह एक बेहतरीन शुरुआती बिंदु है। मैं यहाँ से जो चाहूँ उसे एडिट कर सकता हूँ।
00:06:13अब टूल नंबर तीन एक ऐसा टूल है जिसके बारे में मैं ईमानदार रहूँगा कि यह थोड़ा मेरी
00:06:17विशेषज्ञता से बाहर है, लेकिन मुझे यह बहुत दिलचस्प लगता है।
00:06:19मैं इसके बारे में और जानने और खुद इसका उपयोग करने की कोशिश कर रहा हूँ।
00:06:21और वह है एक WebGPU स्किल।
00:06:23तो WebGPU मूल रूप से वेब डिज़ाइन घटकों की तरह हैं जहाँ
00:06:28वेबपेज आपके ग्राफ़िक्स कार्ड के साथ इंटरैक्ट कर रहा होता है।
00:06:30और यह हमें सुपर कूल एनिमेशन बनाने की अनुमति देता है। जैसा कि आप यहाँ देखते हैं,
00:06:34इस तरह की चीज़ें भी।
00:06:36जब हम बात करते हैं, यदि आप मेरे Claude code वेब डिज़ाइन के सात लेवल देखते हैं,
00:06:40और हमने लेवल सात पर Igloo वेबसाइट जैसी चीज़ों को भी देखा था,
00:06:44तो वे WebGL और कस्टम शेडर्स जैसी चीज़ों का उपयोग कर रहे थे।
00:06:47मैं इसी तरह के क्षेत्र की बात कर रहा हूँ।
00:06:49और इसलिए यह स्किल Claude code को सिखाती है,” कि
00:06:52मूल रूप से ऐसा कोड कैसे लिखा जाए जो यह सब कर सके।
00:06:54तो यह उसे बताता है कि रेंडर कैसे सेट किया जाए, शेडर्स कैसे बनाए जाएँ,
00:06:58नोड-आधारित सामग्री कैसे बनाई जाए। और इस स्किल का उपयोग करके,
00:07:00मैंने इसे बस कुछ टेक्स्ट प्रॉम्प्ट दिए और यह इसे बनाने में सक्षम था।
00:07:06अब क्या यह उतना ही कूल है जितना कि आप जानते हैं, यह वाला? नहीं,
00:07:08लेकिन मैंने इसे दो मिनट में कर लिया—वैसे GPU के साथ इसमें 10 मिनट लगे,
00:07:13लेकिन बस कुछ टेक्स्ट प्रॉम्प्ट और मुझे पता भी नहीं था कि मैं क्या कर रहा हूँ।
00:07:16तो अगर इस तरह की चीज़ें आपको दिलचस्प लगती हैं और यहाँ मैं जिन सभी टूल्स की बात कर रहा हूँ,
00:07:19उनमें से शायद यह सबसे हटकर है,
00:07:22लेकिन मुझे यह पसंद आया। अगर इस सब में आपकी रुचि है,
00:07:26तो यह एक ऐसी स्किल है जिसे आपको चेक करना चाहिए क्योंकि यह आपको उस दिशा में
00:07:28ले जाती है।
00:07:29लेकिन जाहिर है कि यह कुछ ऐसा है जो हमारे कार्ड कैसे दिखते हैं या
00:07:32वेबसाइट की टाइपोग्राफी बदलने की तुलना में कहीं अधिक एडवांस है,
00:07:35लेकिन यह ध्यान में रखने वाली बात है।
00:07:37टूल नंबर चार पिछले महीने के सबसे लोकप्रिय AI रिपॉजिटरी में से एक है।
00:07:41और वह है awesome-design.md। इस पर इस समय 50,000 से अधिक स्टार्स हैं।
00:07:46तो यह जबरदस्त तरीके से लोकप्रिय हो रहा है।
00:07:48और यह कुछ हद तक उस Skill UI टूल के समान है जिसके बारे में हमने बात की थी क्योंकि
00:07:52यह एक ऐसी स्किल है जो हमें उन अन्य वेबसाइटों को देखने की अनुमति देती है जो पहले से मौजूद हैं
00:07:57और उन्हें उस वेबसाइट के लिए टेम्पलेट के रूप में उपयोग करने देती है जिसे हम बनाने जा रहे हैं। अब,
00:08:01Awesome Design भारी रूप से 'Stitch' से प्रभावित है।
00:08:04और हम Stitch के बारे में थोड़ी देर बाद बात करेंगे।
00:08:06और Stitch में design.md, यानी डिज़ाइन मार्कडाउन फ़ाइलों का यह कॉन्सेप्ट है,
00:08:11और वे बस प्रॉम्प्ट्स हैं जो बताते हैं कि आपको अपनी वेबसाइट कैसे बनानी चाहिए।
00:08:14फर्क यह है कि Google ने इन प्रॉम्प्ट्स को बनाने का बहुत अच्छा काम किया है।
00:08:18जैसा कि आप यहाँ देखते हैं। और यह ओवरव्यू के बारे में बहुत विशिष्ट हो जाता है।
00:08:22नॉर्थ स्टार क्या है, हम रंग कैसे कर रहे हैं? यह बस एक शानदार स्ट्रक्चर जोड़ता है।
00:08:26बजाय फिर से, Claude code की फ्रंट एंड डिज़ाइन स्किल जैसी किसी चीज़ के,
00:08:29जो कि बस कहती है, 'चलो इस तरह से कुछ करते हैं'।
00:08:32यह इस बारे में बहुत अधिक ठोस है कि इसे क्या करने की आवश्यकता है।
00:08:34और इसलिए इसने इन बहुत विशिष्ट डिज़ाइन सिस्टम प्रॉम्प्ट्स के विचार को लिया है और
00:08:39अनिवार्य रूप से उन्हें बहुत सारे अलग-अलग डोमेन की कई अलग-अलग वेबसाइटों के लिए
00:08:43तैयार किया है। तो 11 Labs जैसा कुछ,
00:08:47मैं यहाँ उस पर क्लिक करता हूँ।
00:08:50मैं देख सकता हूँ मूल रूप से पूरा 11 Labs डिज़ाइन आइडिया
00:08:55हिस्सों में बँटा हुआ—फॉर्म एलिमेंट्स, कार्ड उदाहरण, बटन, हेडिंग,
00:09:00टाइपोग्राफी, रंग, वह सब। और यह सिर्फ लाइव प्रीव्यू नहीं है।
00:09:04हम देखते हैं कि यह वास्तविक प्रॉम्प्ट है जिसे हम फिर Claude code को दे सकते हैं। और फिर से,
00:09:07उनके पास यहाँ बहुत सारी वेबसाइटें हैं, जिनमें गैर-टेक्स्ट चीज़ें भी शामिल हैं,
00:09:10जैसे Bugatti, सही है? तो यह अनिवार्य रूप से,
00:09:15आपको अपनी पसंद की किसी वेबसाइट के बिल्डिंग ब्लॉक्स दे रहा है ताकि आप उन्हीं
00:09:19बिल्डिंग ब्लॉक्स का उपयोग करके अपनी वेबसाइट बना सकें।
00:09:21तो जबकि Skill UI टूल जो हमने पहले देखा था वह किसी भी वेबसाइट को देखता है
00:09:25और फिर उसे आपके लिए बनाता है।
00:09:26यह बस कॉम्पोनेंट पार्ट्स को अलग-अलग कर रहा है।
00:09:29और फिर यह हम पर निर्भर है कि हम इसे स्वयं बनाएँ। अब Awesome Design की तारीफ करने के बाद,
00:09:33यह उचित ही है कि टूल नंबर पाँच के लिए,
00:09:35हम उस एप्लिकेशन के बारे में बात करें जिसने वास्तव में इसे प्रेरित किया।
00:09:38और वह खुद Google का Stitch है। तो Stitch बहुत बढ़िया है।
00:09:41यदि आप अपना वेबपेज बनाना शुरू करने से पहले एक विजुअल अप्रोच के साथ
00:09:46शुरुआत करना चाहते हैं।
00:09:48तो आप क्या करते हैं कि आप Stitch में जाते हैं और उसे एक प्रॉम्प्ट देते हैं कि आप
00:09:50क्या बनाने की कोशिश कर रहे हैं। इसमें प्रेरणा के लिए स्क्रीनशॉट भी शामिल हो सकते हैं।
00:09:53यह वही design.md फ़ाइल बनाएगा जैसा आपने पहले देखा था,
00:09:57लेकिन इसके अपने स्वाभाविक परिवेश में।
00:09:59तो यह हमें रंगों, टाइपोग्राफी, लेबल,
00:10:04बटन का विवरण देता है, और फिर हम यहाँ पूरा डिज़ाइन सिस्टम देख सकते हैं,
00:10:08वही design.md जो आपने पहले देखा था,
00:10:11लेकिन अब यह आपके द्वारा दिए गए प्रॉम्प्ट के अनुसार कस्टमाइज़ किया गया है। और एक बार जब यह ऐसा कर लेता है,
00:10:14तो यह आपको उस वेबसाइट के बहुत सारे वेरिएंट देता है जिसे आप
00:10:18बनाने जा रहे हैं। यह सिर्फ हीरो सेक्शन नहीं है। यह पूरा करता है।
00:10:20और एक बार जब यह वह मॉकअप बना लेता है, तो मैं इसे अपनी इच्छानुसार एडिट कर सकता हूँ। मैं इस पर क्लिक कर सकता हूँ।
00:10:25मैं राइट क्लिक कर सकता हूँ। मैं विशिष्ट वेरिएंट प्राप्त कर सकता हूँ।
00:10:28मैं विभिन्न वेरिएंट्स को कस्टमाइज़ कर सकता हूँ। मैं इसे बदल सकता हूँ,
00:10:31कि मुझे तीन वेरिएंट चाहिए या पाँच वेरिएंट। मैं इसे एक क्रिएटिव रेंज,
00:10:34निर्देश, आदि दे सकता हूँ।
00:10:35मूल रूप से मेरे पास अपनी संभावित वेबसाइट के बहुत सारे विजुअल्स तैयार करने के
00:10:40बहुत सारे अलग-अलग तरीके हैं। और यह बहुत अच्छा है क्योंकि यह कठिन होता है।
00:10:43जब आप Claude code के अंदर होते हैं और हर बार जब आप विजुअल बदलाव करना चाहते हैं,
00:10:46सही है? उसे कोड लिखना पड़ता है। आपको देव सर्वर चलाना पड़ता है।
00:10:48आपको इसे वेबपेज पर चेक करना पड़ता है। और अक्सर जब हम ये चीजें कर रहे होते हैं,
00:10:52विशेष रूप से फ्रंट एंड डिज़ाइन के नजरिए से,
00:10:56मैं विकल्पों को अपने सामने देखना चाहता हूँ, सही है?
00:10:58मेरे लिए इन तीनों को देखना और यह कहना बहुत आसान है कि ठीक है, मुझे यह पसंद नहीं है।
00:11:02मुझे यह पसंद नहीं है। शायद मुझे यह पसंद है, बजाय इसके कि 'नहीं Claude code, फिर से कोशिश करो'।
00:11:06तो यह भी मुफ़्त है,
00:11:11जो कि बहुत अच्छी बात है। और यहाँ मैं जो कुछ भी बनाता हूँ,
00:11:13उसे क्लाउड कोड में ले जाना बहुत आसान है क्योंकि अगर मैं अपनी पसंद के डिज़ाइन पर क्लिक करता हूँ,
00:11:16तो मैं 'मोर' पर जाकर उसका कोड देख सकता हूँ।
00:11:19फिर मैं कोड को कॉपी करके क्लाउड कोड में ला सकता हूँ।
00:11:23और आप इसे फिग्मा (Figma) में कॉपी करने जैसी चीज़ें भी कर सकते हैं।
00:11:25आप इसे AI स्टूडियो में भी ला सकते हैं,
00:11:27लेकिन क्लाउड कोड का सबसे आसान रास्ता एक्सपोर्ट करना और फिर क्लिपबोर्ड पर कॉपी करना है।
00:11:31एक MCP भी उपलब्ध है। तो आप यह सब क्लाउड कोड टर्मिनल के ज़रिए कर सकते हैं।
00:11:35लेकिन सच कहूँ तो, मुझे समझ नहीं आता कि इससे आपको असल में क्या फायदा मिलता है।
00:11:39मुझे लगता है कि इन विज़ुअल चीज़ों पर खुद काम करना ज़्यादा बेहतर है।
00:11:43अब मेरे पास क्लाउड कोड में 'स्टिच्ड' (stitched) पर एक पूरा विस्तृत वीडियो है और मैं उसका लिंक
00:11:46ऊपर दे दूँगा अगर आप इसे और अधिक विस्तार में देखना चाहते हैं। अब,
00:11:49मैंने इस वीडियो में स्किल नंबर छह को रखने के बारे में काफी सोचा क्योंकि मुझे लगता है कि यह
00:11:52अब हर जगह मौजूद है। लगभग हर कोई जानता है कि यह है, लेकिन आप कभी नहीं जानते।
00:11:55हो सकता है कि कोई इसे पहली बार देख रहा हो। और वह है UI UX प्रो मैक्स स्किल।
00:12:00मुझे लगता है कि यह एंथ्रोपिक फ्रंट एंड डिज़ाइन स्किल का
00:12:05असली उत्तराधिकारी होना चाहिए। तो एक ऐसी एंथ्रोपिक फ्रंट एंड
00:12:09डिज़ाइन स्किल की कल्पना करें जो वास्तव में अलग-अलग तरह की,
00:12:14अलग-अलग वेबसाइटों और अलग-अलग डोमेन की परंपराओं पर प्रशिक्षित हो क्योंकि
00:12:19हर वेबसाइट को किसी सामान्य SAS या बी-टियर SAS जैसा दिखने की ज़रूरत नहीं है।
00:12:23और यह स्किल इसी बारे में है।
00:12:25यह एक इंटेलिजेंट डिज़ाइन सिस्टम जनरेटर है।
00:12:27तो यह वास्तव में आपसे सवाल पूछेगा।
00:12:29यह पता लगाएगा कि आपकी वेबसाइट किस बारे में है,
00:12:31आपकी सर्विस क्या है, और फिर उसके काम के आधार पर उसे डिज़ाइन करेगा।
00:12:35इसमें 161 उद्योग-विशिष्ट रीजनिंग नियम (industry specific reasoning rules) हैं।
00:12:39तो उन्होंने इसे वाकई बहुत विस्तार से बनाया है।
00:12:43आपको बिना स्किल वाली कोई साधारण AI क्वालिटी की चीज़ नहीं मिलेगी,
00:12:47और न ही आपको वह मिलेगा जो धीरे-धीरे फ्रंट एंड डिज़ाइन स्किल के साथ
00:12:51क्लाउड कोड का साधारण AI वर्शन बनता जा रहा है।
00:12:52इसे ढेर सारे स्टैक-विशिष्ट मार्गदर्शन के साथ भी बनाया गया है।
00:12:55ताकि आप सिर्फ रिएक्ट जैसी किसी चीज़ में ही न उलझे रहें और अंततः यह एक बेहतरीन
00:13:00स्किल है। अगर आपको बिल्कुल अंदाज़ा नहीं है कि आपको किस दिशा में जाना चाहिए।
00:13:04हमने पहले जिन चीज़ों के बारे में बात की है, उनमें से बहुत सी चीज़ों के लिए आपको
00:13:09कुछ अंदाज़ा होना ज़रूरी है, खासकर अगर आपके पास कोई उदाहरण वेबसाइट हो, है ना?
00:13:12जब हमने स्किल UI देखा, अगर मेरे पास कोई उदाहरण है,
00:13:15तो मैं लगभग उसे कॉपी कर सकता हूँ और 'ऑसम डिज़ाइन' के साथ भी ऐसा ही है।
00:13:19जैसे मैं उन वेबसाइटों में से चुन रहा हूँ जो पहले से मौजूद हैं।
00:13:21अगर आप उस रास्ते पर नहीं जाना चाहते,
00:13:22लेकिन फिर भी थोड़े उलझन में हैं कि आपको कहाँ होना चाहिए, तो इस स्किल का उपयोग करें।
00:13:26यह एक बेहतरीन शुरुआती बिंदु है।
00:13:28अब टूल नंबर सात कंपोनेंट्स और हमारे वेबपेज की छोटी-छोटी बारीकियों
00:13:33को निखारने के बारे में है। और यहीं हम 21st.dev का उपयोग करते हैं,
00:13:36जो एक ऐसी वेबसाइट है जिसमें हमारे चुनने और सीधे अपनी वेबसाइट में जोड़ने के लिए
00:13:40लाखों अलग-अलग कंपोनेंट्स हैं। उदाहरण के लिए,
00:13:43मान लीजिए कि मैं अपने हीरो पेज (hero page) के लिए कुछ ढूंढ रहा था। तो,
00:13:46मैं बस 21st.dev के हीरोज सेक्शन में जाऊँगा और उसे सर्च करूँगा।
00:13:51जैसे मुझे यह पसंद आया, यह हीरो पेज जो स्पलाइन (spline) का उपयोग करता है।
00:13:56तो इसमें यह रोबोट है जो वास्तव में मेरे माउस का पीछा करता है। अब,
00:14:00स्पलाइन का उपयोग कैसे करें और उसका कोड कैसे लिखें, यह समझने के बजाय,
00:14:04मैं बस 21st.dev पर जाता हूँ।
00:14:06मैं ऊपर दिए गए 'कॉपी प्रॉम्प्ट' बटन पर क्लिक करके प्रॉम्प्ट कॉपी करता हूँ।
00:14:09मैं क्लाउड कोड में जाता हूँ और इसे पेस्ट कर देता हूँ। बस, मेरा हीरो सेक्शन तैयार है।
00:14:14अब,
00:14:15जाहिर है हीरो सेक्शन्स शायद सबसे भारी चीज़ हैं जिन्हें हम अपने वेबपेज में
00:14:19इंपोर्ट कर सकते हैं क्योंकि अगर हमारे पास इधर-उधर देखने वाला रोबोट वाला हीरो पेज है,
00:14:22तो हमारी पूरी वेबसाइट को उस सौंदर्य के साथ मेल खाना होगा। इसलिए किस्मत से,
00:14:26मुझे लगता है कि आपको 21st.dev जैसी चीज़ों का सबसे ज़्यादा फायदा तब मिलता है जब
00:14:29छोटे कंपोनेंट्स और बटन जैसी छोटी-छोटी बारीकियों की बात आती है, है ना?
00:14:33सिर्फ यह तथ्य कि इस बटन पर यह छोटी सी लाइट है।
00:14:36जब मैं इसे घुमाता हूँ, तो यह आपके सामान्य बटन की तुलना में आपकी
00:14:39वेबसाइट को बेहतर बना देगा, या कार्ड्स जिनमें इस तरह का,
00:14:43लाइटिंग एनीमेशन है जो मेरे माउस का पीछा करता है। फिर से,
00:14:46ये छोटी-छोटी बारीकियाँ हैं, ये चमकती हुई परछाइयाँ।
00:14:49यही वो चीज़ें हैं जो आपके वेबपेज को ऊपर उठाती हैं,
00:14:52इसे और प्रीमियम बनाती हैं और बस ऐसा दिखाती हैं कि आपने इस पर ध्यान दिया है।
00:14:56और आपने वास्तव में कोशिश की है। और कुछ नहीं तो,
00:14:59इसे आपको सिर्फ प्रेरणा देनी चाहिए क्योंकि ऐसा
00:15:03कहीं नहीं लिखा है कि आप इनमें से किसी भी कंपोनेंट के लिए प्रॉम्प्ट कॉपी नहीं कर सकते,
00:15:07चाहे वह बॉर्डर हो या हीरो सेक्शन या जो भी,
00:15:09और फिर क्लाउड कोड के साथ उसे अपनी इच्छानुसार बदल सकते हैं।
00:15:12यह 'सब कुछ या कुछ नहीं' जैसी बात नहीं है।
00:15:14और मुझे लगता है कि विशेष रूप से हम में से उन लोगों के लिए जो वेब डिज़ाइन
00:15:17बैकग्राउंड से नहीं आते हैं, मैं निश्चित रूप से नहीं आता,
00:15:19आप बस यह नहीं जानते कि आप क्या नहीं जानते, और इन सभी अलग-अलग तरीकों के संपर्क में आने से,
00:15:23जैसे कि हम एक बटन कैसे बना सकते हैं, आपका दिमाग अलग-अलग
00:15:26दिशाओं में चलने लगता है। और यह समय के साथ आपकी मदद करता है।
00:15:29जितना अधिक आप इसके संपर्क में आते हैं, उतना ही आप अपनी पसंद विकसित कर पाते हैं
00:15:32कि आपको क्या पसंद है। लेकिन जब तक आप इन चीज़ों को नहीं देखते,
00:15:34तब तक आपको पता ही नहीं चलता कि आपको क्या पसंद है।
00:15:36आपने केवल वही देखा है जो क्लाउड कोड आपको देता है।
00:15:39तो मेरा सुझाव है कि आप इसे ज़रूर देखें, इनमें से लगभग सभी चीज़ें मुफ़्त हैं और
00:15:43आपको कम से कम कुछ छोटी चीज़ों को एकीकृत करना चाहिए,
00:15:46जैसे बटन और कार्ड्स के तरीकों को अपने अगले वेबपेज में शामिल करें।
00:15:49अब एक वाक्यांश जो आप आजकल बार-बार सुनते हैं वह है 'AI का कोई स्वाद (taste) नहीं है'। खैर,
00:15:53क्या होगा अगर हमने इसे एक स्किल के रूप में स्वाद दे दिया? तो,
00:15:56यही हम टूल नंबर आठ के साथ करने की कोशिश करते हैं।
00:15:59और वह है 'टेस्ट स्किल रेपो' (taste skill repo)।
00:16:01यह स्किल्स का एक संग्रह है जो क्लाउड कोड को
00:16:06कुछ हद तक स्वाद देने का प्रयास करता है, यानी साधारण AI कचरे से दूर जाने की कोशिश,
00:16:11जो कि एक ऐसा विषय है जिसे आप बार-बार देखते हैं।
00:16:13अब इस टेस्ट स्किल में कई अलग-अलग सब-स्किल्स शामिल हैं जैसे आप यहाँ देख रहे हैं,
00:16:17और इसमें अलग-अलग सेटिंग्स हैं। तो आप इसे एडजस्ट कर सकते हैं कि यह
00:16:21सामान्य AI जनरेशन की तुलना में कितना अधिक कलात्मक या अलग हो सकता है।
00:16:24और आप यहाँ जो देख रहे हैं वह उन वेबसाइटों का उदाहरण है जिन्हें
00:16:28इस स्किल का उपयोग करके बनाया गया है। और तुरंत ही,
00:16:31आप देखेंगे कि यह थोड़ा अलग है, है ना? मेरा मतलब है, यह कोई बहुत अद्भुत नहीं है,
00:16:36लेकिन तुरंत अलग दिखता है और अलग होना अच्छी बात है।
00:16:38यह जितना कम हर दूसरे SAS टेम्पलेट जैसा दिखेगा, उतना ही बेहतर है।
00:16:41और इनमें से कई में स्क्रॉल एनिमेशन जैसी चीज़ें शामिल हैं और,
00:16:46हमें बार-बार वही बेंटो बॉक्स (bento boxes) देखने को नहीं मिल रहे हैं।
00:16:47तो यह एक अच्छा स्किल है जिसे आप
00:16:52कम से कम आज़माना चाहेंगे और देखना चाहेंगे कि यह आपके सामान्य क्लाउड कोड
00:16:56जनरेशन की तुलना में कैसा काम करता है। अब टूल नंबर नौ आप में से कई लोगों को बहुत सरल लगेगा,
00:16:59लेकिन आप उन लोगों की संख्या देखकर हैरान रह जाएंगे जो यह नहीं जानते
00:17:03कि गूगल फॉन्ट्स (Google Fonts) भी कोई चीज़ है।
00:17:05गूगल फॉन्ट्स लाखों अलग-अलग फॉन्ट्स
00:17:10का एक विशाल मुफ़्त भंडार है जिसे आप अपने सभी कोडिंग प्रोजेक्ट्स में उपयोग कर सकते हैं।
00:17:14आपको केवल उन्हीं पाँच फॉन्ट्स का गुलाम बनने की ज़रूरत नहीं है
00:17:18जिन्हें क्लाउड कोड हर चीज़ के लिए उपयोग करता है।
00:17:20आप बस गूगल फॉन्ट्स पर जा सकते हैं और यह दिखावट,
00:17:24एहसास और फैमिली के आधार पर बंटा हुआ है और क्लाउड कोड को बताएं कि इसे,
00:17:29या उसे इस्तेमाल करे क्योंकि क्लाउड कोड के पास इन सब का एक्सेस भी है।
00:17:31क्योंकि टाइपोग्राफी (typography) इस बात का एक बहुत बड़ा हिस्सा है
00:17:34कि आपका डिज़ाइन कैसा दिखता और महसूस होता है। इसके अलावा,
00:17:38आप गूगल फॉन्ट्स को सर्च करने में मदद के लिए क्लाउड कोड का उपयोग कर सकते हैं।
00:17:42बस क्लाउड कोड को बताएं कि आप किस तरह की वेबसाइट बना रहे हैं,
00:17:45आप किस तरह का माहौल चाहते हैं।
00:17:47और इसे आपको देखने के लिए एक या पाँच उदाहरण फॉन्ट्स देने चाहिए।
00:17:50आप इसे यहाँ वास्तविक समय में देख सकते हैं। फिर से,
00:17:53आप सब कुछ किस्मत पर नहीं छोड़ना चाहते और सिर्फ इस पर निर्भर नहीं रहना चाहते कि
00:17:57क्लाउड कोड उस दिन कैसा महसूस करता है कि वह आपको कौन सा फॉन्ट देगा क्योंकि
00:18:01यह हमेशा इंटर (Inter) ही होगा। और अंत में,
00:18:05टूल नंबर 10, प्लेराइट CLI (Playwright CLI)।
00:18:06अब प्लेराइट CLI अपने आप में कोई डिज़ाइन टूल नहीं है,
00:18:10हालाँकि यह कुछ ऐसा है जिसके बारे में हमने पहले स्किल UI के साथ बात की है
00:18:13और इसकी वेब पेजों के स्क्रीनशॉट लेने की क्षमता के बारे में भी।
00:18:15तो आप इसे रिसर्च और नए विचारों के लिए एक टूल के रूप में उपयोग कर सकते हैं।
00:18:19मैं वास्तव में जिस चीज़ पर ध्यान केंद्रित करना चाहता हूँ,
00:18:21वह रूप (form) और कार्य (function) का विचार है और यह कि जब हम फ्रंट एंड पर चीज़ें बनाते हैं,
00:18:25तो एक फॉर्म सबमिशन पेज जैसी सरल चीज़ के बारे में सोचें,
00:18:27हमें उसका परीक्षण (test) करना होगा।
00:18:29हमें यह सुनिश्चित करना होगा कि ये चीज़ें वास्तव में काम करती हैं।
00:18:32और इसे बड़े पैमाने पर करने का सबसे आसान तरीका प्लेराइट CLI है, प्लेराइट MCP नहीं।
00:18:36CLI बहुत ज़्यादा प्रभावी है।
00:18:38और जिस तरह से हम ऐसा करते हैं वह यह है कि एक बार जब आप अपना फ्रंट एंड डिज़ाइन बना लेते हैं,
00:18:41तो CLI टूल इंस्टॉल करने के बाद आपको बस क्लाउड कोड को बताना होगा,
00:18:44कि मैं चाहता हूँ कि आप प्लेराइट CLI का उपयोग करके इस वेबपेज पर हर इंटरैक्शन का परीक्षण करें।
00:18:49यह क्रोम के कई अलग-अलग इंस्टेंस बनाएगा।
00:18:52अगर आप उन्हें वास्तव में देखना चाहते हैं तो इसे 'हेडेड' (headed) रख सकते हैं या 'हेडलेस' (headless)।
00:18:55ताकि यह अदृश्य रहे और यह अपने आप परीक्षण करेगा।
00:18:57इससे फ्रंट एंड डिज़ाइन की पूरी प्रक्रिया बहुत तेज़ हो जाती है क्योंकि मुझे लगता है
00:19:02कि हम सभी ने ऐसा अनुभव किया है जहाँ हमने कुछ जोड़ा और फिर उसे देखना चाहा।
00:19:05और फिर हम उसका परीक्षण करना चाहते हैं और इसमें बहुत समय लगता है,
00:19:06खासकर फॉर्म सबमिशन जैसी चीज़ों में,
00:19:08जहाँ बहुत सारे अजीब मामले (edge cases) होते हैं कि कैसे कोई अजीब उपयोगकर्ता
00:19:13वहाँ जाएगा और वास्तव में अपनी जानकारी डालेगा।
00:19:15तो ये मेरे 10 पसंदीदा क्लाउड कोड डिज़ाइन से संबंधित स्किल्स,
00:19:20प्लगइन्स और CLI थे। मुझे उम्मीद है कि उनमें से कम से कम कुछ आपके लिए नए थे।
00:19:24मेरा मतलब है, स्किल UI के बारे में शायद सिर्फ तीन लोग ही जानते होंगे। तो, अह,
00:19:29लेकिन हाँ, फ्रंट एंड डिज़ाइन का क्षेत्र,
00:19:31मुझे क्लाउड कोड के साथ बहुत दिलचस्प लगता है क्योंकि यह स्वाद (taste) के मामले में
00:19:36इतना खराब है।
00:19:37हालाँकि मुझे आजकल 'स्वाद' शब्द कहना भी पसंद नहीं है क्योंकि हर कोई
00:19:40सिर्फ इसी के बारे में बात करता है, लेकिन चूँकि क्लाउड कोड इसमें खराब है,
00:19:42तो यह आपके लिए, एक व्यक्ति के तौर पर, एक अच्छी बात होनी चाहिए, है ना?
00:19:46क्योंकि अब यह एक ऐसा क्षेत्र है जहाँ आप खुद को भीड़ से अलग कर सकते हैं
00:19:50और जब भी आप खुद को उन सभी लोगों से अलग कर सकते हैं जो आजकल
00:19:55क्लाउड कोड का इस्तेमाल कर रहे हैं, तो वह एक अच्छी बात है।
00:19:57और ये स्किल्स और टूल्स आपको ऐसा करने में मदद कर सकते हैं। तो हमेशा की तरह,
00:20:00मुझे बताएं कि आपको क्या लगा।
00:20:01अगर आप मास्टर क्लास का हिस्सा बनना चाहते हैं तो चेज़ AI प्लस (chase AI plus) को ज़रूर देखें,
00:20:04और मैं आपसे फिर मिलूँगा।