00:00:00तो अपडेट्स कभी नहीं रुकते।
00:00:02Anthropic ने अभी Claude Design जारी किया है,
00:00:05जो अब हमें वेब ऐप्स बनाने के लिए एक इंटरफ़ेस देता है,
00:00:09वेबसाइट्स, और लगभग वह सब कुछ जो हम चाहते हैं
00:00:11Claude इंटरफ़ेस के माध्यम से।
00:00:13यह Google Stitch का उनका वर्शन है।
00:00:16और जैसा कि आप इस डेमो वीडियो में देख सकते हैं,
00:00:18यह सब आपको हर चीज़ को बदलने की क्षमता देने के बारे में है
00:00:21इन डिज़ाइन्स के साथ मैक्रो से लेकर माइक्रो तक।
00:00:23और हम सिर्फ वेब ऐप्स की बात नहीं कर रहे हैं,
00:00:25हम मोबाइल डिज़ाइन्स की भी बात कर रहे हैं।
00:00:27और यह थोड़ा मज़ेदार है क्योंकि जब हम
00:00:28Anthropic और Claude Code की बात करते हैं,
00:00:30तो इसकी सबसे बड़ी कमज़ोरियों में से एक फ्रंट एंड डिज़ाइन है।
00:00:32तो यह देखना कि वे अब एक पूर्ण विकसित
00:00:34एप्लिकेशन के साथ आ रहे हैं
00:00:36जो इस कमज़ोरी को संभालता है, काफी कूल है।
00:00:39तो इस वीडियो में, मैं आपको दिखाऊंगा कि यह कैसे काम करता है।
00:00:41हम एक त्वरित डेमो करेंगे
00:00:42ताकि आप खुद इसे आज़मा सकें।
00:00:43अब, Claude Design को Opus 4.7 को ध्यान में रखकर बनाया गया था
00:00:46और यह उपलब्ध है यदि आप
00:00:49Pro Max से लेकर Enterprise तक किसी भी प्लान पर हैं।
00:00:51और यह प्रोटोटाइप से लेकर मॉकअप
00:00:53और PowerPoint प्रेजेंटेशन तक सब कुछ करता है।
00:00:54और यह कुछ ऐसा है जिसे हम Microsoft PowerPoint
00:00:57जैसी चीज़ों में एक्सपोर्ट कर सकते हैं या Canva पर भेज सकते हैं।
00:00:59अब, इसकी अच्छी चीज़ों में से एक ब्रांड डिज़ाइन है।
00:01:01तो आप इसे एक कोड बेस दे सकते हैं,
00:01:03मान लीजिए आपकी वेबसाइट का कोड बेस,
00:01:05और यह वेबसाइट से सभी ब्रांड एसेट्स निकाल लेगा
00:01:09ताकि यह रंगों और टाइपोग्राफी जैसी चीज़ों को
00:01:11आपके द्वारा बनाए जा रहे डिज़ाइन से मिला सके।
00:01:12तो शुरू करने के लिए, आपको बस claud.ai/design पर जाना होगा
00:01:15और यह आपको एक वेबपेज पर ले जाएगा जो इस तरह दिखता है।
00:01:18अब, तुरंत बाईं ओर हमारे पास कुछ अलग विकल्प हैं,
00:01:20प्रोटोटाइप, स्लाइड डेक, आप टेम्पलेट या अन्य का उपयोग कर सकते हैं।
00:01:23यहाँ नीचे की तरफ, जैसा कि मैं बात कर रहा था,
00:01:25हमारे पास एक डिज़ाइन सिस्टम बनाने की क्षमता है।
00:01:27तो अगर मैं डिज़ाइन सिस्टम सेटअप करने जाता हूँ,
00:01:29तो मैं इसे अपनी कंपनी का नाम जैसी चीज़ें दे सकता हूँ,
00:01:33और फिर मैं अपने डिज़ाइन सिस्टम के उदाहरण दे सकता हूँ।
00:01:36आपको ऐसा करने की ज़रूरत नहीं है,
00:01:38लेकिन यह मदद करेगा यदि आपके पास पहले से ही कुछ ऐसा है
00:01:40जिससे आप इसे मैच करना चाहते हैं।
00:01:41तो आप इसे अपने GitHub का लिंक दे सकते हैं।
00:01:43आप वास्तव में फोल्डर को ड्रैग कर सकते हैं।
00:01:45तो अगर आपके पास अपने कंप्यूटर पर कोड बेस है,
00:01:48तो आप उसे यहाँ ड्रैग कर सकते हैं,
00:01:49या आप बस फोंट, लोगो और एसेट्स जोड़ सकते हैं,
00:01:51साथ ही कोई अन्य नोट्स भी।
00:01:52तो मैंने बस अपने कंप्यूटर पर अपनी वेबसाइट के एसेट्स
00:01:55वाले फोल्डर को चुना,
00:01:57और फिर मैंने बस जनरेशन जारी रखने पर क्लिक किया।
00:01:59जब आप ऐसा करते हैं, विशेष रूप से यदि यह एक बड़ा कोड बेस है,
00:02:01तो पहली बात, यह पूरा कोड बेस अपलोड नहीं करेगा।
00:02:03यह पता लगाएगा कि कौन सी फाइलें वास्तव में काम की हैं।
00:02:05और दूसरी बात, आपको एक पॉप-अप विंडो मिलेगी जो कहती है,
00:02:07"हे, इसमें 15 से 20 मिनट लग सकते हैं,"
00:02:09क्योंकि यह आपकी सभी फाइलों की जांच करता है।
00:02:11अब, अगर आप एकदम शुरुआत से कुछ करना चाहते हैं,
00:02:12तो आप वह भी पूरी तरह से कर सकते हैं।
00:02:13तो हम बस एक नया प्रोटोटाइप शुरू करेंगे।
00:02:16हम इसे Chase डेमो कहेंगे।
00:02:17हमारे पास दो विकल्प हैं।
00:02:18आपके पास एक रफ वायरफ्रेम जैसा विकल्प है,
00:02:20या हम सीधे हाई फिडेलिटी मॉक-अप में जा सकते हैं।
00:02:23तो हम मॉक-अप करेंगे।
00:02:25यह आपको इस पेज पर ले जाएगा।
00:02:26और फिर से, यहाँ निश्चित रूप से Stitch वाली वाइब्स आ रही हैं।
00:02:28तो मैं इसे बताने जा रहा हूँ,
00:02:29आइए एक इंटरैक्टिव डार्क थीम ग्राफ़िक डिज़ाइन करें
00:02:31जो दिखाता हो कि शहरों के बीच संस्कृति कैसे बहती है,
00:02:33चमकते रास्तों से जुड़े शहरों वाला एक घूमता हुआ ग्लोब।
00:02:35यह वही चीज़ है जो उन्होंने डेमो में की थी,
00:02:37लेकिन मैं यह देखने के लिए उत्सुक हूँ कि हमें यहाँ जो मिलता है
00:02:40वह वास्तव में उस एसेट से मेल खाता है जो उन्होंने वीडियो में दिखाया था,
00:02:43और हमें किस तरह के अंतर देखने को मिलेंगे।
00:02:45उन्होंने अपने विज्ञापन में इसे कितना बढ़ा-चढ़ाकर दिखाया?
00:02:47तो हम आगे बढ़ेंगे और इसे भेजेंगे।
00:02:48और वैसे, आप यहाँ देख सकते हैं,
00:02:50हम मॉडल जैसी चीज़ें भी चुन सकते हैं।
00:02:52आप चीजें अटैच कर सकते हैं।
00:02:53आप यहाँ वास्तव में वॉइस का उपयोग कर सकते हैं और जो चाहें इम्पोर्ट कर सकते हैं।
00:02:55तो तुरंत, यह हमसे कुछ सवाल पूछना शुरू कर देता है,
00:02:57जो मुझे बहुत पसंद है।
00:02:58यह लगभग Claude code के अंदर प्लान मोड के समान है।
00:03:02तो हम किस तरह की संस्कृति सोच रहे हैं?
00:03:04आइए बस मिक्स्ड ग्लोब स्टाइल करते हैं।
00:03:07आइए, यह फ्लो पाथ करते हैं।
00:03:13यह कूल लग रहा है।
00:03:14कलर पैलेट के लिए हम क्या करना चाहते हैं?
00:03:16आइए मल्टी-ह्यू करते हैं।
00:03:18और तुरंत, मुझे यह तथ्य पसंद आया
00:03:20कि अब हमें ये प्रॉम्प्ट मिल रहे हैं।
00:03:21अगर मैं Stitched में जाता हूँ, तो मुझे वास्तव में यह नहीं मिलेगा।
00:03:24अगर मैं दूसरी चीज़ों में जाता हूँ, तो मुझे वास्तव में यह नहीं मिलेगा।
00:03:26जैसे Claude code के अंदर सबसे शक्तिशाली चीज़ों में से एक,
00:03:29और हमने दूसरे वेब डिज़ाइन लेसन्स में इस बारे में बात की है,
00:03:31वह है इस तरह का संवाद होना
00:03:33ताकि हमारी योजना में इन कमियों को दूर किया जा सके।
00:03:37और यह तथ्य कि यह मुझसे ये सभी सवाल पूछ रहा है, बहुत बड़ी बात है।
00:03:39यह मुझसे काफी सवाल पूछ रहा है।
00:03:40यहाँ तक कि Claude code का सामान्य प्लान मोड भी केवल तीन के करीब पूछता है।
00:03:43तो हम रोटेट करने के लिए ड्रैग करेंगे।
00:03:45हमें किन शहरों को दिखाना चाहिए?
00:03:47आइए टॉप 10 करते हैं।
00:03:49कितना UI?
00:03:50आइए फुल डैशबोर्ड करते हैं।
00:03:53कुल मिलाकर मूड।
00:03:54आइए एडिटोरियल करते हैं।
00:03:58हम एडिटोरियल के साथ ही रहेंगे।
00:04:00किसे बदला जा सकना चाहिए?
00:04:02ऊह, हम फ्लो कलर पैलेट करेंगे।
00:04:07मैं इसे तीन चीज़ें करने के लिए कहूँगा।
00:04:08आइए जारी रखते हैं।
00:04:09और फिर बाईं ओर, एक बार जब हम उन सवालों के जवाब दे देते हैं,
00:04:11तो यह अपनी प्रोग्रेस सेटअप करता है।
00:04:12फिर से, यह वैसा ही है जैसा हम Claude code में देखते
00:04:15अगर हम उसे प्लान मोड पर रखते और चीज़ें करने के लिए कहते।
00:04:17और वैसे, यह ज़ाहिर तौर पर कुछ ऐसा है
00:04:19जिसे करने के लिए आपको वेब ऐप पर होना होगा।
00:04:22यह कुछ ऐसा नहीं है जो टर्मिनल में उपलब्ध है
00:04:24ग्राफ़िकल स्वरूप के कारण इसके स्पष्ट कारण हैं।
00:04:27और जो मैं पढ़ रहा हूँ,
00:04:29मुझे नहीं लगता कि इसे कभी भी डेस्कटॉप ऐप
00:04:30में लागू किया जाएगा, या शायद किसी बिंदु पर किया जाएगा।
00:04:33लेकिन अभी के अनुसार, आपको इसे Claude.ai के माध्यम से करना होगा।
00:04:35अब, जैसे-जैसे यह बन रहा है,
00:04:36आइए कुछ सवालों के बारे में बात करते हैं जो आपके मन में हो सकते हैं,
00:04:38जैसे कि, यह कैसे अलग है
00:04:39मेरे द्वारा इस प्रॉम्प्ट को सीधे
00:04:41चैट विंडो में देने या Claude code को ओपन करने
00:04:43और बस यह कहने से कि, हे, मैं चाहता हूँ
00:04:45कि तुम यह इंटरैक्टिव चीज़ बनाओ।
00:04:47खैर, और बस उसे,
00:04:48उससे किसी तरह का वेब ऐप बनवाने से।
00:04:50जवाब यह है कि, अगर हम बहुत गहराई में जाएँ, तो वास्तव में कुछ भी नहीं।
00:04:54जैसे, ठीक है, यह सिर्फ कोड लिख रहा है।
00:04:55यह वही चीज़ होने वाली है।
00:04:56अंतर यह है, और फिर से,
00:04:58अगर आपने किसी भी क्षमता में फ्रंट एंड डिज़ाइन किया है,
00:05:00चाहे वह सिर्फ एक साधारण लैंडिंग पेज ही क्यों न हो,
00:05:02आप इन चीज़ों को विज़ुअली देखने
00:05:04और उनकी तुलना करने में सक्षम होने की शक्ति को समझते हैं।
00:05:05इसीलिए, आप जानते हैं, Google Stitch इतना कूल है
00:05:08क्योंकि Stitch के बारे में सबसे अच्छी चीज़
00:05:09ज़रूरी नहीं कि डिज़ाइन फिलॉसफी हो,
00:05:11हालाँकि मुझे लगता है कि यह बहुत अच्छा है।
00:05:12बात यह है कि मेरे पास एक UI है
00:05:13जहाँ मैं विज़ुअली बहुत सारे विकल्प देख सकता हूँ
00:05:15और इस तरह से इसे एडिट कर सकता हूँ।
00:05:17और फिर जब मुझे यह पसंद आए, तो इसे कोड में ले जा सकता हूँ।
00:05:18जब मैं डिज़ाइन के नज़रिए से सब कुछ कोड-फर्स्ट कर रहा हूँ,
00:05:20तो यह कठिन है। यह थोड़ा अजीब सा है।
00:05:22यह थोड़ा मुश्किल है।
00:05:23एक विज़ुअल मीडियम को लेना
00:05:26और उसे नेचुरल लैंग्वेज में डालना थोड़ा मुश्किल है,
00:05:28जो कोड में बदल जाता है,
00:05:29जो एक विज़ुअल में बदल जाता है और वास्तव में उसे सही तरह से पाना,
00:05:32खासकर शुरुआत में, काफी मुश्किल होता है।
00:05:33जैसे, मुझे चीज़ों को विज़ुअली देखने की ज़रूरत है।
00:05:34कम से कम मेरे लिए, मुझे विकल्प देखने की ज़रूरत है।
00:05:36और इसलिए यह होना बहुत बढ़िया है।
00:05:38यह Anthropic और Claude code के लिए आगे की ओर एक बड़ा कदम है
00:05:41क्योंकि यह वास्तव में एक कमज़ोर बिंदु रहा है।
00:05:42इसीलिए आप Pencil जैसे ऐप्स
00:05:45और इस तरह की चीज़ों को इतना लोकप्रिय होते देखते हैं
00:05:46क्योंकि यह आपको वह विज़ुअल मीडियम देता है
00:05:48इन चीज़ों से निपटने के लिए।
00:05:49और एक त्वरित नोट भी, जैसे आप यहाँ नीचे देख सकते हैं,
00:05:51जैसे कि ये पूर्ण विकसित एप्लिकेशन हैं।
00:05:53यह अनिवार्य रूप से प्रोटोटाइपिंग है।
00:05:55तो आपके पास ये चीज़ें हो सकती हैं जिन्हें API कहा जाता है।
00:05:58आपको इसके बारे में और सोचना चाहिए,
00:06:00सिर्फ एक विज़ुअल डिज़ाइन Canva जैसी चीज़ के रूप में नहीं।
00:06:03आपको इसके बारे में और ज़्यादा सोचना चाहिए
00:06:04Google Studio के संदर्भ में,
00:06:05जैसे Google AI Studio टाइप डील।
00:06:07तो यहाँ वह है जो यह वापस लेकर आया है।
00:06:08यह एडिटोरियल स्टाइल के साथ गया है।
00:06:10हम यहाँ ग्लोब देख सकते हैं।
00:06:12मैं इसे माउस से ड्रैग कर सकता हूँ।
00:06:14हम रोटेशन स्पीड कर सकते हैं, ग्लो इंटेंसिटी बदल सकते हैं,
00:06:18पैलेट बदल सकते हैं।
00:06:19यह काफी कूल है।
00:06:21और फिर इसमें यहाँ पर छोटे-छोटे राइट-अप्स जैसा कुछ है।
00:06:25अब इसे एडिट करने में सक्षम होने के बारे में बात करते हैं।
00:06:27सबसे पहले, हमारे पास यहाँ ऊपर यह छोटा ट्वीक्स (tweaks) वाला बटन है।
00:06:30तो ट्वीक्स का संबंध केवल रोटेशन स्पीड
00:06:33और उन सब से है।
00:06:34मैं कमेंट्स छोड़ सकता हूँ, मैं एडिट कर सकता हूँ, मैं ड्रॉ कर सकता हूँ।
00:06:37और फिर हम फुल स्क्रीन जैसी चीज़ें भी कर सकते हैं
00:06:39यह देखने के लिए कि यह असल में कैसा दिखेगा।
00:06:41फुल स्क्रीन में यह काफी दिलचस्प है।
00:06:42यह वास्तव में बहुत बेहतर लग रहा है।
00:06:44लेकिन मान लीजिए कि मैं इसमें कोई एडिट करना चाहता हूँ।
00:06:46ज़ाहिर है कि हम बस प्रॉम्प्ट विंडो में वापस जा सकते हैं
00:06:49और उसे प्रॉम्प्ट दे सकते हैं।
00:06:50अगर मैं एडिट पर जाता हूँ, तो मैं बहुत अधिक सूक्ष्मता (granular) पा सकता हूँ।
00:06:55यह मुझे कर्सर एडिटर या यहाँ तक कि
00:06:58Lovable जैसी किसी चीज़ की याद दिलाता है।
00:06:59तो मैं वास्तव में व्यक्तिगत शहरों को खुद चुन सकता हूँ।
00:07:04अगर मैं ग्लोब को बड़े तौर पर चुनता हूँ, तो यह इसे यहाँ ले आएगा।
00:07:07और मैं कलर जैसी चीज़ें बदल सकता हूँ।
00:07:11वह भद्दा लग रहा है, हाइट और वह सब।
00:07:14तो मेरे पास बहुत विशिष्ट होने की क्षमता है
00:07:16कि मैं क्या बदलना चाहता हूँ, जो फिर से बहुत अच्छा है।
00:07:18यह मेरे टेक्स्ट में कहने से बेहतर है,
00:07:19"हे, मैं इसका आकार बदलना चाहता हूँ।"
00:07:21खैर, मैं इसे यहाँ चुन सकता हूँ और उस तरह से एडिट कर सकता हूँ।
00:07:24हम कमेंट्स भी कर सकते हैं।
00:07:25तो मैं किसी भी विशेष चीज़ पर क्लिक कर सकता हूँ।
00:07:27एडिट वाली चीज़ ही है, लेकिन वास्तव में
00:07:29"हे, इन विशिष्ट नंबरों" को बदलने के बजाय।
00:07:31मैं ग्लोब पर क्लिक कर सकता हूँ और एक कमेंट छोड़ सकता हूँ जैसे,
00:07:34"क्या हम ग्लोब को बड़ा कर सकते हैं?"
00:07:37Claude को भेजें।
00:07:40और यह कमेंट्स की एक कतार (queue) बनाता है।
00:07:41यदि आप इसे तुरंत Claude को नहीं भेजना चाहते हैं,
00:07:43लेकिन किसी भी बिंदु पर आप इसे Claude को भेज सकते हैं
00:07:45और वह काम करना शुरू कर देगा।
00:07:46इसके अलावा, हम ड्रॉ (draw) भी कर सकते हैं।
00:07:48तो मैं कह सकता हूँ, "ठीक है, खैर,
00:07:50मैं यहाँ बस एक चाँद जैसा कुछ चाहता हूँ।"
00:07:52आइए एक चाँद लाते हैं।
00:07:53मैं यहाँ Artemis 2 को घूमते हुए देखना चाहता हूँ।
00:07:56उस तरह की चीज़ें।
00:07:56फिर यहाँ, हमारे पास डिज़ाइन फ़ाइल भी है।
00:07:58तो आप वास्तव में पर्दे के पीछे के कोड
00:08:00को देख सकते हैं।
00:08:02और अंत में, हमारे पास इसे एक्सपोर्ट करने
00:08:04और शेयर करने की क्षमता है।
00:08:05तो अगर मैं एक्सपोर्ट पर क्लिक करता हूँ, तो मैं इसे ज़िप के रूप में डाउनलोड कर सकता हूँ।
00:08:07मैं इसे PDF, PowerPoint के रूप में एक्सपोर्ट कर सकता हूँ, Canva पर भेज सकता हूँ।
00:08:11या जो बहुत कूल है वह यह है कि मैं इसे
00:08:13Claude code को सौंप सकता हूँ।
00:08:14और यह मुझे इसे Claude code के अंदर
00:08:15लाने की कमांड देता है, जो बहुत बढ़िया है।
00:08:17तो मैं आज के लिए यहीं छोड़ूँगा।
00:08:18मुझे पता है कि यह काफी संक्षिप्त और तेज़ था,
00:08:19लेकिन बस आपको यह दिखाना चाहता था
00:08:21कि इसे कैसे नेविगेट करना है और क्या संभव है।
00:08:23अगले एक-दो दिनों में एक डीप डाइव (गहन विश्लेषण) की उम्मीद ज़रूर करें,
00:08:26जिसमें मैं दिखाऊँगा कि आप इसका अधिकतम लाभ कैसे उठा सकते हैं।
00:08:29हमेशा की तरह, मुझे बताएं कि आपको कैसा लगा।
00:08:31अगर आप Chase AI मास्टरक्लास पाना चाहते हैं,
00:08:33तो वह पिन किए गए कमेंट्स में है और फिर मिलते हैं।