ओपन डिज़ाइन (Open Design): 40 हज़ार डेवलपर्स ने क्लॉड डिज़ाइन (Claude Design) क्यों छोड़ा

BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00यह OpenDesign है, जो Claude Design का एक ओपन सोर्स विकल्प है और आपको किसी भी एजेंट
00:00:05या मॉडल का उपयोग करने देता है जो आपने पहले से इंस्टॉल किया है, ताकि आप पूरे वेब प्रोटोटाइप, मोबाइल ऐप्स और यहां तक कि स्लाइड
00:00:11डेक भी HTML में बना सकें। इसमें 72 ब्रांड-ग्रेड डिज़ाइन सिस्टम पहले से मौजूद हैं, और हर प्रोजेक्ट आपकी मशीन पर ही रहता है,
00:00:17इसलिए क्लाउड पर कुछ भी नहीं भेजा जाता। लेकिन हम पहले से जानते हैं कि Claude Opus 4.7 फ्रंट-एंड
00:00:23डिज़ाइन में बहुत अच्छा है, इसलिए उपयोगकर्ता को कोई भी मॉडल चुनने देना सही नहीं है, क्योंकि उनमें से अधिकांश
00:00:27डिज़ाइन में बहुत खराब हो सकते हैं। सब्सक्राइब करें और आइए पता लगाएं।
00:00:33Anthropic का Claude Design पिछले महीने की शुरुआत में जारी किया गया था और यह तुरंत हिट हो गया। इसने लोगों को
00:00:38एक प्रभावशाली मॉडल का उपयोग करके बहुत अच्छे दिखने वाले डिज़ाइन बनाने की क्षमता दी, इसने लोगों को
00:00:43lovable vZero और इसी तरह के अन्य टूल का विकल्प दिया। लेकिन यह पूरी तरह से क्लाउड-आधारित टूल है, जो एक
00:00:49सिंगल मॉडल तक सीमित है, और इसे इस्तेमाल करने के लिए आपको $20 प्रति माह चुकाने होंगे, जिसका मतलब है कि यह हर किसी के लिए नहीं है।
00:00:54तो, 11 दिन बाद, Tom और Nexa की टीम ने एक ओपन-सोर्स विकल्प जारी किया जो बहुत लोकप्रिय रहा।
00:01:00यह मुझे Claude code से आने वाले OpenCode की याद दिलाता है, और अब OpenDesign, Claude
00:01:05Design से आ रहा है। Anthropic अगली ऐसी कौन सी चीज़ बनाएगा जिसके आगे कोई “ओपन” लगा देगा?
00:01:09लेकिन यह ओपन-सोर्स टूल Claude Design जितने अच्छे डिज़ाइन बनाने में कैसे सक्षम है? खैर,
00:01:14ऐसा इसलिए है क्योंकि दो चीजें एक साथ काम कर रही हैं। पहली है डिज़ाइन सिस्टम। OpenDesign में बहुत सारे
00:01:18ब्रांड स्पेसिफिकेशन्स, टाइपोग्राफी, स्पेसिंग और कलर टोकन के साथ डिज़ाइन सिस्टम शामिल हैं जो Linear,
00:01:24Stripe और Spotify जैसे ब्रांड्स से प्रेरित हैं। दूसरी है स्किल्स। हर आउटपुट प्रकार के लिए बहुत सारी स्किल्स। तो एक डैशबोर्ड
00:01:30स्किल जानती है कि चार्ट्स को कैसे लेआउट करना है, और एक डेक स्किल जानती है कि स्लाइड्स को कैसे स्ट्रक्चर करना है। हर प्रॉम्प्ट में एक एंटी-AI
00:01:35चेकलिस्ट भी होती है, और कुछ भी जनरेट करने से पहले, यह आपसे आपके ऑडियंस, टोन
00:01:41और ब्रांड कंटेंट के बारे में पूछती है। यदि आपने Impeccable पर मेरा वीडियो देखा है, तो यह बहुत परिचित लगेगा,
00:01:45लेकिन यह अलग है, और हम वीडियो में बाद में इन अंतरों को देखेंगे। लेकिन अभी के लिए,
00:01:49आइए एक सरल डेमो देखें। तो शुरुआत करने के लिए, आप या तो macOS या Windows के लिए OpenDesign डाउनलोड कर सकते हैं,
00:01:54रिपो को क्लोन करके Docker का उपयोग करके इंस्टॉल कर सकते हैं, या इसे सोर्स से चला सकते हैं, जो मैंने करने का फैसला किया है।
00:01:59तो प्रोजेक्ट के चलने के साथ, मैं अपने ब्राउज़र में इस पोर्ट पर जा सकता हूँ, जो मुझे इस UI पर ले जाता है,
00:02:04जो किसी ऐसे व्यक्ति के लिए बहुत भारी लग सकता है जो Claude Design का आदी नहीं है, लेकिन आइए इसे देखते हैं।
00:02:08तो अगर मैं यहाँ नीचे क्लिक करूँ, तो आप देख सकते हैं कि इसने उन एजेंट हार्नेस को चुन लिया है जो मैंने पहले से इंस्टॉल किए हैं,
00:02:13जैसे Claude Code Codex और OpenCode। और अगर मैं Claude Code पर क्लिक करूँ और नीचे स्क्रॉल करूँ,
00:02:17तो हम मॉडल चुन सकते हैं। तो डिफ़ॉल्ट रूप से, यह वही चुनेगा जो CLI में चुना गया है, लेकिन मैं यहाँ एक चुन सकता हूँ।
00:02:21मैं Codex के साथ भी ऐसा ही कर सकता हूँ, लेकिन Codex मुझे रिज़निंग एफर्ट बदलने की सुविधा देता है,
00:02:26जो एक अच्छी बात है। लेकिन मैं OpenCode के साथ जाऊंगा। मैं नीचे स्क्रॉल करूँगा और
00:02:31मॉडल को GLM 5.1 में बदलूँगा। यहाँ पर भी, मैं मेमोरी चुन सकता हूँ, यानी वे निर्देश जो हर प्रॉम्प्ट
00:02:36में जोड़े जाएंगे, मीडिया प्रोवाइडर्स, और डिफ़ॉल्ट रूप से, इसने मेरी OpenAI कुंजी उठा ली है, और यह चित्र जनरेट
00:02:41करने के लिए GPT Image 2 का उपयोग करने वाला है। लेकिन मैं टेक्स्ट-टू-स्पीच या अपनी वेबसाइट पर एनिमेशन के
00:02:46लिए अलग-अलग साउंड इफेक्ट्स जैसी चीज़ों के लिए अपनी 11 labs API कुंजी भी कनेक्ट कर सकता हूँ। फिर
00:02:50यहाँ, मैं उन सभी स्किल्स को देख सकता हूँ जो उपलब्ध हैं। मैं सभी डिज़ाइन सिस्टम देख सकता हूँ,
00:02:54जिनके बारे में हम थोड़ी देर बाद बात करेंगे। और मैं एक पालतू जानवर भी चुन सकता हूँ, जो कि Codex का एक फीचर है।
00:02:58संक्षेप में, हमारे पास यहाँ बहुत सारे विकल्प हैं, लेकिन मैं इसे बंद करूँगा और डिज़ाइन शुरू करूँगा। इसलिए मैं
00:03:03अपने प्रोजेक्ट को एक नाम दूंगा और फिर एक डिज़ाइन सिस्टम चुनूँगा। अब, अगर आपको कोई अंदाज़ा नहीं है कि ये
00:03:08डिज़ाइन सिस्टम क्या हैं, तो आप उन सभी को देखने के लिए डिज़ाइन सिस्टम टैब पर क्लिक कर सकते हैं, और वहाँ बहुत सारे हैं।
00:03:13लेकिन वीडियो रिकॉर्ड करने से पहले मैंने उन्हें देखा, और मुझे लगता है कि मुझे Miro वाला पसंद आया, जो
00:03:17ऐसा दिखता है और डिज़ाइन टोकन के विवरण के साथ-साथ डिज़ाइन MD फ़ाइल में जानकारी भी देता है।
00:03:22अब ध्यान दें कि मैं प्रोटोटाइप टैब में हूँ, लेकिन बदलती जानकारी के आधार पर अपडेट करने के लिए लाइव आर्टिफ़ैक्ट्स,
00:03:27HTML-आधारित स्लाइड्स जनरेट करने के लिए स्लाइड डेक, या टेम्पलेट से बनाने का विकल्प भी है।
00:03:33इसलिए मैं यहाँ टेम्पलेट्स टैब पर क्लिक कर सकता हूँ और अपना मनचाहा टेम्पलेट चुन सकता हूँ। अब हम बस
00:03:38प्रोटोटाइप के साथ टिके रहेंगे और क्रिएट पर क्लिक करेंगे। अब यहाँ से, हमें दूसरे पेज पर ले जाया जाता है जहाँ हम एक
00:03:42प्रॉम्प्ट दे सकते हैं। मैं यहाँ कुछ अनोखा करने की कोशिश कर रहा हूँ। तो अभी मेरे पास मेरा YouTube चैनल
00:03:47सर्च ऐप चल रहा है, और मैं इसका बहुत बेहतर दिखने वाला वर्शन बनाना चाहता हूँ। तो मैं क्या करने वाला हूँ
00:03:52वह यह कि मैं इसे यह URL दूंगा और देखूँगा कि क्या GLM टैब्स और
00:03:57इनपुट्स को सर्च करने और डिज़ाइन के लिए उसका उपयोग करने में सक्षम है। तो यहाँ मैंने इसे एक प्रॉम्प्ट दिया है कि मुझे एक बहुत ही डिज़ाइन किया हुआ सरल
00:04:02वेबसाइट बना कर दे जिसे मैं YouTube चैनल सर्च करने के लिए उपयोग कर सकूँ। मैंने इसे वेबसाइट का लिंक भी दिया है
00:04:07ताकि यह एजेंट ब्राउज़र या जो भी टूल फिट लगे, उसका उपयोग करके इसे देख सके। और इस तरह यह
00:04:12इनपुट्स को देख सकता है और सभी पेजों पर जा सकता है। तो देखते हैं यह क्या करता है। तो अब इसने मुझसे
00:04:15विजुअल टोन, ब्रांड कॉन्टेक्स्ट और कुछ अन्य चीजों के बारे में कुछ सवाल पूछे हैं, जिनका मैं जवाब देने वाला हूँ।
00:04:20और फिर हम डिज़ाइन प्रक्रिया को जारी रखेंगे और इसे चेक आउट करेंगे। यह Chrome का उपयोग करके
00:04:24साइट खोलने के लिए एक curl कमांड चलाने में सक्षम था। और अब यह साइट से कनेक्ट करने के लिए एजेंट ब्राउज़र का उपयोग कर रहा है। तो मैंने
00:04:29इसमें से कुछ भी नहीं खोला या URL पर नहीं गया और यह ब्राउज़र में साइट पर जा रहा है। हम देख सकते हैं कि
00:04:34यह कैसे काम करता है, इसे समझने के लिए कुछ और एजेंट ब्राउज़र कमांड्स। ठीक है। तो इस बिंदु पर, यह अभी भी चल रहा है।
00:04:38यह अभी पूरी तरह नहीं हुआ है। इसे अभी भी कुछ काम करना है, लेकिन मुझे चीजों की दिशा पसंद आ रही है।
00:04:43मुझे वह सर्च पेज पसंद आया जो इसने नीचे एडवांस फ़िल्टर के साथ बनाया है, और मैं सर्च के लिए
00:04:48वीडियो टाइटल और चैनल नाम के बीच टॉगल कर सकता हूँ। हमारे पास सर्च रिजल्ट्स हैं, जो बहुत
00:04:52प्रभावशाली दिखते हैं और यह वास्तविक वेबसाइट के डेटा का उपयोग कर रहा है। तो मुझे नहीं पता कि इसने क्या किया,
00:04:57क्या इसने इसे स्क्रैप करके कहीं सेव किया, लेकिन थंबनेल को छोड़कर यह वास्तविक डेटा है। हमारे पास फेवरेट्स पेज भी है।
00:05:01तो अगर मैं किसी व्यक्ति को यहाँ फ़ेवरेट करता हूँ, तो वे यहाँ आएंगे और मैं उनसे संपर्क करने के लिए एक ईमेल जनरेट
00:05:06कर सकता हूँ या उन्हें हटा सकता हूँ। और यहाँ एक छुपा हुआ पेज भी है। तो उदाहरण के लिए,
00:05:11अगर मैं X दबाता हूँ, तो एक व्यक्ति इस पेज पर आ जाएगा। और ऐसा लगता है कि लगभग 20 मिनट बाद। हाँ।
00:05:17GLM 5.1 सबसे तेज़ मॉडल नहीं है। सब कुछ हो गया है। और तो यहाँ है जो इसने मुझे बताया है।
00:05:23इसने मुझे सभी पांच फाइलें दी हैं जो इसने बनाई हैं। और मुझे लगता है कि इसने सब कुछ एक अस्थायी
00:05:28स्थान पर एक्सपोर्ट किया है। तो अब मैं क्या कर सकता हूँ, मैं इसे एक और प्रॉम्प्ट दे सकता हूँ। तो अगर मैं डार्क मोड जोड़ना चाहता हूँ,
00:05:33तो मैं वह कर सकता हूँ, लेकिन मैं फ़ाइनलाइज़ डिज़ाइन पैकेज पर भी क्लिक कर सकता हूँ, जो सब कुछ
00:05:37एक सिंगल डिज़ाइन MD फ़ाइल में संश्लेषित करेगा। तो ट्रांसक्रिप्ट, डिज़ाइन सिस्टम और कोई भी आर्टिफ़ैक्ट
00:05:42जो जनरेट किए गए थे, मूल रूप से ये पांच पेज। मैं अलग-अलग फॉर्मेट में एक्सपोर्ट करने के लिए शेयर पर भी क्लिक कर सकता हूँ।
00:05:48और मैं एक स्टैंडअलोन HTML भी एक्सपोर्ट कर सकता हूँ और इसे अपने वास्तविक प्रोजेक्ट में लागू करने के लिए Claude Code को दे सकता हूँ
00:05:53और इसे Vercel या Cloudflare पेजों पर तैनात भी कर सकता हूँ, जो बहुत अच्छा है।
00:05:57तो यह OpenDesign का एक त्वरित अवलोकन है। क्या यह उपयोग करने लायक है? खैर, अगर आपके पास पहले से ही एक कोडिंग
00:06:02एजेंट इंस्टॉल है और आप VanClaude का सब्सक्रिप्शन देते हैं, तो यह
00:06:07आज़माना तो बनता है। डिज़ाइन सिस्टम और स्किल्स का संयोजन मतलब यह कि यह वास्तव में
00:06:12हार्नेस या मॉडल की परवाह किए बिना कुछ काफी अच्छा बना सकता है। लेकिन यह Impeccable जैसी चीज़ से कैसे तुलना करता है?
00:06:16खैर, व्यक्तिगत रूप से, मुझे Impeccable के योजना बनाने का तरीका पसंद है। यह आपसे सब कुछ पहले पूछ लेता है
00:06:22और एक इमेज मॉडल का उपयोग करके अलग-अलग मॉकअप डिज़ाइन करता है, जिसे आप चुन सकते हैं और वहां से आगे बढ़ सकते हैं।
00:06:27तो आप काफी हद तक यह जाने बिना शुरू कर सकते हैं कि आप डिज़ाइन कैसा चाहते हैं,
00:06:32लेकिन अंत में कुछ काफी अच्छा मिल जाता है। जबकि OpenDesign के साथ, आपको
00:06:37अंदर जाने से पहले डिज़ाइन के बारे में थोड़ा पता होना चाहिए। मेरा मतलब है, यह आपसे पूछता है कि शुरू करने से पहले
00:06:42आप कौन सा डिज़ाइन सिस्टम चाहते हैं और मुझे पता है कि मॉडल एक बना सकता है, लेकिन यह तथ्य कि यह आपसे पूछता है, इसका मतलब है कि यह
00:06:48किसी ऐसे व्यक्ति के लिए है जो डिज़ाइन के बारे में थोड़ा और जानता है। लेकिन मुझे स्वीकार करना होगा, Open Design का UI बहुत बढ़िया है,
00:06:53जो आपको रिस्पॉन्सिव व्यू देखने, कहीं भी एक्सपोर्ट करने, स्किल्स, MCP टूल्स जोड़ने
00:06:58और यहाँ तक कि पालतू जानवर जोड़ने का विकल्प देता है, जो Codex UI या Claude डेस्कटॉप ऐप का उपयोग करने वाले व्यक्ति के लिए अच्छा है।
00:07:04और इसने DLM 5.1 का उपयोग करके एक ऐप डिज़ाइन करने में बहुत अच्छा काम किया, जो कि डिज़ाइन करने के लिए सबसे अच्छा मॉडल
00:07:10नहीं है। तो अगर मैं कुछ जल्दी डिज़ाइन करना चाहता था और मुझे थोड़ी दिशा का अंदाज़ा था
00:07:15कि मैं किस तरफ जाना चाहता हूँ, तो मैं निश्चित रूप से Open Design आज़माऊंगा। लेकिन अगर आप
00:07:19थोड़ा पैसा खर्च करने में बुरा नहीं मानते, तो Plot Design काफी अच्छा है। मेरा मतलब है,
00:07:22देखें कि यह उसी प्रॉम्प्ट के साथ क्या करने में सक्षम था।

