Claude Design क्या है? मूल्य निर्धारण, 7 निर्माण विधियाँ, और प्रॉम्प्ट उदाहरणों के साथ एक संपूर्ण गाइड [2026 नवीनतम]

18 जून, 2026 को, Claude Design को एक बड़ा अपडेट मिला।

फीचर्स बढ़ गए हैं, और इंटरफ़ेस भी बदल गया है।

मैंने इसे खुद इस्तेमाल करते हुए चेक किया है, इसलिए मैं क्रम से लिख रहा हूँ कि स्क्रीन पर कहाँ क्लिक करना है।

यह लेख "साथ-साथ सीखने" के लिए है।

कृपया इसे [claude.ai/design](//claude.ai/design) खोलकर पढ़ें।

क्या मैं इसे फ्री में इस्तेमाल कर सकता हूँ?

नहीं, आप नहीं कर सकते।

Claude Design केवल पेड प्लान के लिए उपलब्ध है।

यदि आपके पास Pro प्लान ($20/माह) है, तो आप इसका उपयोग कर सकते हैं। कोई अतिरिक्त शुल्क नहीं है।

Claude Design क्या है?

यह एक AI टूल है जो आपको सिर्फ हिंदी में मोटे-मोटे निर्देश देकर स्लाइड्स, LP, ऐप प्रोटोटाइप, प्रपोज़ल और बहुत कुछ बनाने की अनुमति देता है।

Anthropic ने इसे 17 अप्रैल, 2026 को रिलीज़ किया था। इस अपडेट ने इसकी कार्यक्षमता में काफी वृद्धि की है।

आउटपुट "Live HTML" है। यह एक स्थिर छवि नहीं है; यह एक क्लिक करने योग्य, चलने वाला डिज़ाइन जनरेट करता है।

स्क्रीन को कैसे पढ़ें

जब आप [claude.ai/design](//claude.ai/design) खोलते हैं, तो यह स्क्रीन प्रदर्शित होती है।

टॉप टैब

"Make something new" एरिया

यहाँ वह चीज़ चुनें जो आप बनाना चाहते हैं। सात कार्ड रखे गए हैं।

"Designs" के अंतर्गत, आपके पिछले डिज़ाइन सूचीबद्ध हैं।

जब Claude फ़ॉलो-अप प्रश्न पूछता है (सभी कार्डों के लिए सामान्य)

कार्ड चुनने और प्रॉम्प्ट भेजने के बाद, यदि Claude निर्धारित करता है कि जानकारी अपर्याप्त है, तो वह स्क्रीन के दाईं ओर अतिरिक्त प्रश्न प्रदर्शित कर सकता है।

प्रश्नों की सामग्री प्रॉम्प्ट के अनुसार बदलती है।

अनिवार्य और वैकल्पिक आइटम होते हैं।

आइटम का उत्तर दें और जनरेशन शुरू करने के लिए "Continue" दबाएँ।

स्लाइड्स (प्रेजेंटेशन मटीरियल) कैसे बनाएँ

यहाँ से सेमिनार सामग्री, ब्रीफिंग स्लाइड्स और पिच डेक बनाएँ।

स्टेप 1. होम स्क्रीन पर "Slides" पर क्लिक करें

"Presentations & pitch decks" लिखे कार्ड पर क्लिक करें।

स्टेप 2. आप जो स्लाइड्स बनाना चाहते हैं, उनकी सामग्री दर्ज करें

क्लिक करने पर आप इस स्क्रीन पर आते हैं।

बाएँ साइडबार में "What's the presentation about?" प्रदर्शित होता है।

आप तीन इनपुट विधियों में से चुन सकते हैं:

• Upload a doc: Word या PDF जैसे मौजूदा दस्तावेज़ों से स्लाइड्स बनाएँ।
• Paste your notes: नोट्स या टेक्स्ट पेस्ट करें और उन्हें संरचित करवाएँ।
• Existing deck: मौजूदा स्लाइड डेक के आधार पर पुनर्निर्माण करें।

यदि आप कुछ संलग्न नहीं करते हैं, तो नीचे दिए गए टेक्स्ट फ़ील्ड में हिंदी में सामग्री दर्ज करें और Send दबाएँ।

प्रॉम्प्ट उदाहरण

1कृपया AI कंसल्टिंग सेवा के लिए एक परिचय स्लाइड बनाएँ।
2लक्ष्य: एकल व्यवसायी और फ्रीलांसर जो कंप्यूटर में अच्छे नहीं हैं
3अवधि: 20 मिनट के सेमिनार के लिए
4संरचना: मौजूदा समस्याएँ → AI से क्या हल किया जा सकता है → सेवा विवरण → शुल्क → आवेदन कैसे करें
5माहौल: मैत्रीपूर्ण, कोई तकनीकी शब्दजाल नहीं
6दिखावट: सरल और पढ़ने में आसान, सफेद पृष्ठभूमि

1कृपया एक स्व-परिचय स्लाइड बनाएँ।
2पूर्व SE, वर्तमान में AI का उपयोग करना सिखाता हूँ
3उपलब्धियाँ: Claude Code के साथ संचालन स्वचालित किया, 300,000 येन/माह के लिए सिस्टम बनाया
4लक्ष्य: एकल व्यवसायी जो AI में शुरुआती हैं
5स्लाइड्स की संख्या: 5-7, खूब सफेद जगह के साथ देखने में आसान

1कृपया Claude Code का उपयोग करने के तरीके पर एक परिचयात्मक स्लाइड बनाएँ।
2दर्शक: शुरुआती जिन्होंने कभी कोड नहीं लिखा
3अवधि: 10 मिनट
4सामग्री: Claude Code क्या है → इंस्टॉलेशन चरण → पहला कमांड → सामान्य विफलताएँ और समाधान
5लहज़ा: विनम्र, सौम्य और डरावना नहीं

डेक विकल्प (वैकल्पिक)

• Optimize for Google Slides: केवल Google Fonts का उपयोग करता है (Google Slides में खोलने पर सुविधाजनक)।
• Add speaker notes: प्रत्येक स्लाइड में स्वचालित रूप से स्पीकर नोट्स जोड़ता है।

स्टेप 3. जनरेशन होने तक प्रतीक्षा करें

इसमें कुछ मिनट लगते हैं। आप बाएँ पैनल में प्रगति देख सकते हैं।

जब यह समाप्त हो जाता है, तो यह इस तरह दिखता है।

स्टेप 4. ऊपर दाईं ओर दिए गए बटनों से एडजस्ट करें

जनरेशन समाप्त होने के बाद, ऊपर दाईं ओर बटन दिखाई देते हैं।

"Tweaks" का सबसे अधिक उपयोग किया जाता है। बस चैट की तरह कुछ "पहली स्लाइड का शीर्षक बड़ा करें" टाइप करें, और यह इसे ठीक कर देगा।

ध्यान देने योग्य बातें

पहले स्लाइड्स की विज़ुअल शैली तय करें।

यदि आप बीच में "सभी रंग बदल दें" कहते हैं, तो एकरूपता टूट जाती है।

व्यापक ढाँचा तय करना और फिर विवरण ठीक करना तेज़ है।

प्रोडक्ट प्रोटोटाइप (चलने वाले प्रोटोटाइप) कैसे बनाएँ

आप ऐप स्क्रीन, सेवा रिज़र्वेशन फ़्लो और वेब सेवा मॉकअप बना सकते हैं।

समाप्त होने पर, यह उस स्थिति में होगा जहाँ आप वास्तव में उस पर क्लिक करके संचालित कर सकते हैं।

स्टेप 1. होम स्क्रीन पर "Product prototype" पर क्लिक करें

"Interactive app mockups" लिखे कार्ड पर क्लिक करें।

स्टेप 2. आप जो ऐप स्क्रीन बनाना चाहते हैं, उसकी सामग्री दर्ज करें

क्लिक करने पर आप इस स्क्रीन पर आते हैं।

स्लाइड्स की तरह, टेक्स्ट फ़ील्ड में हिंदी में सामग्री दर्ज करें और Send दबाएँ।

प्रोटोटाइप जितना अधिक विवरण लिखेंगे, सटीकता उतनी ही बढ़ती है। निम्नलिखित शामिल करने से गुणवत्ता में सुधार होगा:

• किस तरह का ऐप: रिज़र्वेशन सिस्टम, टास्क मैनेजमेंट, पेमेंट स्क्रीन, आदि।
• स्क्रीन की संख्या: कितनी स्क्रीन।
• प्रत्येक स्क्रीन की सामग्री: क्या प्रदर्शित है।
• संचालन फ़्लो: अगले चरण पर जाने के लिए कहाँ दबाएँ।
• डिवाइस का आकार: स्मार्टफ़ोन (390×844px) या PC के लिए।
• रंग/शैली: डार्क थीम, चमकीला रंग योजना, आदि।

प्रॉम्प्ट उदाहरण

1कृपया एक ब्यूटी सैलून रिज़र्वेशन ऐप के लिए प्रोटोटाइप बनाएँ।
2स्मार्टफ़ोन स्क्रीन (390×844px) पर।
34 स्क्रीन:
41. टॉप: सैलून का नाम, मेनू सूची (कट/कलर/ट्रीटमेंट)
52. मेनू चयन: आगे बढ़ने के लिए चुनें
63. तिथि/समय चयन: कैलेंडर और टाइम स्लॉट
74. पुष्टिकरण/समाप्ति: रिज़र्वेशन विवरण और "रिज़र्व" बटन
8शैली: सफेद पृष्ठभूमि, गुलाबी एक्सेंट, गोल डिज़ाइन
9जब "रिज़र्व" बटन टैप किया जाता है, तो "रिज़र्वेशन पूर्ण!" स्क्रीन पर ट्रांज़िशन करें।

स्टेप 3. जनरेशन होने तक प्रतीक्षा करें

इसमें कुछ मिनट लगते हैं। जब यह समाप्त हो जाता है, तो यह इस तरह दिखता है।

यह उस स्थिति में है जहाँ आप क्लिक करके वास्तव में इसे संचालित कर सकते हैं। "रिज़र्व" बटन दबाने पर अगली स्क्रीन पर ट्रांज़िशन होता है।

स्टेप 4. ऊपर दाईं ओर दिए गए बटनों से एडजस्ट करें

जनरेशन समाप्त होने के बाद, ऊपर दाईं ओर बटन दिखाई देते हैं।

"Tweaks" का सबसे अधिक उपयोग किया जाता है। बस चैट की तरह कुछ "बैकग्राउंड का रंग सफेद करें" या "फ़ॉन्ट बड़ा करें" टाइप करें, और यह इसे ठीक कर देगा।

यदि आप एनिमेशन जोड़ना चाहते हैं

Claude Design डिफ़ॉल्ट रूप से एनिमेशन नहीं जोड़ता है।

यदि आप हलचल जोड़ना चाहते हैं, तो इसे स्पष्ट रूप से निर्दिष्ट करें।

1होवर करने पर बटन को 1.05x तक बड़ा करें, 200ms ट्रांज़िशन के साथ।
2पेज लोड होने पर कार्ड्स को फ़ेड इन + स्लाइड अप करें, उन्हें 150ms के अंतराल पर क्रम में प्रदर्शित करें।

प्रोडक्ट वायरफ़्रेम (ढाँचा डिज़ाइन) कैसे बनाएँ

इसका उपयोग तब करें जब आप पहले "स्क्रीन कॉन्फ़िगरेशन" तय करना चाहते हैं।

यह लेआउट का केवल ढाँचा बनाता है, कोई विस्तृत डिज़ाइन नहीं।

यह "उपयोगकर्ता इस क्रम में आगे बढ़ता है" के फ़्लो की पुष्टि करने के लिए उपयुक्त है।

स्टेप 1. होम स्क्रीन पर "Product wireframe" पर क्लिक करें

"Lo-fi screens & flows" लिखे कार्ड पर क्लिक करें।

### स्टेप 2. आप जिस स्क्रीन का कॉन्फ़िगरेशन बनाना चाहते हैं, उसे दर्ज करें

क्लिक करने पर आप इस स्क्रीन पर आते हैं।

बस टेक्स्ट फ़ील्ड में हिंदी में सामग्री दर्ज करें और Send दबाएँ। यदि आपके पास कोई स्क्रीन है जिसे आप संदर्भ के रूप में उपयोग करना चाहते हैं, तो "Add a screenshot" के साथ संलग्न करने से सटीकता में सुधार होगा।

प्रॉम्प्ट उदाहरण

1कृपया कंसल्टिंग सेवा आवेदन फ़्लो के लिए एक वायरफ़्रेम बनाएँ।
2चरण: टॉप → सेवा विवरण → शुल्क → आवेदन पत्र → समाप्ति
3यह ठीक है बशर्ते मैं देख सकूँ कि प्रत्येक स्क्रीन पर क्या रखना है। विस्तृत डिज़ाइन अनावश्यक है।

1कृपया सेमिनार आवेदन LP के लिए एक वायरफ़्रेम बनाएँ।
2सेक्शन: हीरो सेक्शन → स्पीकर परिचय → सामग्री → भागीदारी शुल्क → आवेदन पत्र
3स्मार्टफ़ोन व्यू में।

स्टेप 3. जनरेशन होने तक प्रतीक्षा करें

जब यह समाप्त हो जाता है, तो यह इस तरह दिखता है।

स्क्रीन का ढाँचा ग्रे बक्सों के साथ प्रदर्शित होता है। इसका उपयोग "बटन यहाँ" और "इमेज यहाँ" जैसे प्लेसमेंट की पुष्टि करने के लिए करें। विस्तृत डिज़ाइन Product prototype या Document के साथ बनाए जाते हैं।

स्टेप 4. ऊपर दाईं ओर दिए गए बटनों से एडजस्ट करें

जनरेशन समाप्त होने के बाद, ऊपर दाईं ओर बटन दिखाई देते हैं।

"Tweaks" में "तीसरी स्क्रीन में शुल्क प्रदर्शन जोड़ें" जैसा कुछ निर्देश देने से अतिरिक्त सुधार होंगे।

दस्तावेज़ (LP, प्रपोज़ल, दस्तावेज़) कैसे बनाएँ

यहाँ से लैंडिंग पेज, प्रपोज़ल, रिपोर्ट और रिज़्यूमे बनाएँ।

7 प्रकार के कार्डों में से, यह सबसे बहुमुखी है।

स्टेप 1. होम स्क्रीन पर "Document" पर क्लिक करें

"Resumes, PDFs, etc." लिखे कार्ड पर क्लिक करें।

### स्टेप 2. आप जो सामग्री बनाना चाहते हैं, उसे दर्ज करें

क्लिक करने पर आप इस स्क्रीन पर आते हैं।

Document कार्ड की एक अनूठी विशेषता "Talk it out" है।

यदि आप अपने विचारों को व्यवस्थित करने के लिए बात करते हुए दर्ज करते हैं, तो यह संरचना को वैसे ही पढ़ लेगा।

यदि आपके पास PDF या सामग्री है, तो आप उन्हें "Upload a PDF or notes" के साथ अपलोड कर सकते हैं।

प्रॉम्प्ट उदाहरण

1कृपया व्यक्तियों के लिए AI कंसल्टिंग सेवा का LP बनाएँ।
2उद्देश्य: LINE रजिस्ट्रेशन बढ़ाना
3संरचना:
4- हीरो सेक्शन: टैगलाइन + रजिस्ट्रेशन बटन
5- क्या आपके पास ये समस्याएँ हैं? (3 आइटम)
6- सेवा से क्या हल किया जा सकता है (3 आइटम)
7- शुल्क
8- FAQ (3 आइटम)
9- अंतिम CTA: LINE रजिस्ट्रेशन बटन
10लक्ष्य: एकल व्यवसायी जो कंप्यूटर में अच्छे नहीं हैं, 50 के दशक की महिलाएँ
11शैली: सरल और गर्मजोशी भरा, सफेद + कोरल एक्सेंट

1कृपया कॉर्पोरेट के लिए कंसल्टिंग सेवा का एक प्रपोज़ल बनाएँ।
2संरचना: मौजूदा मुद्दे → प्रपोज़ल सामग्री → अपेक्षित प्रभाव → शुल्क → कार्यान्वयन चरण → अगली बैठक के बारे में
3शैली: सरल और विश्वसनीय, नेवी × सफेद

1कृपया एक फ्रीलांसर के रूप में एक स्व-परिचय सामग्री (पोर्टफोलियो) बनाएँ।
2शामिल करने योग्य सामग्री: प्रोफ़ाइल, कौशल, उपलब्धियाँ, शुल्क, संपर्क जानकारी
3शैली: मोनोक्रोम + 1 एक्सेंट रंग, आधुनिक और साफ-सुथरा

स्टेप 3. जनरेशन होने तक प्रतीक्षा करें

इसमें कुछ मिनट लगते हैं। जब यह समाप्त हो जाता है, तो यह इस तरह दिखता है।

आप स्क्रॉल करके बाकी देख सकते हैं। LP के लिए, शुल्क और Q&A से लेकर फ़ुटर तक सब कुछ जनरेट हो जाएगा।

स्टेप 4. ऊपर दाईं ओर दिए गए बटनों से एडजस्ट करें

जनरेशन समाप्त होने के बाद, ऊपर दाईं ओर बटन दिखाई देते हैं।

बस "Tweaks" में LP के शब्दों या रंगों का निर्देश देकर, यह मौके पर ही ठीक कर देगा।

एनिमेशन कैसे बनाएँ

आप एनिमेटेड बैनर और मोशन ग्राफ़िक्स बना सकते हैं।

स्टेप 1. होम स्क्रीन पर "Animation" पर क्लिक करें

"Motion graphics & loops" लिखे कार्ड पर क्लिक करें।

स्टेप 2. आप जो एनिमेशन बनाना चाहते हैं, उसकी सामग्री दर्ज करें

क्लिक करने पर आप इस स्क्रीन पर आते हैं।

यदि आपके पास स्टोरीबोर्ड या इमेज हैं, तो आप उन्हें "Drop a storyboard or images" के साथ अपलोड कर सकते हैं।

यदि आपके पास एक स्क्रिप्ट (टेक्स्ट) है, तो आप इसे "Paste a script" के साथ पेस्ट भी कर सकते हैं।

प्रॉम्प्ट उदाहरण

1कृपया सेवा परिचय के लिए एक एनिमेटेड बैनर बनाएँ।
2सामग्री: टेक्स्ट "AI x सिस्टमीकरण" फ़ेड इन होता है → सेवा का नाम नीचे से दिखाई देता है → CTA बटन फ़्लैश करता है
3बैकग्राउंड: डार्क, कोरल एक्सेंट लाइनें
4आकार: 1200×630px
5लूप प्लेबैक

1कृपया एक एनिमेटेड काउंटिंग नंबर बनाएँ।
2टेक्स्ट "3,000 लोगों ने नामांकन किया" के साथ, 0 से 3,000 तक 2 सेकंड में गिनती करें।
3पेज प्रदर्शित होने पर शुरू करें।

जब यह समाप्त हो जाता है, तो यह इस तरह दिखता है।

स्टेप 3. ऊपर दाईं ओर दिए गए बटनों से एडजस्ट करें

जनरेशन समाप्त होने के बाद, ऊपर दाईं ओर बटन दिखाई देते हैं।

अन्य कार्डों के विपरीत, कोई "Edit" बटन नहीं है। चूँकि एनिमेशन कोड (CSS/JavaScript) पर चलते हैं, आप उन पर क्लिक करके सीधे एलिमेंट एडिट नहीं कर सकते। सुधार केवल "Tweaks" में AI को निर्देश देकर ही संभव हैं।

यदि आप किसी एनिमेशन को PDF में एक्सपोर्ट करते हैं, तो हलचल खत्म हो जाएगी। यदि आप हलचल को बनाए रखना चाहते हैं, तो HTML प्रारूप चुनें।

Blank Canvas का उपयोग कैसे करें (स्क्रैच से बनाएँ)

कोई टेम्प्लेट नहीं, कोई प्रश्न नहीं। इसका उपयोग तब करें जब आप पूरी तरह से खाली कैनवास से शुरू करना चाहते हैं।

इसे "ऐसी चीज़ों के लिए चुनें जो किसी कार्ड में फिट नहीं होती" या "जब आप सब कुछ खुद तय करना चाहते हैं।"

बस टेक्स्ट इनपुट फ़ील्ड में वह दर्ज करें जो आप बनाना चाहते हैं और Send दबाएँ।

Start with a File का उपयोग कैसे करें (फ़ाइल से बनाएँ)

यह कार्ड मौजूदा फ़ाइलों को डिज़ाइन में बदलता है। बस Claude को Word, PDF या PPTX फ़ाइल देकर, यह आपके लिए एक डिज़ाइन बनाएगा।

स्टेप 1. "Start with a file" पर क्लिक करें

"Turn it into a design" लिखे कार्ड पर क्लिक करें। एक फ़ाइल चयन डायलॉग खुलेगा।

समर्थित फ़ाइल प्रारूप DOCX, PPTX, XLSX, PDF, JPG और PNG हैं।

स्टेप 2. फ़ाइल अपलोड करें और निर्देश दर्ज करें

जब आप कोई फ़ाइल चुनते हैं, तो वह अपलोड हो जाएगी, और एक बड़ा टेक्स्ट इनपुट फ़ील्ड दिखाई देगा। आप जो बनाना चाहते हैं उसे हिंदी में दर्ज करें और "Start project" बटन दबाएँ।

अन्य कार्डों में "Send" बटन होता है, लेकिन इस कार्ड में "Start project" है।

प्रॉम्प्ट उदाहरण

1कृपया संलग्न Word प्रपोज़ल को विज़ुअल प्रपोज़ल स्लाइड्स में बदलें।
2इसे 5-7 स्लाइड कॉन्फ़िगरेशन के साथ सरल और पढ़ने में आसान डिज़ाइन बनाएँ।

1कृपया इस हस्तलिखित नोट के विचारों को LP प्रपोज़ल में बदलें।
2लक्ष्य: एकल व्यवसायी जो AI में शुरुआती हैं
3लक्ष्य: कंसल्टिंग आवेदन

जब यह समाप्त हो जाता है, तो यह इस तरह दिखता है।

स्टेप 3. ऊपर दाईं ओर दिए गए बटनों से एडजस्ट करें

जनरेशन के बाद, आप ऊपर दाईं ओर टूलबार से एडजस्ट कर सकते हैं। "+ Tweaks" बटन दबाने पर एक चैट इनपुट फ़ील्ड खुलता है जहाँ आप बारीक बदलावों के लिए अतिरिक्त निर्देश दे सकते हैं।

Design Systems का उपयोग कैसे करें [इस अपडेट में नया]

होम स्क्रीन पर कार्ड सूची के नीचे एक "Set up design system" बटन है।

एक बार ब्रांड रंग, फ़ॉन्ट और लोगो पंजीकृत करने के बाद, वे बाद के डिज़ाइनों में स्वचालित रूप से प्रतिबिंबित होंगे।

यह "हर बार रंग एक जैसे नहीं होते" की समस्या को हल करता है।

बटन दबाने पर "Add a design system" मॉडल प्रदर्शित होता है।

दो पंजीकरण विधियाँ हैं।

① यहाँ बनाएँ (शुरुआती के लिए)

आप फ़ॉर्म में आवश्यक जानकारी दर्ज करके इसे सेट कर सकते हैं।

चीज़ें जो आप पंजीकृत कर सकते हैं:

• कंपनी का नाम/ब्रांड विवरण (टेक्स्ट इनपुट)
• GitHub रिपॉजिटरी URL
• Figma फ़ाइल (.fig फ़ाइल अपलोड करें)
• फ़ॉन्ट, लोगो और एसेट फ़ाइलें

आप बिना कोड के इसका उपयोग कर सकते हैं। यदि आप इसे पहली बार आज़मा रहे हैं, तो यह अनुशंसित है।

② Claude Code का उपयोग करके बनाएँ (BEST FIDELITY)

यह Claude Code को ब्रांड जानकारी सीखने देने की एक सुविधा है।

एक बार पंजीकृत होने के बाद, आपको हर बार LP, होमपेज या स्लाइड बनाते समय "इस रंग और इस फ़ॉन्ट के साथ" निर्दिष्ट नहीं करना पड़ेगा। ब्रांड के रूप में एकीकृत डिज़ाइन अपने आप निकल आएंगे।

मुख्य रूप से कॉर्पोरेट डेवलपमेंट टीमों के लिए। यह React नियमों के साथ बनाए गए सेवा कोड से ब्रांड जानकारी को स्वचालित रूप से पढ़ने की एक सुविधा है। व्यक्तिगत उपयोग के लिए लगभग कोई उपयोग के मामले नहीं हैं।

उपयोग कैसे करें

आप इसे निम्नलिखित चरणों के साथ स्क्रैच से बना सकते हैं।

स्टेप 1. Node.js चेक करें

स्टेप 2. फ़ोल्डर्स और फ़ाइलें बनाएँ

1कोई भी फ़ोल्डर/
2　　└── design-system/
3　　　　　　　├── package.json
4　　　　　　　└── tokens.js

package.json

1{ 
2  "name": "my-design-system", 
3  "version": "1.0.0", 
4  "type": "module" 
5}

tokens.js (अपने ब्रांड के अनुसार रंग और फ़ॉन्ट बदलें)

1export const colors = {
2  primary: "#DA7756",      // मुख्य रंग
3  background: "#F5F4F0",   // पृष्ठभूमि रंग
4  text: "#1C1917",         // मुख्य टेक्स्ट
5  white: "#FFFFFF"
6}
7export const fonts = {
8  heading: "YuGothic",
9  body: "Meiryo"
10}

स्टेप 3. /design-sync निष्पादित करें

Claude Code में निम्नलिखित कमांड चलाएँ:

1/design-sync

जब यह समाप्त हो जाता है, तो ब्रांड "Design systems" टैब में पंजीकृत हो जाएगा। यह रंग और फ़ॉन्ट बाद के डिज़ाइन जनरेशन में स्वचालित रूप से उपयोग किए जाएंगे।

एक्सपोर्ट विधियाँ

तैयार डिज़ाइनों को कई प्रारूपों में एक्सपोर्ट किया जा सकता है।

यदि एनिमेशन है, तो PDF में एक्सपोर्ट करने पर हलचल खत्म हो जाएगी।

यदि आप हलचल को बनाए रखना चाहते हैं, तो HTML प्रारूप चुनें।

एडजस्टमेंट के लिए टिप्स (Tweaks पैनल)

जनरेशन के बाद, "Tweaks" बटन दबाने से आप AI को बारीक एडजस्टमेंट निर्देश दे सकते हैं।

प्रभावी निर्देशों के उदाहरण:

• "हेडर टेक्स्ट को बड़ा करें"
• "बटन को और अधिक उभरकर दिखाएँ"
• "इसे समग्र रूप से सरल बनाएँ"
• "स्मार्टफ़ोन पर देखने पर लेआउट जाँचें"

एक बार में सब कुछ बदलने की कोशिश करने के बजाय, एक-एक करके निर्देश देने से वांछित परिणाम प्राप्त करना आसान होता है।

इस अपडेट में क्या बदला

सारांश — आप जो बनाना चाहते हैं उसके आधार पर एक कार्ड चुनें

Claude Design Pro प्लान ($20/माह) और उससे ऊपर के लिए उपलब्ध है। इसे मुफ्त में इस्तेमाल नहीं किया जा सकता।

आप जो बनाना चाहते हैं उसके आधार पर एक कार्ड चुनें

जब प्रॉम्प्ट में चार बिंदु शामिल हों तो सटीकता बढ़ जाती है: "उद्देश्य, संरचना, लक्ष्य और शैली।"

शुरू से पूर्णता के लिए लक्ष्य न रखें; एक व्यापक ढाँचा बनाना और फिर एक-एक करके चीज़ों को ठीक करना तेज़ है।

यदि आपको यह लेख पसंद आया, तो मुझे खुशी होगी यदि आप "Like" दबाएँ।

▼ आप LINE के माध्यम से Claude का उपयोग करने का तरीका प्राप्त कर सकते हैं, जिसे कंप्यूटर में अच्छे न होने पर भी शुरू किया जा सकता है।

रजिस्टर करने पर आपको Claude Code इंस्टॉलेशन गाइड उपहार के रूप में मिलेगा।

https://utage-system.com/line/open/7AX6UZExr2sX?mtid=k9bP2gwMFMso