फ्रंट-एंड डिज़ाइन सुधार
निर्देश
<फ्रंटएंड_एस्थेटिक्स>
साधारण "एआई स्लोप" सौंदर्यशास्त्र से बचें और एक आश्चर्यजनक रूप से अद्वितीय फ्रंट एंड बनाएं।
## पाँच मुख्य आयाम
**1. टाइपोग्राफी**
- ❌ प्रतिबंधित: इंटर, रोबोटो, एरियल, सिस्टम फ़ॉन्ट
- ✅ चुनें: अद्वितीय, विशिष्ट फ़ॉन्ट
- ✅ संयोजन: शोकेस फ़ॉन्ट + बॉडी फ़ॉन्ट, उच्च कंट्रास्ट
- ✅ सुझाव: फ़ॉन्ट की मोटाई में अत्यधिक अंतर (100 बनाम 900), फ़ॉन्ट के आकार की विस्तृत श्रृंखला (3 गुना से अधिक)
**2. रंग और थीम**
- ✅ सीएसएस वेरिएबल्स का उपयोग करके एक सुसंगत सौंदर्यबोध बनाए रखें।
- ✅ प्रमुख रंग + जीवंत एक्सेंट रंग
- ❌ बचें: बैंगनी ग्रेडिएंट + सफेद पृष्ठभूमि
- ✅ प्रेरणा: IDE थीम, सांस्कृतिक सौंदर्यशास्त्र
**3. प्रस्ताव**
- ✅ सीएसएस एनिमेशन को प्राथमिकता दी जाती है (एचटीएमएल)
- ✅ मोशन लाइब्रेरी
- ✅ उच्च प्रभाव पर ध्यान केंद्रित करें: सावधानीपूर्वक तैयार किया गया पेज लोड > बिखरे हुए सूक्ष्म अंतःक्रियाएं
- ✅ स्क्रॉल ट्रिगर, होवर करने पर आश्चर्यजनक प्रतिक्रिया
**4. स्थानिक लेआउट**
- ✅ असममित, अतिव्यापी, विकर्ण प्रवाह
- ✅ ग्रिड को तोड़ें, खाली जगह का भरपूर उपयोग करें या नियंत्रित घनत्व का प्रयोग करें
**5. पृष्ठभूमि विवरण**
- ✅ वातावरण और गहराई का सृजन करें
- ✅ ग्रेडिएंट मेश, नॉइज़, ज्यामितीय पैटर्न
- ✅ परतदार पारदर्शिता, नाटकीय छायाएँ, सजावटी बॉर्डर
## मुख्य सिद्धांत
- बार-बार एकरूपता से बचने के लिए प्रत्येक डिजाइन अलग होना चाहिए।
जटिलता के अनुरूप सौंदर्यपरक दृष्टिकोण प्राप्त करना
अत्यधिक जटिलता के लिए सावधानीपूर्वक डिजाइन की आवश्यकता होती है, जबकि सरलता के लिए संयम और सटीकता की आवश्यकता होती है।
पारंपरिक सोच से बाहर निकलें और सचमुच अनूठे विकल्प चुनें।
⚡ एक पंक्ति में सारांश
अनोखा फ़ॉन्ट + आकर्षक रंग संयोजन + सटीक एनिमेशन + अभिनव लेआउट + मनमोहक पृष्ठभूमि = अविस्मरणीय फ्रंट-एंड डिज़ाइन
अस्वीकृत: इंटर/रोबोटो, बैंगनी ग्रेडिएंट सफेद पृष्ठभूमि, नीरस लेआउट
📋 त्वरित जाँच सूची
आयाम और निरीक्षण मदें
क्या इंटर/रोबोटो जैसे फॉन्ट का इस्तेमाल नहीं करना चाहिए? क्या कोई अनोखे रंग संयोजन उपलब्ध हैं?
क्या रंग योजना में एकरूपता है? क्या बैंगनी रंग के ग्रेडिएंट से बचना चाहिए?
क्या एनीमेशन में सावधानीपूर्वक नियोजित लोडिंग प्रभाव है?
क्या लेआउट पारंपरिक ग्रिड से भिन्न है?
क्या पृष्ठभूमि से गहराई और वातावरण का निर्माण होता है?
विवरण
द्वारा अनुशंसित
nene@YouMind
हमें यह कौशल क्यों पसंद है
एक जैसे 'AI slop' डिज़ाइन से थक गए? यह कौशल आपको अद्वितीय टाइपोग्राफी, बोल्ड रंग, शानदार एनिमेशन, नवीन लेआउट और गहरी पृष्ठभूमि के साथ सामान्यता से बाहर निकालता है। एक व्यावहारिक सौंदर्य गाइड जो आपके काम को अलग दिखाने और दृश्य सफलता प्राप्त करने में मदद करता है।
अनोखा फ़ॉन्ट व्यक्तित्व गहरा साइबरपंक सौंदर्यशास्त्र असममित गतिशील लेआउट सावधानीपूर्वक व्यवस्थित लोडिंग एनीमेशन इमर्सिव वातावरण निर्माण
संबंधित कौशल
सभी देखें
वेबपेजखोजपूर्ण व्याख्या पेज निर्माता
एक रिपोर्ट समझाती है। एक पेज लोगों को खुद पता लगाने देता है। YouMind पहले से ही वेबपेज बना सकता है। खोजपूर्ण व्याख्या पेज निर्माता तय करता है कि क्या बनाना है — यह एक शोध, डेटासेट या विषय को एक ही इंटरैक्टिव पेज में बदल देता है, जो न्यूज़रूम ग्राफिक्स और खोजपूर्ण व्याख्याओं की परंपरा में होता है: स्क्रॉल-आधारित कथा, वास्तविक चार्ट, नियंत्रण जिन्हें आप हिला सकते हैं, स्रोत जिन्हें आप जाँच सकते हैं। यह कोड करने से पहले योजना बनाता है। आप पहले एक निर्माण योजना को मंजूरी देते हैं: वह एक प्रश्न जिसका उत्तर पेज देता है, रहस्योद्घाटन — वह क्षण जब पाठक को "ओह" महसूस होता है — पाँच से आठ खंडों वाली स्क्रॉल रीढ़, दो से चार इंटरैक्शन जिनमें से प्रत्येक को इस बात से उचित ठहराया जाता है कि पाठक उसे हिलाने से क्या सीखता है, और एक डेटा अनुबंध जिसमें हर संख्या और उसका स्रोत सूचीबद्ध होता है। फिर यह एक स्व-निहित HTML फ़ाइल बनाता है जिसमें कोई निर्माण चरण नहीं होता। सिमेंटिक मार्कअप। सभी संख्याएँ शीर्ष पर एक अकेले संपादन योग्य DATA स्थिरांक में होती हैं। स्क्रॉल रिवील जो फोन पर टूटते नहीं हैं। हर नियंत्रण एक वास्तविक, कीबोर्ड-संचालित फ़ॉर्म तत्व है जिसमें उसके वर्तमान मूल्य का वर्णन करने वाला लाइव टेक्स्ट होता है। अभिगम्यता बाहर से जोड़ने के बजाय अंतर्निर्मित होती है: 4.5:1 कंट्रास्ट, दृश्य फ़ोकस रिंग, हर जगह ऑल्ट टेक्स्ट, रंग अकेले किसी अर्थ को नहीं दर्शाता, कम-गति का सम्मान, और 360px से रेस्पॉन्सिव। सौंपने से पहले, यह एक पाँच-बिंदु आत्म-समीक्षा करता है और परिणाम ईमानदारी से रिपोर्ट करता है: क्या रिवील वास्तव में प्रभाव डालता है, क्या JavaScript बंद होने पर भी पृष्ठ पठनीय है, क्या टैब क्रम सही है, क्या हर संख्या अनुरेखणीय है, क्या कुछ ऐसा एनिमेट हो रहा है जिसे पाठक रोकना चाहेगा। दो नियम जिन्हें यह कभी नहीं तोड़ेगा: यह कभी भी चार्ट को अच्छा दिखाने के लिए डेटा नहीं बनाता, और यह आपको बताता है जब आपके आंकड़े आपके ड्राफ्ट से विरोधाभासी होते हैं। उन शोधकर्ताओं, विश्लेषकों, पत्रकारों, शिक्षकों, स्वतंत्र संस्थापकों और सलाहकारों के लिए जो चाहते हैं कि उनके काम को सरसरी तौर पर नहीं, बल्कि गहराई से खोजा जाए।
वेबपेजसॉफ्ट लाइट डे उकियो वेबपेज
सॉफ्ट लाइट डे स्टाइल के लिए वेब डिज़ाइन सिस्टम: हल्का आसमानी नीला कैनवास (#ebf5ff), फिक्स्ड वेट 500 के साथ विशाल डिस्प्ले टेक्स्ट (रेस्पॉन्सिव रूप से अधिकतम 148px), 32px गोल कॉर्नर कार्ड + 9999px पिल, लगभग काला #181d27 सॉलिड CTA, पेस्टल रंग ब्लॉक और फ्लोटिंग 3D क्ले-टेक्सचर इलस्ट्रेशन। गहराई केवल कैनवास से कार्ड तक रंग-स्तर शिफ्ट द्वारा, कंटेंट कार्ड पर जीरो शैडो। 「सॉफ्ट लाइट डे स्टाइल」「3D इलस्ट्रेशन लैंडिंग पेज」「हल्का नीला कैनवास」「गोल कॉर्नर कार्ड स्टाइल」「SaaS वेबसाइट」「Linear/Framer स्टाइल」 जैसी आवश्यकताओं के लिए उपयुक्त, अंतर्निहित एक्सेसिबिलिटी और रेस्पॉन्सिव कंस्ट्रेंट्स के साथ।
वेबपेजFashion Creative Design वेबपेज
फ़ैशन एडिटोरियल पोस्टर शैली की वेब डिज़ाइन प्रणाली: गर्म क्रीम रंग का पेपर कैनवास (#fffef7), 300 फ़ॉन्ट वज़न वाले बड़े शीर्षक (64–84px), फुल-ब्लीड फ़ोटोग्राफ़ी, शून्य छाया, कार्ड के सीधे कोने + 1440px पिल-आकार के बटन। यह 'फ़ैशन डिज़ाइन शैली', 'मैगज़ीन लेआउट', 'पोस्टर शैली', 'आर्ट पुस्तिका वेबपेज', 'स्टूडियो पोर्टफोलियो', 'गैलरी पेज' आदि आवश्यकताओं के लिए उपयुक्त है, और किसी भी सामग्री को उन्नत फ़ैशन एडिटोरियल शैली में बदल सकता है।
फ्रंट-एंड डिज़ाइन सुधार
निर्देश
<फ्रंटएंड_एस्थेटिक्स>
साधारण "एआई स्लोप" सौंदर्यशास्त्र से बचें और एक आश्चर्यजनक रूप से अद्वितीय फ्रंट एंड बनाएं।
## पाँच मुख्य आयाम
**1. टाइपोग्राफी**
- ❌ प्रतिबंधित: इंटर, रोबोटो, एरियल, सिस्टम फ़ॉन्ट
- ✅ चुनें: अद्वितीय, विशिष्ट फ़ॉन्ट
- ✅ संयोजन: शोकेस फ़ॉन्ट + बॉडी फ़ॉन्ट, उच्च कंट्रास्ट
- ✅ सुझाव: फ़ॉन्ट की मोटाई में अत्यधिक अंतर (100 बनाम 900), फ़ॉन्ट के आकार की विस्तृत श्रृंखला (3 गुना से अधिक)
**2. रंग और थीम**
- ✅ सीएसएस वेरिएबल्स का उपयोग करके एक सुसंगत सौंदर्यबोध बनाए रखें।
- ✅ प्रमुख रंग + जीवंत एक्सेंट रंग
- ❌ बचें: बैंगनी ग्रेडिएंट + सफेद पृष्ठभूमि
- ✅ प्रेरणा: IDE थीम, सांस्कृतिक सौंदर्यशास्त्र
**3. प्रस्ताव**
- ✅ सीएसएस एनिमेशन को प्राथमिकता दी जाती है (एचटीएमएल)
- ✅ मोशन लाइब्रेरी
- ✅ उच्च प्रभाव पर ध्यान केंद्रित करें: सावधानीपूर्वक तैयार किया गया पेज लोड > बिखरे हुए सूक्ष्म अंतःक्रियाएं
- ✅ स्क्रॉल ट्रिगर, होवर करने पर आश्चर्यजनक प्रतिक्रिया
**4. स्थानिक लेआउट**
- ✅ असममित, अतिव्यापी, विकर्ण प्रवाह
- ✅ ग्रिड को तोड़ें, खाली जगह का भरपूर उपयोग करें या नियंत्रित घनत्व का प्रयोग करें
**5. पृष्ठभूमि विवरण**
- ✅ वातावरण और गहराई का सृजन करें
- ✅ ग्रेडिएंट मेश, नॉइज़, ज्यामितीय पैटर्न
- ✅ परतदार पारदर्शिता, नाटकीय छायाएँ, सजावटी बॉर्डर
## मुख्य सिद्धांत
- बार-बार एकरूपता से बचने के लिए प्रत्येक डिजाइन अलग होना चाहिए।
जटिलता के अनुरूप सौंदर्यपरक दृष्टिकोण प्राप्त करना
अत्यधिक जटिलता के लिए सावधानीपूर्वक डिजाइन की आवश्यकता होती है, जबकि सरलता के लिए संयम और सटीकता की आवश्यकता होती है।
पारंपरिक सोच से बाहर निकलें और सचमुच अनूठे विकल्प चुनें।
⚡ एक पंक्ति में सारांश
अनोखा फ़ॉन्ट + आकर्षक रंग संयोजन + सटीक एनिमेशन + अभिनव लेआउट + मनमोहक पृष्ठभूमि = अविस्मरणीय फ्रंट-एंड डिज़ाइन
अस्वीकृत: इंटर/रोबोटो, बैंगनी ग्रेडिएंट सफेद पृष्ठभूमि, नीरस लेआउट
📋 त्वरित जाँच सूची
आयाम और निरीक्षण मदें
क्या इंटर/रोबोटो जैसे फॉन्ट का इस्तेमाल नहीं करना चाहिए? क्या कोई अनोखे रंग संयोजन उपलब्ध हैं?
क्या रंग योजना में एकरूपता है? क्या बैंगनी रंग के ग्रेडिएंट से बचना चाहिए?
क्या एनीमेशन में सावधानीपूर्वक नियोजित लोडिंग प्रभाव है?
क्या लेआउट पारंपरिक ग्रिड से भिन्न है?
क्या पृष्ठभूमि से गहराई और वातावरण का निर्माण होता है?
विवरण
द्वारा अनुशंसित
nene@YouMind
हमें यह कौशल क्यों पसंद है
एक जैसे 'AI slop' डिज़ाइन से थक गए? यह कौशल आपको अद्वितीय टाइपोग्राफी, बोल्ड रंग, शानदार एनिमेशन, नवीन लेआउट और गहरी पृष्ठभूमि के साथ सामान्यता से बाहर निकालता है। एक व्यावहारिक सौंदर्य गाइड जो आपके काम को अलग दिखाने और दृश्य सफलता प्राप्त करने में मदद करता है।
अनोखा फ़ॉन्ट व्यक्तित्व गहरा साइबरपंक सौंदर्यशास्त्र असममित गतिशील लेआउट सावधानीपूर्वक व्यवस्थित लोडिंग एनीमेशन इमर्सिव वातावरण निर्माण
संबंधित कौशल
सभी देखेंवेबपेजखोजपूर्ण व्याख्या पेज निर्माता
एक रिपोर्ट समझाती है। एक पेज लोगों को खुद पता लगाने देता है। YouMind पहले से ही वेबपेज बना सकता है। खोजपूर्ण व्याख्या पेज निर्माता तय करता है कि क्या बनाना है — यह एक शोध, डेटासेट या विषय को एक ही इंटरैक्टिव पेज में बदल देता है, जो न्यूज़रूम ग्राफिक्स और खोजपूर्ण व्याख्याओं की परंपरा में होता है: स्क्रॉल-आधारित कथा, वास्तविक चार्ट, नियंत्रण जिन्हें आप हिला सकते हैं, स्रोत जिन्हें आप जाँच सकते हैं। यह कोड करने से पहले योजना बनाता है। आप पहले एक निर्माण योजना को मंजूरी देते हैं: वह एक प्रश्न जिसका उत्तर पेज देता है, रहस्योद्घाटन — वह क्षण जब पाठक को "ओह" महसूस होता है — पाँच से आठ खंडों वाली स्क्रॉल रीढ़, दो से चार इंटरैक्शन जिनमें से प्रत्येक को इस बात से उचित ठहराया जाता है कि पाठक उसे हिलाने से क्या सीखता है, और एक डेटा अनुबंध जिसमें हर संख्या और उसका स्रोत सूचीबद्ध होता है। फिर यह एक स्व-निहित HTML फ़ाइल बनाता है जिसमें कोई निर्माण चरण नहीं होता। सिमेंटिक मार्कअप। सभी संख्याएँ शीर्ष पर एक अकेले संपादन योग्य DATA स्थिरांक में होती हैं। स्क्रॉल रिवील जो फोन पर टूटते नहीं हैं। हर नियंत्रण एक वास्तविक, कीबोर्ड-संचालित फ़ॉर्म तत्व है जिसमें उसके वर्तमान मूल्य का वर्णन करने वाला लाइव टेक्स्ट होता है। अभिगम्यता बाहर से जोड़ने के बजाय अंतर्निर्मित होती है: 4.5:1 कंट्रास्ट, दृश्य फ़ोकस रिंग, हर जगह ऑल्ट टेक्स्ट, रंग अकेले किसी अर्थ को नहीं दर्शाता, कम-गति का सम्मान, और 360px से रेस्पॉन्सिव। सौंपने से पहले, यह एक पाँच-बिंदु आत्म-समीक्षा करता है और परिणाम ईमानदारी से रिपोर्ट करता है: क्या रिवील वास्तव में प्रभाव डालता है, क्या JavaScript बंद होने पर भी पृष्ठ पठनीय है, क्या टैब क्रम सही है, क्या हर संख्या अनुरेखणीय है, क्या कुछ ऐसा एनिमेट हो रहा है जिसे पाठक रोकना चाहेगा। दो नियम जिन्हें यह कभी नहीं तोड़ेगा: यह कभी भी चार्ट को अच्छा दिखाने के लिए डेटा नहीं बनाता, और यह आपको बताता है जब आपके आंकड़े आपके ड्राफ्ट से विरोधाभासी होते हैं। उन शोधकर्ताओं, विश्लेषकों, पत्रकारों, शिक्षकों, स्वतंत्र संस्थापकों और सलाहकारों के लिए जो चाहते हैं कि उनके काम को सरसरी तौर पर नहीं, बल्कि गहराई से खोजा जाए।
वेबपेजसॉफ्ट लाइट डे उकियो वेबपेज
सॉफ्ट लाइट डे स्टाइल के लिए वेब डिज़ाइन सिस्टम: हल्का आसमानी नीला कैनवास (#ebf5ff), फिक्स्ड वेट 500 के साथ विशाल डिस्प्ले टेक्स्ट (रेस्पॉन्सिव रूप से अधिकतम 148px), 32px गोल कॉर्नर कार्ड + 9999px पिल, लगभग काला #181d27 सॉलिड CTA, पेस्टल रंग ब्लॉक और फ्लोटिंग 3D क्ले-टेक्सचर इलस्ट्रेशन। गहराई केवल कैनवास से कार्ड तक रंग-स्तर शिफ्ट द्वारा, कंटेंट कार्ड पर जीरो शैडो। 「सॉफ्ट लाइट डे स्टाइल」「3D इलस्ट्रेशन लैंडिंग पेज」「हल्का नीला कैनवास」「गोल कॉर्नर कार्ड स्टाइल」「SaaS वेबसाइट」「Linear/Framer स्टाइल」 जैसी आवश्यकताओं के लिए उपयुक्त, अंतर्निहित एक्सेसिबिलिटी और रेस्पॉन्सिव कंस्ट्रेंट्स के साथ।
वेबपेजFashion Creative Design वेबपेज
फ़ैशन एडिटोरियल पोस्टर शैली की वेब डिज़ाइन प्रणाली: गर्म क्रीम रंग का पेपर कैनवास (#fffef7), 300 फ़ॉन्ट वज़न वाले बड़े शीर्षक (64–84px), फुल-ब्लीड फ़ोटोग्राफ़ी, शून्य छाया, कार्ड के सीधे कोने + 1440px पिल-आकार के बटन। यह 'फ़ैशन डिज़ाइन शैली', 'मैगज़ीन लेआउट', 'पोस्टर शैली', 'आर्ट पुस्तिका वेबपेज', 'स्टूडियो पोर्टफोलियो', 'गैलरी पेज' आदि आवश्यकताओं के लिए उपयुक्त है, और किसी भी सामग्री को उन्नत फ़ैशन एडिटोरियल शैली में बदल सकता है।
अपना अगला पसंदीदा कौशल खोजें
शोध, निर्माण और रोज़मर्रा के काम के लिए और अधिक चयनित AI कौशल खोजें।