00:00:00Paper, शायद इस समय AI-नेटिव डिजाइनरों के लिए सबसे चर्चित डिजाइन टूल्स में से एक है,
00:00:05AI-एजेनिक वर्कफ़्लो के लिए।
00:00:06और यह आपको यहाँ एक कैनवस पर डिजाइन करने और उसे कोड में बदलने की सुविधा देता है,
00:00:11लेकिन इसका उल्टा भी संभव है।
00:00:13तो यह पूरी तरह से एक द्वि-दिशीय (bi-directional) वर्कफ़्लो है।
00:00:15मैं आपको दिखाने जा रहा हूँ कि इसे कैसे इस्तेमाल करें और कैसे इंस्टॉल करें।
00:00:17साथ ही, यह मेरी 30-दिनों की AI-नेटिव डिजाइन सीरीज का हिस्सा है,
00:00:22जहाँ आपको इस डिजाइन को लेने की चुनौती दी गई है,
00:00:25जिस पर हमने पिछली चुनौती में काम किया था,
00:00:27और इस डिजाइन के इस हिस्से को पूरा करने के लिए Paper का उपयोग करना है।
00:00:32तो इससे पहले कि हम उस चुनौती और उसमें भाग लेने के तरीके पर पहुँचें,
00:00:36मैं आपको दिखाता हूँ कि वास्तव में Paper को इंस्टॉल कैसे करना है।
00:00:38तो यहाँ paper.design पर जाएँ और इसके Docs सेक्शन में जाएँ।
00:00:41और सबसे पहली चीज़ जो आपको करनी है, वह है Paper डेस्कटॉप ऐप डाउनलोड करना, ठीक है?
00:00:46बस एक सरल और तेज़ ऐप है।
00:00:48फिर, क्या आप Cursor का उपयोग कर रहे हैं?
00:00:50क्या आप Claude Code का उपयोग कर रहे हैं?
00:00:51क्या आप Codex, Copilot या कुछ और इस्तेमाल कर रहे हैं?
00:00:54मैं खुद Claude Code का उपयोग करता हूँ।
00:00:55इसे इंस्टॉल करना बेहद आसान है।
00:00:57बस अपने टर्मिनल में Claude टाइप करके इसे चलाने के बाद,
00:01:00इस लाइन को यहाँ से लें,
00:01:03इसे पेस्ट करें, और यह इसे इंस्टॉल कर देगा।
00:01:05और आपको पता चल जाएगा कि यह काम कर रहा है यदि आप यह कमांड /mcp टाइप करते हैं,
00:01:10और आपको वहाँ Paper दिखाई देगा।
00:01:13आप Pencil भी देख सकते हैं, जिसे हम आने वाले समय में कवर करेंगे।
00:01:17ठीक है, तो यह Paper ऐप है, समझे?
00:01:19इसे आपको खुला रखना होगा।
00:01:21और फिर जाहिर तौर पर आप Cursor या Claude Code चलाएँ,
00:01:24और MCP को कनेक्ट रखें।
00:01:26तो, अगला कदम क्या है?
00:01:27देखिए, आप Paper का उपयोग कई अलग-अलग तरीकों से कर सकते हैं।
00:01:31आप फ्रेम टूल का उपयोग करके यहाँ एक डिजाइन शुरू कर सकते हैं,
00:01:35अपना लेआउट बना सकते हैं।
00:01:37यहाँ का इंटरफ़ेस काफी जाना-पहचाना सा है।
00:01:39तो, अगर आप पहले से ही Figma से Auto Layout समझते हैं,
00:01:41तो आप समझ जाएँगे कि अगर आप चाहें तो यहाँ हाथ से शुरुआत से लेआउट कैसे बनाना है।
00:01:46हम वह तरीका नहीं अपनाने जा रहे हैं।
00:01:48हम बुनियादी तौर पर Claude या जो भी आप इस्तेमाल कर रहे हैं उससे पूछेंगे,
00:01:52चाहे आप Cursor इस्तेमाल कर रहे हों या कुछ और,
00:01:53हम उससे Paper MCP सर्वर का उपयोग करने के लिए कहेंगे,
00:01:58और हमारे लिए एक लेआउट डिजाइन करने को कहेंगे।
00:02:00और फिर हम उस डिजाइन को बेहतर बनाएँगे
00:02:02और Paper में उसमें कस्टम बदलाव करेंगे,
00:02:05और फिर उसे वापस भेज देंगे (port back)।
00:02:06तो, अब हमें उससे किसी काल्पनिक बिज़नेस के लिए
00:02:09एक लेआउट बनाने के लिए कहना होगा।
00:02:10अब, ऐसा करने से पहले, मैं coolers.co पर एक छोटा सा प्रयोग करना चाहता था।
00:02:14यह काफी समय से मौजूद है।
00:02:16लेकिन अगर आप "Start the Generator" पर क्लिक करते हैं,
00:02:18और फिर स्पेस बार दबाते हैं,
00:02:20तो आप अलग-अलग थीम्स देख सकते हैं,
00:02:22या यूँ कहें कि ऐप खुद ही उन्हें जेनरेट करता है।
00:02:24और फिर आप चाहें तो रंगों को खुद कस्टमाइज़ कर सकते हैं।
00:02:28तो, मैं बस इसे आगे बढ़ाता रहूँगा,
00:02:31ठीक है, यह दिलचस्प लग रहा है।
00:02:32यह एक हल्के रंगों वाली स्कीम है।
00:02:33यह काफी कलरफुल है, इत्यादि।
00:02:36मैं बस इसका एक स्क्रीनशॉट (print screen) ले लेता हूँ।
00:02:39और इसमें नीचे कलर कोड्स दिए गए हैं,
00:02:41जिन्हें हम Claude Code या जो भी आप इस्तेमाल कर रहे हैं, उसमें कॉन्टेक्स्ट के रूप में पेस्ट कर सकते हैं।
00:02:46और हम उससे कहेंगे कि जब वह किसी काल्पनिक बिज़नेस के लिए लेआउट बनाए,
00:02:51तो बस इन्हीं रंगों का इस्तेमाल करे।
00:02:53तो, प्रॉम्प्ट के लिए, मैं यहाँ Claude Code में फ्रंट-एंड डिजाइन स्किल का उपयोग करने जा रहा हूँ।
00:02:59यह आमतौर पर बेहतर परिणाम देता है।
00:03:01लेकिन अगर आप इसके साथ बहुत स्पेसिफिक नहीं होते हैं,
00:03:04तो यह अक्सर बहुत ही साधारण या "कुकी कटर" परिणाम देता है।
00:03:08तो, देखते हैं कि यह क्या बनाता है,
00:03:10और फिर हम Paper में उस डिजाइन को और बेहतर करेंगे।
00:03:12तो, सबसे पहले मैं "forward slash front-end design" टाइप करूँगा,
00:03:15जैसा कि आप यहाँ देख सकते हैं।
00:03:17मुझे लगता है कि यह अभी Claude Code के साथ अपने आप आता है,
00:03:19लेकिन अगर नहीं, तो मैं डिस्क्रिप्शन में एक वीडियो का लिंक दूँगा
00:03:22जो दिखाता है कि इसे एक स्किल के रूप में कैसे जोड़ा जाए।
00:03:25अब, /front-end design।
00:03:28अब, मैं प्रॉम्प्ट लिखूँगा।
00:03:29तो, यहाँ एक बहुत छोटा सा प्रॉम्प्ट है।
00:03:32Paper MCP सर्वर का उपयोग करें।
00:03:34यह रिक्वेस्ट करना बहुत महत्वपूर्ण है।
00:03:36एक काल्पनिक बिज़नेस के लिए एक मॉडर्न SaaS लेआउट डिजाइन करें
00:03:39जो प्रोडक्ट मैन्युफैक्चरिंग में क्वालिटी एश्योरेंस के लिए AI टेक्नोलॉजी का उपयोग करता हो।
00:03:43सुनने में थोड़ा बोरिंग लगता है।
00:03:43इसे डेस्कटॉप के लिए डिजाइन किया जाना चाहिए और इसमें एक नेव बार और एक हीरो सेक्शन होना चाहिए।
00:03:47और बस इतना ही।
00:03:47मैं चाहता हूँ कि आप इस कलर स्कीम का उपयोग करें।
00:03:49Hex वैल्यूज साथ में अटैच किए गए स्क्रीनशॉट में प्रत्येक रंग के नीचे दिखाई गई हैं,
00:03:53जो कि यहाँ है।
00:03:54अब, आपको सभी रंगों का उपयोग करने की ज़रूरत नहीं है।
00:03:56बस यह सुनिश्चित करें कि कंट्रास्ट सही हो और यह दिखने में अच्छा लगे।
00:03:59बस इतना ही।
00:04:00तो, मैं एंटर दबाने जा रहा हूँ,
00:04:02और हम देखेंगे कि यह Paper MCP सर्वर को एक्सेस करने के बारे में जानकारी देना शुरू कर देगा,
00:04:07और हम असल में Paper लोड करके देख सकते हैं कि रियल टाइम में क्या हो रहा है।
00:04:11अब, दुर्भाग्य से, मेरे कंप्यूटर पर Windows 11 के साथ एक समस्या है,
00:04:15जहाँ यह इस तरह फ्लैशिंग कर रहा है।
00:04:16मैंने पहले ही इसके फाउंडर से संपर्क किया है
00:04:18और उन्हें इसके बारे में बताया है, शायद आपके साथ यह समस्या नहीं होगी।
00:04:21ठीक है, और इसने यह डिजाइन तैयार किया है।
00:04:23मेरी राय में, यह काफी औसत है,
00:04:25और आप वास्तव में बता सकते हैं कि,
00:04:27"अरे, इसे काफी हद तक AI ने ही बनाया है।"
00:04:30तो, हम Paper का उपयोग करके इस डिजाइन में विजुअल बदलाव करेंगे,
00:04:34और फिर इसे वापस पोर्ट करेंगे।
00:04:36तो, मैं क्या करने जा रहा हूँ?
00:04:37पहली चीज़, मैं इसे थोड़ा सा बढ़ाना चाहता हूँ।
00:04:39ठीक है, यहाँ हमें थोड़ा व्हाइट स्पेस मिल गया।
00:04:42और अगला कदम, तो यह ऐसा है जैसे, ठीक है,
00:04:45आपको यहाँ लेयर्स को समझने में माहिर होना होगा।
00:04:48इस सेक्शन में, आप यहाँ लेयर्स देख सकते हैं,
00:04:51और हम देख सकते हैं कि हमारे पास दो कॉलम वाला एक हीरो सेक्शन है, लेफ्ट और राइट।
00:04:56मुझे वह वाला नहीं चाहिए।
00:04:57मैं बस इस तरह का एक एरिया चाहता हूँ,
00:05:01जो कि बस एक सेंटर कॉलम सेक्शन हो,
00:05:05और हम इसके पीछे एक दिलचस्प सेक्शन रखेंगे।
00:05:08लेकिन पहले, ठीक है, हम इसे लेंगे,
00:05:11और हम पूरे टेक्स्ट को सेंटर में करेंगे,
00:05:15और इसकी चौड़ाई (width) भी बढ़ाएंगे।
00:05:17अब, यहाँ ऊपर, आप देख सकते हैं कि विड्थ "auto" पर सेट है।
00:05:20अब, हम इसे फिक्स्ड भी रख सकते हैं,
00:05:23हम इसे "fill the container" कर सकते हैं,
00:05:25या हम इसे "fit content" कर सकते हैं।
00:05:26तो, फिट कंटेंट एक ही बात है।
00:05:28फिल कंटेनर।
00:05:29ठीक है, तो यह यहाँ उपलब्ध जगह को भर देगा,
00:05:33और फिर मैं इसे लूँगा,
00:05:36और यहाँ,
00:05:38हम देख सकते हैं कि यह पहले से ही 32 के गैप के साथ एक फ्लेक्सबॉक्स कंटेनर के रूप में सेट है।
00:05:44तो, अगर हम इसे एडजस्ट करते हैं,
00:05:46तो आप देखेंगे कि कैसे सब कुछ बिखरने लगता है।
00:05:48और मैं यह सुनिश्चित करना चाहता हूँ कि उस स्पेस में सब कुछ सेंटर में रहे।
00:05:53अभी सब कुछ एकदम परफेक्ट काम नहीं कर रहा है,
00:05:55क्योंकि हमें कुछ और बदलाव करने होंगे।
00:05:57तो, अगर चीजें उम्मीद के मुताबिक काम नहीं कर रही हैं, तो बस बारीकी से जाँच करते रहें।
00:06:01जैसे कि, यह एरिया।
00:06:04चलिए इसे सेंटर करते हैं।
00:06:06और फिर से, मैं बस इन सेंटर बटनों पर क्लिक कर रहा हूँ।
00:06:08यह टेक्स्ट है, इसलिए हम इस टेक्स्ट को सेंटर कर सकते हैं।
00:06:10ठीक है, तो यह अच्छा चल रहा है।
00:06:12यहाँ जो है, चलिए इस सबको सेंटर करते हैं।
00:06:15और फिर मैं इसे भी सेंटर कर दूँगा।
00:06:18ठीक है, तो मैं राइट-क्लिक कर सकता हूँ, और हम "Frame Selection" पर क्लिक कर सकते हैं।
00:06:21आह, इसने अपने आप काम कर दिया।
00:06:24तो, आपको लेआउट की इन सभी क्षमताओं के साथ प्रयोग करने के लिए तैयार रहना होगा।
00:06:30और Figma के साथ भी ऐसा ही है।
00:06:31जैसे कि, आपको लेआउट के साथ काम करना समझना होगा,
00:06:35क्योंकि यह कैनवस में वास्तविक ब्राउज़र का प्रतिनिधित्व करने की कोशिश कर रहा है।
00:06:40इसलिए चीजों को इधर-उधर ले जाना थोड़ा मुश्किल हो सकता है,
00:06:43अगर आपको यकीन नहीं है कि वे सब कैसे काम करते हैं।
00:06:44तो, बस इसके साथ थोड़ा समय बिताएं।
00:06:46आगे, मैं इसका एक स्क्रीनशॉट लेने जा रहा हूँ,
00:06:49ताकि इनमें से कुछ रंगों को उस तरीके से शामिल कर सकूँ जो मुझे लगता है कि पहले वाले से बेहतर होगा।
00:06:55क्योंकि, ध्यान दें, इसने कुछ रंग तो लिए, लेकिन सभी नहीं।
00:06:58ऐसा नहीं है कि हमें ज़रूरी तौर पर उनकी ज़रूरत है।
00:07:00लेकिन मैं बस आपको यहाँ कुछ अतिरिक्त बदलाव करने की प्रक्रिया दिखाना चाहता हूँ।
00:07:05तो, उदाहरण के लिए, अगर हम चाहते हैं कि हेडर सेक्शन का एक विशेष बैकग्राउंड कलर हो।
00:07:10तो मैं यह फिल लूँगा,
00:07:13और हम उस सबसे ऊपर वाले रंग का उपयोग करेंगे।
00:07:15वह है FC6471।
00:07:19ठीक है, यह बहुत ही खराब लग रहा है, क्योंकि अब टेक्स्ट सही से नहीं दिख रहा, है ना?
00:07:23तो, मैं यह एरिया लूँगा, सिलेक्शन कलर्स।
00:07:27हम बस इसे सफेद कर देंगे।
00:07:28हम काले वाले को भी सफेद कर देंगे।
00:07:31और, शायद, अगर हम चाहें, तो हम इसे CTRL + लेफ्ट क्लिक करके सिलेक्ट कर सकते हैं,
00:07:35और फिर उसे बोल्ड कर सकते हैं।
00:07:37ठीक है, Spectral AI।
00:07:39मैं इसे काला कर दूँगा, या मैं उस काले हिस्से को सफेद कर दूँगा।
00:07:43यह, मुझे वाकई यह ग्रेडिएंट पसंद नहीं आ रहा।
00:07:45तो, हाँ, हमारे पास यहाँ ग्रेडिएंट सपोर्ट भी है।
00:07:48शायद मैं इसे हल्का कर दूँगा।
00:07:51यह बस किसी तरह का एक साधारण सा अजीब लोगो है, जिससे कोई बड़ी बात नहीं है।
00:07:56मैं इसके बारे में ज़्यादा चिंतित नहीं हूँ।
00:07:57हम इसे इधर कर देंगे।
00:08:00ठीक है, और फिर, अंत में यहाँ, यह कंट्रास्ट बहुत ही खराब है।
00:08:04तो, शायद हम इसे सफेद बना सकते हैं।
00:08:11यह वाला काला हो सकता है, और फिर इस टेक्स्ट को भी हम हल्का कर देंगे।
00:08:20ठीक है, तो जैसा कि आप देख सकते हैं, बदलाव करना बहुत तेज़ और आसान है।
00:08:23अब, मान लीजिए कि हम इस बैकग्राउंड को लेकर कुछ कूल जोड़ना चाहते हैं,
00:08:29जैसे किसी तरह का शेडर इफेक्ट।
00:08:30तो, बिल्कुल यहाँ, आप क्लिक करें, आप शेडर्स देख सकते हैं।
00:08:34यह इस टूल की वास्तव में शानदार चीजों में से एक है,
00:08:38कि हम बहुत ही दिलचस्प और अनोखे शेडर्स बना सकते हैं।
00:08:42जैसे कि, उदाहरण के लिए, यहाँ यह स्मोक रिंग है।
00:08:45ठीक है, चलिए इसे आज़माते हैं।
00:08:46मैं इस पर क्लिक करने जा रहा हूँ।
00:08:47अब, जब आप ऐसा करते हैं, तो यह इसे DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) में बस एक और एलिमेंट के रूप में जोड़ देगा।
00:08:51यह फ्रंट-एंड डेवलपर वाली बातें हैं जो शायद आपने पहले न सुनी हों।
00:08:53यहीं पर टेक्निकल बैकग्राउंड होने से मदद मिलती है।
00:08:57तो, हम जो करना चाहते हैं वह यह है कि हम इसकी पोजीशन को वहाँ एब्सोल्यूट (absolute) कर देंगे।
00:09:00तो, जब आप ऐसा करते हैं, तो यह पारंपरिक बॉक्स मॉडल (box model) से बाहर निकल जाता है।
00:09:05और हम इस चीज़ को कहीं भी ले जा सकते हैं, हालाँकि सावधान रहें,
00:09:09क्योंकि अगर आप इसे कुछ खास चीजों के ऊपर ले जाते हैं, तो यह उसके अंदर चला जाएगा।
00:09:11खैर, हम इसे इस तरह स्ट्रक्चर करना चाहते हैं कि यह बिल्कुल टॉप लेफ्ट और राइट में रहे,
00:09:14और इस पूरे हीरो सेक्शन को कवर कर ले।
00:09:20तो, ऐसा करने के लिए यहाँ ऊपर, पहले हम X पोजीशन को ज़ीरो पर रखेंगे,
00:09:23और फिर Y पोजीशन को भी ज़ीरो पर रखेंगे।
00:09:28और फिर विड्थ को 100% और हाइट को भी 100% कर देंगे।
00:09:31अब, जब हम ऐसा करते हैं, तो सब कुछ छिप जाता है, है ना?
00:09:35खैर, दुर्भाग्य से, किसी कारण से यहाँ कोई Z-इंडेक्स नहीं दिख रहा है।
00:09:39अब, Z-इंडेक्स एब्सोल्यूट पोजीशन वाले एलिमेंट्स पर एक CSS प्रॉपर्टी है
00:09:42जहाँ आप उनके स्टैक (stack) या क्रम को कंट्रोल करते हैं।
00:09:47जहाँ आप इसके स्टैक और इसके फ्लो को कंट्रोल करते हैं।
00:09:50फ्लो नहीं, बल्कि इसके क्रम (order) को।
00:09:52इसे इन सब चीज़ों के नीचे होना चाहिए।
00:09:54और दुर्भाग्य से, मुझे यहाँ वह विकल्प नहीं दिख रहा है,
00:09:57लेकिन इसे क्लाउड कोड और फिर वापस अपने ब्राउज़र कोड, HTML और CSS में इम्पोर्ट करने के बाद,
00:10:04हम वहां इसे ठीक कर सकते हैं।
00:10:05लेकिन फिलहाल, हम यहाँ पैरामीटर्स में बदलाव करके इसे देख सकते हैं।
00:10:10तो, सभी शेडर्स के अपने अलग पैरामीटर्स होते हैं जिन्हें यहाँ दाईं ओर से बदला जा सकता है।
00:10:15तो, आप इसकी स्पीड और बाकी सभी चीज़ें बदल सकते हैं।
00:10:18अब आप यहाँ देख सकते हैं, हमारे पास एक फिल है जो काला है।
00:10:21अब, अगर हम इसे बस 0% कर दें, तो आह, ठीक है, अब हमें इसके पीछे की चीज़ें दिख रही हैं।
00:10:26हमें फ़ोरग्राउंड ठीक से नहीं दिख रहा है।
00:10:28तो फ़ोरग्राउंड के लिए, चलिए इस कलर को लेते हैं और अपनी स्मोक रिंग को चुनते हैं।
00:10:36हम इसके फिल को उस कलर में बदल देंगे।
00:10:39ओह नहीं, बल्कि फ़ोरग्राउंड को उस कलर में बदलेंगे।
00:10:43ओह, ठीक है, यह अभी भी थोड़ा अजीब लग रहा है, है ना?
00:10:46तो, चलिए यहाँ कुछ दूसरे एलिमेंट्स को बदलते हैं।
00:10:50हमारे पास स्केल है, थिकनेस (मोटाई) है।
00:10:54ओह, यह दिलचस्प है।
00:10:56हमारे पास रेडियस भी है।
00:10:58तो जैसा कि आप देख सकते हैं, इसके साथ प्रयोग करना वाकई बहुत मज़ेदार है।
00:11:03यह वास्तव में काफी कूल लग रहा है।
00:11:04मैंने इसके साथ थोड़ा और प्रयोग किया।
00:11:07हाँ, मैं इससे काफी खुश हूँ।
00:11:09चलिए अब एक अलग शेडर के साथ ट्राई करते हैं।
00:11:11यहाँ अच्छी बात यह है कि अगर हम इनमें से किसी भी वैल्यू की ओपेसिटी को 0% कर दें,
00:11:18तो हम इसके पीछे देख सकते हैं।
00:11:19बेशक, मैं नहीं चाहता कि ब्राउज़र में फाइनल रिजल्ट ऐसा दिखे।
00:11:23इसलिए, हम इसे ठीक करने के लिए Z-index प्रॉपर्टी का इस्तेमाल करेंगे,
00:11:27क्योंकि मुझे अभी तक यहाँ इसे एडजस्ट करने का विकल्प नहीं मिला है।
00:11:30ठीक है, तो मैं इसी के साथ आगे बढूँगा
00:11:32और हम देखेंगे कि Z-index की समस्या ठीक होने के बाद यह कैसा दिखता है।
00:11:35तो, मुझे लगता है कि हम इसी वाले का इस्तेमाल करेंगे।
00:11:39तो इसे कर्सर या क्लाउड कोड या जो भी आप इस्तेमाल कर रहे हैं,
00:11:43उसमें वापस ले जाने के लिए हम इसे सिलेक्ट करते हैं।
00:11:46और फिर हम वापस अपने टर्मिनल पर जाते हैं।
00:11:48तो, मैं यह कहने जा रहा हूँ, पेपर MCP सर्वर का इस्तेमाल करके
00:11:50पेपर में सिलेक्ट किए गए डिज़ाइन को वर्किंग वैनिला HTML,
00:11:53CSS और JavaScript में एक index.html फाइल के रूप में ट्रांसलेट करें।
00:11:56सुनिश्चित करें कि सब कुछ पूरी तरह से ट्रांसलेट हो जाए।
00:11:58मैंने शेडर सेटिंग्स का एक स्क्रीनशॉट भी अटैच किया है ताकि आप इसे सही ढंग से कर सकें।
00:12:01यह हिस्सा ज़रूरी है क्योंकि मैंने इसके फाउंडर से बात की थी
00:12:04और अभी यह सारी ज़रूरी जानकारी पास नहीं कर रहा है,
00:12:08कम से कम शेडर्स के मेरे शुरुआती टेस्ट्स में तो ऐसा ही लगा।
00:12:11अब, चलिए एंटर दबाते हैं और देखते हैं कि यह क्या करता है।
00:12:14ठीक है, यह हो गया।
00:12:15तो यह रहा।
00:12:16ये रहा वो डिज़ाइन।
00:12:17अब, यह शत-प्रतिशत वैसा ही नहीं दिख रहा है, खासकर वो शेडर
00:12:22जो आप बैकग्राउंड में देख सकते हैं।
00:12:24मेरा थोड़ा अलग दिख रहा है।
00:12:28इसमें थोड़ी बड़ी और बहती हुई लाइनें (flowing lines) हैं।
00:12:31और आपको बस यहाँ एक स्क्रीनशॉट लेना होगा।
00:12:34सुनिश्चित करें कि आप ग्रेडिएंट सेटिंग्स
00:12:36और मेश ग्रेडिएंट सेटिंग्स या जो भी आप इस्तेमाल कर रहे हैं, उसका स्क्रीनशॉट लें
00:12:38और इसे बार-बार बेहतर बनाने की कोशिश करें।
00:12:42अब, मुझे विश्वास है कि इसे जल्द ही ठीक कर दिया जाएगा
00:12:44जैसे-जैसे वे शेडर्स को सही ढंग से इंटीग्रेट करेंगे और देखेंगे कि
00:12:47MCP उस जानकारी को कैसे ट्रांसलेट करता है।
00:12:51तो अब, मैं चाहता हूँ कि आप designcourse.com पर जाएँ।
00:12:5630-डे AI नेटिव डिज़ाइनर चैलेंज सीरीज़ से जुड़ने के लिए
00:13:01इसका लिंक नीचे दिया गया है।
00:13:04और मैं चाहता हूँ कि आप 'पेपर' (Paper) का इस्तेमाल करें।
00:13:06इस डिज़ाइन को पूरा करने के लिए वहां एक 100% फ्री अकाउंट है।
00:13:11यह वही है जिस पर हमने पिछले चैलेंज में काम किया था।
00:13:14और इस डार्क सेक्शन में जो आप यहाँ देख सकते हैं,
00:13:17जहाँ लिखा है "आपका डिज़ाइन यहाँ",
00:13:18मैं चाहता हूँ कि आप उसी फ्लो का इस्तेमाल करके पेपर का उपयोग करें जो हमने अभी किया है।
00:13:24चैलेंज पेज पर मौजूद एसेट को डाउनलोड करें,
00:13:27जिसमें यह HTML है जो आप यहाँ देख रहे हैं,
00:13:30और पेपर का इस्तेमाल करके इसके नीचे के डिज़ाइन को पूरा करें।
00:13:33यह फिग्मा (Figma) में चैलेंज पेज है।
00:13:35अगर आप चाहें तो इसका संदर्भ ले सकते हैं।
00:13:38आपको इसका इस्तेमाल करना ही हो, ऐसा ज़रूरी नहीं है।
00:13:39लेकिन निर्देश यहाँ दिए गए हैं।
00:13:40बस एक फ्री अकाउंट बनाएँ।
00:13:42चैलेंज पेज से index.html एसेट डाउनलोड करें।
00:13:45इस सेक्शन के खाली स्पेस में डिज़ाइन को पूरा करने के लिए पेपर का इस्तेमाल करें।
00:13:49यहाँ आपका डिज़ाइन कुछ इस तरह जाएगा।
00:13:52आप इसे जैसा चाहें वैसा डिज़ाइन कर सकते हैं और जो चाहें लिख सकते हैं।
00:13:54बस यह सीमलेस (seamless) होना चाहिए।
00:13:56और फिर आप अगले सेक्शन में जो चाहें करने के लिए स्वतंत्र हैं,
00:13:59आप इसमें एनिमेशन और इंटरएक्टिविटी भी जोड़ सकते हैं।
00:14:02अगर आप ऐसा करते हैं, तो अपने सबमिशन के लिए एक वीडियो कैप्चर अपलोड करें
00:14:04क्योंकि हमारा सिस्टम वीडियो अपलोड को हैंडल कर सकता है।
00:14:07और मैं यह देखने के लिए वाकई उत्सुक हूँ कि आप लोग क्या बनाते हैं।
00:14:09मैं उनमें से लगभग 8 से 10 का रिव्यु करूँगा जैसा कि मैं चैलेंज के दौरान करता आया हूँ,
00:14:13वीडियो-आधारित रिव्यु, और हम देखेंगे कि आप क्या लेकर आते हैं।
00:14:16डिज़ाइन का भविष्य वास्तव में बहुत कूल है।
00:14:18हम जानते हैं कि अब इनमें से कई टूल्स आ रहे हैं जो AI-एजेनिक वर्कफ़्लो हैं।
00:14:24पेपर उनमें से एक है, पेंसिल दूसरा है, और मुझे लगता है कि हमें और भी बहुत कुछ देखने को मिलेगा।
00:14:28तो, हम देखेंगे कि कौन सबसे ऊपर आता है।
00:14:30क्या वह फिग्मा हो सकता है?
00:14:31मुझे नहीं पता।
00:14:32देखते हैं।
00:14:33मैं आप सभी से बहुत जल्द मिलूँगा।
00:14:34अलविदा।