Claude Code को इस साल का सबसे बड़ा डिज़ाइन अपग्रेड मिल गया है (और इसे मास्टर करने का तरीका)

CChase AI
Computing/SoftwareInternet Technology

Transcript

00:00:00Claude Code को अपने फ्रंट-энд डिज़ाइन क्षमताओं के लिए लंबे समय में सबसे बड़ा अपग्रेड मिला है, जो कि बिल्कुल नया Slash Design स्किल है।
00:00:07अब, Slash Design स्किल अनिवार्य रूप से स्टैंडअलोन Claude Design वेब ऐप की बेहतरीन सुविधाओं को लेता है, जिसे आप यहाँ देख सकते हैं, और इसे सीधे Claude Code में शामिल कर देता है।
00:00:16दो अलग-अलग अनुप्रयोगों के बीच आगे-पीछे जाने या Claude Design से Claude Code में अपने डिज़ाइन को अजीब तरीके से स्थानांतरित करने के बजाय, अब हमारे पास दोनों दुनियाओं का सबसे अच्छा हिस्सा है।
00:00:25साथ ही, हमें उन सभी स्किल्स की अतिरिक्त कार्यक्षमता मिलती है जिनका उपयोग हम पहले से ही Claude Code के अंदर करते हैं।
00:00:30इसलिए, हम इस नई Slash Design सुविधा को Impeccable या Taste जैसी चीज़ों के साथ जोड़ सकते हैं, जिससे हमें और भी बेहतर आउटपुट मिलते हैं।
00:00:36तो, आज, मैं आपको न केवल यह दिखाने जा रहा हूँ कि Slash Design कैसे काम करता है, बल्कि मैं आपको इससे अधिकतम लाभ प्राप्त करने के लिए सबसे अच्छा वर्कफ़्लो भी देने जा रहा हूँ।
00:00:42इसलिए, यदि आप Claude Code के साथ किसी भी प्रकार का फ्रंट-энд डिज़ाइन कार्य करते हैं, तो आप इसके लिए ज़रूर रुकना चाहेंगे।
00:00:46अब, Ford Slash Design स्किल के लिए बिक्री बिंदु वही है जो आप यहाँ देख रहे हैं।
00:00:49अब, मैं Claude Desktop ऐप के अंदर हूँ, लेकिन यदि आप टर्मिनल का उपयोग कर रहे हैं तो भी यही बात लागू होती है।
00:00:53और यह विचार यह है कि जब मैं Ford Slash Design करता हूँ और इसे मेरे लिए कुछ बनाने के लिए कहता हूँ, तो यह Claude Design वेब ऐप के समान एक आर्टबोर्ड तैयार करेगा।
00:01:02मेरे पास कई विकल्प हैं जिन्हें मैं चुन सकता हूँ, और जब मैं इन विकल्पों को देखता हूँ, तो मैं इस बात में बहुत सूक्ष्म हो सकता हूँ कि क्या बदलता है।
00:01:09जैसा कि आप दाईं ओर देख सकते हैं, जैसे ही मैं इसके द्वारा बनाए गए फ्रंट-энд डिज़ाइन के विभिन्न घटकों पर क्लिक करता हूँ, मैं लगभग हर चीज़ बदल सकता हूँ।
00:01:17इसके शीर्ष पर, मैं एक ही प्रकार के आउटपुट के कई संस्करणों के लिए बहुत आसानी से कह सकता हूँ, और एक बार जब मुझे कोई विशेष संस्करण पसंद आ जाता है, तो मैं Claude Code को वास्तव में काम पर जाने और इसे कोड करने के लिए कह सकता हूँ।
00:01:27यह Claude Design वेब ऐप के अंदर होने, पूरी चीज़ करने, यह कहने कि मैं इसे स्थानांतरित करना चाहता हूँ, इसे ज़िप में डालने, इसे फ़ोल्डर में छोड़ने, Claude Code में इंगित करने, वह सारी कष्टप्रद चीज़ें करने की तुलना में मेरा बहुत सारा समय बचाता है।
00:01:38और केवल सुविधाजनक होने से अधिक, जैसा कि मैंने पहले संकेत दिया था, अब हम स्किल्स को स्टैक कर सकते हैं।
00:01:43जब मैं Claude Design वेब ऐप के अंदर होता हूँ, तो मैं आवश्यक रूप से Impeccable स्किल या Tay स्किल जैसी किसी चीज़ का उपयोग या आह्वान नहीं कर सकता हूँ।
00:01:49मैं यहाँ ऐसा कर सकता हूँ।
00:01:50इसलिए अंततः, मेरे आउटपुट अधिक सुविधाजनक होने के साथ-साथ बहुत बेहतर होने वाले हैं।
00:01:54अब, डिज़ाइन स्किल का उपयोग करना बहुत आसान है।
00:01:56मुझे बस फॉरवर्ड स्लैश डिज़ाइन टाइप करना है, और फिर मैं इसे वह प्रॉम्प्ट दूंगा जो मैं बनाना चाहता हूँ।
00:02:01तो मान लीजिए कि मैं सोशल मीडिया पोस्ट बनाना चाहता हूँ, या Instagram पोस्ट जैसी किसी चीज़ के बारे में सोचना चाहता हूँ, जिसमें यह विवरण हो कि नया स्लैश डिज़ाइन स्किल क्या करता है।
00:02:10और मान लीजिए कि मैं इसके तीन बहुत ही अलग डिज़ाइन शैलियों में तीन भिन्न रूप बनाना चाहता हूँ, और मैं Impeccable स्किल का उपयोग करना चाहता हूँ।
00:02:19मैं बस अपना माइक्रोफ़ोन खोलूँगा और बिल्कुल वैसा ही कुछ कहूँगा।
00:02:22तो क्या हम सोशल मीडिया पोस्ट के लिए मॉक-अप बना सकते हैं?
00:02:27इसके बारे में सोचें कि यह कुछ इस तरह की Instagram पोस्ट है जो यह बताती है कि नया Claude Code स्लैश डिज़ाइन स्किल क्या करता है।
00:02:34मैं तीन अत्यधिक भिन्न बदलाव चाहता हूँ, इसलिए बहुत अलग डिज़ाइन शैलियाँ, बहुत अलग सौंदर्य शैलियाँ।
00:02:41और जब आप ऐसा करते हैं, तो मैं चाहता हूं कि आप इसे बनाने में मदद के लिए Impeccable स्किल का आह्वान करें।
00:02:45अब, यदि मैं Claude डेस्कटॉप ऐप के अंदर बिल्कुल यही स्किल करूँ, तो यह इस प्रकार के साइड पैनल के अंदर पॉप्युलेट होने जा रहा है, यही वजह है कि मुझे डेस्कटॉप ऐप के अंदर ऐसा करना पसंद है, क्योंकि सब कुछ एक ही स्थान पर है।
00:02:57टर्मिनल के अंदर, आप जो देखने जा रहे हैं वह यह है कि यह एक कलाकृति बनाने जा रहा है, इसलिए यह अनिवार्य रूप से मेरे ब्राउज़र में खुलने जा रहा है।
00:03:02इसलिए जब यह डेस्कटॉप ऐप जितना सुविधाजनक नहीं है, तब भी चीज़ें करना काफी आसान है।
00:03:06अब, कलाकृति को देखने से पहले, आज के प्रायोजक, यानी मेरी ओर से एक संक्षिप्त संदेश।
00:03:10तो मैंने अभी अपने Claude Code Masterclass का एक अद्यतन संस्करण जारी किया है, और यह शून्य से AI देव बनने का नंबर एक तरीका है, खासकर यदि आप तकनीकी पृष्ठभूमि से नहीं आते हैं।
00:03:19हम वास्तविक उपयोग के मामलों, व्यावहारिक उपयोग के मामलों पर ध्यान केंद्रित करते हैं, और मैं इसे हर हफ्ते अपडेट करता हूँ।
00:03:24इसलिए यदि आप कोई ऐसे व्यक्ति हैं जो यह पता लगाने की कोशिश कर रहे हैं कि वास्तव में इस पागल टूल का उपयोग कैसे किया जाए, तो यह आपके लिए है।
00:03:32आप इसे Chase AI+ के अंदर पा सकते हैं।
00:03:33पिन किए गए कमेंट में एक लिंक है।
00:03:35और यहाँ इसके द्वारा बनाई गई कलाकृति पर एक नज़र है।
00:03:37तो हमारे पास हमारी Instagram पोस्ट के लिए तीन अलग-अलग डिज़ाइन शैलियाँ हैं, बिल्कुल वैसे ही जैसे हमने डेस्कटॉप ऐप के अंदर देखा था।
00:03:44हमारे पास दाईं ओर यह प्रॉपर्टी बार है।
00:03:46मैं ज़ूम इन कर सकता हूँ, किसी चीज़ पर क्लिक कर सकता हूँ, और इस बात का बहुत अधिक विवरण प्राप्त करना शुरू कर सकता हूँ कि मैं वास्तव में क्या समायोजित कर रहा हूँ।
00:03:52आप शीर्ष दाईं ओर भी देखेंगे, हमारे पास एक ट्विक्स अनुभाग है, जो अभी खाली है।
00:03:57किसी भी समय, मैं Claude Code को मुझे एक ट्विक्स पैनल देने के लिए प्रॉम्प्ट कर सकता हूँ, बिल्कुल वैसे ही जैसे आप Claude Design वेब ऐप के अंदर देखेंगे।
00:04:03और मैं उन चीज़ों से भी अधिक चीज़ें समायोजित कर सकता हूँ जो मुझे यहाँ दिखाई दे रही हैं।
00:04:07इसलिए वास्तव में इस चीज़ का उपयोग करने के मामले में, यह अपेक्षाकृत सरल है।
00:04:10बस फॉरवर्ड स्लैश डिज़ाइन करें और पूछें कि आप क्या चाहते हैं।
00:04:12अब, हमारा वर्कफ़्लो वास्तव में कैसा दिखना चाहिए?
00:04:14हम इससे अधिकतम लाभ कैसे प्राप्त करें?
00:04:16खैर, एक सरल तीन-चरण वाला वर्कफ़्लो है जिसका उपयोग आपको हर बार Claude Code के साथ किसी भी प्रकार का फ्रंट डिज़ाइन करते समय करना चाहिए।
00:04:22और पहला कदम प्रेरणा होने जा रहा है क्योंकि मैं Claude को केवल एक प्रॉम्प्ट नहीं देना चाहता हूँ जिसमें कहा गया हो, अरे, मैं तीन अलग-अलग सामान चाहता हूँ।
00:04:30जो मैं आदर्श रूप से Claude Code को देना चाहता हूँ वह कुछ उदाहरण हैं।
00:04:33मैं उन पोस्टरों के स्क्रीनशॉट लेना चाहता हूँ जो मुझे पसंद हैं।
00:04:35मैं उन डिज़ाइन शैलियों के स्क्रीनशॉट लेना चाहता हूँ जिनका मैं आनंद लेता हूँ।
00:04:39इसे Claude Code को फीड करें और कहें, अरे, क्या आप इसके जैसी ही तर्ज पर कुछ बना सकते हैं?
00:04:43अभी, हम सिर्फ एक पोस्टर पर काम कर रहे हैं, लेकिन यह तब भी लागू होगा यदि आप लैंडिंग पेज या हीरो अनुभाग या ऐसी किसी अन्य चीज़ की तरह कुछ बना रहे हैं।
00:04:50अब, आपका अगला सवाल यह होना चाहिए कि मुझे प्रेरणा कहाँ मिल सकती है?
00:04:52और सौभाग्य से, विचार प्राप्त करने के लिए ढेर सारी जगहें हैं।
00:04:55एक अच्छी वेबसाइट Pinterest है।
00:04:57मैंने अभी एक Instagram इन्फोग्राफिक डाला और इन सभी संभावित डिज़ाइनों को देखा।
00:05:01एक और अच्छी बात Landbook है, जो वेब डिज़ाइन और हीरो सेक्शन के लिए वास्तव में बहुत अच्छी है।
00:05:06और हमारे पास Dribbble जैसी चीज़ें भी हैं, और वह तीन B वाला Dribbble है।
00:05:11विचार यह है कि आपको बस वहाँ जाने की ज़रूरत है और वास्तव में आपको डिज़ाइनों की कुछ इस तरह की लाइब्रेरी बनाना शुरू कर देना चाहिए जिसे आप हमेशा संदर्भित कर सकें और जब चाहें Claude Code में ला सकें।
00:05:21ताकि आपको हर बार इस प्रेरणा प्रक्रिया को दोहराना न पड़े।
00:05:24इसलिए मैं कुछ ऐसे स्क्रीनशॉट लेने जा रहा हूँ जो मुझे पसंद हैं।
00:05:27मुझे यह पसंद है।
00:05:29मुझे लगता है कि यह काफी दिलचस्प लग रहा है।
00:05:31और याद रखें, आप केवल एक सामान्य सौंदर्यशास्त्र के लिए जा रहे हैं जिसे आप चाहते हैं कि Claude खींचे।
00:05:36और मुझे लगता है कि यह भी काफी दिलचस्प लग रहा है।
00:05:39तो अब मैं उन तीन स्क्रीनशॉट को प्रॉम्प्ट विंडो में डालने जा रहा हूँ।
00:05:43और अब मैं अनिवार्य रूप से इसे वही प्रॉम्प्ट देने जा रहा हूँ जो हमने इसे पहले दिया था, जैसे, अरे, मैं उस तरह की Instagram पोस्ट चाहता हूँ।
00:05:48मैं तीन अलग-अलग संस्करण चाहता हूँ।
00:05:49सिवाय इसके कि इस बार, मैं कहूँगा, इन स्क्रीनशॉट को संदर्भित करें।
00:05:52मैं चाहता हूं कि इनका उपयोग प्रेरणा के रूप में किया जाए।
00:05:54प्रत्येक प्रकार के स्क्रीनशॉट के लिए आपके पास एक अलग प्रकार का डिज़ाइन हो सकता है।
00:05:59और मैं यह भी कहूँगा, अरे, सुनिश्चित करें कि Impeccable स्किल का उपयोग करें।
00:06:02और मैं इसे यह भी बताने जा रहा हूँ कि यदि यह बाहरी संपत्तियां उत्पन्न करना चाहता है, तो मेरे पास मौजूद Higgs field MCP जैसी किसी चीज़ का उपयोग करें।
00:06:09आप अन्य चीज़ों का उपयोग कर सकते हैं, जैसे कि यदि आपके पास अन्य प्रकार के छवि जनरेटर के लिए file.ai जैसी चीज़ें हैं।
00:06:14विचार यह है कि, क्योंकि अब हम Claude code के अंदर हैं, हम इस डिज़ाइन प्रक्रिया में जो चाहें खींच सकते हैं।
00:06:19और फिर से, यदि आप नहीं चाहते हैं तो आपको बाहरी छवियों का उपयोग करने की आवश्यकता नहीं है।
00:06:23लेकिन मेरा प्रॉम्प्ट कुछ ऐसा होने वाला है।
00:06:25तो आइए वास्तव में इन तीन पोस्टों को फिर से बनाते हैं जो हमने की हैं।
00:06:29फिर से, हम स्लैश डिज़ाइन स्किल का उपयोग कर रहे हैं।
00:06:31लेकिन मैंने यहाँ तीन स्क्रीनशॉट डाले हैं।
00:06:33और मैं अपनी डिज़ाइन प्रक्रिया के लिए प्रेरणा के रूप में उनका उपयोग करना चाहूँगा।
00:06:37इसलिए मुझे तीन नई पीढ़ियां चाहिए।
00:06:39एक ऐसी पीढ़ी बनाएँ जो इनमें से प्रत्येक उचित स्क्रीनशॉट से खींचती हो।
00:06:43एक बार फिर, Impeccable डिज़ाइन स्किल का उपयोग करें।
00:06:45और याद रखें, आपके पास Higgs field MCP तक पहुंच है।
00:06:48इसलिए यदि आपको लगता है कि आपको बाहरी संपत्तियां उत्पन्न करने की आवश्यकता है जिनका उपयोग हम पोस्टरों के लिए कर सकते हैं, तो वह भी करें।
00:06:55मैं इसे आपके विवेक पर छोड़ता हूँ।
00:06:56और इस प्रक्रिया का वास्तव में चरण एक और दो यही है।
00:06:59पहला कदम प्रेरणा ढूंढना है।
00:07:00और चरण दो वास्तव में उन अतिरिक्त कौशलों का उपयोग कर रहा है जिनका उपयोग हम Claude design वेब ऐप के अंदर वास्तव में नहीं कर सकते हैं।
00:07:08और यदि आप ऐसे हैं, अरे, आप Impeccable का उल्लेख करते रहते हैं, मुझे कोई ধারণা नहीं है कि यह क्या है।
00:07:11यह सिर्फ एक ओपन सोर्स फ्री स्किल है जिसे आप Claude code में जोड़ सकते हैं।
00:07:16और यह सब फ्रंट-энд डिज़ाइन के बारे में है।
00:07:18अनिवार्य रूप से, इसका पूरा हुनर यह है कि यह पहचानता है कि AI स्लोप कैसा दिखता है, इससे छुटकारा पाता है, और आप जो भी बना रहे हैं उसमें बेहतर डिज़ाइन सिद्धांतों को जोड़ता है।
00:07:26और यदि आप इसमें गहराई से उतरना चाहते हैं, तो मेरे पास ऐसे वीडियो हैं जो इस बात पर बहुत गहराई से जाते हैं कि Impeccable का सबसे अच्छा उपयोग कैसे किया जाए।
00:07:31और अब यहाँ नए पोस्टरों पर एक नज़र है जो Claude ने Slash design का उपयोग करके बनाए हैं।
00:07:35और आप देख सकते हैं कि वे निश्चित रूप से उस प्रेरणा से खींचते हैं जो हमने इसे दी थी।
00:07:39और किसी भी बिंदु पर, पहले की तरह, मैं यहाँ ज़ूम इन कर सकता हूँ।
00:07:43मैं गुणों पर एक नज़र डाल सकता हूँ और चीज़ों को संपादित करना शुरू कर सकता हूँ।
00:07:46अब, आइए ट्विक्स के बारे में बात करते हैं।
00:07:49इसलिए इस डिज़ाइन में अभी तक कोई ट्विक करने योग्य नियंत्रण नहीं हैं।
00:07:50वर्णन करें कि आप क्या समायोजित करना चाहते हैं और Claude इसके लिए एक ट्विक्स पैनल जोड़ देगा।
00:07:53खैर, आइए ऐसा करते हैं क्योंकि अब हम प्रक्रिया के चरण तीन में हैं जहाँ हम चीज़ों को तब तक ट्विक करना शुरू करना चाहते हैं जब तक कि यह हमें पसंद न आ जाए।
00:08:00तो मैं जो करने जा रहा हूँ वह टर्मिनल खोलना है, आप कहाँ हैं, और कहें, अरे, क्या अब हम यहाँ कुछ ट्विक करने योग्य नियंत्रण जोड़ सकते हैं?
00:08:10मैं चाहूँगा कि ट्विक्स बहुत आक्रामक हों।
00:08:12इसलिए मैं Claude design के अंदर ट्विक्स पैनल का उपयोग करके जितना संभव हो सके लगभग किसी भी चीज़ को संपादित करने में सक्षम होना चाहता हूँ।
00:08:21तो अब आप दाईं ओर यह ट्विक्स भाग देख सकते हैं।
00:08:24और इसलिए हम बीच वाले को देख रहे हैं।
00:08:25तो मैं कागज़ का रंग बदल सकता हूँ, है ना?
00:08:29तो अब हम यहाँ क्या करना चाहते हैं?
00:08:30और यह भी याद रखें, ये ट्वीक्स आपको केवल विचार दे सकते हैं।
00:08:33इसलिए किसी भी समय, आप वापस क्लाउड कोड पर जा सकते हैं और इन अलग-अलग बदलावों के लिए प्रॉम्प्ट दे सकते हैं।
00:08:39फिर से, इन सबको विजुअली देखने की सबसे बड़ी बात यह है कि मैं अब क्लाउड कोड को प्रॉम्प्ट करने, जनरेशन का इंतज़ार करने, यह देखने कि मुझे यह पसंद आया या नहीं, क्लाउड कोड को फिर से प्रॉम्प्ट करने की तुलना में कितनी जल्दी बदलाव कर सकता हूँ, है ना?
00:08:52यह पूरी प्रक्रिया को बहुत तेज़ बना देता है।
00:08:55इसलिए हम टेक्स्ट के दिखने के तरीके को बदल सकते हैं।
00:08:58यह वास्तविक आकार, मोटाई, रूलिंग और इसी तरह की अन्य चीज़ों को बदल सकता है।
00:09:03तो यहाँ आप जो कुछ भी देखते हैं उसे संपादित किया जा सकता है।
00:09:06लेकिन यह भी याद रखें, हम बड़े बदलाव भी कर सकते हैं।
00:09:08तो मुझे दूसरे वाले का सामान्य रूप पसंद नहीं है।
00:09:12हम वह भी कर सकते हैं।
00:09:13जैसे मैं इसे दूसरा प्रॉम्प्ट दे सकता हूँ कि मुझे इसका वास्तविक कंटेंट पसंद नहीं है।
00:09:17मैं चाहता हूँ कि यह लोगों को वास्तव में यह समझाने के मामले में अधिक विस्तृत हो कि स्लैश डिज़ाइन क्या करता है।
00:09:21तो मैं डायल डिज़ाइन के लिए कुछ ऐसा कह सकता हूँ, दूसरे वाले के साथ जाना चाहता हूँ।
00:09:26लेकिन सच कहूँ तो, मैं कंटेंट बदलना चाहूँगा।
00:09:29फिर से, हम एक इन्फोग्राफिक चीज़ की तलाश कर रहे हैं जो बताती है कि स्लैश डिज़ाइन वास्तव में क्या लेकर आता है।
00:09:34तो जब आप इसे दोबारा बनाते हैं, तो आप बाकी दोनों को छोड़ सकते हैं।
00:09:36मैं अभी के लिए सिर्फ उसी पर ध्यान केंद्रित करना चाहता हूँ।
00:09:38आगे बढ़ें और वेब सर्च पर जाएँ और सुनिश्चित करें कि आप समझ गए हैं कि स्लैश डिज़ाइन वास्तव में क्या लेकर आता है और उसे इस इन्फोग्राफिक के नए संस्करण में डालें।
00:09:48और यहाँ उस पोस्टर का अपडेटेड संस्करण है।
00:09:49 जैसा कि आप देख सकते हैं, नया स्लैश डिज़ाइन वास्तव में क्या करता है, इसके बारे में बहुत अधिक जानकारी है।
00:09:53और फिर से, क्योंकि हम इस नए स्लैश डिज़ाइन कौशल का उपयोग कर रहे हैं, इसे संपादित करना बहुत आसान है।
00:09:56ओह, मुझे यहाँ का टेक्स्ट पसंद नहीं है।
00:09:59मैं इसे जहाँ चाहूँ ले जा सकता हूँ।
00:10:00मैं वास्तविक टेक्स्ट को ही समायोजित कर सकता हूँ, इत्यादि, इत्यादि, इत्यादि।
00:10:03और इसलिए यहाँ से, आप वास्तव में प्रेरणा की उस तीन-चरण प्रक्रिया को जारी रखते हैं, सही कौशल का उपयोग करते हैं और अपनी पसंद के किसी भी डिज़ाइन पर काम करते हैं।
00:10:11इसलिए यदि हम इस बीच वाले के साथ जाना चाहते हैं, तो हम बस क्लॉक कोड से कहेंगे, हे, मैं केवल इस बीच वाले के साथ काम करना चाहता हूँ।
00:10:16और आप तब तक बदलाव करते रहेंगे जब तक आपको वह पसंद न आ जाए जो आपने बनाया है।
00:10:20और फिर आप इसके साथ जो चाहें कर सकते हैं।
00:10:22बड़े पैमाने पर, यह स्लैश डिज़ाइन कौशल क्लाउड कोड के अंदर फ्रंट-энд डिज़ाइन को बहुत आसान बनाता है।
00:10:28अक्सर, हमें इस तरह के लाइव ऑन द वेब टाइप डिज़ाइन करने के लिए इम्पोकेबल जैसी बाहरी चीज़ों पर भरोसा करना पड़ता था।
00:10:34तो इस नई सुविधा को आजमाने के लिए निश्चित रूप से समय निकालें।
00:10:36मुझे लगता है कि यह किसी ऐसे व्यक्ति के लिए एकदम सही है जो क्लाउड कोड का उपयोग करता है लेकिन क्लाउड डिज़ाइन वेब ऐप को पसंद करता है और उसे लगता है कि दोनों के बीच स्विच करना अजीब है।
00:10:45यह वह जगह है।
00:10:46यह वह दर्शक वर्ग है जिसे यह संबोधित कर रहा है।
00:10:48तो हमेशा की तरह, मुझे बताएं कि आपको इसके बारे में क्या लगा।
00:10:51यदि आप मेरे क्लाउड कोड मास्टरक्लास तक पहुँचना चाहते हैं तो चेज़ एआई प्लस को देखना न भूलें।
00:10:55और इसके अलावा, मैं आपसे मिलता हूँ।

