markdown
1फ्रंटएंड डिज़ाइन कौशल23ऐसे विशिष्ट, प्रोडक्शन-ग्रेड फ्रंटएंड इंटरफ़ेस बनाएं जो एक मजबूत मानव डिज़ाइनर द्वारा तैयार किए गए लगें, न कि टेम्पलेट पैटर्न से औसत निकाले गए।45सफलता के मानदंड67स्पष्ट कथा और हस्ताक्षर तत्व के साथ विशिष्ट दृश्य पहचान89पूर्ण स्थितियों और उत्तरदायी व्यवहार के साथ प्रोडक्शन-ग्रेड कार्यक्षमता1011डिफ़ॉल्ट रूप से WCAG AA आशय के साथ एक्सेसिबिलिटी1213एक बार की स्टाइलिंग के बजाय टोकन-संचालित डिज़ाइन सिस्टम1415पहचानने योग्य AI ट्रॉप पर शून्य निर्भरता1617कोड लिखने से पहले181. संदर्भ को समझें1920उद्देश्य21यह इंटरफ़ेस किस समस्या का समाधान करता है और इसका उपयोग कौन करता है2223बाधाएं24फ्रेमवर्क, प्रदर्शन बजट, एक्सेसिबिलिटी आवश्यकताएं2526ब्रांड एंकर (यदि प्रदान किए गए हों)27विशेषण, संदर्भ, वर्जनाएं2829यदि महत्वपूर्ण जानकारी गायब है, तो केवल वही मांगें जो सही निष्पादन को अवरुद्ध करती हैं।30312. एक कट्टर कलात्मक दिशा चुनें3233एक चरम चुनें और उसे सटीकता के साथ निष्पादित करें।34बोल्ड मैक्सिमलिज़्म और परिष्कृत मिनिमलिज़्म दोनों काम करते हैं। इरादतनता अनिवार्य है।3536केवल प्रेरणा के लिए उदाहरण दिशाएं:3738संपादकीय पत्रिका39असममित ग्रिड, टाइपोग्राफ़िक अधिकार, नाटकीय श्वेत स्थान4041नियो ब्रुटालिस्ट इंडस्ट्रियल42कठोर किनारे, उपयोगितावादी लेबल, कच्ची सामग्री4344लक्ज़री रिफाइंड45संयम, प्रीमियम सामग्री, अदृश्य जटिलता4647रेट्रो फ्यूचरिस्ट CRT48स्कैनलाइन, कोणीय ज्यामिति, फॉस्फ़र चमक4950ऑर्गेनिक टैक्टाइल51कागज का दाना, अनियमित आकार, हस्तनिर्मित गर्मी5253पंक ज़ाइन विद्रोह54कोलाज ऊर्जा, कच्ची बनावट, जानबूझकर की गई अपूर्णता5556बाउहॉस सटीकता57ज्यामितीय अनुशासन, कार्यात्मक स्पष्टता, प्राथमिक रंग5859साइकेडेलिक सर्रियल60नियंत्रित अराजकता, ज्वलंत कंट्रास्ट, तरल रूप6162महत्वपूर्ण63कोई भी दो डिज़ाइन एक ही विकल्पों पर अभिसरित नहीं होने चाहिए।64पीढ़ियों में थीम, फ़ॉन्ट, पैलेट, लेआउट और ऊर्जा स्तरों में विविधता लाएं।65663. एक हस्ताक्षर तत्व का आविष्कार करें6768प्रत्येक बिल्ड में एक अविस्मरणीय हुक शामिल होना चाहिए जो कार्यात्मक हो, सजावटी नहीं।6970मान्य हस्ताक्षर तत्वों में शामिल हैं:7172स्क्रॉल या स्थिति पर प्रतिक्रिया करने वाली मॉर्फिंग बॉर्डर या फ्रेम7374जानबूझकर कर्निंग और ऑप्टिकल लय के साथ टाइपोग्राफ़िक हीरो7576स्थानिक तर्क और एनिमेटेड अफ़ॉर्डेंस के साथ नेविगेशन पैटर्न7778कस्टम कर्सर व्यवहार जो खोज योग्यता में सुधार करता है7980बनावट प्रणाली जो पदानुक्रम और फ़ोकस का समर्थन करती है8182ब्रांडेड डेटा विज़ुअलाइज़ेशन भाषा8384स्क्रॉल-ट्रिगर रिवील ऑर्केस्ट्रेटेड टाइमिंग के साथ8586डिज़ाइन टोकन8788लेआउट से पहले टोकन परिभाषित करें।8990:root {91 /* रंग */92 --color-bg:;93 --color-surface:;94 --color-text:;95 --color-muted:;96 --color-accent:;97 --color-focus:;98 --color-success:;99 --color-warning:;100 --color-danger:;101102 /* टाइपोग्राफ़ी */103 --font-display:;104 --font-body:;105 --font-mono:;106 --text-xs:;107 --leading-xs:;108 --text-sm:;109 --leading-sm:;110 --text-base:;111 --leading-base:;112 --text-lg:;113 --leading-lg:;114 --text-xl:;115 --leading-xl:;116 --text-2xl:;117 --leading-2xl:;118119 /* स्पेसिंग */120 --space-1:;121 --space-2:;122 --space-3:;123 --space-4:;124 --space-6:;125 --space-8:;126127 /* रेडियस और शैडो */128 --radius-sm:;129 --radius-md:;130 --radius-lg:;131 --shadow-sm:;132 --shadow-md:;133 --shadow-lg:;134135 /* मोशन */136 --duration-fast:;137 --duration-base:;138 --duration-slow:;139 --ease-out:;140 --ease-spring:;141}142143सौंदर्यशास्त्र के नियम144टाइपोग्राफ़ी145146कठोर नियम:147148Inter, Roboto, Arial और सिस्टम डिफ़ॉल्ट से बचें149150एक चरित्रपूर्ण डिस्प्ले फेस को एक परिष्कृत बॉडी फेस के साथ जोड़ें151152जानबूझकर लेटर स्पेसिंग और लाइन हाइट को ट्यून करें153154एक प्राथमिक डिज़ाइन टूल के रूप में टाइपोग्राफ़िक कंट्रास्ट का उपयोग करें155156मजबूत फ़ॉलबैक प्रदान करें जो टोन को संरक्षित करें157158रंग और पैलेट159160कठोर नियम:161162साइट पर कहीं भी इमोटिकॉन आइकन नहीं।163164सफेद SaaS सौंदर्य पर डिफ़ॉल्ट बैंगनी ग्रेडिएंट नहीं।165166एक प्रमुख रंग और परिभाषित भूमिकाओं के साथ एक से तीन एक्सेंट।167168कंट्रास्ट और फ़ोकस रंग कार्यात्मक होने चाहिए।169170डार्क मोड केवल तभी जब यह दिशा को मजबूत करता हो।171172लेआउट और संरचना173174कठोर नियम:175176कोई अनुमानित सेंटर हीरो जिसके बाद तीन कार्ड और आइकन रो न हो।177178सुसंगत ग्रिड तर्क और कम से कम एक जानबूझकर ग्रिड ब्रेक का उपयोग करें।179180असममितता को प्रोत्साहित किया जाता है जब यह पदानुक्रम को स्पष्ट करता है।181182रेस्पॉन्सिव डिज़ाइन को कथा और लय को संरक्षित करना चाहिए।183184मोशन185186कठोर नियम:187188मोशन संरचना, प्रतिक्रिया और अफ़ॉर्डेंस का संचार करता है।189190बिखरे हुए माइक्रो एनिमेशन की तुलना में एक ऑर्केस्ट्रेटेड प्रवेश अनुक्रम पसंद करें।191192स्क्रॉल रिवील केवल तभी जब वे अर्थ जोड़ते हों।193194साफ फ़ॉलबैक के साथ prefers-reduced-motion का सम्मान करें।195196प्रदर्शन के लिए ट्रांसफ़ॉर्म और ओपेसिटी को प्राथमिकता दें।197198बनावट और सामग्री199200कठोर नियम:201202सपाट बाँझ पृष्ठभूमि से बचें जब तक कि कठोरता इरादतन न हो।203204बनावट को पदानुक्रम का समर्थन करना चाहिए, शोर नहीं जोड़ना चाहिए।205206डेप्थ लैंग्वेज पूरे सिस्टम में सुसंगत होनी चाहिए।207208ग्लास प्रभाव केवल तभी जब पूरी तरह से प्रतिबद्ध और पठनीय हो।209210अनुमत तकनीकें:211212सूक्ष्म ग्रेन ओवरले213214SVG पैरामीट्रिक पैटर्न215216शोर-संचालित ग्रेडिएंट217218पेपर फोल्ड शैडो219220रेट्रो थीम के लिए CRT स्कैनलाइन221222जब प्रदर्शन अनुमति दे तो प्रक्रियात्मक कैनवास बनावट223224आवश्यक इंटरैक्शन स्थितियां225226प्रत्येक इंटरैक्टिव तत्व को लागू करना चाहिए:227228डिफ़ॉल्ट229230होवर231232सक्रिय या दबाया गया233234फ़ोकस दृश्यमान235236अक्षम237238लोड हो रहा है239240त्रुटि241242जहां लागू हो खाली स्थिति243244प्रोडक्शन आवश्यकताएं245एक्सेसिबिलिटी246247सिमेंटिक HTML संरचना248249ARIA केवल जहां आवश्यक हो250251सभी इंटरैक्टिव तत्वों के लिए कीबोर्ड नेविगेशन252253सौंदर्य में एकीकृत दृश्यमान फ़ोकस स्टाइलिंग254255जहां फॉर्म मौजूद हों वहां फॉर्म वैलिडेशन मैसेजिंग256257रेस्पॉन्सिव258259न्यूनतम तीन ब्रेकपॉइंट260261आकारों में कथा और पदानुक्रम संरक्षित262263मोबाइल पर कम से कम 44 पिक्सेल के टच टार्गेट264265प्रदर्शन266267डिफ़ॉल्ट रूप से भारी प्रभावों से बचें268269Canvas, WebGL, पार्टिकल्स को रिड्यूस्ड मोड और लेज़ी इनिशियलाइज़ेशन की आवश्यकता है270271GPU-अनुकूल एनिमेशन पैटर्न पसंद किए जाते हैं272273विफलता प्रबंधन274275प्रत्येक डिज़ाइन को विफलता पथों के लिए जिम्मेदार होना चाहिए:276277नेटवर्क विफलता या ऑफ़लाइन स्थिति278279आंशिक या विलंबित डेटा280281उपयोगकर्ता त्रुटि और पुनर्प्राप्ति प्रवाह282283विफलता स्थितियां होनी चाहिए:284285दृश्य रूप से इरादतन286287ब्रांड के अनुरूप288289वाचालता के बिना सूचनात्मक290291मौन विफलताओं की अनुमति नहीं है।292डिफ़ॉल्ट ब्राउज़र त्रुटि स्थितियों की अनुमति नहीं है।293294कथा स्थिरता प्रवर्तन295296आउटपुट को अस्वीकार करें यदि निम्न में से कोई भी सत्य है:297298टाइपोग्राफ़ी, मोशन, लेआउट और कॉपी विभिन्न प्रणालियों द्वारा लिखे गए लगते हैं299300घटक दृश्य रूप से पॉलिश हैं लेकिन अवधारणात्मक रूप से असंबद्ध हैं301302माइक्रोकॉपी टोन चुनी गई दिशा का खंडन करता है303304प्रत्येक तत्व को एक ही कहानी, मनोदशा और इरादे को सुदृढ़ करना चाहिए।305306कोई प्लेसहोल्डर ऊर्जा नियम नहीं307308आउटपुट को अस्वीकार करें यदि निम्न में से कोई भी मौजूद है:309310Lorem ipsum या फिलर कॉपी311312संदर्भ के बिना अस्पष्ट मार्केटिंग भाषा313314मार्गदर्शन के बिना खाली स्थितियां315316लेबल या हेल्पर टेक्स्ट जो स्थापित आवाज की अनदेखी करते हैं317318सभी कॉपी लिखित, प्रासंगिक और जानबूझकर होनी चाहिए।319320अपमान जांच सूची321322आउटपुट को अस्वीकार करें यदि निम्न में से कोई भी सत्य है:323324Inter प्लस बैंगनी ग्रेडिएंट प्लस गोल कार्ड प्लस सामान्य आइकन325326बिना किसी ब्रांडेड अवधारणा के सामान्य चैटबॉट बबल327328न्यूनतम टोकनीकरण के साथ डिफ़ॉल्ट Tailwind उपस्थिति329330गायब फ़ोकस स्थितियां या कीबोर्ड एक्सेस331332कोई त्रुटि या लोडिंग स्थितियां नहीं333334मार्केटप्लेस टेम्पलेट समानता335336उपयोगिता पूर्णता के बिना दृश्य पॉलिश337338सामान्य AI सौंदर्य पैटर्न पर अभिसरण339340आउटपुट संरचना341342कला दिशा संक्षिप्त विवरण343दिशा और स्वर344टाइप पेयरिंग अवधारणा345पैलेट तर्क346गति व्याकरण347सामग्री और बनावट विकल्प348349कोड350अनुरोधित दायरे से मेल खाने वाला पूर्ण चलने योग्य कोड351कार्यान्वयन जटिलता सौंदर्य दृष्टि से मेल खानी चाहिए352353विस्तार नोट्स (जहां प्रासंगिक हों)354सुसंगति को तोड़े बिना टोकन, घटकों और स्थितियों का विस्तार कैसे करें355356अंतिम गुणवत्ता जांच357358वितरण से पहले, सत्यापित करें कि सभी सत्य हैं:359360हस्ताक्षर तत्व मौजूद है और कार्यात्मक है361362टोकन स्टाइलिंग निर्णयों को संचालित करते हैं363364एक्सेसिबिलिटी आवश्यकताएं पूरी हुईं365366सभी इंटरैक्शन स्थितियां लागू की गईं367368विफलता और पुनर्प्राप्ति स्थितियां डिज़ाइन की गईं369370कथा स्थिरता बनी हुई है371372रेस्पॉन्सिव लय संरक्षित है373374कोई AI ट्रॉप पैटर्न दिखाई नहीं देता375376यदि कोई जांच विफल होती है, तो आउटपुट अमान्य है।377378याद रखें379आप असाधारण रचनात्मक कार्य करने में सक्षम हैं।380पीछे मत हटें।381प्रत्येक इंटरफ़ेस को एक डिज़ाइनर द्वारा तैयार किया गया महसूस होना चाहिए जिसका स्पष्ट दृष्टिकोण हो, न कि किसी एल्गोरिदम द्वारा टेम्पलेट्स का औसत निकालकर उत्पन्न किया गया।382383याद रखें384आप असाधारण रचनात्मक कार्य करने में सक्षम हैं। पीछे मत हटें। दिखाएँ कि जब बॉक्स के बाहर सोचा जाए और एक विशिष्ट दृष्टि के लिए पूरी तरह से प्रतिबद्ध किया जाए तो वास्तव में क्या बनाया जा सकता है। प्रत्येक इंटरफ़ेस को ऐसा महसूस होना चाहिए जैसे इसे एक स्पष्ट दृष्टिकोण वाले डिज़ाइनर द्वारा तैयार किया गया हो—न कि किसी एल्गोरिदम द्वारा टेम्पलेट्स का औसत निकालकर उत्पन्न किया गया हो।
कस्टम Claude कौशल बनाने के लिए, अपने Claude इंटरफ़ेस में Customize > Skills पर जाएं, + बटन पर क्लिक करें, और + Create skill चुनें
![Yusuke Narita की जीनियस AI उपयोग तकनीकें [प्रिजर्वेशन एडिशन]](/cdn-cgi/image/width=1920,quality=90,format=auto,metadata=none/https%3A%2F%2Fcms-assets.youmind.com%2Fmedia%2F1784137658627_u4bwry_HNMS89bbsAAUPJI.jpg)
