Anthropic ने Terminal UI Mockups के लिए Claude Code में /design कमांड जोड़ा

Anthropic ने Claude Code का विस्तार एक नए /design कमांड के साथ किया है, जो डेवलपर्स को टर्मिनल छोड़े बिना UI mockups बनाने, उनमें सुधार करने और उन्हें देखने की सुविधा देता है।

सीधे टर्मिनल में UI Prototyping

Figma और शेल (shell) के बीच स्विच करने के बजाय, अब आप /design a few options for a login screen जैसा कुछ टाइप कर सकते हैं। Claude कई इंटरैक्टिव "artboards" के साथ उत्तर देता है जो high-fidelity mockups प्रदर्शित करते हैं। आप लेआउट की तुलना कर सकते हैं, अपना पसंदीदा चुन सकते हैं, और फॉलो-अप प्रश्न पूछकर लुक को बेहतर बना सकते हैं—यह सब प्रोडक्शन कोड की एक भी लाइन लिखने से पहले किया जा सकता है।

आपके Codebase से Context-Aware Mockups

डेवलपर Nate Parrott का कहना है कि Claude वास्तव में वर्तमान रिपॉजिटरी (repository) को पढ़ता है। यह कलर पैलेट, कंपोनेंट लाइब्रेरी और लेआउट कन्वेंशन को निकालता है, और फिर प्रत्येक डिज़ाइन को प्रोजेक्ट की मौजूदा शैली के अनुरूप तैयार करता है। परिणाम "Artifacts" के रूप में दिखाई देते हैं, जो Claude के भीतर एक समर्पित व्यू है जो किसी अलग ग्राफ़िक्स एडिटर को खोले बिना इमेज दिखाता है। इस चरण में mockups केवल Claude के वर्कस्पेस में मौजूद होते हैं; उन्हें कोड में बदलने से पहले आपको स्पष्ट रूप से फ़ाइल सिस्टम में सहेजना (save) होगा।

AI-Assisted Development के लिए यह क्यों महत्वपूर्ण है

यह कमांड सॉफ्टवेयर डेवलपमेंट लाइफ साइकिल के दो चरणों—डिज़ाइन और कोडिंग—को एक में समेट देता है। जो टीमें गति को प्राथमिकता देती हैं, वे एक ही प्रॉम्प्ट के साथ कई लेआउट विकल्प तैयार कर सकती हैं, जिससे शुरुआती चरण की खोज (discovery) तेज़ हो जाती है। क्योंकि Claude लाइव codebase का उपयोग करता है, इसलिए mockups ब्रांड के अनुरूप और कंपोनेंट सिस्टम के साथ संगत (compatible) रहते हैं, जिससे जेनेरिक इमेज जनरेशन के बाद होने वाली मैन्युअल सफाई का काम कम हो जाता है।

Anthropic इसे एक "AI software engineer" की दिशा में एक कदम के रूप में देखता है जो लॉजिक और एस्थेटिक्स (aesthetics) दोनों को संभाल सकता है। यदि टर्मिनल एक मल्टी-मोडल वर्कस्पेस के रूप में काम कर सकता है, तो कोड लिखने और यूजर एक्सपीरियंस को आकार देने के बीच का अंतर काफी कम हो जाता है।

वर्तमान सीमाएँ (Limitations)

यह फीचर अभी प्रीव्यू (preview) में है। जनरेट किए गए mockups स्वचालित रूप से सोर्स फ़ाइलें नहीं बनते हैं; आपको उन्हें खुद एक्सपोर्ट और इंटीग्रेट करना होगा। वह अतिरिक्त चरण समय की बचत को कम कर सकता है, विशेष रूप से दर्जनों कंपोनेंट्स वाले बड़े प्रोजेक्ट्स में।

इसे कैसे आज़माएँ

नवीनतम प्रीव्यू बिल्ड प्राप्त करने और /design कमांड को सक्षम करने के लिए claude update चलाएँ।

मुख्य बातें (Key Takeaways)

  • इंटीग्रेटेड प्रोटोटाइपिंग: /design सीधे टर्मिनल प्रॉम्प्ट से कई UI artboards जनरेट करता है।
  • कॉन्टेक्स्टुअल कंसिस्टेंसी: Claude मौजूदा डिज़ाइन सिस्टम के साथ mockups को संरेखित रखने के लिए वर्तमान codebase को स्कैन करता है।
  • सुव्यवस्थित वर्कफ़्लो: Claude Design की प्रॉम्प्टिंग शक्ति को Claude Code के निष्पादन (execution) के साथ जोड़कर, डेवलपर्स बिना टूल्स बदले कॉन्सेप्ट से विजुअल प्रोटोटाइप तक पहुँच सकते हैं।

