Track
एआई मूलभूत बातें
10 घंटा
Claude Design कैसे काम करता है?
दो पेन: बाएँ चैट, दाएँ लाइव कैनवास। आप प्रॉम्प्ट लिखते हैं, Claude कैनवास पर डिज़ाइन जनरेट करता है, और आप उसे सुधारते रहते हैं। Anthropic इस लूप को पाँच चरणों में बताता है:
- प्रासंगिक संदर्भ के साथ एक प्रोजेक्ट बनाएँ
- बताएँ कि आपको क्या चाहिए
- आउटपुट की समीक्षा करें
- चैट और टिप्पणियों के जरिए इटरेट करें
- एक्सपोर्ट करें या साझा करें
मेरे लिए जो बात उभरकर आई, वह है स्पष्टीकरण माँगने का व्यवहार। जब प्रॉम्प्ट अस्पष्ट हो, तो Claude पहली मनमानी धारणा बनाकर ड्रॉ करने के बजाय रुककर पूछ सकता है कि उसे और क्या चाहिए।
बाएँ चैट पैनल, दाएँ जनरेटेड कैनवास। चित्र: लेखक।
अब देखते हैं कि इस लूप के हर हिस्से का व्यावहारिक अनुभव कैसा है।
प्रोजेक्ट सेटअप और संदर्भ जोड़ना
नए प्रोजेक्ट प्रकाशित ऑर्गेनाइज़ेशन डिज़ाइन सिस्टम को इनहेरिट करते हैं, इसलिए एक बार सेटअप होने के बाद ब्रांड एसेट्स को दोबारा अपलोड करने की ज़रूरत नहीं होनी चाहिए।
सेटअप गाइड शुरू में ही Claude को वास्तविक संदर्भ देने की सलाह देता है: स्क्रीनशॉट्स, मॉकअप्स, वह स्लाइड डेक्स जिनकी शैली आपको पसंद है, और यदि मौजूद हो तो कोड रिपॉजिटरी। यदि Claude को और जानकारी चाहिए, तो वह ड्रॉ करने से पहले स्पष्टीकरण माँग सकता है—जिससे वे विवरण सामने आते हैं जिन्हें आप बताना भूल गए थे।
अच्छे प्रॉम्प्ट चार चीज़ें कवर करते हैं: उद्देश्य, लेआउट, सामग्री, और श्रोता। उदाहरण प्रॉम्प्ट: "क्षेत्र और प्रोडक्ट लाइन के फ़िल्टर के साथ मासिक राजस्व दिखाने वाला डैशबोर्ड बनाएँ" और "4 स्क्रीन वाला मोबाइल ऐप ऑनबोर्डिंग फ़्लो डिज़ाइन करें।"
कैनवास पर इटरेशन
पहले ड्राफ्ट के बाद डिज़ाइन को आगे बढ़ाने के कई रास्ते हैं।
- चैट व्यापक बदलाव सँभालता है (डार्क थीम, दो या तीन लेआउट विकल्प)
- इनलाइन टिप्पणियाँ किसी विशिष्ट तत्व को टार्गेट करती हैं, बिना यह समझाए कि वह कहाँ है
- डायरेक्ट टेक्स्ट एडिट्स, बिना प्रॉम्प्ट के कॉपी सुधारते हैं
- कस्टम एडजस्टमेंट स्लाइडर्स, स्पेसिंग, रंग और लेआउट ट्वीक लाइव सँभालते हैं
पहले दिन की एक अड़चन: कभी-कभी टिप्पणियाँ Claude के पढ़ने से पहले गायब हो जाती हैं। टेक्स्ट को चैट में पेस्ट करना दस्तावेज़ित वर्कअराउंड है। परेशान करने वाला, लेकिन समीक्षा के लिए टिप्पणियों पर निर्भर होने से पहले जान लेना बेहतर है।
वर्ज़न, शेयरिंग, और एक्सपोर्ट
मौजूदा ड्राफ्ट को रखते हुए कुछ अलग आज़माने के लिए, Anthropic Claude से कुछ ऐसा कहने का सुझाव देता है: "जो हमारे पास है उसे सेव करें और पूरी तरह अलग ऐप्रोच ट्राय करें।"
शेयरिंग ऑर्गेनाइज़ेशन-स्कोप्ड है—प्राइवेट, व्यू-ओनली, कमेंट, और एडिट एक्सेस; एडिट एक्सेस से टीममेट उसी बातचीत में डिज़ाइन बदल सकता है और Claude से चैट कर सकता है।
एक्सपोर्ट मेनू ऊपर दाएँ होता है और सामान्य फ़ाइल फ़ॉर्मैट्स, Canva हैंडऑफ़, और Claude Code को पैकेज्ड हैंडऑफ़ कवर करता है।
Claude Design से आप क्या बना सकते हैं?
लॉन्च घोषणा प्री-रिलीज़ कस्टमर उपयोग से छह आउटपुट प्रकारों के नाम बताती है। प्रत्येक के साथ संक्षिप्त टिप्पणी:
- यथार्थवादी प्रोटोटाइप: स्टैटिक मॉकअप्स को इंटरैक्टिव प्रोटोटाइप में बदलना जिन्हें आप बिना कोड रिव्यू या पुल रिक्वेस्ट के साझा कर सकें और यूज़र-टेस्ट कर सकें।
- प्रोडक्ट वायरफ़्रेम्स और मॉकअप्स: फ़ीचर फ़्लोज़ जिन्हें आप या तो Claude Code को सौंप सकते हैं या पॉलिश के लिए डिज़ाइनर को भेज सकते हैं।
- डिज़ाइन एक्सप्लोरेट्शंस: कई दिशाएँ जल्दी आज़माना—उन डिज़ाइनरों के लिए जो सामान्यतः खोज के समय को सीमित करते हैं।
- पिच डेक्स और प्रेज़ेंटेशंस: रफ़ आउटलाइन से ऑन-ब्रांड डेक तक,
PPTXएक्सपोर्ट या सेंड-टू-Canva विकल्प के साथ। - मार्केटिंग कोलैटरल: लैंडिंग पेज, सोशल एसेट्स, और कैंपेन विज़ुअल्स।
- फ्रंटियर डिज़ाइन: वॉइस, वीडियो, शेडर्स, 3D, या बिल्ट-इन AI के साथ कोड-समर्थित प्रोटोटाइप। यह छह में सबसे एक्सपेरिमेंटल है, और मैं इसकी खुली बातों पर सीमाएँ सेक्शन में लौटूँगा।
कैनवास पर जनरेटेड मोबाइल ऑनबोर्डिंग प्रोटोटाइप। चित्र: लेखक।
एडमिन गाइड माइक्रोसाइट्स और लैंडिंग पेजों को एक अलग श्रेणी के रूप में जोड़ता है। Anthropic की लॉन्च प्रशंसापत्र गति और एक ही मीटिंग में विचार से प्रोटोटाइप तक जाने पर केंद्रित हैं; इन्हें सार्वभौमिक न मानें, क्योंकि इन्हीं दस्तावेज़ों में अधिक एक्सपेरिमेंटल आउटपुट्स की खुरदरी किनारियाँ भी बताई गई हैं।
Claude Design ब्रांड और डिज़ाइन सिस्टम्स का उपयोग कैसे करता है
यह हिस्सा महत्वपूर्ण है क्योंकि यह डिफ़ॉल्ट आउटपुट बदलता है। Anthropic चेतावनी देता है कि बिना डिज़ाइन सिस्टम के टीमों को "कार्यान्वयन योग्य लेकिन जनरल" आउटपुट मिलता है। प्रकाशित सिस्टम के साथ, नए प्रोजेक्ट आपके रंग, टाइपोग्राफ़ी और कॉम्पोनेन्ट्स उठा लेते हैं। पेंच यह है कि निकला सिस्टम, अपलोड किए गए स्रोत एसेट्स जितना ही अच्छा होगा—बेतरतीब इनपुट से शुरुआती सिस्टम भी बेतरतीब होगा।
अब देखते हैं सिस्टम कैसे बनता है।
सिस्टम कैसे बनाया जाता है
सेटअप प्रति ऑर्गेनाइज़ेशन एक बार होता है। डिज़ाइन सिस्टम लेख चार चरण समझाता है: अपनी ऑर्गेनाइज़ेशन बनाएँ, ब्रांड और प्रोडक्ट एसेट्स अपलोड करें, Claude ने जो जनरेट किया उसकी समीक्षा करें, और उसे टीम के लिए पब्लिश करें। स्रोत सामग्री कोड रिपॉजिटरी, मौजूदा डिज़ाइन फ़ाइलें, आपकी विज़ुअल आइडेंटिटी दर्शाने वाले स्लाइड डेक्स, या लोगो और पैलेट फ़ाइलों जैसे व्यक्तिगत एसेट्स हो सकते हैं। शुरुआत के लिए एक स्रोत पर्याप्त है।
Anthropic कहता है कि जनरेटेड सिस्टम में आमतौर पर कलर पैलेट, टाइपोग्राफ़ी स्केल, कॉम्पोनेन्ट्स (बटन, कार्ड्स, नेविगेशन), और लेआउट पैटर्न शामिल होते हैं। "[आपके प्रोडक्ट] के लिए एक लैंडिंग पेज बनाएँ" जैसे प्रॉम्प्ट से टेस्ट करें कि ब्रांड व्यवहार में कैसा दिखता है।
एक्सट्रैक्टेड टोकन्स के साथ डिज़ाइन सिस्टम समीक्षा। वीडियो: लेखक।
पब्लिशिंग, एकाधिक सिस्टम, और अपडेट्स
जब आप संतुष्ट हों, तो "Published" टॉगल ऑन करें ताकि उस ऑर्गेनाइज़ेशन के नए प्रोजेक्ट इसे डिफ़ॉल्ट रूप से अपना लें। टीमें सब-ब्रांड्स या अलग प्रोडक्ट लाइन्स के लिए एक से अधिक सिस्टम रख सकती हैं। किसी सिस्टम को अपडेट करने के लिए, डिज़ाइन सिस्टम लेख यूज़र्स को "Remix" बटन दिखाता है, जो एक चैट खोलता है जहाँ Claude उसके हिस्सों को बदल सकता है।
एडमिन गाइड क्रम को लेकर स्पष्ट है: बिना प्रकाशित सिस्टम के Claude Design ऑन करने से "कार्यान्वयन योग्य लेकिन जनरल" आउटपुट मिलता है—इसीलिए अनुशंसित रोलआउट में सबसे पहले डिज़ाइन सिस्टम सेटअप आता है।
Claude Design किस तरह का इनपुट स्वीकार करता है?
आप केवल एक-लाइन प्रॉम्प्ट तक सीमित नहीं हैं। Claude Design कई इनपुट प्रकार स्वीकार करता है जो एक-दूसरे के साथ अच्छी तरह काम करते हैं, और अधिक वास्तविक संदर्भ प्रायः बेहतर पहला ड्राफ्ट देता है।
आज दस्तावेज़ित इनपुट्स में शामिल हैं:
- चैट पैनल में सादा टेक्स्ट प्रॉम्प्ट्स।
- स्क्रीनशॉट्स, इमेजेज़, या मौजूदा एसेट्स—जिनमें वे स्लाइड डेक्स और डॉक्यूमेंट्स भी हैं जिनकी शैली आप कॉपी करना चाहते हैं।
DOCX,PPTX, औरXLSXफ़ॉर्मैट्स में डॉक्यूमेंट्स, जैसा कि लॉन्च पोस्ट में नामित है।- कोडबेस—या तो कोड रिपॉजिटरी लिंक करके या इम्पोर्ट फ़्लो के ज़रिए लोकल फ़ोल्डर अटैच करके।
- वेब कैप्चर्स: आप किसी मौजूदा वेबसाइट से एलिमेंट्स कैप्चर कर सकते हैं ताकि Claude वास्तविक इंटरफ़ेस पैटर्न्स को और नज़दीक से मिरर कर सके।
दो बातें अक्सर गलत बताई जाती हैं। Anthropic "मौजूदा डिज़ाइन फ़ाइलों" का ज़िक्र करता है, पर नेटिव डिज़ाइन टूल फ़ॉर्मैट्स की सूची नहीं देता, और अभी नेटिव Figma इम्पोर्ट या एक्सपोर्ट का कोई दावा नहीं है; एक्सपोर्ट मेनू में .fig फ़ाइल शामिल नहीं है। यदि आपका वर्कफ़्लो Figma के साथ आगे-पीछे होने पर निर्भर करता है, तो कमिट करने से पहले इसे लाइव प्रोडक्ट पर ज़रूर जाँचें।
यदि पहला ड्राफ्ट लक्ष्य से चूक जाए, तो पहले बताए चार-बिंदु चेकलिस्ट पर लौटें: उद्देश्य, लेआउट, सामग्री, और श्रोता।
Claude Design बनाम Claude Code
दोनों में Claude नाम, अंडरलाइनिंग मॉडल, और एक हैंडऑफ़ ब्रिज साझा है, पर ये एक ही टूल नहीं हैं। लॉन्च के बाद से मैंने जो आम भ्रम देखा है, उनमें से एक इन्हें मिलाकर देखना है। नाम मिलते-जुलते हैं; उत्पाद अलग काम करते हैं।
आइए वास्तविक अंतर देखें।
प्रत्येक टूल किसके लिए है?
Claude Design वेब उत्पाद है जो कैनवास पर विज़ुअल आउटपुट—प्रोटोटाइप, डेक्स, माइक्रोसाइट्स, और मार्केटिंग पेज—बनाने और परिष्कृत करने के लिए है। यह आपके ब्रांड को समझने के लिए कोड रिपॉजिटरी पढ़ सकता है, लेकिन यह आपके कोडबेस को एडिट नहीं करता या कमांड्स नहीं चलाता।
Claude Code एक एजेंटिक कोडिंग टूल है। आधिकारिक ओवरव्यू इसे ऐसा टूल बताता है जो आपके कोडबेस को पढ़ता है, फ़ाइलें एडिट करता है, और आपके मौजूदा डेवलपमेंट वर्कफ़्लो के अंदर कमांड्स चलाता है। यह आपके टर्मिनल, IDE, डेस्कटॉप ऐप, या ब्राउज़र में चलता है, और इसका काम कोड पर काम करना है। अलग काम, वही प्रक्रिया।
Claude Design और Claude Code कैसे जुड़ते हैं?
जब कोई प्रोजेक्ट बिल्ड के लिए तैयार हो, तो एक्सपोर्ट मेनू में Claude Code को हैंडऑफ़ होता है—या तो लोकल कोडिंग एजेंट को या Claude Code Web को। Anthropic कहता है कि Claude डिज़ाइन इंटेंट को एक बंडल में पैक करता है जिसे रिसीविंग एजेंट एक सिंगल इंस्ट्रक्शन से उठा लेता है। नीचे दिए वॉकथ्रू में सटीक क्लिक पाथ दिखता है।
सही मानसिक मॉडल एक अनुक्रम है: विचार, प्रोटोटाइप, कोड। दोनों उत्पादों के उपयोग सीमाएँ भी अलग हैं, जिनका ज़िक्र मैं आगे एक्सेस सेक्शन में करूँगा।
Claude Design किसके लिए है?
Anthropic दर्शकों को दो हिस्सों में बाँटता है: अनुभवी डिज़ाइनर, जिन्हें आमतौर पर एक्सप्लोरेशन समय की राशनिंग करनी पड़ती है, और "बाकी सब" जिन्हें बिना डिज़ाइन बैकग्राउंड के विज़ुअल काम तैयार करना होता है। इसकी रोलआउट गाइडेंस UX शोधकर्ताओं, प्रोडक्ट मैनेजर्स, मार्केटर्स, और आस-पास के फ़ंक्शंस का भी नाम लेती है।
स्रोत सामग्री और कस्टमर के उद्धरण पढ़ने पर, उत्पाद लगता है कि डिज़ाइनरों के लिए शुरुआती दिशाओं की टेस्टिंग, प्रोडक्ट मैनेजर्स के लिए फ़ीचर फ़्लोज़ स्केच करना, और फाउंडर्स या अकाउंट एग्ज़ीक्यूटिव्स के लिए बिना वीकेंड स्लाइड्स में बिताए डेक बनाना—इनके लिए बना है।
यह उन मार्केटर्स के लिए भी फिट बैठता है जो लैंडिंग पेज, सोशल एसेट्स, और कैंपेन विज़ुअल्स पर शुरुआती ड्राफ्ट बनाते हैं, साथ ही वे नॉन-डिज़ाइनर्स जिन्हें Figma सीखे बिना किसी विचार को विज़ुअली संप्रेषित करना होता है।
विस्तृत, लेकिन "सबके लिए बराबर" नहीं। जो डिज़ाइनर सख्त कॉम्पोनेन्ट लाइब्रेरीज़ और सटीक स्पेसिफ़िकेशंस के तहत काम करते हैं, उन्हें बाद के काम के लिए अब भी असली डिज़ाइन टूल चाहिए होगा। यह उन टीमों के लिए ज़्यादा स्पष्ट फिट है जिनके पास पहले से ब्रांड सिस्टम है और जो पहले ड्राफ्ट की परवाह करते हैं।
Claude Design कहाँ फिट बैठता है?
यह उत्पाद डिज़ाइन वर्कफ़्लो के शुरुआती से मध्य हिस्से में बैठता है, जहाँ पहले ड्राफ्ट्स अंतिम पॉलिश से ज़्यादा मायने रखते हैं। नीचे दिए उपयोग मामले Anthropic की पोज़िशनिंग, आधिकारिक ट्यूटोरियल्स, और लॉन्च प्रशंसापत्रों से आते हैं।
सबसे आम पैटर्न हैं—शुरुआती प्रोटोटाइप एक्सप्लोरेशन, आंतरिक डेमो जो वास्तविक लगने चाहिए पर जिन्हें कोड नहीं बनना है, और फाउंडर्स, सेल्स टीमों, या अकाउंट एग्ज़ीक्यूटिव्स के लिए डेक्स।
यही लॉजिक कैंपेन कॉन्सेप्ट्स, लैंडिंग पेज के पहले ड्राफ्ट्स, ब्रांड-अवेयर मॉकअप्स, और हैंडऑफ़ तैयारी पर भी लागू होता है, जहाँ Anthropic कहता है कि तैयार प्रोटोटाइप को इम्प्लीमेंटेशन के लिए Claude Code या Claude Code Web को बंडल किया जा सकता है।
अधिकांश केसों में सामान्य सूत्र—विचार से ऐसे पहले ड्राफ्ट तक पहुँचना जिसे आप दिखा सकें। उत्पाद पूरे डिज़ाइन प्रोसेस को हल करने की कोशिश नहीं करता। उस सूची का हर केस पहली बार में नहीं बैठेगा; इसलिए शुरुआती सफलताएँ अक्सर दो-तीन इटरेशंस जैसी दिखती हैं, एक नहीं।
व्यवहार में Claude Design का परीक्षण
केवल वर्कफ़्लो के बारे में पढ़ना सीमित है। यहाँ पूरे लूप का एक छोटा पास है, ऐसे प्रॉम्प्ट के साथ जिसे आपका अकाउंट एक्सेस होने पर आप दोहरा सकते हैं। यदि आप पहले ही फ़्लो समझते हैं, तो एक्सपोर्ट स्टेप पर जाएँ—यही वह हिस्सा है जिसे अधिकांश लोग Claude Code के साथ भ्रमित करते हैं।
खोलें claude.ai/design, क्लिक करें New project, नाम रखें Workspace tour, और चुनें High fidelity। यह प्रॉम्प्ट चैट पैनल में पेस्ट करें:
Create a dashboard for a small fintech app.
It should show monthly revenue at the top, a chart of revenue over the last six months in the middle, and a list of recent transactions below.
Keep it clean and readable. Single page, no sidebar.Claude पहले कुछ स्पष्टीकरण वाले प्रश्न पूछ सकता है: श्रोता, एस्थेटिक, करेंसी, और नेविगेशन पैटर्न। साधारण जवाब ठीक चलते हैं (आंतरिक टीम, क्लीन और मिनिमल, USD, केवल टॉप बार)। थोड़ी देर बाद कैनवास भर जाना चाहिए।
अब इटरेट करें। कैनवास को Comment मोड में स्विच करें, प्राइमरी कॉल-टू-एक्शन बटन पर क्लिक करें, और "इस बटन की हॉरिज़ॉन्टल पैडिंग बढ़ाएँ" जैसी एक-लाइन रिक्वेस्ट टाइप करें। यही वह इनलाइन कमेंट व्यवहार है जिसका मैंने ऊपर ज़िक्र किया।
कैनवास एलिमेंट पर पिन की गई इनलाइन टिप्पणी। चित्र: लेखक।
जब डिज़ाइन मनचाही स्थिति में हो, तो Export क्लिक करें और Hand off to Claude Code चुनें। यही वह हैंडऑफ़ पाथ है जिसका मैंने पहले ज़िक्र किया था।