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) वाचते. ते कलर पॅलेट्स (colour palettes), कंपोनंट लायब्ररी (component libraries) आणि लेआउट कन्व्हेंशन्स (layout conventions) घेते आणि त्यानंतर प्रत्येक डिझाइन प्रकल्पाच्या सध्याच्या शैलीशी जुळवून तयार करते. हे रिझल्ट्स “Artifacts” म्हणून दिसतात, जे Claude मधील एक समर्पित व्ह्यू (view) आहे जो वेगळा ग्राफिक्स एडिटर न उघडता प्रतिमा दाखवतो. या टप्प्यावर mockups फक्त Claude च्या वर्कस्पेसमध्ये असतात; त्यांना कोडमध्ये रूपांतरित करण्यापूर्वी तुम्हाला फाइल सिस्टममध्ये स्पष्टपणे सेव्ह करावे लागेल.

AI-Assisted Development साठी हे का महत्त्वाचे आहे

ही कमांड सॉफ्टवेअर डेव्हलपमेंट लाइफ सायकलचे दोन टप्पे—डिझाइन आणि कोडिंग—एकाच टप्प्यात आणते. वेग महत्त्वाचा मानणाऱ्या टीम्स एका सिंगल प्रॉम्प्टद्वारे अनेक लेआउट पर्याय तयार करू शकतात, ज्यामुळे सुरुवातीच्या टप्प्यातील शोध प्रक्रिया (discovery phase) वेगवान होते. Claude लाइव्ह codebase वापरत असल्यामुळे, mockups ब्रँडशी सुसंगत राहतात आणि कंपोनंट सिस्टमशी सुसंगत असतात, ज्यामुळे सामान्य इमेज जनरेशननंतर कराव्या लागणाऱ्या मॅन्युअल क्लीनअपचा वेळ वाचतो.

Anthropic ने याला "AI software engineer" कडे जाणारे एक पाऊल म्हणून मांडले आहे, जो लॉजिक आणि एस्थेटिक्स (aesthetics) दोन्ही हाताळू शकतो. जर टर्मिनल एका multi-modal वर्कस्पेस म्हणून काम करू शकत असेल, तर कोड लिहिणे आणि युजर एक्सपिरियन्स (user experience) घडवणे यातील अंतर लक्षणीयरीत्या कमी होईल.

सध्याच्या मर्यादा

हे फीचर अजून प्रीव्ह्यू (preview) मोडमध्ये आहे. तयार केलेले mockups आपोआप सोर्स फाइल्समध्ये रूपांतरित होत नाहीत; तुम्हाला ते स्वतः एक्सपोर्ट आणि इंटिग्रेट करावे लागतील. ही अतिरिक्त पायरी वेळेची बचत कमी करू शकते, विशेषतः डझनभर कंपोनंट्स असलेल्या मोठ्या प्रकल्पांमध्ये.

हे कसे वापरून पाहाल

नवीनतम प्रीव्ह्यू बिल्ड मिळवण्यासाठी आणि /design कमांड सक्षम करण्यासाठी claude update रन करा.

मुख्य मुद्दे

  • Integrated Prototyping: /design टर्मिनल प्रॉम्प्ट्समधून थेट अनेक UI artboards तयार करते.
  • Contextual Consistency: mockups सध्याच्या डिझाइन सिस्टमशी सुसंगत ठेवण्यासाठी Claude सध्याची codebase स्कॅन करते.
  • Streamlined Workflow: Claude Design ची प्रॉम्प्टिंग शक्ती आणि Claude Code ची अंमलबजावणी एकत्र करून, डेव्हलपर्स टूल्स न बदलता संकल्पनेपासून (concept) व्हिज्युअल प्रोटोटाइपपर्यंत पोहोचू शकतात.

Anthropic ची नवीन /design कमांड डेव्हलपर्सना थेट टर्मिनलवरून UI mockups तयार करण्याची आणि त्यात सुधारणा करण्याची सुविधा देते, ज्यामुळे डिझाइन टूल्स आणि कोड एडिटर्समधील सततची येण्या-जाण्याची प्रक्रिया कमी होते—ही एक अशी अडचण आहे ज्याचा सामना अनेक वेगवान काम करणाऱ्या टीम्सना करावा लागतो.

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

तुम्ही /design a few options for a login screen सारखी कमांड टाइप करता आणि Claude इंटरअॅक्टिव्ह artboards चा संच परत करतो. प्रत्येक artboard एक high-fidelity mockup दाखवते ज्याचे तुम्ही निरीक्षण करू शकता, तुलना करू शकता आणि फॉलो-अप प्रश्न विचारून त्यात सुधारणा करू शकता.

