Claude Design System इम्पोर्ट के साथ डिज़ाइन-से-कोड को गति दें

Claude Design अब GitHub से सीधे आपके पूरे डिज़ाइन सिस्टम को इम्पोर्ट करने का समर्थन करता है। Claude के बेतरतीब UI उत्पन्न करने के बजाय, यह आपकी कंपोनेंट लाइब्रेरी, रंग पैलेट, टाइपोग्राफी और स्पेसिंग नियमों को सीखता है-और फिर ऐसे प्रोटोटाइप बनाता है जो आपके मानकों का पालन करते हैं। यह इसलिए मायने रखता है क्योंकि यह डिज़ाइनरों की चाहत और डेवलपर्स के कार्यान्वयन के बीच की खाई को पाटता है।

इसे सेट करने के लिए, अपने रिपॉज़िटरी रूट में एक design-system-spec.json फ़ाइल बनाएँ जो आपके डिज़ाइन टोकन, कंपोनेंट फ़ाइलों और SVG एसेट्स को मैप करती है। यह फ़ाइल सरल दिखती है: बस Claude को अपना रिपॉज़िटरी URL बताएँ, अपना फ्रेमवर्क (React, Vue, आदि) निर्दिष्ट करें, और अपने डिज़ाइन संसाधनों के पथ सूचीबद्ध करें। इसे एक बार कमिट करें, और हर बार जब आप Claude Design खोलें, आप अपना सिस्टम इम्पोर्ट कर सकते हैं।

यहाँ एक वास्तविक वर्कफ़्लो है: एक प्रोडक्ट मैनेजर अपने SaaS के लिए एक नया सेटिंग्स पैनल इस तरह वर्णित करता है: "हमारे सेटिंग्स पेज को तीन टैब के साथ फिर से बनाएँ: Profile, Billing, Team। नोटिफिकेशन टॉगल को Preferences में ले जाएँ।" Claude Design आपके सिस्टम के वास्तविक कंपोनेंट और रंगों का उपयोग करके एक प्रोटोटाइप उत्पन्न करता है। एक डिज़ाइनर इसे कैनवास पर समीक्षा करता है, स्लाइडर से स्पेसिंग समायोजित करता है, और सीधे एलिमेंट्स पर कार्यान्वयन नोट्स जोड़ता है। फिर वे "Send to Claude Code" दबाते हैं-Claude Code को यह पूरी चीज़ स्क्रीनशॉट के रूप में नहीं, बल्कि मशीन-पठनीय स्पेक के रूप में मिलती है और वह इसे लागू कर सकता है। Claude Pro या Max पर पहले से मौजूद टीमों के लिए, यह मॉकअप को कोड में पेस्ट करने और उन्हें मैन्युअल रूप से फिर से बनाने के कष्टदायक चरण को समाप्त कर देता है।

एक बाधा: इम्पोर्ट एक स्नैपशॉट है। यदि आप इम्पोर्ट करने के बाद अपनी कंपोनेंट लाइब्रेरी अपडेट करते हैं, तो रीफ़्रेश करने के लिए Claude Code में /design-sync कमांड चलाएँ। इसे सिस्टम अपडेट के बाद टेस्ट को फिर से बनाने जैसा मानें-सिंक एक कमांड है, कोई मैन्युअल प्रक्रिया नहीं।