frontend-design एक डिज़ाइन मार्गदर्शन स्किल है जो Claude Code के साथ इस्तेमाल होती है। यह कोई कंपोनेंट या फ्रेमवर्क नहीं देती, बल्कि मॉडल से जवाब माँगती है कि यह इंटरफ़ेस किसके लिए है, कौन-सा टोन चाहिए, क्या सीमाएँ हैं और याद रहने वाला तत्व क्या है; फिर टाइपोग्राफी, रंग, मोशन, कंपोज़िशन और बैकग्राउंड पर ठोस निर्देश देती है।
यह क्या है
frontend-design, Anthropic के आधिकारिक skills रिपॉज़िटरी की फ्रंटएंड डिज़ाइन स्किल है, जो Claude Code जैसे कोडिंग एजेंट के लिए है। यह खुद को UI फ्रेमवर्क नहीं बल्कि डिज़ाइन निर्णय की परत कहती है: यह आपकी कंपोनेंट लाइब्रेरी की जगह नहीं लेती, बल्कि कोड लिखने से पहले डिज़ाइन का फ़ैसला तय कर देती है — और टेम्पलेट जैसा असर वहीं से आता है। सोर्स और दस्तावेज़ github.com/anthropics/skills पर हैं।
यह किन चीज़ों को सीमित करती है
कोड से पहले सोचने का ढाँचा। पहली पंक्ति से पहले मॉडल को इंटरफ़ेस का उद्देश्य, दर्शक, विज़ुअल टोन, तकनीकी सीमाएँ और याद रहने वाला तत्व बताना होता है, और इस फ़ैसले को प्रक्रिया में दर्ज करना होता है — पैदा करते समय तुरंत कोई फ़ैसला नहीं।
टाइपोग्राफी। Inter और Roboto जैसे डिफ़ॉल्ट फ़ॉन्ट साफ़ तौर पर हटाए जाते हैं और चरित्र वाला संयोजन माँगा जाता है, ताकि पहले फ़ॉन्ट से व्यक्तित्व बने।
रंग और थीम। सफ़ेद बैकग्राउंड पर बैंगनी ग्रेडिएंट जैसी घिसी-पिटी चीज़ें हट जाती हैं; मुख्य रंग के साथ तेज़ एक्सेंट रंग और CSS वेरिएबल से एकरूपता माँगी जाती है।
मोशन। बिखरे माइक्रो-इंटरैक्शन से बेहतर है एक सोच-समझकर बनाया गया एंट्रेंस एनिमेशन। सादे HTML में CSS, React में मोशन लाइब्रेरी।
स्थानिक कंपोज़िशन। असममिति, ओवरलैप और तिर्यक रेखाएँ प्रोत्साहित की जाती हैं ताकि ग्रिड टूटे और लेआउट अनुमानित न लगे।
बैकग्राउंड और ब्यौरे। ग्रेडिएंट मेश और नॉइज़ टेक्सचर माहौल बना सकते हैं, लेकिन हर ब्यौरा पूरे सौंदर्य थीम की सेवा करे।
इस्तेमाल कैसे करें
अपने आप चालू। Claude Code या Codex में फ्रंटएंड काम दें; एजेंट काम का प्रकार पहचानकर स्किल की सीमाएँ और प्रक्रिया पढ़ता है।
साफ़ तौर पर चालू। प्रॉम्प्ट में लिखें: frontend-design स्किल से यह पेज डिज़ाइन और लागू करें।
कारोबारी संदर्भ दें। उत्पाद का प्रकार, लक्षित उपयोगकर्ता, ब्रांड का मिज़ाज, जानकारी की प्राथमिकता, टेक स्टैक, मोबाइल ज़रूरतें और सुलभता की शर्तें बताएँ। सिर्फ़ “अच्छा बना दो” कहने से डिज़ाइन की जगह बहुत खुली रह जाती है।
पहले मौजूदा नियम पढ़ें। चल रहे प्रोजेक्ट में बदलाव से पहले एजेंट से मौजूदा कंपोनेंट, स्टाइल वेरिएबल और डिज़ाइन नियम पढ़वाएँ, ताकि नया पेज सिस्टम से अलग न लगे।
मौजूदा कंपोनेंट दोबारा इस्तेमाल करें। कंपोनेंट लाइब्रेरी हो तो Button और Table जैसे बेस कंपोनेंट रखें; सुधार स्टाइल और कंपोज़िशन की परत पर करें।
बाद में जाँचें। डेस्कटॉप और मोबाइल स्क्रीनशॉट, टेक्स्ट ओवरफ़्लो, इंटरैक्शन स्थितियाँ, थीम रंग का कंट्रास्ट और यह कि मोशन इस्तेमाल में बाधा न बने।
कहाँ फिट बैठती है
पूरा पेज बनाना: प्रोडक्ट साइट और कैंपेन लैंडिंग पेज, जिन्हें शुरू से विज़ुअल दिशा चाहिए।
कंपोनेंट डिज़ाइन और रीफ़ैक्टर: React, Vue, Svelte या HTML/CSS काम, जिसमें एकरूपता और परिपूर्णता बढ़ानी हो।
मौजूदा पेज का विज़ुअल अपग्रेड: आर्किटेक्चर तोड़े बिना नया डिज़ाइन निर्णय जोड़ना।
बिना डिज़ाइन फ़ाइल प्रोटोटाइप: जल्दी से उच्च-निष्ठा वाला चलने योग्य इंटरफ़ेस निकालना।
एडमिन और टूल इंटरफ़ेस: जहाँ सूचना पढ़ने की गति, घनत्व और स्थिति की स्पष्टता ज़्यादा मायने रखती है।
सीमाएँ
यह डिज़ाइन मार्गदर्शन है, UI फ्रेमवर्क या कंपोनेंट लाइब्रेरी का विकल्प नहीं।
यह चित्र नहीं बनाती; इलस्ट्रेशन और फ़ोटो के लिए दूसरा टूल चाहिए।
नतीजा संदर्भ की पूर्णता पर निर्भर है। उत्पाद की जानकारी जितनी कम, आउटपुट उतनी जल्दी सामान्य टेम्पलेट पर लौटता है।
आउटपुट की मानवीय समीक्षा ज़रूरी है, ख़ासकर सुलभता, कंट्रास्ट और असली डिवाइस पर व्यवहार।
सामान्य प्रश्न
सामान्य प्रॉम्प्ट से क्या फ़र्क है? सामान्य प्रॉम्प्ट सौंदर्य को संयोग पर छोड़ता है। यह स्किल उद्देश्य, दर्शक, टोन और सीमाओं को अनिवार्य सवाल बनाती है, साथ में ठोस सूची कि क्या टालना है और उसकी जगह क्या करना है।
क्या यह सशुल्क है? सामग्री इसे Claude Code के साथ मुफ़्त स्किल बताती है; लाइसेंस आधिकारिक रिपॉज़िटरी में देखें।
Vue और Tailwind? हाँ। यह फ्रेमवर्क-स्वतंत्र ऊपरी मार्गदर्शन है।
डिज़ाइनर की जगह? नहीं। यह दोबारा काम घटाती है; ब्रांड निर्णय और डिज़ाइन सिस्टम इंसान के पास रहते हैं।
अक्सर पूछे जाने वाले प्रश्न
सिर्फ़ “अच्छा दिखने वाला पेज बनाओ” कहने से क्या फ़र्क है?
सामान्य प्रॉम्प्ट सौंदर्य का फ़ैसला मॉडल की मर्ज़ी पर छोड़ देता है। यह स्किल उद्देश्य, दर्शक, टोन और सीमाओं को अनिवार्य सवाल बना देती है, और क्या टालना है तथा उसकी जगह क्या करना है, यह ठोस रूप से बताती है।
क्या यह पैसे वाली है?
सामग्री इसे Claude Code के साथ इस्तेमाल होने वाली मुफ़्त स्किल बताती है। लाइसेंस और शर्तें Anthropic के आधिकारिक रिपॉज़िटरी में देखनी चाहिए।
क्या Vue या Tailwind के साथ चलती है?
हाँ। यह किसी फ्रेमवर्क से बंधी नहीं है और ऊपरी परत के डिज़ाइन मार्गदर्शन की तरह काम करती है, इसलिए सादा HTML/CSS, React, Vue, Tailwind और Ant Design सबके साथ चलती है।
क्या यह डिज़ाइनर की जगह लेती है?
नहीं। यह डिज़ाइन निर्णय को कोड से पहले ले आती है जिससे दोबारा काम कम होता है, लेकिन ब्रांड निर्णय और डिज़ाइन सिस्टम इंसान ही तय करते हैं।
