आप पहले से ही जानते हैं कि इसे कैसे पहचानना है। सफ़ेद बैकग्राउंड पर पर्पल ग्रेडिएंट, Inter फ़ॉन्ट, कार्ड पर सॉफ्ट शैडो, सेक्शन के बीच में एक खोया हुआ इमोजी। आप इसे देखते हैं और सोचते हैं: क्लॉड ने यह बनाया है।
यह मॉडल की गलती नहीं है। यह इसका डिफ़ॉल्ट व्यवहार है।
जब आप बिना किसी अतिरिक्त निर्देश के "लैंडिंग पेज बनाओ" कहते हैं, तो मॉडल सबसे दिलचस्प विकल्प नहीं चुनता। यह सबसे संभावित विकल्प चुनता है। और सबसे संभावित विकल्प वह सब कुछ का औसत है जो उसने प्रशिक्षण के दौरान देखा: लाखों सुरक्षित, जेनेरिक, भूलने योग्य पेज। परिणाम एक ऐसा डिज़ाइन है जो AI डिज़ाइन जैसा दिखता है क्योंकि यह वेब पर मौजूद चीज़ों का शाब्दिक रूप से सांख्यिकीय केंद्र है।
Anthropic ने इसके लिए एक नाम रखा है, वे इसे डिस्ट्रीब्यूशनल कन्वर्जेंस कहते हैं। व्यवहार में, इसका मतलब एक बात है: दिशा के बिना, क्लॉड हमेशा सामान्य में फंस जाता है।
एक कौशल वह तरीका है जिससे आप इसे उस जगह से बाहर निकालते हैं।
कौशल क्या है, संक्षेप में
एक मार्कडाउन (टेक्स्ट) फ़ाइल के बारे में सोचें जिसे क्लॉड काम शुरू करने से पहले पढ़ता है। हर प्रॉम्प्ट में अपनी प्राथमिकताएँ, अपना डिज़ाइन सिस्टम और अपना टोन दोहराने के बजाय, आप इसे एक बार लिखते हैं और यह अपने आप लोड हो जाता है। यह एक नौकरी का विवरण है जिसे आप कार्य देने से पहले सौंपते हैं।
आउटपुट में अंतर बहुत बड़ा होता है। एक ही प्रॉम्प्ट, एक ही क्लॉड, लेकिन सही कौशल लोड होने पर, यह एक जेनेरिक डिज़ाइनर नहीं रह जाता और एक सहयोगी बन जाता है जो आपके काम को जानता है।
मैंने उनमें से कई का परीक्षण किया, एक ही प्रॉम्प्ट पर पहले और बाद के साथ यह देखने के लिए कि वास्तव में क्या फर्क पड़ता है। हम 5 को अलग कर सकते हैं जो वेब डिज़ाइन के लिए वास्तव में सुई को हिलाते हैं।
1. Frontend Design (Anthropic का आधिकारिक कौशल)
यह इकोसिस्टम में सबसे लोकप्रिय है, और एक अच्छे कारण से: इसे Anthropic ने ही जारी किया था। इसके 277,000 इंस्टॉलेशन हो चुके हैं।
इसका रहस्य क्लॉड को खूबसूरती से ड्रॉ करना सिखाना नहीं है; यह उसे सिखाना है कि क्या नहीं करना चाहिए। फ़ाइल में स्पष्ट रूप से उन क्लिच की सूची है जिनसे बचना है: अति प्रयोग किए गए फ़ॉन्ट, सामान्य रंग योजनाएँ, वह कार्ड शैडो स्ट्रक्चर जिसे हर कोई पहचानता है। यह मॉडल में अंतर्निहित अच्छे स्वाद का एक छोटा सा पाठ है।
पहले और बाद के परीक्षण में, यह स्पष्ट हो जाता है। वही लैंडिंग पेज जो पर्पल ग्रेडिएंट और इमोजी के साथ आया था, एक संपादकीय जैसा, सुरुचिपूर्ण सेरिफ़ और साफ़ सैन्स-सेरिफ़ पेयरिंग, स्क्रॉल फ़ेड एनिमेशन और विचारशील होवर स्टेट्स के साथ बदल जाता है। सिर्फ़ एक प्रॉम्प्ट से।
कब उपयोग करें: जब भी आप शुरू से एक प्रोजेक्ट शुरू कर रहे हों और पहली बार में डिफ़ॉल्ट से बचना चाहते हों। यह आपका आधार है।
और यह आपको अपनी शैली में बंद नहीं करता है। यदि आप बाकी नियम चाहते हैं लेकिन केवल सैन्स-सेरिफ़ फ़ॉन्ट चाहते हैं, तो बस मार्कडाउन को संपादित करें और इसे बताएं: "केवल Geist, Google Sans, या DM Sans का उपयोग करें।" क्लॉड फ़ाइल को एडजस्ट कर लेता है।
2. Impeccable (टूलबॉक्स)
Paul Bakaus द्वारा बनाया गया, यह थोड़े ही समय में GitHub पर 45.9k स्टार्स पार करके समुदाय के पसंदीदा में से एक बन गया। और यह देखना आसान है कि क्यों।
इसमें सबसे अच्छी बात है कमांड। शुद्ध /impeccable है, लेकिन इसके साथ लगभग 20 उप-कमांड आते हैं जिन्हें आप संदर्भ के अनुसार कॉल करते हैं:
- /impeccable animate इंट्रो एनिमेशन और मूवमेंट को सुसंगत रूप से जोड़ता है, इस तरह से जो पेज के लिए समझ में आता है
- /impeccable quieter डिज़ाइन पर एक "शोर" ऑडिट चलाता है (बहुत अधिक ग्रेडिएंट, हर शीर्षक पर भारी फ़ॉन्ट वेट, बिखरे हुए इमोजी) और अतिरिक्त को हटा देता है, चिल्लाने के बजाय लालित्य लाता है
- /impeccable audit एक गुणवत्ता और पहुँच (एक्सेसिबिलिटी) जाँच करता है
- /impeccable document एक design.md जनरेट करता है जो आपके संपूर्ण डिज़ाइन सिस्टम को कैप्चर करता है ताकि कोई भी एजेंट बाद में इसे पढ़ सके
अंदरूनी स्तर पर, इसमें स्लॉप डिटेक्शन के लिए 46 नियतात्मक नियम हैं—जो मॉडल के अनुमान लगाने पर निर्भर हुए बिना चलते हैं। यह AI-जनरेटेड पैटर्न को सटीक रूप से पकड़ता है।
कब उपयोग करें: आपके पास जो पहले से है उस पर पुनरावृत्ति करने के लिए। एक पेज तैयार है और अतिशयोक्ति को नियंत्रित करना चाहते हैं? quieter। जान नहीं है? animate। दो प्रॉम्प्ट में, साइट स्तर बदल देती है।
टूल से परे एक विवरण: Impeccable में एक "slop" टैब है जो उन पैटर्न को दिखाता है जिन्हें यह AI को बचना सिखाता है। इस सूची को स्वयं देखें। यह पहचानना सीखना कि कार्ड के किनारे पर एक एक्सेंट बॉर्डर एक AI क्लिच बन गया है, आपको मैन्युअल रूप से भी बेहतर डिज़ाइन बनाता है।
3. UIUX Pro Max (जो क्लॉड को सोचने के लिए मजबूर करता है)
यह एक सुपरचार्ज्ड डिज़ाइन डेटाबेस है, और सूची में सबसे अधिक स्टार वाला: इसने GitHub पर 105k स्टार्स पार किए। इसमें 67 UI शैलियाँ, 161 रंग पैलेट, 57 फ़ॉन्ट जोड़े, 99 UX दिशानिर्देश और 16 टेक स्टैक हैं ताकि यह जान सके कि प्रत्येक फ्रेमवर्क में कैसे लागू करना है।
इसका उद्देश्य आपको तेज़ कोड देना नहीं है; यह इसके विपरीत है। यह क्लॉड को कोई भी लाइन लिखने से पहले तर्क करने के लिए मजबूर करता है। यह आपके लेआउट को पाँच डोमेन (उत्पाद, शैली, रंग, लैंडिंग, टाइपोग्राफी) में समानांतर खोज के माध्यम से चलाता है, तर्क नियम लागू करता है, और उसके बाद ही एक पूर्ण डिज़ाइन सिस्टम लौटाता है, जिसमें बचने के लिए एंटी-पैटर्न पहले से चिह्नित होते हैं।
https://x.com/nett0eth/status/2073490435066982554
परिणाम जानबूझकर किए गए सेक्शन हैं, सजावटी नहीं। परीक्षण में, इसने KPI ब्लॉक में ही एक हल्के-से-गहरे रंग में परिवर्तन जैसी चीज़ें कीं, विशेष रूप से उस संख्या को उजागर करने के लिए जिसे बाहर कूदना चाहिए। यह उस तरह का निर्णय है जिसकी आप एक मानव से अपेक्षा करते हैं, न कि एक जनरेटर से।
कब उपयोग करें: जब आपके पास सामग्री के बारे में स्पष्टता हो और आप डिज़ाइन की गहराई चाहते हों। और एक सोने के बराबर टिप: आप प्रत्येक सेक्शन में जो चाहते हैं उसके बारे में जितना अधिक विशिष्ट होंगे, उतना बेहतर होगा। एक कौशल आपके दिमाग को नहीं पढ़ता; यह आपकी दिशा को बढ़ाता है। "कौशल का उपयोग करें और अधिक कठोर रीडिज़ाइन करें, पैलेट और फ़ॉन्ट जोड़े का अन्वेषण करें" भेजने से जो वापस आता है वह पूरी तरह से बदल जाता है।
4. Web Design Guidelines (ऑडिटर, Vercel Labs से)
यह प्रोजेक्ट के अंत के लिए है, शुरुआत के लिए नहीं। यह Vercel Labs से आता है, इसके GitHub पर 29k स्टार्स हैं, और यह Vercel की वेब इंटरफ़ेस दिशानिर्देशों की सूची के विरुद्ध आपके कोड का ऑडिट करता है, 100 से अधिक नियम: कीबोर्ड फ़ोकस काम करना, ज़ूम को कभी अक्षम न करना, पेस्ट को ब्लॉक न करना, बटन पर लोडिंग इंडिकेटर, हेडिंग पदानुक्रम, ARIA, इत्यादि।
और इसमें एक ट्रिक है जो मुझे पसंद है: आप क्लॉड से सीधे पूर्वावलोकन स्क्रीन पर समस्याओं को एनोटेट करने के लिए कह सकते हैं। एक सूची पढ़ने के बजाय, आप साइट पर, नारंगी रंग में, देखते हैं कि कहाँ aria-label गायब है, कहाँ कीबोर्ड नेविगेशन टूटता है, कहाँ CTA में फ़ोकस का अभाव है। यह दृश्य बन जाता है।
कब उपयोग करें: जब डिज़ाइन पहले से ही अच्छा हो और आप यह सुनिश्चित करना चाहते हों कि यह सुलभ हो और कीबोर्ड या स्क्रीन रीडर का उपयोग करने वाले किसी व्यक्ति को शर्मिंदा न करे। यह लाइव होने से पहले QA है।
5. Astryx (एजेंट-रेडी डिज़ाइन सिस्टम, Meta से)
https://x.com/nett0eth/status/2073826299789889884
पाँचवाँ एक अलग श्रेणी में है: यह एक स्वाद कौशल नहीं है, यह एक संपूर्ण डिज़ाइन सिस्टम है। ऊपर के 4 क्लॉड को एक स्क्रीन पर बेहतर डिज़ाइन करना सिखाते हैं। Meta ने विपरीत रास्ता चुना और Astryx को खोल दिया, वह डिज़ाइन सिस्टम जो 8 वर्षों तक इन-हाउस विकसित हुआ, कंपनी में सबसे बड़ा और सबसे अधिक उपयोग किया जाने वाला बन गया, और 13,000 से अधिक ऐप्स में चलता है। अब यह ओपन सोर्स है और, यहाँ महत्वपूर्ण विवरण, एजेंट रेडी है।
इसका सार यह है: मॉडल के पास हर घटक के लिए सामान्य ज्ञान होने की उम्मीद करने के बजाय, आप इसे एक ऐसा सिस्टम देते हैं जहाँ सब कुछ पहले से ही सुलभ और सुसंगत पैदा होता है। इसमें 150 से अधिक घटक, 7 तैयार थीम, डार्क मोड, और एक CLI है जिसका उपयोग व्यक्ति और एजेंट दोनों एक ही तरह से करते हैं, एक ही दस्तावेज़ पढ़ते हैं। रिपॉजिटरी में एक CLAUDE.md भी है ताकि क्लॉड पहली लाइन लिखने से पहले घर को समझ सके।
यह React और StyleX पर चलता है, बीटा में है, और पहले से ही इसके 8.2k स्टार्स हैं।
कब उपयोग करें: जब आप सिस्टम स्थिरता चाहते हैं, न कि केवल एक सुंदर स्क्रीन। कौशल मॉडल के स्वाद को परिष्कृत करते हैं; Astryx यह सुनिश्चित करता है कि किसी भी प्रॉम्प्ट से पहले नींव पहले से ही ठोस हो। दोनों एक दूसरे के पूरक हैं।
और कौशल कहाँ खोजें
ये 5 क्लॉड में एक वेब डिज़ाइनर जो कुछ भी करता है उसका लगभग 90% कवर करते हैं। लेकिन यदि आप अन्वेषण करना चाहते हैं, तो अच्छी निर्देशिकाएँ हैं:
- UI Skills डिज़ाइन इंजीनियरों पर केंद्रित है लेकिन वेब डिज़ाइन के लिए भी काम करता है। यह इनमें से कई को सूचीबद्ध करता है और इसमें एक्सेसिबिलिटी और Shadcn सामग्री है।
- Type UI उन लोगों के लिए मेरा पसंदीदा है जो पहले दृश्य के बारे में सोचते हैं। आप स्क्रॉल करते हैं और प्रत्येक सौंदर्य (न्यूनतम, नियो-ब्रुटलिज़्म, परिष्कृत कॉर्पोरेट) का पूर्वावलोकन देखते हैं और निर्देश का एक पैराग्राफ लिखे बिना उसे कॉल करते हैं।
- MCP Market एक बड़ा सामुदायिक भंडार है; Agent Skills > Categories > Design Tools पर जाएँ और एक अंतहीन सूची है।
- skills.sh वह जगह है जहाँ Vercel और अन्य आधिकारिक रूप से प्रकाशित करते हैं, सीधे स्रोत से प्राप्त करने के लिए अच्छा है।
अपना खुद का कौशल कैसे बनाएं
जब उनमें से कोई भी आपके ब्रांड या आपके स्टैक के साथ 100% फिट नहीं बैठता है। तब आप अपना खुद का बनाते हैं।
क्लॉड ऐप या क्लॉड कोड में, Customize > Skills > Create Skill > Create with Claude पर जाएँ। यह पूछकर शुरू होता है कि कौशल को क्या करना चाहिए।
वह हिस्सा जो एक उपयोगी कौशल को बेकार से अलग करता है, वह यह है कि आप यहाँ कितने विशिष्ट हैं। "सुंदर डिज़ाइन बनाओ" के बजाय, तर्क नियम दें। उदाहरण के लिए:
- पहले हमेशा उत्पाद प्रकार की पहचान करें (डैशबोर्ड, लैंडिंग, ऐप), क्योंकि डिज़ाइन संदर्भ के साथ बदलता है।
- ड्रॉ करने से पहले हमेशा स्क्रीन के लक्ष्य का अनुमान लगाएं: कौन सी कार्रवाई सबसे महत्वपूर्ण है और उपयोगकर्ता को पहले क्या नोटिस करना चाहिए।
- एक सीमित पैलेट, अधिक तटस्थ पृष्ठभूमि और सतह पर डिफ़ॉल्ट।
- एक प्राथमिक बॉडी फ़ॉन्ट और, यदि आवश्यक हो, तो बड़े शीर्षकों के लिए एक डिस्प्ले फ़ॉन्ट।
क्लॉड एक बातचीत शुरू करता है और आपके स्टैक (उदाहरण के लिए, Tailwind टोकन), आपके स्पेसिंग अनुपात, आपकी लेआउट सीमाओं के बारे में पूछता है। विस्तृत रहें; यही कौशल को सार्थक बनाता है। अंत में, यह सब कुछ संदर्भ फ़ोल्डरों के साथ एक .md में पैकेज करता है, और आप इसे अपने स्वयं के स्लैश कमांड के माध्यम से एक्सेस करते हैं।
लेकिन कौशल बनाना आसान हिस्सा है। कठिन हिस्सा यह सुनिश्चित करना है कि यह अगले सत्र में टूटे नहीं, और यहीं वह धुरी आती है जिसे बहुत से लोग छोड़ देते हैं। मैंने पहले ही Matt Pocock के 8-चरणीय फ्रेमवर्क को टिकाऊ कौशल लिखने के लिए (ट्रिगर, संरचना, दिशा, प्रूनिंग) एक अलग लेख में समझाया है, और यह आपके द्वारा इंस्टॉल किए जाने वाले किसी भी डिज़ाइन कौशल से अधिक मूल्यवान है:
https://x.com/nett0eth/status/2075976597513830727
इसे एक साथ पढ़ना उचित है; यह "मॉडल को सही रूलर देने" का वही तर्क है जो एक स्तर ऊपर लागू किया गया है। Anthropic की आधिकारिक मार्गदर्शिका, The Complete Guide to Building Skills for Claude, भी सिद्धांतों को तोड़ती है।
क्या बचता है
क्लॉड डिफ़ॉल्ट रूप से एक प्रभावशाली डिज़ाइनर नहीं है। यह किसी ऐसे व्यक्ति के लिए कोई खबर नहीं है जिसने लैंडिंग पेज माँगा हो और सामान्य पर्पल ग्रेडिएंट प्राप्त किया हो।
कौशल वह तरीका है जिससे आप इस अंतर को पाटते हैं। ऐसा नहीं है कि मॉडल अधिक स्मार्ट हो गया, बल्कि इसलिए कि आपने इसे वह रूलर दिया जो एक वास्तविक डिज़ाइनर अपने दिमाग में रखता है। मॉडल उस लूप से कम मायने रखता है जिसे आप इसके चारों ओर बनाते हैं।
इसे एक बार कॉन्फ़िगर करें। आउटपुट में उछाल इतना बड़ा है कि आप इसके बिना काम नहीं करना चाहेंगे।
सवाल बना रहता है: आपके कितने प्रोजेक्ट अभी भी सामान्य पर्पल ग्रेडिएंट के साथ निकल रहे हैं, सिर्फ इसलिए कि आपने पूछने से पहले कभी कोई कौशल लोड नहीं किया? सेव करें और शेयर करें 👍
स्रोत / लिंक:
- Frontend Design (Anthropic)
- Impeccable (Paul Bakaus)
- Web Design Guidelines (Vercel Labs)
- UIUX Pro Max
- Astryx (एजेंट-रेडी डिज़ाइन सिस्टम, Meta से)
- The Complete Guide to Building Skills for Claude
- मेरा पिछला लेख (कौशल बनाने के लिए 8-चरणीय फ्रेमवर्क):
