आपका AI UI साधारण दिखता है... यह उसे सुधार देगा (DESIGN.md)
BBetter Stack
컴퓨터/소프트웨어창업/스타트업사진/예술AI/미래기술
Transcript
00:00:00AI कोडिंग टूल्स डरावने हद तक अच्छे होते जा रहे हैं। Cursor, Claude Code, V0। आप एक आइडिया से
00:00:06मिनटों में एक वर्किंग ऐप बना सकते हैं, लेकिन जब आप UI खोलते हैं तो वह कुछ अजीब सा लगता है। कोड काम करता है, लेकिन UI
00:00:12अभी भी बहुत सस्ता लगता है। अब इसकी तुलना Stripe, Linear, Vercel, या किसी भी बड़े प्लेटफॉर्म से करें।
00:00:17तो वे अलग क्या कर रहे हैं? यह बस एक साधारण फाइल है। इसे DesignMD कहा जाता है,
00:00:22और Google ने इसे अभी ओपन सोर्स किया है। मैं आपको दिखाऊंगा कि बस कुछ ही मिनटों में इसे अपने कोड में कैसे इंजेक्ट करें।
00:00:30अब, DesignMD एक सादी मार्कडाउन फाइल है जो AI एजेंट्स को बताती है कि आपके प्रोडक्ट को कैसा महसूस
00:00:38होना चाहिए और दिखना चाहिए। कलर्स, फोंट्स, स्पेसिंग, बटन्स, लेआउट नियम, एक्सेसिबिलिटी नोट्स, सब कुछ। तो आपके ब्रांड का
00:00:45अंदाजा लगाने के बजाय, AI फाइल को पढ़ता है और उसका पालन करता है। इसमें कोई Figma एक्सपोर्ट नहीं, कोई JSON की उलझन नहीं।
00:00:52परफेक्ट रिजल्ट पाने के लिए मुझे हर बार 10 पैराग्राफ का प्रॉम्प्ट देने की जरूरत नहीं है। Google ने इसे
00:00:5721 अप्रैल को ओपन सोर्स किया था, और कुछ ही हफ्तों में, GitHub पर इसके 70,000 से भी ज्यादा
00:01:02सितारे (stars) हो चुके हैं। अगर आप कोडिंग टूल्स और टिप्स पसंद करते हैं जो आपके वर्कफ़्लो को तेज़ करते हैं, तो सब्सक्राइब ज़रूर करें।
00:01:08हमारे वीडियो हर समय आते रहते हैं। ठीक है, अब यह वास्तव में शानदार है। मैं आपको दिखाता हूँ कि यह
00:01:12वास्तव में क्यों मायने रखता है। ठीक है, मैं यहाँ उसी प्रॉम्प्ट के साथ जाने वाला हूँ। एक मॉडर्न डैशबोर्ड बनाएं।
00:01:18पहले, कोई DesignMD फाइल नहीं है। यह जेनरेट होता है, और हाँ, यह एक क्लासिक AI डैशबोर्ड है।
00:01:24तकनीकी रूप से काम करता है, है ना? लेकिन इसमें डिफ़ॉल्ट tailwind वाली एनर्जी है। यह बिल्कुल वैसा ही दिखता है। रैंडम
00:01:30बटन्स। हमारे पास यहाँ सामान्य कार्ड्स हैं। आप जो बना रहे हैं उसकी कोई वास्तविक पहचान नहीं है।
00:01:35अब, अगर मैं वही प्रॉम्प्ट फिर से चलाता हूँ, लेकिन इस बार मैं एक Stripe स्टाइल की DesignMD फाइल जोड़ता हूँ,
00:01:42या किसी भी दूसरे ब्रांड की DesignMD फाइल, और अब अंतर देखिए। कलर्स मेल खाते हैं।
00:01:48स्पेसिंग साफ-सुथरी लगती है। बटन्स ऐसे लगते हैं जैसे वे वास्तव में एक साथ के ही हैं। पूरी स्क्रीन
00:01:54का एक नजरिया है। वही AI, वही प्रॉम्प्ट, लेकिन अब संदर्भ (context) अलग है। DesignMD के बिना, AI
00:02:02अंदाजा लगा रहा है। साइट कैसी दिखनी चाहिए? DesignMD के साथ, AI के पास उन साबित हो चुके
00:02:08प्लेटफॉर्म्स के आधार पर नियम हैं जो पहले से ही बहुत अच्छे दिखते हैं। तो वास्तव में इस फाइल के अंदर क्या है? इसे
00:02:14एक डिजाइन सिस्टम की तरह समझें जिसे AI पढ़ सकता है। सबसे ऊपर, आमतौर पर स्ट्रक्चर्ड टोकन होते हैं। जैसे
00:02:21सटीक हेक्स कलर्स, फोंट फैमिली, बॉर्डर रेडियस, स्पेसिंग। ये सख्त नियम हैं, लेकिन महत्वपूर्ण हिस्सा
00:02:27इसके बाद आता है। मार्कडाउन। यहाँ आप इरादे (intent) को समझाते हैं। सिर्फ “इस नीले रंग का उपयोग करें” नहीं,
00:02:34बल्कि “यह नीला प्राथमिक एक्सेंट है और यह स्पष्ट और भरोसेमंद महसूस होना चाहिए।” यह मायने रखता है क्योंकि
00:02:40AI को सिर्फ नंबर्स की जरूरत नहीं है। उसे निर्णय (judgment) की जरूरत है। एक अच्छा DesignMD आमतौर पर कलर पैलेट,
00:02:47टाइपोग्राफी, कॉम्पोनेंट्स, लेआउट्स, एक्सेसिबिलिटी को कवर करता है। तो AI को एक साथ दो चीजें मिलती हैं। सटीक वैल्यूज
00:02:54और उनके पीछे का कारण। और यही कारण है कि आउटपुट उस चीज़ से भटकना बंद कर देता है जिसे हम
00:03:00वास्तव में हासिल करने की कोशिश कर रहे हैं। अब स्पष्ट सवाल यह है कि क्या हमें वास्तव में एक और डिजाइन सिस्टम फॉर्मेट की जरूरत है?
00:03:05हमारे पास पहले से ही Figma है, JSON टोकन हैं, और कर्सर रूल्स और ClaudeMD भी हैं।
00:03:11लेकिन इनमें से हर एक अलग समस्या का समाधान करता है। Figma एक UI है। यह इंसानों के लिए बहुत अच्छा है, लेकिन यह
00:03:18आमतौर पर रेपो से बाहर रहता है। JSON टोकन मशीनों के लिए बेहतरीन हैं, लेकिन वे वेबसाइट के लिए हमारी
00:03:25पसंद या हमारे इरादे को नहीं समझाते। Cursor rules और ClaudeMD एजेंट को बताते हैं कि
00:03:31कैसा व्यवहार करना है, लेकिन वे वास्तव में एक डिजाइन सिस्टम नहीं हैं। DesignMD इन सबके बीच बैठता है। यह इंसानों
00:03:38द्वारा पढ़ने योग्य है। साथ ही यह मशीन द्वारा भी पढ़ने योग्य है। यह वर्जन कंट्रोल्ड है और एजेंट
00:03:44नेटिव है। यही बड़ा बदलाव है। आपका डिजाइन सिस्टम अब किसी डिजाइन टूल में कैद नहीं है।
00:03:49यह इस मार्कडाउन फाइल के रूप में सीधे आपके कोड के बगल में रहता है। और इसीलिए यह सिर्फ दो हफ्तों में
00:03:54इतना लोकप्रिय हो गया है और डेवलपर्स इस पर ध्यान दे रहे हैं। कम्युनिटी रेपो में अब 70,000 से ज्यादा स्टार्स हैं,
00:03:59है ना? यह बहुत तेज़ है। लोग Linear, Stripe, Notion और Vercel के लिए DesignMD फाइलें शेयर कर रहे हैं,
00:04:04और इसके पीछे का कारण सरल है। कोई भी बार-बार यह टाइप नहीं करना चाहता, “इसे साफ सुथरा बनाओ,”
00:04:09“इसे मॉडर्न बनाओ, बेहतर स्पेसिंग का उपयोग करो, इसे इस वेबसाइट जैसा बनाओ।” भाई, यह बहुत जल्दी उबाऊ हो जाता है।
00:04:16DesignMD के साथ, आप खुद को दोहराना बंद कर देते हैं। आप AI को एक बार डिजाइन नियम देते हैं, फिर हर स्क्रीन
00:04:23उसी आधार से शुरू होती है। यही असली जीत है। सभी स्क्रीन्स पर डिजाइन की गति।
00:04:29दोबारा काम कम करना पड़ता है। उसी बदसूरत बटन को 10वीं बार ठीक करने की जरूरत नहीं पड़ती।
00:04:34ठीक है, अब ईमानदारी से कहूँ तो, यह परफेक्ट नहीं है। यह एक शानदार शुरुआत है, है ना? लेकिन यह
00:04:39एक फाइल है। यह आपके रेपो में रहती है। यह सभी टूल्स पर काम करती है। इसमें एक्सेसिबिलिटी गाइडेंस शामिल है और
00:04:44सेटअप लगभग जीरो है, जो कि बहुत बढ़िया है। इसे डालना बेहद आसान है। साथ ही, फाइल उतनी ही अच्छी है जितना
00:04:51आप इसमें डालेंगे। एक कमजोर DesignMD जाहिर तौर पर आपको कमजोर आउटपुट देगा, लेकिन सोलो डेवलपर्स,
00:04:57प्रोटोटाइप्स और AI-हैवी वर्कफ़्लो के लिए, यह एक बहुत ही व्यावहारिक अपग्रेड है। तो क्या आपको इसका उपयोग करना चाहिए? हाँ,
00:05:02शायद करना चाहिए। खासकर यदि आप पहले से ही Cursor, Claude Code, V0 के साथ निर्माण कर रहे हैं। ऑसम रेपो से
00:05:08एक टेम्पलेट के साथ शुरुआत करें। यह विवरण में है। इसे अपने प्रोजेक्ट में डालें, फिर इसे अपनी
00:05:13साइट, अपने ब्रांड के लिए कस्टमाइज़ करें। आपका लक्ष्य AI को रचनात्मक बनाना नहीं है। आपका लक्ष्य उसे
00:05:20अंदाजा लगाने से रोकना है क्योंकि एक बार नियम स्पष्ट हो जाने के बाद, UI अधिक सुसंगत हो जाएगा और आपका ऐप
00:05:25एक AI डेमो के बजाय एक असली प्रोडक्ट जैसा लगने लगेगा। अगर आप इस तरह के कोडिंग टूल्स और टिप्स पसंद करते हैं,
00:05:31तो Better Stack चैनल को सब्सक्राइब करना न भूलें। हम आपको एक और वीडियो में मिलेंगे।