ChatGPT, Claude, Gemini का इस्तेमाल करके Bento Grid एनीमेशन वेबपेज बनाने के लिए प्रॉम्प्ट टेम्पलेट और आम गलतियों से बचाव

Apple की ऑफिशियल साइट जैसा “स्क्रोल करते ही चलने वाला” वेबपेज बनाना है, लेकिन फ्रंटएंड शून्य से नहीं सीखना? मैं ज्यादा सलाह दूँगा कि “तीन चैट मॉडल्स से कोड + Midjourney से इमेज” वाला कॉम्बो इस्तेमाल करो—एफिशिएंसी गज़ब की होती है।

एक ही वर्कफ़्लो में पेज, स्ट्रक्चर, एनीमेशन, और एसेट्स तैयार

ChatGPT कंकाल (बेस स्ट्रक्चर) बनाता है

यह HTML5 + Tailwind सबसे तेज़ लिखता है, Bento Grid, काला बैकग्राउंड + हाईलाइट रंग #2657FD, बहुत बड़े नंबर वाले टाइटल जैसी “हार्ड रिक्वायरमेंट्स” एक बार में बिछाने के लिए बढ़िया है।

सीधे कॉपी किए जा सकने वाले प्रॉम्प्ट: एक ही HTML फ़ाइल आउटपुट करें, TailwindCSS CDN और आवश्यक JS का उपयोग करें, Bento Grid लेआउट, काला बैकग्राउंड, #2657FD हाईलाइट, चीनी भाषा में बड़ा शीर्षक और अंग्रेज़ी में छोटे शब्दों से सजावट, डेटा की छोटी ग्राफ़िक प्लेसहोल्डर सहित, सामग्री के मुख्य बिंदु न छोड़ें।

Claude एनीमेशन को स्मूद बनाता है

Framer Motion को CDN से लिखना आसान है, पर अक्सर “चल तो जाता है लेकिन बहुत झटकेदार” हो जाता है; Claude स्क्रोल-ट्रिगर, एंट्रेंस एनिमेशन, और टाइमिंग कर्व/ईज़िंग को ज्यादा देखने लायक स्मूद कर देता है (और यह बॉर्डर केस भी भरने में ज्यादा मदद करता है)।

Gemini कमियाँ पकड़कर पूरा करता है

ब्राउज़र एरर, स्टाइल का ओवरराइड होना, या कंपोनेंट्स का मिसअलाइन होना—ऐसी स्थितियों में Gemini से “पैराग्राफ-दर-पैराग्राफ समझाओ + समस्या लोकेट करो + रिप्लेसमेंट कोड दो” वाले तरीके से ठीक करवाओ, ताकि तुम्हें कंसोल घूरकर समय न गंवाना पड़े।

Midjourney मुख्य विज़ुअल बनाता है

“रिएक्टर कोर/गैलेक्‍सी विस्फोट/ऊर्जा रिलीज़” जैसे मुख्य विज़ुअल (मटेरियल में बताए गए बेहद रंगीन ग्लो + डार्क बैकग्राउंड) उसके लिए सबसे उपयुक्त हैं, फिर इमेज को वापस ChatGPT में डालकर रेस्पॉन्सिव अडैप्टेशन करा लो।

मेरी अक्सर की दो छोटी शिकायतें

• मॉडल्स द्वारा दिए गए CDN लिंक कभी-कभी एक्सपायर हो जाते हैं; अगर रन नहीं होता तो ज़िंदगी पर शक मत करो, बस ऑफिशियल का लेटेस्ट लिंक लगा दो।
• एनीमेशन बहुत ज्यादा मत ठूंसो; Bento Grid जितना संयमित होगा उतना ही प्रीमियम लगेगा, वरना PPT वाली सालाना मीटिंग जैसा फील आ जाएगा।

अगर तुम अभी भी “कौन सा मॉडल चुनें/प्रॉम्प्ट कैसे सेट करें/एक बार में अकाउंट और टूल्स कैसे ठीक से सेटअप करें” में अटके हो, तो Titikey पर जाकर देख सकते हो—मैं खुद भी उसे अक्सर इस्तेमाल करता हूँ ताकि बेकार के चक्कर कम लगें।