00:00:00नमस्ते, आज का वीडियो पेपर के बारे में है। पेपर मूल रूप से फिग्मा जैसा है लेकिन क्लॉड कोड या
00:00:05कर्सर के लिए। यहाँ आप एक उदाहरण देख सकते हैं। हमारे पास पेपर डेस्कटॉप चल रहा है लेकिन फिर आप
00:00:10क्लॉड कोड के माध्यम से सब कुछ नियंत्रित कर सकते हैं जिसे आप यहाँ देख रहे हैं और यह
00:00:14वाकई अच्छा भी है क्योंकि आप अपने कंपोनेंट्स और अपने कोड के बीच
00:00:19बहुत आसानी से बदलाव कर सकते हैं। आप देख सकते हैं कि वर्सेल, ज़ेड, डब जैसी कंपनियाँ इसका उपयोग करती हैं। तो
00:00:24बहुत सारे शानदार उत्पाद इसका उपयोग कर रहे हैं। जब आप शुरुआत करते हैं तो ऐप ऐसा दिखता है।
00:00:28यह वह डेमो प्रोजेक्ट है जो आपको पहली बार मिलेगा। आप ऐप को
00:00:31paper.design/downloads से डाउनलोड कर पाएंगे और फिर अगला कदम
00:00:35यह है कि आपको एक MCP सर्वर इंस्टॉल करना होगा। अगर आप इसे
00:00:40कर्सर में इंस्टॉल करना चाहते हैं तो बस इस बटन पर क्लिक करें जिसे मैंने पहले ही कर दिया है लेकिन अब हम
00:00:43वास्तव में इसे क्लॉड कोड में आज़माने जा रहे हैं। तो हम इसे यहाँ कॉपी करने वाले हैं। यह
00:00:47पेपर MCP सर्वर स्कोप यूज़र को जोड़ देगा जिसका अर्थ है कि कंप्यूटर पर हर
00:00:53प्रोजेक्ट इसे एक्सेस कर सकता है। आम तौर पर जब आप MCP सर्वर जोड़ते हैं तो यह प्रोजेक्ट तक सीमित होता है
00:00:57और यहाँ आप देख सकते हैं कि ट्रांसपोर्ट वास्तव में लोकल है। यह
00:01:01पेपर डेस्कटॉप ऐप से जुड़ने वाला है। तो मैं इसे यहाँ इंस्टॉल करने जा रहा हूँ
00:01:06और अब जब हमने इसे इंस्टॉल कर लिया है, हम क्लॉड खोलेंगे। मैंने यहाँ
00:01:11Tmux में चार विंडोज़ खोली हैं। यह मूल रूप से Tmux स्टाइल में चलने वाला घोस्टी है
00:01:17जहाँ हमारे पास चार अलग-अलग विंडोज़ हैं इसलिए हम कुछ
00:01:19अलग-अलग डेमो करेंगे। मैंने सोचा क्यों न कुछ अलग विंडोज़ रखी जाएँ। तो हम अगला काम
00:01:22यह करेंगे कि हम इस प्रॉम्प्ट को टर्मिनल में कॉपी करेंगे। तो हम
00:01:28पेपर में एक खर्च ट्रैकिंग ऐप बनाएंगे। देखते हैं कि वह कैसा दिखता है। आप
00:01:33इस तरह का एक डेमो देख सकते हैं जो बाहर आने वाला है लेकिन हम देखेंगे कि यह वास्तव में कैसा दिखता है।
00:01:36इस बीच मैं वास्तव में कुछ और टास्क भी चलाने जा रहा हूँ। तो
00:01:40पेपर में मेरे लिए एक डेमो लैंडिंग पेज बनाओ और ऐसा बनाओ जो मुझे हैरान कर दे। देखते हैं कि क्या यह
00:01:44अच्छा काम करता है। एक फाइनेंस ऐप के लिए मेरे लिए एक डैशबोर्ड बनाओ। तो चलिए वह करते हैं और
00:01:48ट्विटर जैसे सोशल ऐप के लिए मेरे लिए डिज़ाइन सिस्टम बनाओ। तो मैं
00:01:53इन सबको एक साथ चलाने जा रहा हूँ। मुझे वास्तव में नहीं पता कि वे कैसे निकलेंगे तो
00:01:56देखते हैं कि यह कैसे काम करता है। यहाँ आप पिछला रन देख सकते हैं जो
00:02:00चल रहा है। हमारे पास एक डिज़ाइन ब्रीफ, एक पैलेट है। यह क्लॉड कोड चीज़ों के बारे में सोच रहा है
00:02:04और उन्हें 'वेलकम टू पेपर' ऐप में जोड़ रहा है जो हमारे पास है लेकिन चलिए नीचे चलते हैं।
00:02:08ठीक है, यह खत्म हो गया है। देखते हैं कि यह कैसा दिखता है। तो हम ज़ूम आउट करेंगे
00:02:13और देखेंगे कि क्या यह यहाँ कहीं है। ओह, तो हम देख सकते हैं कि हमारे अन्य ऐप्स वास्तव में
00:02:17बन रहे हैं और यहाँ आप हमारा खर्च प्रविष्टि ऐप देख सकते हैं जो बहुत अच्छा है।
00:02:22इसके लिए डिज़ाइन काफी ठोस है और वास्तव में जब मैंने इसे पहले चलाया था तो मुझे लगता है
00:02:25कि यह थोड़ा अलग ऐप के साथ आया था। यहाँ आप इन अन्यों को वास्तव में
00:02:30एक साथ काम करते हुए देख सकते हैं और इस पेपर ऐप की अच्छी बात यह है कि
00:02:34यह मूल रूप से फिग्मा ही है। तो वह सब कुछ जिससे आप फिग्मा में परिचित हो सकते हैं
00:02:39यहाँ बहुत समान दिखता है। यहाँ मैं चीज़ें बदल सकता हूँ और मैं वास्तव में वापस जाकर
00:02:43कुछ सुधार कर सकता हूँ। अपलोड सेक्शन को हटा दें और इसके बजाय वहाँ कुछ और डाल दें।
00:02:53देखते हैं कि ऐसा करने पर क्या होता है और आप देख सकते हैं कि ये सभी अभी भी
00:02:56बैकग्राउंड में चल रहे हैं। अगर हम यहाँ वापस जाएँ तो उम्मीद है कि वह अपलोड सेक्शन
00:03:00हट जाएगा। आप देख सकते हैं कि हमारा लैंडिंग पेज काफी अच्छा लग रहा है। 'इरादे के साथ डिज़ाइन करें
00:03:04सीमाओं के बिना बनाएँ'। वैसे यहाँ हम देख सकते हैं कि हमारे अन्य सभी
00:03:09कंपोनेंट्स एक साथ आ रहे हैं। डिज़ाइन सिस्टम वास्तव में शानदार और पेशेवर लग रहा है।
00:03:12मुझे लगता है कि आपने डिज़ाइन के लिए हज़ारों डॉलर दिए होते तो भी आपको यही चीज़ मिलती।
00:03:16बहुत ही शानदार और अच्छा है और निश्चित रूप से इसे फिग्मा की तरह पूरी तरह से एडिट किया जा सकता है।
00:03:20अंत में लैंडिंग पेज ऐसा दिखा और
00:03:24हम इसे एक सेकंड में टेलविंड के साथ रिएक्ट में डालने जा रहे हैं। यहाँ
00:03:28डैशबोर्ड है और दूसरा टास्क भी पूरा हो गया है। यहाँ आप स्प्लिट विड्थ देख सकते हैं तो
00:03:33वह भी हट गया और एडजस्ट हो गया। तो आपके पास ये वास्तव में पेशेवर दिखने वाले
00:03:36डिज़ाइन हैं और हमने सिर्फ प्रॉम्प्ट देकर इन्हें अस्तित्व में लाया है और इस सब के लिए हम
00:03:42कौशल के मौजूदा इकोसिस्टम का उपयोग कर सकते हैं जो क्लॉड कोड या कर्सर हमें पहले से प्रदान करते हैं
00:03:46इसलिए हम चाहें तो इन सबको डिज़ाइन करने के लिए फ्रंट-एंड डिज़ाइन स्किल का उपयोग कर सकते थे।
00:03:50तो मैं अब अपने ब्राउज़र में इस डिज़ाइन के साथ एक HTML पेज के लिए पूछने जा रहा हूँ, तो देखते हैं कि
00:03:54वह कैसे काम करता है और पेपर पर वापस जाते हुए मैं आपको कुछ और चीज़ें दिखाऊँगा।
00:03:58तो यहाँ मेरे पास यह कंपोनेंट है और मैं वास्तव में जो कर सकता हूँ वह यह है कि मैं
00:04:03'कॉपी एज़ टेलविंड' या 'कॉपी एज़ रिएक्ट CSS' कर सकता हूँ इसलिए मैं इसे बस कॉपी और पेस्ट कर सकता हूँ
00:04:08लेकिन मुझे लगता है कि हम एक सेकंड में यह भी देखेंगे कि क्लॉड कोड इसे
00:04:13हमारे लिए लोड कर सकता है ताकि हम इसे ब्राउज़र में खोल सकें और वाह,
00:04:17वहाँ आप देख सकते हैं कि इसने वास्तव में कर दिया है, यह वास्तव में आश्चर्यजनक है
00:04:20यहाँ आप बटन देख सकते हैं, मेरा मतलब है कि हाँ यह वाकई बहुत अच्छा है, अगर हम जाकर
00:04:24पेज का निरीक्षण करें तो देखते हैं कि वास्तव में क्या निकला है, तो यहाँ आप देख सकते हैं कि यह
00:04:29सिर्फ HTML और CSS का उपयोग किया गया है लेकिन हम इसे रिएक्ट और टेलविंड के साथ भी
00:04:35करवा सकते थे। आप फिग्मा की तरह चीज़ें बना सकते हैं, यह
00:04:40बिल्कुल वैसी ही चीज़ है, यहाँ आप साइड में देख सकते हैं कि हम चीज़ें बदल सकते हैं, हम
00:04:44रंग बदल सकते हैं, यह मूल रूप से फिग्मा के समान ही है लेकिन मैं गया और
00:04:48इस कंपोनेंट को भी साथ रखा क्योंकि मैं देखना चाहता था कि यह कैसा दिखेगा
00:04:51अगर मैं इसे एक नियमित ऐप में कॉपी और पेस्ट करूँ और यहाँ आप देख सकते हैं कि इसने बिल्कुल
00:04:55वही किया जैसा मैं चाहता था और यहाँ आप
00:05:00देख सकते हैं कि क्या कॉपी और पेस्ट किया गया था, यह बैकग्राउंड कंपोनेंट है, मैं आपको
00:05:05फिर से दिखाऊँगा क्योंकि मैंने इसे पहले किया था, तो मैं 'कॉपी एज़ टेलविंड' करूँगा, मैं
00:05:10कर्सर में जाऊँगा और इसे बस पेस्ट कर दूँगा और आप देख सकते हैं कि इसने मुझे यह दिया
00:05:14अब मैं इसे थोड़ा अनडू करूँगा और यह वास्तव में एक कंपोनेंट है जिसे मैंने
00:05:20खर्च ट्रैकिंग ऐप के लिए पहले पेस्ट किया था, आप टॉप बार, अमाउंट हीरो और
00:05:26इत्यादि देख सकते हैं तो यह वास्तव में रिएक्ट और टेलविंड है मूल रूप से उसी चीज़ के लिए जो
00:05:29हमने अभी किया और यहाँ आप देख सकते हैं कि यह हमारे ऐप में वास्तविक रिएक्ट कोड है,
00:05:34यह एक और वेरिएंट है जब मैंने 20 मिनट पहले प्रॉम्प्ट दिया था और इसलिए यह वर्ज़न
00:05:40एक है, यह दूसरा वर्ज़न है जहाँ हमने इसे नियमित HTML और CSS के साथ किया
00:05:44और दोनों ही बहुत अच्छे निकले, मैं वास्तव में देखना चाहता हूँ कि क्लॉड कोड में
00:05:49अन्य ऐप्स कैसे निकलते हैं, इसलिए मैं उन सभी स्क्रीन्स के HTML वर्ज़न के लिए पूछ रहा हूँ
00:05:53जिन्हें हमने अभी डिज़ाइन किया है और मैंने अभी यह भी किया कि मैंने राइट
00:05:58क्लिक करके 'कॉपी एज़ रिएक्ट CSS' किया, कर्सर में गया, इसे पेस्ट किया और यह एक असली ऐप है
00:06:04आप देख सकते हैं कि यह localhost 3001 पर चल रहा है, यह इनबॉक्स ज़ीरो का हिस्सा है, बस एक डेमो
00:06:09पेज जो मैंने जोड़ा और आप देख सकते हैं कि यह भी पूरी तरह से काम कर रहा है जो वास्तव में
00:06:13अच्छा है, पहली बार में यह वास्तव में रिस्पॉन्सिव नहीं है लेकिन उसके अलावा यह काफी
00:06:18ठोस है, यहाँ आप देख सकते हैं कि इसे रिस्पॉन्सिव बनाने के लिए कुछ काम करने की ज़रूरत है लेकिन मुझे लगता है कि अवधारणा
00:06:22कम से कम बहुत शानदार है और यह वास्तव में वह HTML वर्ज़न है जो अभी
00:06:26लोड हुआ है जिसे हमने प्रॉम्प्ट किया था और यह कुछ हद तक अधिक रिस्पॉन्सिव है, यह
00:06:33यहाँ थोड़ा संघर्ष करना शुरू करता है लेकिन कम से कम यह दूसरे वर्ज़न से बेहतर है
00:06:36तो हाँ यह बहुत अच्छा है, अब मैं दिखाना चाहता हूँ कि आप इससे
00:06:41इमेज भी जनरेट करवा सकते हैं, तो अगर आप कमांड I दबाएँ, देखते हैं कि क्या हम वह कर सकते हैं और
00:06:46हम इसे हमारे लिए एक इमेज जनरेट करने के लिए कहेंगे, तो जो प्रॉम्प्ट मैंने लिखा है वह
00:06:50इनबॉक्स ज़ीरो और AI ईमेल असिस्टेंट के लिए एक सुंदर विज्ञापन बनाने का है, यह आपको इनबॉक्स
00:06:54ज़ीरो तक तेज़ी से पहुँचने में मदद करता है। आप यहाँ देख सकते हैं कि अलग-अलग मॉडल हैं जिनका आप उपयोग कर सकते हैं जैसे नैनो बनाना
00:06:59प्रो, चलिए पहले इसके लिए वैरायटी पैक करते हैं उम्मीद है कि मैं इसे कर पाऊँगा और
00:07:05हाँ आप देख सकते हैं कि इसने चार इमेज बनाना शुरू कर दिया है और मैं
00:07:10वास्तव में फिर से कोशिश करना चाहता हूँ क्योंकि मैं जिज्ञासु हूँ कि क्या होता है अगर हम नैनो बनाना प्रो
00:07:14से इमेज बना सकें। तो एक और इमेज बनाई जा रही है और मुझे उम्मीद है कि जल्द ही
00:07:19वे बाहर आएँगी। ओह यहाँ आप विज्ञापनों को शुरू होते देख सकते हैं जो हाँ, मेरा मतलब है
00:07:25वे अच्छे लग रहे हैं, ज़ाहिर है उन्हें कुछ काम की ज़रूरत है लेकिन पहली कोशिश के रूप में यह
00:07:29बहुत अच्छा है। इसे देखें 'इनबॉक्स ज़ीरो', आप जानते हैं कि आपको ऐसे डिज़ाइनर मिल सकते हैं
00:07:35जो इससे भी खराब डिज़ाइन करते हों और फिर इन चारों में से मुझे यह वाला
00:07:39सबसे ज्यादा पसंद आया लेकिन हाँ आप देख सकते हैं कि ज़ाहिर तौर पर वह एक ही बार में किया गया था, आप उस पर
00:07:43काफी सुधार कर सकते हैं। देखते हैं कि नैनो बनाना प्रो क्या लेकर आता है, वह वाला
00:07:47सबसे प्रभावशाली हो सकता है। हाँ 'योर फास्ट ट्रैक टू काम, द AI ईमेल असिस्टेंट'। मुझे
00:07:51लगता है कि यह वाकई ठोस है, एक बार में बनाया गया यह कोई बुरा ग्राफ़िक नहीं है। मुझे
00:07:55यह भी दिलचस्प लगा कि इसे लोगो का पता है जैसे क्या AI ने इनबॉक्स ज़ीरो के
00:08:00लोगो को पहचान लिया है या यह सिर्फ इत्तेफाक है कि यह हमारे लोगो टेक्स्ट जैसा ही दिखता है।
00:08:04अब खत्म करने से पहले मैं आपको दो और चीज़ें दिखाना चाहता हूँ। अगर मैं
00:08:09इस इमेज पर क्लिक करूँ और S दबाऊँ तो मैं अलग-अलग इफेक्ट्स दे सकता हूँ, तो यहाँ आप
00:08:13इस इमेज का वॉटर इफेक्ट देख सकते हैं। अगर मैं फिर से S दबाऊँ तो यहाँ लिक्विड मेटल है। मैं
00:08:18वास्तव में निश्चित नहीं हूँ कि यह कैसे काम करता है क्योंकि मुझे नहीं लगता कि यह हमारी इमेज से संबंधित है
00:08:21लेकिन आप देख सकते हैं कि आप ये वास्तव में शानदार इफेक्ट्स बना सकते हैं और आप वास्तव में
00:08:24उन्हें अपने लैंडिंग पेज में उपयोग कर सकते हैं। यहाँ उस इमेज का एक और वर्ज़न है जो हमने
00:08:27बनाई थी और फिर एक और चीज़ जो अच्छी है वह यह है कि रंग कथित तौर पर
00:08:33सुसंगत और सटीक हैं। पेपर में दुनिया का पहला यूनिफॉर्म कलर पिकर है जो
00:08:37रंगों को आसान बनाता है। और इसलिए अगर लोग इससे परिचित नहीं हैं, तो आपके पास फिग्मा में एक रंग
00:08:41हो सकता है और फिर आपकी वेबसाइट पर दूसरा रंग और वह एक-से-एक नहीं होता। यह
00:08:45वास्तव में काफी कष्टप्रद है। हमारी वेबसाइट पर नीले रंगों के साथ ऐसा हुआ था जहाँ फिग्मा
00:08:48एक चीज़ दिखा रहा था और वेबसाइट कुछ और दिखा रही थी भले ही वह हेक्स कोड पर
00:08:52एक-से-एक होना चाहिए था कि रंग क्या होने वाला था। और इसलिए
00:08:56अगर आप ऐसे व्यक्ति हैं जिसने हमारी तरह इस समस्या का सामना किया है, तो यह भी एक बहुत अच्छी
00:08:59फीचर है और सबसे आखिरी चीज़ जो मैं आपको दिखाना चाहता हूँ वह है हमारे मौजूदा कोड बेस से
00:09:04पेपर में एक डिज़ाइन सिस्टम बनाना और आप देख सकते हैं कि इसने कोड बेस का विश्लेषण करना शुरू कर दिया है।
00:09:08यह सिर्फ नियमित क्लॉड कोड है, आप देख सकते हैं कि इसने हमारे फोंट्स ले लिए हैं।
00:09:12अब हमें वास्तव में मुश्किल हुई क्योंकि जाहिर तौर पर हमने इस वीडियो में
00:09:17पेपर प्रो के लिए साप्ताहिक MCP टूल लिमिट पार कर ली है इसलिए हम वास्तव में यह नहीं देख सकते कि वह
00:09:20कैसा दिखता लेकिन संक्षेप में, हम अपने मौजूदा कोड बेस को कह पाते
00:09:23और फिर देख पाते कि वह पेपर में कैसा दिखता है और फिर हम उसे
00:09:28पेपर में एडिट कर पाते और फिर कोड को वापस अपने प्रोजेक्ट में डाल पाते। तो यह एक बहुत ही
00:09:32अच्छी फीचर है। मुझे लगता है कि एक जगह जहाँ यह बहुत काम आता है जहाँ यह
00:09:35हमारे लिए बहुत मददगार होता जब हम ये डेमो डिज़ाइन कंपोनेंट्स कर रहे होते जैसे हम
00:09:39एक लैंडिंग पेज के लिए स्क्रीनशॉट ले रहे होते हैं, आम तौर पर हम जो करते हैं वह यह है कि
00:09:43सिर्फ स्क्रीनशॉट लेना आसान होता है लेकिन मैं अक्सर जो करना चाहता हूँ वह है उसे थोड़ा एडिट करना,
00:09:47पेज पर मौजूद टेक्स्ट को एडिट करना, कुछ असली ईमेल को छिपाना जो वहाँ हैं और
00:09:50इसे फिग्मा या पेपर में रखना बहुत आसान है क्योंकि मैं ज़रूरत के अनुसार बिल्कुल टाइप और एडिट कर सकता हूँ
00:09:55और फिर यह सिर्फ एक स्क्रीनशॉट नहीं है, मैं इसे एक वास्तविक इमेज, PNG या JPEG के रूप में एक्सपोर्ट कर सकता हूँ।
00:09:58यहाँ वह ट्विटर सोशल ऐप है जिसे हम बना रहे थे और ये भी वाकई शानदार डिज़ाइन हैं।
00:10:03लेकिन वैसे भी, आशा है कि आपने वीडियो का आनंद लिया होगा, आशा है कि बहुत अधिक कूद-फाँद नहीं हुई होगी।
00:10:07हम एक साथ कुछ अलग चीज़ें चला रहे थे। मैं इन दिनों इसी तरह से बहुत कोडिंग
00:10:10कर रहा हूँ और इसलिए शायद वह वीडियो में थोड़ा झलक गया हो लेकिन हाँ मुझे उम्मीद है
00:10:14कि आपको यह मददगार लगा होगा। मुझे बताएं कि आप पेपर के साथ क्या बनाने का फैसला करते हैं।
00:10:17मुझे लगता है कि यह एक बहुत ही उपयोगी उपकरण है। मैं खुद को काफी जल्द इसके प्रो वर्ज़न में
00:10:20अपग्रेड करते हुए देख सकता हूँ और भविष्य के वीडियो के लिए सब्सक्राइब
00:10:24करना न भूलें।