Key Takeaway

Slash Design स्किल Claude Code के भीतर सीधे विजुअल आर्टबोर्ड और ट्विक्स पैनल प्रदान करके फ्रंट-एंड डिज़ाइन वर्कफ़्लो को तेज़ करता है।

Highlights

  • Claude Code में नया Slash Design स्किल जोड़ा गया है, जो सीधे Claude Design वेब ऐप की सुविधाओं को टर्मिनल और डेस्कटॉप ऐप में लाता है।

  • यह नया स्किल अलग-अलग अनुप्रयोगों के बीच ज़िप फ़ाइलें स्थानांतरित करने की आवश्यकता को समाप्त करता है।

  • Slash Design का उपयोग करके विभिन्न डिज़ाइन शैलियों के कई संस्करण एक साथ बनाए जा सकते हैं और उन्हें आपस में स्टैक किया जा सकता है।

  • फ्रंट-एंड डिज़ाइन प्रक्रिया को बेहतर बनाने के लिए Pinterest, Landbook और Dribbble जैसी वेबसाइटों से प्रेरणा ली जा सकती है।

Timeline

Slash Design स्किल का परिचय

  • Claude Code को इसका सबसे बड़ा फ्रंट-энд डिज़ाइन अपग्रेड Slash Design स्किल के रूप में मिला है।
  • यह सुविधा Claude Design वेब ऐप की क्षमताओं को सीधे Claude Code में एकीकृत करती है।