Anthropic का नया /design कमांड डेवलपर्स को सीधे टर्मिनल से UI mockups बनाने और उनमें सुधार करने की अनुमति देता है, जिससे डिज़ाइन टूल्स और कोड एडिटर्स के बीच होने वाली बार-बार की भागदौड़ कम हो जाती है—यह एक ऐसी बाधा है जिससे कई तेज़ गति से काम करने वाली टीमें अभी भी जूझ रही हैं।

CLI प्रॉम्प्ट से विजुअल ड्राफ्ट तैयार करना

आप /design a few options for a login screen जैसा कमांड टाइप करते हैं और Claude इंटरैक्टिव artboards का एक सेट वापस करता है। प्रत्येक artboard एक high-fidelity mockup दिखाता है जिसे आप फॉलो-अप प्रश्न पूछकर देख सकते हैं, तुलना कर सकते हैं और बेहतर बना सकते हैं।

Claude वर्तमान प्रोजेक्ट की फ़ाइलों को पढ़ता है, कलर पैलेट, कंपोनेंट लाइब्रेरी और लेआउट कन्वेंशन निकालता है, और फिर उन्हें मैच करने के लिए डिज़ाइन को तैयार करता है। आउटपुट "Artifacts" के रूप में दिखाई देता है, जो एक ऐसा व्यू है जो किसी अलग ग्राफ़िक एडिटर को खोले बिना इमेज प्रदर्शित करता है। इस बिंदु पर mockups केवल Claude के वर्कस्पेस में रहते हैं; उन्हें कोड में बदलने से पहले आपको स्पष्ट रूप से फ़ाइल सिस्टम में सहेजना होगा।

डेवलपर्स टर्मिनल-आधारित डिज़ाइन टूल में रुचि क्यों रखते हैं

अधिकांश डेवलपर्स अपने दिन का एक बड़ा हिस्सा कोड टर्मिनल और UI डिज़ाइन ऐप के बीच स्विच करने में बिताते हैं। विजुअल प्रोटोटाइपिंग को उसी विंडो में लाना जहाँ कोड लिखा जाता है, सॉफ्टवेयर डेवलपमेंट लाइफ साइकिल के दो चरणों को एक में समेट देता है।

गति पर ध्यान केंद्रित करने वाली टीमों के लिए, एक ही प्रॉम्प्ट के साथ कई लेआउट विकल्प तैयार करना शुरुआती चरण की खोज (discovery) प्रक्रिया को तेज़ कर सकता है। मौजूदा codebase को Claude द्वारा पढ़ने से mockups ब्रांड के अनुरूप और प्रोजेक्ट के कंपोनेंट सिस्टम के साथ संगत रहते हैं, जिससे जेनेरिक इमेज-जनरेशन स्टेप के बाद होने वाली मैन्युअल सफाई कम हो जाती है।

Anthropic इस जुड़ाव को एक "AI software engineer" की दिशा में एक कदम के रूप में देखता है जो लॉजिक और एस्थेटिक्स दोनों को संभाल सकता है। यदि टर्मिनल अब एक मल्टी-मोडल वर्कस्पेस के रूप में काम कर सकता है, तो कोड लिखने और यूजर एक्सपीरियंस को आकार देने के बीच का अंतर कम हो जाता है।

सीमाएं और पारंपरिक डिज़ाइन टूल्स की आवश्यकता

यह फीचर अभी प्रीव्यू में है, और कई व्यावहारिक सीमाएं बनी हुई हैं। सबसे पहले, जनरेट किए गए मॉकअप अपने आप सोर्स फाइल नहीं बनते हैं; डेवलपर्स को उन्हें मैन्युअल रूप से एक्सपोर्ट और इंटीग्रेट करना होगा। यह अतिरिक्त कदम बड़े प्रोजेक्ट्स के लिए समय की बचत को कम कर सकता है, जहाँ दर्जनों कंपोनेंट्स को सिंक करने की आवश्यकता होती है।

फीचर के परिपक्व होने पर किन बातों पर नज़र रखें

Anthropic के अपडेट में उल्लेख है कि इस कमांड को एक साधारण claude update के साथ इनेबल किया जा सकता है।

निष्कर्ष: Claude Code के टर्मिनल के भीतर एक डिज़ाइन प्रॉम्प्ट को एम्बेड करना डेवलपर्स को कॉन्सेप्ट से लेकर विजुअल प्रोटोटाइप तक एक शॉर्टकट प्रदान करता है, लेकिन वर्कफ़्लो अभी भी मैन्युअल हैंड-ऑफ पर निर्भर है और इसमें समर्पित UI टूल्स जैसी गहराई की कमी है। इसका विकास यह तय करेगा कि यह कमांड केवल एक सीमित सुविधा बनी रहेगी या AI-संचालित डेवलपमेंट स्टैक का एक मुख्य हिस्सा बन जाएगी।