00:00:00AI के साथ काम करते समय डिज़ाइन से कोड का हैंडऑफ अभी भी सबसे ज़्यादा उलझा हुआ हिस्सा क्यों है?
00:00:04आपको लगेगा कि अब तक तो किसी चीज़ को डिज़ाइन करने,
00:00:06उसे बदलने और कोड को अपने आप अपडेट करने का कोई साफ़ तरीका आ गया होगा।
00:00:08लेकिन हमारी टीम ने जितने भी टूल आज़माए हैं, वे या तो डिज़ाइन करते हैं या कोड। कभी दोनों नहीं।
00:00:13Stitch और Bolt सिर्फ प्रॉम्प्ट-टू-कोड हैं। वहां कोई ऐसा डिज़ाइन कैनवास नहीं है जिस पर आप वापस जाकर बदलाव कर सकें।
00:00:17Figma MCP सिर्फ 'रीड-ओनली' है, इसलिए AI इससे डिज़ाइन ले तो सकता है लेकिन इस पर डिज़ाइन नहीं बना सकता।
00:00:22और अगर आप सीधे किसी कोडिंग एजेंट का उपयोग कर रहे हैं, तो हर डिज़ाइन बदलाव का मतलब है शुरू से फिर से प्रॉम्प्ट देना।
00:00:26इसलिए जब Pencil.dev ने डिज़ाइन और कोड के बीच एक द्वि-दिशीय (bi-directional) पुल होने का दावा करते हुए लोकप्रियता हासिल करनी शुरू की,
00:00:31तो इसने हमारा ध्यान खींचा। लेकिन जब हमने असल में इसके साथ काम करना शुरू किया,
00:00:35तो यह पुल उतना सहज नहीं था जितनी हमने उम्मीद की थी। और जो सिर्फ एक टूल की टेस्टिंग के रूप में शुरू हुआ था,
00:00:40वह हमारी टीम के लिए इस वर्कफ़्लो को वास्तव में काम करने लायक बनाने की एक गहरी कोशिश बन गया।
00:00:44तो, आपने शायद पहले ही Pencil.dev के बारे में सुना होगा,
00:00:47जो नया AI डिज़ाइन टूल है और आजकल डिज़ाइनर्स के बीच काफी लोकप्रिय हो रहा है।
00:00:51यह मूल रूप से उन लोकप्रिय डिज़ाइन टूल्स और AI डेवलपमेंट टूल्स के बीच का एक पुल है,
00:00:56जो उन डिज़ाइन पैटर्न्स को लागू करने के लिए तैयार किए गए हैं।
00:01:00यह सभी लोकप्रिय एजेंटिक IDEs से जुड़ता है और इसमें कई ऐसे फीचर्स हैं जो
00:01:04डिज़ाइन-टू-कोड वर्कफ़्लो को आसान बनाते हैं, जैसे कंपोनेंट जनरेशन,
00:01:08UI लाइब्रेरी सपोर्ट और ऑटोमैटिक CSS क्लास जनरेशन।
00:01:11Figma इस्तेमाल करने वालों के लिए, इसका इंटरफ़ेस शायद उसके सबसे करीब होगा।
00:01:15यह फिलहाल फ्री है और हमारी टीम ने इसे टेस्ट करने के लिए डाउनलोड किया।
00:01:18हमने डेस्कटॉप ऐप लिया और उसके साथ उन सभी AI प्लेटफॉर्म्स से जुड़ने के विकल्प मिले
00:01:23जो हमारे पास इंस्टॉल थे। हमने इसे Claude Code से जोड़ा क्योंकि हम इसे
00:01:27अपने मुख्य टूल के रूप में इस्तेमाल कर रहे थे। Pencil.dev अपना काम करने के लिए अंदरूनी तौर पर
00:01:32Claude Code और Codex जैसे AI कोडिंग प्लेटफॉर्म्स का इस्तेमाल करता है। डेस्कटॉप ऐप इंस्टॉल होते ही,
00:01:36Pencil.dev के लिए MCP अपने आप कॉन्फ़िगर हो गया और सभी टूल्स तुरंत Claude Code में दिखाई देने लगे।
00:01:41एक बार सेटअप हो जाने के बाद, चैट में सभी OpenAI और Anthropic मॉडल्स उपलब्ध थे।
00:01:46हमने सभी मॉडल्स में से Opus 4.6 को चुना। इस टूल में कुछ बेहतरीन डिज़ाइनिंग क्षमताएं हैं।
00:01:51यह डिज़ाइन फ़ाइलों को प्रोजेक्ट फ़ोल्डर के अंदर .pen फ़ाइल के रूप में रखता है,
00:01:56जो मूल रूप से JSON-आधारित फॉर्मेट है जिसे आप Git के साथ वर्शन ट्रैक भी कर सकते हैं। लेकिन जो फीचर
00:02:01इसे अन्य टूल्स से अलग बनाता है, वह है ऐप में कोडिंग एजेंट और डिज़ाइन के बीच द्वि-दिशीय पुल के रूप में काम करने की क्षमता।
00:02:06लेकिन यह वैसा नहीं था जैसा हमने उम्मीद की थी कि यह द्वि-दिशीय सिंक कैसा होगा।
00:02:10हमने माना था कि Claude या कोई भी AI एजेंट डिज़ाइन को कोड के साथ और कोड को डिज़ाइन के साथ ऑटो-सिंक कर देगा,
00:02:16पर ऐसा नहीं हुआ। हमें इसे सिंक करने के लिए मैन्युअल रूप से प्रॉम्प्ट देना पड़ता था,
00:02:21क्योंकि यह डिज़ाइन को कोड के साथ अपने आप सिंक नहीं करता है। इसके बाद यह डिज़ाइन के हर सेक्शन का विश्लेषण करता है
00:02:26और उसे HTML फ़ाइल में लागू करता है। यह बिल्कुल वैसा ही दिखता था जैसा कैनवास पर डिज़ाइन था,
00:02:32लेकिन हमें लगा कि हर डिज़ाइन बदलाव के बाद बार-बार ऐसा करना बहुत ज़्यादा समय लेने वाला काम है।
00:02:37हमारी टीम एक क्रिएटर डायरेक्शन स्टूडियो के लिए लैंडिंग पेज पर काम कर रही थी,
00:02:41जिसे हमने पहले ही Claude Code से जुड़े pencil.dev का उपयोग करके डिज़ाइन किया था। और जहाँ तक हम देख पा रहे थे,
00:02:46यह एक बेहतरीन वेबसाइट थी जिसमें वह क्रिएटिव डायरेक्शन साफ़ दिख रहा था जैसा हमने चाहा था।
00:02:51हमने Claude का उपयोग करके एक बार डिज़ाइन लागू किया और उसे उस Next.js प्रोजेक्ट के साथ सिंक कर दिया जिस पर हम काम कर रहे थे,
00:02:56लेकिन पेज पर कई ऐसे एलिमेंट्स थे जो हमें पसंद नहीं आए और उनमें बदलाव की ज़रूरत थी।
00:03:01हमें प्रोजेक्ट में बार-बार कई चीज़ें बदलने की ज़रूरत थी, लेकिन हम बार-बार Claude के पास जाकर
00:03:06लागू किए गए प्रोजेक्ट के साथ फिर से सिंक करने के लिए नहीं कह सकते थे क्योंकि यह एक उबाऊ काम है। इसलिए हमने क्या किया,
00:03:10इस समस्या को हल करने के लिए एक स्क्रिप्ट बनाई। इस स्क्रिप्ट में कई जावास्क्रिप्ट लाइब्रेरीज़ का इस्तेमाल किया गया है
00:03:15जो बदलावों के लिए फ़ाइलों की निगरानी करती हैं। इसमें 'कूलडाउन पीरियड' भी था ताकि Claude बार-बार ट्रिगर न हो,
00:03:20जिससे टोकन बर्बाद न हों और सेशन अपनी लिमिट तक न पहुँचे। स्क्रिप्ट का पूरा उद्देश्य
00:03:25.pen फ़ाइल पर नज़र रखना है जिसमें डिज़ाइन है और जब भी फ़ाइल में कोई बदलाव होता है,
00:03:29तो यह Claude CLI को एक प्रॉम्प्ट के साथ ट्रिगर करता है कि प्रोजेक्ट के साथ कैसे सिंक करना है।
00:03:34लेकिन इसमें कूलडाउन पीरियड जोड़ा गया था जिसने हर 'सेव' के बीच एक अंतराल बनाया ताकि यह सीधे तौर पर
00:03:39सभी छोटे बदलावों को एक साथ सिंक न करे। अब इसे इस्तेमाल करने के लिए, हमें बस 'npm run sync' कमांड चलानी थी
00:03:44और वर्कर ने तुरंत काम शुरू कर दिया और हमारे डिज़ाइन वाली .pen फ़ाइल की निगरानी करने लगा।
00:03:49अगर हम इस स्क्रिप्ट के चलते कुछ भी बदलते हैं, तो जब भी हम सेव की दबाते हैं,
00:03:54तो यह अपने आप Claude CLI को ट्रिगर कर देता है और बिना बताए ही उस बदलाव को प्रोजेक्ट में सिंक करना शुरू कर देता है।
00:03:59लेकिन इस स्क्रिप्ट का उपयोग करने से पहले, आपको एक प्री-स्टेप करना होगा। आपको उन सभी अनुमतियों को पहले से कॉन्फ़िगर करना होगा
00:04:04जो एडिटिंग के लिए ज़रूरी हैं, जैसे कि रीड, राइट और MCP टूल कॉल्स,
00:04:10इसे .claude फ़ोल्डर के अंदर setting.json में जोड़ना होगा क्योंकि अगर आप ऐसा नहीं करते हैं, तो Claude अनुमति के प्रॉम्प्ट पर अनिश्चित काल के लिए अटक जाएगा।
00:04:15उसके बिना Claude प्रोजेक्ट में बदलाव नहीं कर पाएगा और इम्प्लीमेंटेशन को ठीक से पूरा नहीं कर सकेगा।
00:04:20इस स्क्रिप्ट के चलने से काम आसान हो गया क्योंकि हमें अब प्रोजेक्ट के साथ सिंक करने के लिए मैन्युअल रूप से प्रॉम्प्ट देने की ज़रूरत नहीं थी।
00:04:24स्क्रिप्ट द्वारा हर इटरेशन की निगरानी की गई और कार्यान्वयन के लिए स्वचालित रूप से Claude को भेज दिया गया।
00:04:29अब यह स्क्रिप्ट और इस ऐप का सोर्स कोड AI Labs Pro में उपलब्ध है।
00:04:34जो लोग नहीं जानते, उनके लिए बता दूँ कि यह हमारी हाल ही में लॉन्च की गई कम्युनिटी है जहाँ आपको तैयार टेम्पलेट्स मिलते हैं,
00:04:39जिन्हें आप इस वीडियो और पिछले सभी वीडियो के लिए सीधे अपने प्रोजेक्ट्स में प्लग कर सकते हैं।
00:04:43अगर आपको हमारे काम में वैल्यू मिली है और आप चैनल को सपोर्ट करना चाहते हैं, तो यह इसका सबसे अच्छा तरीका है।
00:04:48लिंक डिस्क्रिप्शन में है। Claude Code की क्षमताओं में से एक
00:04:52मल्टी-एजेंट सिस्टम का उपयोग करना है जो कई कार्यों को समानांतर (parallel) करता है और उनकी गति बढ़ाता है।
00:04:57हमने सोचा क्यों न pencil.dev के साथ मल्टी-एजेंट सेटअप को आज़माया जाए। चूंकि यह वैसे भी MCP के रूप में जुड़ा है,
00:05:02इसलिए हमने अगले इम्प्लीमेंटेशन के लिए मल्टीपल एजेंट्स का इस्तेमाल किया, जिससे हर एजेंट ऐप के अलग हिस्से पर एक साथ काम कर सके।
00:05:07Claude Code के साथ इसका उपयोग करना आसान हो गया क्योंकि यह उन सभी डॉक्यूमेंट फ़ाइलों तक पहुँच सकता है
00:05:12जिन्हें हमने कॉन्टेक्स्ट के रूप में स्टोर किया था, जैसे कि PRD और UI गाइड, जो हम आमतौर पर प्रोजेक्ट शुरू करने से पहले बनाते हैं।
00:05:18हमें वेबसाइट के अन्य पेजों को भी इम्प्लीमेंट करना था, न कि इसे सिर्फ एक लैंडिंग पेज तक सीमित रखना था।
00:05:23हमने इसे स्पष्ट रूप से यह काम करने के लिए कहा, कि हर एजेंट ऐप के अलग-अलग हिस्से को संभाले जिसे हम बनाना चाहते थे।
00:05:28तो हमने एक्सप्लोरेशन के साथ शुरुआत की और मल्टीपल MCP टूल्स को कॉल किया।
00:05:33चूंकि हमारे पास पांच पेज थे, Claude ने पांच एजेंट बनाए और हर एक को एक समर्पित पेज पर काम करने के लिए लगा दिया।
00:05:39थोड़ी देर बाद, एप्लिकेशन के डिज़ाइन का शुरुआती वर्शन तैयार हो गया। इसने
00:05:44ऐप में ज़रूरी सभी पेजों को बनाया और यह सुनिश्चित किया कि डिज़ाइन लैंडिंग पेज से मेल खाए, और पूरे में एक ही फ़ॉन्ट और स्टाइलिंग का इस्तेमाल किया।
00:05:48एक बार डिज़ाइन पूरा हो जाने के बाद, हमने फ़ाइल को सेव करने के लिए Command + S दबाया
00:05:54और स्क्रिप्ट ने मैन्युअल प्रक्रिया को तेज़ करने के लिए ऐप में डिज़ाइन को स्वचालित रूप से लागू करना शुरू कर दिया।
00:05:58अब उस समय वेबसाइट, भले ही देखने में ठोस लग रही थी, लेकिन उसमें कुछ कमी थी।
00:06:03पेज पर कोई मोशन नहीं था और इसे स्क्रॉल एनिमेशन की ज़रूरत थी जो नज़र को एक स्टैटिक लेआउट के बजाय सही दिशा में ले जाए।
00:06:08उसके लिए हम GSAP की ओर गए जो कि हमारी पसंदीदा लाइब्रेरी है क्योंकि
00:06:14इसके जावास्क्रिप्ट एनिमेशन मज़बूत हैं और जटिल एनिमेशन लागू करना आसान है। इसके लिए हमारे पास
00:06:19XML में लिखा गया एक बहुत ही विस्तृत प्रॉम्प्ट था। हमने XML का उपयोग किया क्योंकि Claude मॉडल्स को
00:06:26XML स्ट्रक्चर्ड प्रॉम्प्ट्स के साथ बेहतर काम करने के लिए ट्यून किया गया है और यह उन्हें निर्देशों को आसानी से समझने में मदद करता है। प्रॉम्प्ट में
00:06:31टास्क की डिटेल्स, सभी ज़रूरी डिपेंडेंसीज़ और सभी महत्वपूर्ण नोट्स शामिल थे,
00:06:36जो हर खास एलिमेंट को टारगेट कर रहे थे और बता रहे थे कि हर सेक्शन को उनके संबंधित टैग्स में कैसे व्यवहार करना चाहिए।
00:06:41जब हमने यह प्रॉम्प्ट Claude Code को दिया, तो इसने कई चीज़ें जोड़ीं और
00:06:46GSAP मोशन वाले कंपोनेंट्स जोड़े और खुद GSAP इंस्टॉल किया। एक बार इम्प्लीमेंटेशन का वह हिस्सा
00:06:51पूरा हो जाने के बाद, हमने वेबसाइट चेक की। एनिमेशन जुड़ने से वेबसाइट और भी जीवंत और इंटरैक्टिव हो गई।
00:06:56वेबसाइट का पूरा अनुभव पिछले वर्शन की तुलना में बहुत अलग लगा,
00:07:00जो कि बिना किसी मोशन के सिर्फ स्टैटिक था। अब यह प्रॉम्प्ट हमारी
00:07:04कम्युनिटी AI Labs Pro में भी उपलब्ध है जहाँ आप इसे डाउनलोड करके अपने प्रोजेक्ट्स के लिए इस्तेमाल कर सकते हैं। इसके अलावा अगर आप
00:07:09हमारे कंटेंट का आनंद ले रहे हैं, तो 'हाइप' बटन दबाने पर विचार करें क्योंकि इससे हमें और अधिक कंटेंट बनाने में मदद मिलती है।
00:07:14अब भले ही हमने GSAP का उपयोग करके स्क्रॉल विजुअल इफेक्ट्स जोड़ दिए थे,
00:07:19लेकिन हमने शुरुआती GSAP स्क्रॉलिंग के ऊपर Lenis के साथ एक और लेयर जोड़ी। Lenis एक
00:07:25स्मूथ स्क्रॉल लाइब्रेरी है जो ओपन सोर्स है और वेबसाइटों पर अधिक इमर्सिव लेआउट बनाने के लिए सबसे लोकप्रिय टूल्स में से एक है।
00:07:30आप सोच रहे होंगे कि जब हमने पहले से ही GSAP के साथ स्क्रॉल एनिमेशन कॉन्फ़िगर कर लिए थे तो हम दूसरी लाइब्रेरी का उपयोग क्यों करेंगे,
00:07:35लेकिन बात यह है कि Lenis और GSAP वास्तव में एक-दूसरे के पूरक हैं। GSAP नियंत्रित करता है कि
00:07:39जब आप स्क्रॉल करते हैं तो क्या होता है और Lenis खुद स्क्रॉल के लुक और फील को नियंत्रित करता है।
00:07:44Lenis के बिना, स्क्रॉल पोजीशन्स के बीच में जंप करता है और इसके साथ, पेज स्मूथली बहता है और GSAP एनिमेशन ट्रिगर होने पर अधिक स्वाभाविक लगते हैं।
00:07:49तो हमारे पास इस काम के लिए एक और विस्तृत प्रॉम्प्ट था। हमने वही XML प्रॉम्प्टिंग अप्रोच अपनाया जैसा हमने GSAP के साथ किया था।
00:07:54Lenis प्रॉम्प्ट का फोकस उन मौजूदा स्क्रॉल एनिमेशन को बेहतर बनाने पर था जिन्हें पिछले स्टेप में जोड़ा गया था।
00:07:59प्रॉम्प्ट में डिपेंडेंसीज़ की लिस्ट थी, सभी निर्देश सेट थे और इसमें एलिमेंट्स का विस्तृत विवरण था,
00:08:04कि एनिमेशन को कहाँ रखा जाए और व्यवहार कैसे काम करना चाहिए, और अंत में नियम थे। हमने
00:08:09यह प्रॉम्प्ट Claude Code को दिया और इसे पूरे रेपो में कई बदलाव करने दिए। एक बार जब
00:08:13इसने सब कुछ लागू कर दिया, तो हमने वेबसाइट चेक की और इसमें काफी सुधार हुआ था। मुख्य बदलाव
00:08:18स्मूदर स्क्रॉलिंग को जोड़ना था जिससे वेबसाइट पर नेविगेशन का अनुभव बहुत अधिक इमर्सिव हो गया।
00:08:23एक बार जब वेबसाइट सभी फीचर्स के साथ तैयार हो गई, तो इसे पूरा मानने से पहले
00:08:28आखिरी चीज़ यह सुनिश्चित करना था कि यह UX स्टैंडर्ड्स का पालन करती है। तो उसके लिए हमने
00:08:32Skill Creator का उपयोग करके 'UX Audit' नाम से एक स्किल बनाई। यह स्किल UI एलिमेंट्स की क्वालिटी चेक करने,
00:08:38वेबसाइट के विभिन्न पहलुओं की समीक्षा करने और यह सुनिश्चित करने पर केंद्रित है कि सब कुछ UX स्टैंडर्ड्स के अनुरूप है।
00:08:44इसमें कॉन्टेक्स्ट इकट्ठा करना, 9-पॉइंट चेकलिस्ट का विश्लेषण करना और रिपोर्टिंग फेज़ जैसे कई चरण शामिल थे,
00:08:49जहाँ इसने मानदंडों के एक सेट के आधार पर स्कोर दिया। इसमें UX चेकलिस्ट के साथ संदर्भ (references) भी शामिल थे
00:08:54जिसमें सभी नौ पॉइंट्स की डिटेल्स थीं और पाइथन स्क्रिप्ट्स थीं जो प्रोग्रामेटिक रूप से
00:08:59UX से जुड़ी उन छोटी समस्याओं को पकड़ने के लिए बनाई गई थीं जो इंसानी आँखों से छूट सकती हैं।
00:09:04एक बार जब हमने ऑडिट स्किल रन की, तो इसने सभी समस्याओं को इकट्ठा किया और दो क्रिटिकल और कई मेजर और
00:09:08माइनर समस्याओं की पहचान की। क्रिटिकल इश्यू रंगों के कॉन्ट्रास्ट को लेकर थे। स्कोरिंग मेट्रिक ने वेबसाइट को
00:09:14इन सभी पहचानी गई समस्याओं के कारण 'C' रैंक दी। इसने विस्तार से सभी ज़रूरी बदलाव बताए और
00:09:19एक बार जब इसने बदलावों को परिभाषित कर दिया, तो हमने इसे उन फिक्सेस को लागू करने के लिए कहा।
00:09:24सभी बदलावों के बाद, भले ही वेबसाइट देखने में बहुत अलग न लगे, लेकिन इसकी यूजेबिलिटी में
00:09:29बड़ा सुधार हुआ, जिससे इसे नेविगेट करना आसान हो गया और यह WCAG के अनुरूप भी हो गई।
00:09:34जब हमने फिर से ऑडिट स्किल चलाई, तो वेबसाइट की रैंकिंग 'C' से सुधरकर 'B' हो गई, जिसका अर्थ है
00:09:40कि सभी बड़ी समस्याएँ हल हो गई थीं और केवल कुछ छोटी समस्याएँ ही बची थीं।
00:09:45इसी के साथ हम इस वीडियो के अंत में पहुँच गए हैं। अगर आप चैनल को सपोर्ट करना चाहते हैं और हमें
00:09:50इस तरह के वीडियो बनाने में मदद करना चाहते हैं, तो आप नीचे दिए गए 'Super Thanks' बटन का उपयोग कर सकते हैं। हमेशा की तरह,
00:09:55देखने के लिए धन्यवाद और मैं आपसे अगले वीडियो में मिलूँगा।