यह नया स्किल डेवलपर्स को अलग-अलग टूल्स के बीच फाइलें भेजने या ज़िप करने की पुरानी और कष्टप्रद प्रक्रिया से बचाता है। उपयोगकर्ता सीधे टर्मिनल या डेस्कटॉप ऐप के भीतर विभिन्न डिज़ाइन घटकों और संस्करणों को आसानी से संशोधित कर सकते हैं।

डिजाइन निर्माण और वर्कफ़्लो के चरण

  • फॉरवर्ड स्लैश डिज़ाइन कमांड टाइप करके और प्रॉम्प्ट देकर मॉक-अप तैयार किए जाते हैं।
  • Impeccable स्किल का उपयोग करके बेहतर डिज़ाइन सिद्धांत जोड़े जाते हैं।

डिजाइन प्रक्रिया के लिए पहले चरण में Pinterest, Landbook या Dribbble जैसी साइटों से प्रेरणा ली जाती है। इसके बाद स्क्रीनशॉट और विशिष्ट निर्देशों को Claude Code में फीड करके अलग-अलग सौंदर्य शैलियों के कई संस्करण तैयार किए जाते हैं।

संपादक और ट्विक्स पैनल का उपयोग

  • ट्विक्स पैनल के माध्यम से रंगों, टेक्स्ट और लेआउट में तुरंत बदलाव किए जा सकते हैं।
  • यह नया इंटीग्रेशन Claude Code उपयोगकर्ताओं के लिए डिज़ाइन वर्कफ़्लो को अत्यधिक सुगम बनाता है।

उपयोगकर्ता दाईं ओर दिए गए ट्विक्स अनुभाग का उपयोग करके कागज़ का रंग, टेक्स्ट का आकार और मोटाई जैसे तत्वों को आक्रामक रूप से समायोजित कर सकते हैं। यह दृश्य प्रतिक्रिया प्रणाली पुराने प्रॉम्प्ट-आधारित चक्र की तुलना में बदलावों को बहुत तेज़ बनाती है।

Community Posts

View all posts