Key Takeaway

OpenDesign का ओपन-सोर्स आर्किटेक्चर उपयोगकर्ताओं को किसी भी स्थानीय मॉडल के साथ काम करने और मालिकाना टूल (जैसे Claude Design) के मासिक सब्सक्रिप्शन शुल्क और क्लाउड-निर्भरता के बिना परिष्कृत डिज़ाइन सिस्टम लागू करने की सुविधा देता है।

Highlights

  • OpenDesign एक ओपन-सोर्स टूल है जो किसी भी स्थानीय रूप से इंस्टॉल किए गए मॉडल या एजेंट का उपयोग करके HTML-आधारित प्रोटोटाइप, मोबाइल ऐप्स और स्लाइड डेक बनाने की सुविधा देता है।

  • इसमें Stripe, Linear और Spotify जैसे ब्रांडों से प्रेरित 72 ब्रांड-ग्रेड डिज़ाइन सिस्टम पहले से मौजूद हैं।

  • यह टूल पूरी तरह से स्थानीय रूप से चलता है, इसलिए कोई भी डेटा क्लाउड पर नहीं भेजा जाता है।

  • उपयोगकर्ता 11 Labs API कुंजी को जोड़कर टेक्स्ट-टू-स्पीच और कस्टम एनिमेशन साउंड इफेक्ट्स जैसी सुविधाएं प्राप्त कर सकते हैं।

  • डिजाइन प्रक्रिया के दौरान, टूल उपयोगकर्ता से ऑडियंस, टोन और ब्रांड कॉन्टेक्स्ट के बारे में विशिष्ट प्रश्न पूछता है, जिससे एंटी-AI चेकलिस्ट के साथ सटीक आउटपुट सुनिश्चित होता है।

