AI की मदद से 7 मिनट में 80 के दशक की रेट्रो लैंडिंग पेज बनाएं
नियॉन पैलेट, पिक्सेल फ़ॉन्ट और CRT प्रभाव के साथ तैयार HTML/CSS पेज - सीधे ब्राउज़र में, बिना कुछ इंस्टॉल किए
- 1.Claude.ai खोलें, अकाउंट में लॉगिन करें (email से मुफ़्त रजिस्ट्रेशन)। अगर यह सर्विस आपके क्षेत्र में उपलब्ध नहीं है, तो कोई भी वैकल्पिक चैटबॉट इस्तेमाल करें जो कोड जनरेट कर सके - ChatGPT या Gemini भी चलेगा।
Claude का मुफ़्त प्लान बेसिक मॉडल तक पहुंच देता है; HTML/CSS जनरेट करने के लिए यह काफ़ी है।
Claude ↗टूल के बारे में - 2.नया चैट बनाएं और नीचे दिया गया प्रॉम्प्ट पेस्ट करें। [TEMA] को अपने पेज के विषय से बदलें (जैसे «फ़ोटोग्राफ़र का पोर्टफ़ोलियो», «कॉफ़ी शॉप का लैंडिंग पेज», «पॉडकास्ट का ऐलान»), और [ZAGOLOVOK] को पेज के मुख्य शीर्षक से बदलें।
विषय और कंटेंट का विवरण जितना विशिष्ट होगा, उतना कम मैन्युअल रूप से एडिट करना पड़ेगा।
Claude ↗टूल के बारे मेंप्रॉम्प्ट1980 के दशक के आर्केड स्टाइल में एक सिंगल-पेज रेट्रो वेबसाइट बनाएं। विषय: [TEMA]। मुख्य शीर्षक: [ZAGOLOVOK]। शामिल करें: नियॉन शीर्षक वाला हीरो सेक्शन, अबाउट सेक्शन, और संपर्क जानकारी वाला फ़ुटर। स्टाइल आवश्यकताएं: बैकग्राउंड #0A0A0F, नियॉन ऑरेंज एक्सेंट #FE9901, एसिड टर्कॉइज़ एक्सेंट #00F0FF, वॉर्म व्हाइट टेक्स्ट। शीर्षकों के लिए Google Fonts से 'Press Start 2P', बॉडी टेक्स्ट के लिए monospace इस्तेमाल करें। CSS से CRT स्कैनलाइन प्रभाव जोड़ें, इंसेट शैडो वाले पिक्सेलेटेड बटन स्टाइल, और सेक्शन के चारों ओर ASCII-स्टाइल बॉर्डर। इनलाइन CSS के साथ एक सिंगल सेल्फ-कंटेन्ड HTML फ़ाइल के रूप में आउटपुट दें। Google Fonts का लिंक शामिल करें। पेज पूरी तरह रिस्पॉन्सिव होना चाहिए।
यह प्रॉम्प्ट क्या करता हैप्रॉम्प्ट अंग्रेज़ी में है - इससे Claude स्टाइल आवश्यकताएं ज़्यादा सटीक रूप से समझता है। [TEMA] को पेज के विषय से बदलें (जैसे «रेट्रो गेम्स के बारे में पर्सनल ब्लॉग»), [ZAGOLOVOK] - अपने मुख्य शीर्षक से। बाकी पैरामीटर (पैलेट, फ़ॉन्ट, प्रभाव) को न छेड़ें। - 3.कोड जनरेट होने का इंतज़ार करें (आमतौर पर 30 - 60 सेकंड)। पूरा HTML ब्लॉक कॉपी करें - कोड ब्लॉक के ऊपरी दाएं कोने में Copy बटन दबाएं।
अगर कोड कई ब्लॉकों में बंटा है, तो उन्हें एक-एक करके एक ही फ़ाइल में कॉपी करें।
Claude ↗टूल के बारे में - 4.कोई भी टेक्स्ट एडिटर खोलें (Windows पर नोटपैड, Mac पर TextEdit को «Plain Text» मोड में)। कोड पेस्ट करें। फ़ाइल को retro.html के रूप में सेव करें - .html एक्सटेंशन ज़रूरी है, .txt नहीं।
नोटपैड में सेव करते समय «फ़ाइल प्रकार» में «सभी फ़ाइलें» चुनें, वरना .txt के रूप में सेव हो जाएगा।
- 5.सेव की गई फ़ाइल retro.html पर डबल-क्लिक करें - यह ब्राउज़र में खुलेगी। आपको नियॉन एक्सेंट, CRT प्रभाव और पिक्सेल फ़ॉन्ट वाला रेट्रो पेज दिखेगा।
फ़ाइल ऑफ़लाइन काम करती है, सिवाय Press Start 2P फ़ॉन्ट के - यह Google Fonts से लोड होता है (पहली बार खोलने पर इंटरनेट चाहिए)।
- 6.अगर कुछ ठीक करना है - Claude के चैट में वापस जाएं और लिखें: «बैकग्राउंड को डार्क पर्पल में बदलें और हीरो सेक्शन में पिक्सेल-आर्ट स्टार एनिमेशन जोड़ें»। Claude अपडेटेड कोड देगा। retro.html का कंटेंट बदलकर फिर से सेव करें।
एक बार में एक ही बदलाव करें - इससे परिणाम ज़्यादा पूर्वानुमेय होता है।
Claude ↗टूल के बारे में
💰 इसे अपनाने में कितना खर्च आएगाकीमतें 2026-11 के अनुसार
- मुफ़्तClaude Freeमुफ़्त प्लान रोज़ सीमित संदेश देता है - HTML/CSS जनरेट करने और 1 - 2 बार एडिट करने के लिए यह काफ़ी है।
आज़माएँ और सबसे पहले निशान लगाएँ
आज ही क्यों
1
48 घंटे में क्रिएटर्स के वीडियो
9.5 हज़ार
कुल व्यूज़
cossa.ruweb
सप्ताह का नुस्खा ईमेल पर
AI सेवाएँ तेज़ी से बदलती हैं - इंटरफ़ेस और मुफ़्त सीमाएँ बताए गए से अलग हो सकती हैं।