00:00:00यह है Pencil, एक वाइब डिज़ाइन टूल जो किसी भी AI असिस्टेंट के प्रॉम्प्ट्स को
00:00:05आपकी आँखों के सामने शानदार डिज़ाइनों में बदल देता है, जिन्हें आप Figma की तरह ही एडिट कर सकते हैं।
00:00:10यह कंपोनेंट्स, UI किट्स, CSS वेरिएबल्स को सपोर्ट करता है और यह पूरी तरह से मुफ़्त है।
00:00:15लेकिन Sketch और अब Figma के नए MCP टूल के आने के बाद, जो लगभग ऐसा ही काम करते हैं,
00:00:19क्या Pencil एक ऐसा टूल है जिसे डिज़ाइनर्स इस्तेमाल करेंगे?
00:00:22सब्सक्राइब बटन दबाएं और चलिए इसके बारे में विस्तार से जानते हैं।
00:00:24यह कोई छिपी बात नहीं है कि AI डिज़ाइन के मामले में बहुत बेहतरीन नहीं है।
00:00:28मेरा मतलब है, ज़रा इसे देखिये।
00:00:30और भले ही अत्याधुनिक मॉडल्स के साथ स्किल्स जोड़ना मददगार होता है,
00:00:33लेकिन कभी-कभी आप कोड लिखने से पहले डिज़ाइन में बदलाव करना या क्लाइंट से मंज़ूरी लेना चाहते हैं।
00:00:38और यहीं पर Pencil काम आता है।
00:00:40यह एक एजेंट-संचालित डिज़ाइन टूल है जो आपके IDE में लोकली या स्टैंडअलोन ऐप के रूप में काम करता है।
00:00:46और यह उन लोगों के लिए बेहतरीन टूल है जो मेरी तरह क्लॉड कोड (Claude Code) का इस्तेमाल करना पसंद करते हैं।
00:00:51तो चलिए, एक छोटा सा डेमो देखते हैं।
00:00:52अब यहाँ पेंसिल अपनी पूरी चमक के साथ मौजूद है।
00:00:54और अगर आपने कभी Figma का इस्तेमाल किया है, तो यह आपको बहुत जाना-पहचाना लगेगा, जिसमें यहाँ बाईं ओर विकल्प हैं
00:00:59और दाईं ओर कैनवास या फ्रेम से जुड़े कुछ खास विकल्प दिए गए हैं।
00:01:03Pencil का सेटअप पूरा करने के बाद यह पहली फ़ाइल है जो आपको दिखाई देगी।
00:01:07और स्टेप वन और स्टेप टू पर जाने के बजाय,
00:01:09मैं सीधे स्टेप थ्री पर जाऊँगा ताकि आप देख सकें कि क्या हो रहा है।
00:01:12अब, यहाँ एक प्रॉम्प्ट दिया गया है,
00:01:14और आप इस चैट विंडो के अंदर इस प्रॉम्प्ट को चलाने के लिए 'रन' पर क्लिक कर सकते हैं।
00:01:18लेकिन मैं असल में टर्मिनल में अपने क्लॉड कोड का इस्तेमाल करने वाला हूँ,
00:01:22जिसमें मेरी स्किल्स, मेरे MCP सर्वर्स और वे सभी चीज़ें हैं जिनका मैं आदी हूँ
00:01:26ताकि Pencil को उन सभी चीज़ों का लाभ मिल सके।
00:01:29तो मैं इस प्रॉम्प्ट को कॉपी करूँगा और क्लॉड कोड के अंदर (वैसे, पहले जन्मदिन की बहुत-बहुत बधाई),
00:01:33मैं प्रॉम्प्ट को पेस्ट कर दूँगा और सुरक्षित रहने के लिए इसे Pencil MCP सर्वर का उपयोग करने के लिए कहूँगा।
00:01:37बस एहतियात के तौर पर।
00:01:39मूल रूप से, यहाँ प्रॉम्प्ट Pencil को कंपोनेंट्स का उपयोग करके
00:01:44एक रोवर मैनेजमेंट प्लेटफॉर्म के लिए डैशबोर्ड डिज़ाइन करने के लिए कह रहा है।
00:01:45वे कंपोनेंट्स जो यहाँ नीचे इस Lunaris UI किट के अंदर मौजूद हैं।
00:01:50तो अगर मैं फ्रेम पर वापस जाता हूँ, तो आप देख सकते हैं कि यह वास्तविक समय में मेरे लिए डैशबोर्ड बना रहा है।
00:01:56और अगर मैं क्लॉड कोड पर वापस जाऊँ, तो हम देख सकते हैं कि यह वास्तव में क्या कर रहा है।
00:01:59यह नेविगेशन बार बनाने के लिए Pencil MCP बैच डिज़ाइन टूल का उपयोग कर रहा है।
00:02:05इसने स्टेप वन पहले ही कर लिया है, जिसने मुख्य लेआउट स्ट्रक्चर तैयार कर दिया है।
00:02:08और अगर आप Pencil पर वापस जाते हैं, तो आप डिज़ाइन को रियल टाइम में जुड़ते और बदलते हुए देख सकते हैं।
00:02:13और अब जब क्लॉड ने काम पूरा कर लिया है, तो हम रियल टाइम में डिज़ाइन बदल सकते हैं।
00:02:17अब मैं बस इतना कहना चाहता हूँ कि इसने जो कुछ किया है, उससे मैं बहुत प्रभावित हूँ,
00:02:20सही आइकन चुनने से लेकर सही रंग और यहाँ इस अच्छे पिल बटन तक,
00:02:25और ये शानदार बटन भी।
00:02:27अब मैंने गौर किया कि “शो 10 रिकॉर्ड्स” साइड के बहुत करीब है।
00:02:31तो मैं यहाँ इस पर क्लिक करूँगा और फिर पैडिंग को थोड़ा बदल दूँगा।
00:02:34और यही Pencil की खूबसूरती है।
00:02:36डिज़ाइन में आप जो कुछ भी बदलना चाहते हैं, वह आप Figma की तरह ही कर सकते हैं,
00:02:40लेकिन आप सिर्फ इसी UI किट तक सीमित नहीं हैं।
00:02:42हकीकत में, चुनने के लिए बहुत सारे विकल्प हैं, जैसे Shadcn से लेकर Lunaris, Halo, Nitro तक,
00:02:48और इसके अलावा भी बहुत कुछ है।
00:02:49क्योंकि अगर मैं Shadcn पर क्लिक करता हूँ, तो आप देख सकते हैं कि मेरे पास थीमिंग एरिया में और भी विकल्प हैं,
00:02:54जैसे इसे डार्क मोड में बदलना, कुछ थीम्स बदलना, जैसे बटनों के लिए पीला रंग,
00:02:58और यहाँ तक कि ओवरऑल बैकग्राउंड को बदलना भी।
00:03:01लेकिन यहाँ कुछ ऐसी UI किट्स भी हैं जिनका उपयोग मैं अपने डिज़ाइन में मदद के लिए कर सकता हूँ।
00:03:05उदाहरण के लिए, चलिए पूरी तरह से शुरुआत से कुछ बनाते हैं।
00:03:08मैं यहाँ क्लिक करने जा रहा हूँ और डिफ़ॉल्ट रूप से यह चैट का उपयोग करता है,
00:03:11लेकिन मैं इसे कॉपी करके चैट विंडो में ले जा सकता हूँ।
00:03:13मगर ऐसा करने से पहले, मैं एक खाली पेज के लिए 'फाइल' और फिर 'न्यू' पर जाऊँगा।
00:03:17फिर मैं इसे 800 से ऊपर की चौड़ाई दूँगा, शायद 1024, और ऊँचाई को थोड़ा और बढ़ा दूँगा।
00:03:24अब यहाँ से, मैं फ्रेम को चुनूँगा और क्लॉड को स्टाइल गाइड का उपयोग करने के लिए कहूँगा।
00:03:28और एक बार यह हो जाने के बाद, मैं इसे एक प्रॉम्प्ट दूँगा कि एक बोहेमियन स्टाइल वाली
00:03:32फ्रेंच बेकरी के लिए वेबसाइट बनाओ, जिसमें Unsplash से तस्वीरें ली गई हों।
00:03:36तो मैं एंटर दबाता हूँ और देखता हूँ कि यह क्या बनाता है।
00:03:39अब मुझे अंदाज़ा नहीं है कि क्या उम्मीद की जाए, तो देखते हैं यह क्या करता है।
00:03:42अब, क्योंकि मैं सुपरपावर स्किल का उपयोग कर रहा हूँ,
00:03:45यह मुझसे वेबसाइट के बारे में कुछ फॉलो-अप सवाल पूछता है।
00:03:47और अब यह काम पर लग गया है।
00:03:49इसने असल में मेरी शुरूआती सेटिंग से भी ज़्यादा चौड़े फ्रेम का सुझाव दिया है।
00:03:52चीज़ों को थोड़ा तेज़ी से दिखाने के लिए मैं वीडियो की रफ़्तार बढ़ा रहा हूँ।
00:03:55और अब ऐसा लग रहा है कि क्लॉड ने वे तीन पेज बना लिए हैं जिनका उसने वादा किया था।
00:03:59और अगर हम डिज़ाइनों पर नज़र डालें, तो ईमानदारी से कहूँ तो यह बहुत प्रभावशाली लग रहा है।
00:04:02मेरा मतलब है, हाँ, यहाँ कुछ चीज़ें हैं जिन्हें मैं बदलना चाहूँगा,
00:04:06लेकिन अगर मैं इसे किसी वेबसाइट पर देखूँ, तो मैं यह नहीं मानूँगा कि इसे AI ने बनाया है—
00:04:10इसके लोगो से लेकर इस्तेमाल की गई इमेज और पूरे लेआउट तक।
00:04:14यह वाकई शानदार दिख रहा है।
00:04:16और मैं कमियों को लेकर ज़्यादा चिंतित नहीं हूँ
00:04:17क्योंकि मुझे बस उस चीज़ पर डबल क्लिक करना है जिसे मैं बदलना चाहता हूँ।
00:04:20और यहाँ मैं टेक्स्ट को इस तरह ड्रैग कर सकता हूँ और थोड़ा बदलाव कर सकता हूँ।
00:04:24और बस, यह लगभग ठीक हो गया है।
00:04:26अब मैं क्लॉड को इसे एक काम करने वाली वेबसाइट में कोड करने के लिए कहूँगा।
00:04:30और ये रही वेबसाइट।
00:04:32अब, मुझे उम्मीद नहीं थी कि यह इसमें ब्रेड वाला बैकग्राउंड जोड़ेगा।
00:04:35चूँकि वह डिज़ाइनों में नहीं था, लेकिन कोई बात नहीं।
00:04:38चलिए नीचे स्क्रॉल करते हैं।
00:04:39इसने लगभग हर चीज़ को हूबहू मैच किया है, जो बहुत प्रभावशाली है।
00:04:44चलिए 'आवर स्टोरी' पेज पर चलते हैं और... बेहतरीन।
00:04:47यह बिल्कुल वैसा ही दिख रहा है जैसा डिज़ाइनों में था, अच्छे टेक्स्ट और तीन स्टेप्स के साथ,
00:04:52और यह बात कि वे केवल वही सामग्री इस्तेमाल करते हैं जो वे खुद खाते हैं, जो कि बहुत कूल है।
00:04:56सभी इमेज बिल्कुल सही जगह पर हैं और यहाँ तक कि मेनू भी बहुत प्रभावशाली लग रहा है।
00:05:00मुझे वो हॉरिजॉन्टल लाइन पसंद आई जो इसने हर आइटम के अंत में जोड़ी है।
00:05:04अब, इस डिज़ाइन की खूबसूरती यह है कि इसे AI ने बनाया है,
00:05:07इसलिए मैं इसे अपने किसी भी डेटाबेस से जोड़ सकता हूँ। तो यह वास्तविक डेटा का उपयोग करता है।
00:05:10मैं साइट की क्वालिटी बढ़ाने के लिए किसी भी अन्य MCP टूल्स या स्किल्स का उपयोग कर सकता हूँ।
00:05:15यही नहीं, अगर मेरे पास पहले से ही Figma में डिज़ाइन होते,
00:05:18तो मैं उन्हें Pencil में उपयोग करने के लिए फ़ाइल में जाकर Figma से इम्पोर्ट भी कर सकता था।
00:05:22मैंने डिस्क्रिप्शन में इस वेबसाइट का लिंक दिया है ताकि आप खुद इसे आज़मा सकें।
00:05:25ईमानदारी से कहूँ तो मुझे अलग-अलग डिज़ाइनों को प्रॉम्प्ट के ज़रिए बनाने में बहुत मज़ा आया
00:05:29और उन्हें अपनी आँखों के सामने बनते देखना और बाद में एडिट कर पाने की सुविधा वाकई जादुई लगती है।
00:05:35साथ ही Pencil फ़ाइलें पूरी तरह से JSON में होती हैं,
00:05:38इसलिए किसी AI एजेंट के लिए इसे समझना और कोड में बदलना आसान होता है।
00:05:42लेकिन Pencil जितना शानदार है, यह उतना ही अधूरा भी है।
00:05:46मुझे 'बिल्ड चैट' में एक समस्या आई, जो किसी कारण से रिस्पॉन्स नहीं दे रही थी।
00:05:50नई फ़ाइलों पर 'जनरेटिंग' ओवरले कभी-कभी तब तक नहीं हटता था जब तक मैं पेंसिल को सेव या रीस्टार्ट न करूँ,
00:05:56और कुछ खास काम करते समय यह काफी धीमा महसूस होता था।
00:05:59लेकिन सच कहूँ तो, मुझे लगता है कि ये छोटी-मोटी चीज़ें हैं जिन पर टीम शायद अभी काम कर रही होगी,
00:06:04साथ ही Tailwind Plus जैसी कस्टम UI किट्स बनाने या इम्पोर्ट करने की सुविधा पर भी।
00:06:11और मैं आपको याद दिला दूँ, यह टूल अभी इस्तेमाल करने के लिए पूरी तरह मुफ़्त है।
00:06:15तो जाइए और इसका पूरा फ़ायदा उठाइए क्योंकि यह हमेशा मुफ़्त नहीं रहेगा क्योंकि इसे वेंचर फंडिंग मिली है।
00:06:19अब मैं कोई डिज़ाइनर नहीं हूँ। हाँ, चौंकिए मत।
00:06:22और हालाँकि मैंने Figma का MCP टूल या Sketch वाला टूल नहीं आज़माया है, लेकिन जो मैंने ऑनलाइन देखा है,
00:06:28उससे लगता है कि Pencil को सेटअप करना बहुत आसान है क्योंकि यह कई टूल्स के साथ आसानी से जुड़ जाता है।
00:06:34आसानी की बात करें तो, अगर आप कभी क्लॉड कोड से मैन्युअल कोडिंग के बजाय तुरंत टर्मिनल UI डिज़ाइन करवाना चाहते हैं,
00:06:39तो क्लॉड कैनवास (Claude Canvas) पर यह वीडियो देखें,
00:06:42जो आपको दिखाएगा कि यह ठीक-ठीक कैसे करना है।