Timeline

OpenDesign का अवलोकन

  • OpenDesign पूरी तरह से स्थानीय मशीन पर काम करता है और क्लाउड-आधारित प्रतिबंधों को समाप्त करता है।
  • मौजूदा क्लाउड-आधारित डिज़ाइन टूल के लिए $20 प्रति माह का शुल्क देना पड़ता है, जो OpenDesign में पूरी तरह से मुफ्त है।

यह टूल उन डेवलपर्स के लिए एक विकल्प है जो Claude Design की सीमाओं से बाहर निकलना चाहते हैं। यह वेब प्रोटोटाइप से लेकर स्लाइड डेक तक सब कुछ HTML में बनाने की अनुमति देता है। मुख्य अंतर क्लाउड निर्भरता और मासिक शुल्क का न होना है।

काम करने का तरीका और डिज़ाइन सिस्टम

  • OpenDesign में ब्रांड स्पेसिफिकेशन्स, टाइपोग्राफी और स्पेसिंग टोकन पर आधारित 72 डिज़ाइन सिस्टम शामिल हैं।
  • प्रत्येक आउटपुट प्रकार के लिए विशिष्ट 'स्किल्स' (जैसे डैशबोर्ड या डेक) काम करती हैं जो लेआउट की संरचना को नियंत्रित करती हैं।