Claude सध्याच्या प्रोजेक्टमधील फाइल्स वाचते, कलर पॅलेट्स, कंपोनंट लायब्ररी आणि लेआउट कन्व्हेंशन्स काढते आणि त्यानंतर डिझाइन्स सुसंगत करण्यासाठी them tailor करते. आउटपुट “Artifacts” म्हणून दिसते, जो एक असा व्ह्यू आहे जो वेगळा ग्राफिक एडिटर न उघडता प्रतिमा प्रदर्शित करतो. या टप्प्यावर mockups फक्त Claude च्या वर्कस्पेसमध्ये असतात; त्यांना कोडमध्ये रूपांतरित करण्यापूर्वी तुम्हाला फाइल सिस्टममध्ये स्पष्टपणे सेव्ह करावे लागेल.

डेव्हलपर्सना 'डिझाइन-इन-द-टर्मिनल' टूल का महत्त्वाचे वाटते

बहुतेक डेव्हलपर्स आपला बराचसा वेळ कोड टर्मिनल आणि UI डिझाइन ॲप यांच्यामध्ये स्विच करण्यात घालवतात. व्हिज्युअल प्रोटोटाइपिंग ज्या विंडोमध्ये कोड लिहिला जातो तिथेच आणल्यामुळे सॉफ्टवेअर डेव्हलपमेंट लाइफ सायकलचे दोन टप्पे एकाच टप्प्यात येतात.

वेगावर लक्ष केंद्रित करणाऱ्या टीम्ससाठी, एका सिंगल प्रॉम्प्टद्वारे अनेक लेआउट पर्याय तयार केल्यामुळे सुरुवातीच्या टप्प्यातील शोध प्रक्रिया (discovery phase) वेगवान होऊ शकते. Claude सध्याच्या codebase चे वाचन केल्यामुळे mockups ब्रँडशी सुसंगत राहतात आणि प्रोजेक्टच्या कंपोनंट सिस्टमशी सुसंगत असतात, ज्यामुळे सामान्य इमेज-जनरेशन स्टेपनंतर कराव्या लागणाऱ्या मॅन्युअल क्लीनअपची गरज कमी होते.

Anthropic ने ही भर "AI software engineer" कडे जाणारे एक पाऊल म्हणून मांडली आहे, जो लॉजिक आणि एस्थेटिक्स दोन्ही हाताळू शकतो. जर टर्मिनल आता एका multi-modal वर्कस्पेस म्हणून काम करू शकत असेल, तर कोड लिहिणे आणि युजर एक्सपिरियन्स घडवणे यातील अंतर कमी होईल.

मर्यादा आणि पारंपारिक डिझाइन टूल्सची गरज

हे फीचर अजूनही प्रिव्ह्यू मोडमध्ये आहे आणि अनेक व्यावहारिक मर्यादा कायम आहेत. पहिले म्हणजे, तयार केलेले मॉकअप्स आपोआप सोर्स फाइल्समध्ये रूपांतरित होत नाहीत; डेव्हलपर्सना ते मॅन्युअली एक्सपोर्ट आणि इंटिग्रेट करावे लागतात. मोठ्या प्रकल्पांमध्ये, जिथे डझनभर कंपोनंट्स सिंक करावे लागतात, तिथे हा अतिरिक्त टप्पा वेळेची बचत कमी करू शकतो.

फीचर प्रगत होत असताना काय पाहावे

Anthropic च्या अपडेटमध्ये नमूद केले आहे की, claude update या साध्या कमांडद्वारे हे सक्षम केले जाऊ शकते.

निष्कर्ष: Claude Code च्या टर्मिनलमध्ये डिझाइन प्रॉम्प्ट एम्बेड केल्यामुळे डेव्हलपर्सना संकल्पनेपासून व्हिज्युअल प्रोटोटाइपपर्यंत पोहोचण्यासाठी एक शॉर्टकट मिळतो, परंतु वर्कफ्लो अजूनही मॅन्युअल हँड-ऑफवर अवलंबून आहे आणि त्यात समर्पित UI टूल्ससारखी खोली नाही. याचा विकास हे ठरवेल की ही कमांड केवळ एक मर्यादित सोय म्हणून राहील की AI-चालित डेव्हलपमेंट स्टॅकचा एक मुख्य भाग बनेल.