Claude Design अभी बेहद उपयोगी है।
कुछ दिन पहले, Claude Code के साथ कोड लिखते समय, मैंने इसे एक त्वरित सेल्स डॉक्यूमेंट बनाने के लिए कहा।
परिणाम? रंग और फ़ॉन्ट लगभग उस प्रोडक्ट के समान थे जिस पर मैं रोज़ काम करता हूँ। सच कहूँ तो, मुझे एक पल के लिए रुकना पड़ा।
मैंने Claude Design को इसके रिलीज़ होने के तुरंत बाद आज़माया था और फिर इसे छोड़ दिया था। लेकिन "दस्तावेज़ प्रोडक्ट से सहज रूप से जुड़कर आ रहे हैं" की यह भावना कुछ ऐसी है जो मैंने पिछले AI टूल्स के साथ अनुभव नहीं की थी, और इसने मेरा दृष्टिकोण बदल दिया।
मेरा नाम tatsuki (@nobel_824) है। मैं छोटे और मध्यम उद्यमों के लिए AI उपयोग का समर्थन करता हूँ, Claude और Codex के व्यावसायिक कार्यान्वयन में मदद करता हूँ, और खुद रोज़ Claude Code चलाता हूँ।
यह लेख मुख्य रूप से उन लोगों के लिए लिखा गया है जो "नियमित रूप से कोड को छूते हैं।"
मैंने एक Design System Kit बनाई है जो Design System बनाने का तरीका बताती है, जो Claude Design की एक अनुशंसित सुविधा है।
मैंने इसे इस लेख के अंत में उपलब्ध कराया है।
यह "एक ही टोन" में क्यों आया?
रहस्य को उजागर करने के लिए, ऐसा इसलिए है क्योंकि मैंने पहले से एक "Design System" सेट अप कर लिया था।
"Design System" शायद जटिल लगे, लेकिन जो लोग कोड लिखते हैं, उनके लिए यह ब्रांड नियमों को "कॉन्फ़िगरेशन फ़ाइल" के रूप में पहले से पास करने जैसा है।
रंग। फ़ॉन्ट। हेडिंग स्टाइल। स्पेसिंग। क्या नहीं करना चाहिए। अगर आप इसे एक बार लिख देते हैं, तो यह सामग्री बनाने से पहले हर बार इसे लोड करेगा।
यह प्रोजेक्ट में CLAUDE.md फ़ाइल रखने जैसा है ताकि आपको हर बार एक ही निर्देश टाइप न करने पड़ें। यह समझ में आ सकता है अगर आप इसे "ब्रांड के लिए एक CLAUDE.md लिखना" समझें।
इसे प्रदान करके, परिणामी सामग्री का टोन हर बार एक जैसा रहता है। भले ही आप बाद में पेज जोड़ें, वे पहले पेज से जुड़े रहते हैं। "जेनेरिक AI-जनित" एहसास भी गायब हो जाता है।
सबसे अच्छा हिस्सा है /design-sync
यह वह हिस्सा है जहाँ केवल वे लोग लाभ उठाते हैं जो Claude Code का उपयोग करते हैं।
Claude Code साइड पर एक /design-sync कमांड है जो GitHub रिपॉजिटरी या स्थानीय कोड से रंग और फ़ॉन्ट सहित डिज़ाइन सिस्टम के एक सेट को पढ़ सकता है और उन्हें सीधे Claude Design (जून 2026 अपडेट) को पास कर सकता है।
दूसरे शब्दों में, अगर आप इसे अपनी पहले से चल रही सेवा का कोड खिलाते हैं, तो यह उस सेवा के रंगों और फ़ॉन्ट का उपयोग करके दस्तावेज़ों या LPs के लिए ड्राफ्ट आउटपुट करेगा।
दस्तावेज़ों और वास्तविक प्रोडक्ट के विज़ुअल में टकराव नहीं होगा। मैन्युअल रूप से कलर कोड कॉपी करने का काम पूरी तरह से गायब हो जाता है। यहीं पर यह वास्तव में काम करता है। मेरे वातावरण में, यह बीटा वर्ज़न होने के बावजूद सामान्य रूप से काम करता है।
*नोट: यह Claude Code (एक अलग टूल जो टर्मिनल या डेस्कटॉप ऐप में उपयोग किया जाता है) के लिए एक कमांड है और इसे claude.ai/design के चैट फ़ील्ड में टाइप नहीं किया जा सकता है। चूँकि Claude Design स्वयं अभी भी बीटा में है (Pro / Max / Team / Enterprise प्लान के लिए), यह आपके प्लान के आधार पर उपलब्ध नहीं हो सकता है।
अगर छोड़ दिया जाए, तो AI जेनेरिक की ओर झुकता है
इसके विपरीत, अगर आप बिना कुछ प्रदान किए पूछते हैं, तो यह कहीं देखा हुआ एक जेनेरिक डिज़ाइन लौटाएगा। टोन हर बार बदलता है, और रंग अलग-अलग होते हैं।
इसके अलावा, Claude Design को इस तरह से संरचित किया गया था कि हर बार जब आप कोई काम दोबारा करते हैं तो यह उपयोग सीमा का उपभोग करता है। विदेशी रिपोर्टों में, ऐसी कहानियाँ हैं जहाँ उपयोगकर्ताओं ने सुधार दोहराकर 30 मिनट में एक सप्ताह की सीमा समाप्त कर दी (PCWorld, अप्रैल 2026)। हालाँकि जून अपडेट में सीमाओं में सुधार किया गया था, लेकिन "पुनः करने के प्रयासों को कम करने के प्रयास सीधे प्रभावी होते हैं" की संरचना वही बनी हुई है।
इसलिए शुरुआत में एक डिज़ाइन सिस्टम बनाने का निवेश भुगतान करता है। आधिकारिक गाइड भी इसे पहले सेट करने के आधार पर लिखा गया है।
कोड के बिना भी यही विचार काम करता है
भले ही आप कहें, "मेरे पास अपना कोई रिपॉजिटरी नहीं है," चिंता न करें।
कोड के बजाय, आप लोगो, ब्रांड रंग, या अपनी कंपनी की साइट का URL (एक स्क्रीनशॉट भी ठीक है) प्रदान कर सकते हैं। यह वहाँ से रंग और फ़ॉन्ट उठाएगा। जिनके पास कोड है, उनके लिए वह हिस्सा /design-sync के साथ स्वचालित हो जाता है। बस इतना ही फ़र्क है।
फिर, दस्तावेज़ की सामग्री प्रदान करें और कहें, "इसे इस टोन में बनाओ।" अंतिम स्पर्श के लिए, बस अपनी आँखों से नामकरण की असंगतियों या संख्यात्मक अंकों की जल्दी से जाँच करें। आपको शुरू से 100 अंक हासिल करने का लक्ष्य नहीं रखना है। फ़ॉन्ट आकार और रंगों को बाद में Claude Design के भीतर समायोजित किया जा सकता है।
सेमिनार स्लाइड्स और प्रस्ताव सामग्री से लेकर एक-पेजीय आंतरिक सारांश और LP ड्राफ्ट तक—जितना अधिक आप कोड लिखते समय सामग्री का बड़े पैमाने पर उत्पादन करेंगे, यह पहला कदम उतना ही अधिक आपको बाद में लाभान्वित करेगा।
मैंने एक किट तैयार की है जिसका आप तुरंत उपयोग कर सकते हैं
हालाँकि, मुझे लगता है कि शुरू से एक बनाना एक झंझट है।
इसलिए, मैंने एक "Claude Design System Kit" तैयार की है जो आपको इस लेख की सामग्री को बिल्कुल दोहराने की अनुमति देती है। इसे "जेनेरिक की ओर झुकने" और "पुनः करने से सीमाएँ पिघलने" की समस्याओं को पहले से खत्म करने के लिए डिज़ाइन किया गया है।
- एक ब्रांड सेटिंग शीट जहाँ आप बस रंग, फ़ॉन्ट, स्पेसिंग, घटक और एक निषिद्ध सूची भरते हैं।
- ऐसे उदाहरण जिनका आप बिल्कुल अनुसरण कर सकते हैं।
- सेमिनार स्लाइड्स के लिए टेम्पलेट।
- इसे Claude Code को पास करते समय कैसे सोचें (इसे /design-sync के साथ कैसे संयोजित करें)।
मैं "Claude Design System Kit" वितरित कर रहा हूँ, जो आपको इस लेख की सामग्री को केवल कॉपी और पेस्ट करके दोहराने की अनुमति देता है, LINE पर मुफ्त में।
▼ "Claude Design System Kit" प्राप्त करने के लिए LINE पर रजिस्टर करें
https://t.co/90omRA4UQ7
कृपया Open Chat (LINE OpenChat) में शामिल हों और फिर नोट्स में उल्लिखित आधिकारिक LINE से कीवर्ड भेजें:
Design System
लाभ प्राप्त करने के लिए।
*कृपया Open Chat के भीतर ही कीवर्ड न भेजें।*
मैं पहले टेम्पलेट को Claude Design में डालने और सिर्फ एक दस्तावेज़ बनाने की कोशिश करने की सलाह देता हूँ। यह अकेला आपको डिज़ाइन सिस्टम का उपयोग करने का एहसास देगा।
▼ "Claude Design System Kit" प्राप्त करने के लिए LINE पर रजिस्टर करें