इस टूल की कार्यक्षमता दो स्तंभों पर आधारित है: डिज़ाइन सिस्टम और विशिष्ट स्किल्स। टूल जनरेशन से पहले उपयोगकर्ता के ब्रांड और टोन से संबंधित जानकारी एकत्र करता है ताकि AI द्वारा उत्पन्न डिज़ाइन सटीक और उद्देश्यपूर्ण हो। उपयोगकर्ता Docker या रिपो क्लोनिंग के माध्यम से इसे स्थानीय रूप से इंस्टॉल कर सकते हैं।

प्रोटोटाइप निर्माण और व्यावहारिक अनुप्रयोग

  • उपयोगकर्ता मौजूदा वेबसाइटों के URL को इनपुट के रूप में देकर उन्हें नए डिज़ाइन में बदलने के लिए प्रॉम्प्ट दे सकते हैं।
  • एजेंट ब्राउज़र के उपयोग से टूल वास्तविक समय में डेटा के साथ इंटरैक्ट करता है और जटिल सर्च पेज या फेवरेट्स पेज बना सकता है।

एक उदाहरण के तौर पर, टूल ने एक मौजूदा YouTube सर्च ऐप को स्कैन करके एक डार्क-मोड सक्षम वर्शन तैयार किया। आउटपुट को एक सिंगल डिज़ाइन MD फ़ाइल में संश्लेषित किया जा सकता है या स्टैंडअलोन HTML के रूप में एक्सपोर्ट किया जा सकता है, जिसे बाद में Vercel या Cloudflare पर तैनात किया जा सकता है।

तुलनात्मक मूल्यांकन

  • Impeccable टूल इमेज-आधारित मॉकअप योजना में बेहतर है, जबकि OpenDesign अधिक तकनीकी नियंत्रण और कस्टमाइजेशन प्रदान करता है।
  • OpenDesign का UI रिस्पॉन्सिव व्यू, MCP टूल्स और स्थानीय मॉडल चयन जैसी उन्नत सुविधाएं प्रदान करता है।

OpenDesign उन लोगों के लिए सबसे उपयुक्त है जो डिज़ाइन प्रक्रिया के बारे में बुनियादी जानकारी रखते हैं। यद्यपि Claude Design अभी भी सरल कार्यों के लिए एक विकल्प है, लेकिन OpenDesign डेवलपर्स को हार्डवेयर और मॉडल चयन में अधिक स्वतंत्रता और पोर्टेबिलिटी प्रदान करता है।

Community Posts

No posts yet. Be the first to write about this video!

Write about this video