AI Slides को Interactive Deep-Dive Decks में बदलें: 6-Structure Framework

1【इंटरैक्टिव डेक प्रॉम्प्ट v2.1】
2लंबाई की सीमा के कारण पूरा टेक्स्ट यहाँ नहीं दिया गया है; कृपया note से कॉपी-पेस्ट करें।
3
4## अतिरिक्त: इसे इंटरैक्टिव बनाएं
5ऊपर दिए गए डेक क्रिएशन प्रॉम्प्ट के साथ इस ब्लॉक को जोड़कर इस्तेमाल करें। इस ब्लॉक के नीचे अपनी सामग्री पेस्ट करें (पिछले प्रॉम्प्ट की "Paste materials below this" वाली लाइन को ज्यों का त्यों रहने दें)।
6
7### प्राथमिकता (Priority)
8- कंटेंट (नंबर हैंडलिंग, हेडलाइन्स, लॉजिक, टेम्पलेट्स, ड्रॉइंग स्टैंडर्ड्स, वेरिफिकेशन) ऊपर दिए गए डेक क्रिएशन प्रॉम्प्ट के अनुसार होगा।
9- आउटपुट फॉर्मेट में इस ब्लॉक को प्राथमिकता दें: सिंगल-फाइल इंटरैक्टिव HTML, 3 पेज (अगर सामग्री ज़्यादा है तो 4), हेडलाइन अधिकतम 36 कैरेक्टर प्रति लाइन (कोई वर्ड रैपिंग नहीं)। अलग से डिज़ाइन डॉक आउटपुट न करें; इसे पेज लिस्ट और नंबर लेजर से बदल दें (पिछले प्रॉम्प्ट की ज़रूरी डिज़ाइन आइटम्स को इन दोनों में शामिल करें)।
10- शुरू करने से पहले सिर्फ एक बार सवाल पूछें, और वह भी तभी जब सामग्री/बैकग्राउंड से उद्देश्य या ऑडियंस स्पष्ट न हो। अन्यथा, अपनी समझ से काम लें, मान्यताओं को नोट करें और एक ही बार में पूरा लिख दें।
11
12### पेज टेम्पलेट (विज़ुअल्स को नीचे दिए गए सैंपल से मिलाएं)
13- पेज 2-3: बाईं ओर मुख्य चार्ट (60% चौड़ाई), दाईं ओर एविडेंस पैनल (हल्के बैकग्राउंड वाला बॉक्स)। पैनल का स्ट्रक्चर: एक बड़ा नंबर (88-96px) → यह क्या है (1 लाइन) → संदर्भ (2-3 लाइनें) → तुलना का लक्ष्य और अंतर (फॉर्मूले के साथ) → "View Breakdown ›"
14- पेज 1: ऊपर की पंक्ति में 3 बड़े नंबर, नीचे समग्र प्रवाह/स्ट्रक्चर (कहाँ क्या हो रहा है)। प्रवाह के भीतर विशिष्ट पेजों से लिंक करने वाले कार्ड ("p.2 ›") रखें।
15- चार्ट और नंबर पूरे फ्रेम को भरें। कंटेंट के नीचे कोई खाली पट्टी (band) न हो।
16- सामग्री के सभी नंबर्स का इस्तेमाल करें (चार्ट, पैनल, कॉलआउट, एविडेंस)। अंतर/अनुपात की गणना करें और फॉर्मूले दिखाएं। सामग्री में मौजूद नंबर्स के अलावा कोई नंबर खुद से न गढ़ें।
17- मुख्य विषय के लिए प्राइमरी कलर, तुलना के लिए हल्के ग्रेडिएंट शेड्स, और बाकी के लिए ग्रे इस्तेमाल करें। हर पेज पर सिर्फ एक बड़ा नंबर।
18- क्लिक करने योग्य एलिमेंट्स को स्पष्ट बनाएं: "›", "Click to...", होवर बॉर्डर्स, और पेज पर आते ही एक बार रिंग हाइलाइट का उपयोग करें। बार/डॉट्स पर होवर करने से "Value, Name, Source" वाला टूलटिप दिखना चाहिए।
19
20### प्रति पेज एक इंटरैक्शन (स्ट्रक्चर से लिया गया)
21हर पेज पर ठीक एक ऐसा ऑपरेशन जोड़ें जिससे पाठक हेडलाइन के निष्कर्ष को वेरिफाई कर सके। हेडलाइन के स्ट्रक्चरल प्रकार के आधार पर ऑपरेशन चुनें।
22- पिरामिड (निष्कर्ष/एविडेंस) → ड्रिल डाउन करने के लिए क्लिक करें। दाईं ओर एविडेंस पैनल (सोर्स के साथ; लगभग सभी पेजों पर शामिल करें)।
23- वर्गीकरण (सेगमेंटेशन) → सभी बार को फिर से ऑर्डर करने के लिए मापदंड (एग्रीगेशन व्यू, मेट्रिक, वर्ष) बदलें।
24- तुलना (अंतर) → पिछली स्थिति वर्तमान में बदल जाती है, और अंतर/फर्क को डॉटेड लाइन के रूप में छोड़ देती है।
25- कारण और प्रभाव (कॉज़/इफ़ेक्ट) → स्लाइडर शर्त को बदलता है, परिणाम की दोबारा गणना करता है। स्क्रीन पर फॉर्मूला दिखाएं।
26- समस्या समाधान (गैप/सॉल्यूशन) → गैप को भरने या खाली छोड़ने के लिए सॉल्यूशन्स को ऑन/ऑफ टॉगल करें।
27- अनुक्रम (फ्लो/प्रोसेस/टाइम) → एक के बाद एक जुड़ें, एक्टर प्रक्रिया से गुज़रे, टाइमलाइन पर "Now" मार्कर।
28हेडलाइन से असंबंधित एनिमेशन न जोड़ें। मात्रात्मक एनिमेशन की गणना वैल्यूज़ से होनी चाहिए।
29
30### एविडेंस पैनल (क्लिक करने पर दाईं ओर से स्लाइड इन होता है)
31- चौड़ाई 720px। दाईं ओर से स्लाइड इन होता है, बैकग्राउंड धुंधला हो जाता है। X, Esc, या बैकग्राउंड पर क्लिक करके बंद करें।
32- ऊपर से नीचे का स्ट्रक्चर: लोकेशन संदर्भ ("Current Status > Item Name") → निष्कर्ष (1-2 लाइनें) → टैब्स (अधिकतम 2, जैसे Breakdown / Sources & Assumptions) → छोटा चार्ट/टेबल → सोर्स।
33- ऐसे विस्तृत नंबर्स यहाँ रखें जो मुख्य पेज पर फिट नहीं होते। लगभग सभी पेजों पर शामिल करें।
34
35### समग्र डेक
36- पेज 1 के ओवरव्यू से विशिष्ट पेजों तक ज़ूम-इन नेविगेशन सक्षम करें। सॉल्यूशन्स से एविडेंस पेजों पर जाने की अनुमति दें।
37- कीज़: अगले के लिए → और Space, पिछले के लिए ←, जंप के लिए Numbers, बंद/वापस जाने के लिए Esc, सभी पेजों के ओवरव्यू के लिए O, ऑटो-डेमो के लिए D (एरो कर्सर स्क्रिप्ट का अनुसरण करता है, ओवरव्यू के साथ समाप्त होता है। data-demo नामों से इंटरैक्टिव एलिमेंट्स को टैग करें)।
38- पेज ~3 सेकंड में तैयार होते हैं: हेडलाइन → मुख्य चार्ट (बार 0 से बढ़ते हैं, 60ms के अंतराल से) → नंबर्स → एविडेंस पैनल। CSS transitions/delays का उपयोग करें; अगर JS का उपयोग कर रहे हैं, तो requestAnimationFrame को 50ms टाइमर के साथ जोड़ें।
39- अंतिम असेंबल की गई स्थिति दिखाने के लिए #static URL पैरामीटर और "Reduce Motion" सेटिंग को सपोर्ट करें (इंटरैक्टिव पेजों के लिए, वह स्थिति दिखाएं जहाँ हेडलाइन का निष्कर्ष दिखता हो, जैसे सभी सॉल्यूशन्स ON)। इसे स्टैटिक डेक के रूप में भी पढ़ा जा सकना चाहिए।
40- स्क्रीन पर फिट करने के लिए 1920x1080 कैनवास को स्केल करें। बाहरी लोड्स सिर्फ Google Fonts Noto Sans JP तक सीमित रखें।
41
42### न्यूनतम मानक (केवल तभी जब ऊपर दिया गया डेक क्रिएशन प्रॉम्प्ट न हो)
431. सामग्री से नंबर लेजर बनाएं (Item, Value, Date, Source, Population)। गायब नंबर्स को नोट के साथ "xx" के रूप में चिह्नित करें। बिना वैल्यू वाली आइटम्स को आखिरी रैंक दें।
442. प्रति पेज एक संदेश। हेडलाइन्स तथ्य और निष्कर्ष को जोड़ने वाले पूर्ण वाक्य हों, अधिकतम 36 कैरेक्टर/लाइन। "A. B" दो-हिस्सों वाले स्ट्रक्चर, "There are 3..." जैसी गिनती, या संज्ञा पर खत्म होने वाले अधूरे वाक्यों से बचें।
453. पहले सभी हेडलाइन्स लिखें, चार्ट बनाने से पहले वर्टिकल फ्लो (Overview→Evidence→Solution) की जांच करें।
464. हेडलाइन के स्ट्रक्चरल उद्देश्य के आधार पर चार्ट का प्रकार चुनें (ऊपर "One Interaction" देखें)।
475. चार्ट के शीर्षक: "क्या, कब, यूनिट"। शीर्षकों में कोई निष्कर्ष न दें। पेज फुटर और एविडेंस पैनल दोनों में सोर्स शामिल करें।
486. रंग: 1 प्राइमरी, 3 हल्के ग्रेडिएंट, ग्रे। डिफ़ॉल्ट प्राइमरी #1976D2। एक्सेंट (Amber #D97706) का उपयोग पूरे डेक में केवल एक बार करें। न्यूनतम फ़ॉन्ट साइज़ 18px।
497. सहसंबंध (correlation) से कारण (causality) का दावा न करें। अनुमानों को "Estimate" लेबल करें और स्क्रीन पर फॉर्मूला व मान्यताएं दिखाएं।
50
51### आउटपुट
52- HTML: Claude में Artifact के रूप में, ChatGPT में Canvas के रूप में (या अगर दोनों न हों तो सिंगल कोड ब्लॉक में)। एक ही बार में पूरा लिखें। पेज सीमित करें और कोड छोटा करने के लिए कंपोनेंट्स को फंक्शन्स में समेटें। अगर बीच में कट जाए, तो यूज़र के "continue" कहने पर उसी डॉक्यूमेंट को जारी रखें (मैनुअल पेस्टिंग के लिए न पूछें)।
53- पहली लाइन में तरीका बताएं: "Content = Deck Prompt / Interactivity = Interactive Block" या "Interactive Block alone (content simplified rules applied)"।
54- पेज लिस्ट (Headline/Structure/Operation/Evidence Panel content), नंबर लेजर, और निर्देश HTML के बाहर (रिस्पॉन्स बॉडी में) संक्षेप में दें। HTML के अंदर नहीं।
55- कुल HTML साइज़ का लक्ष्य ~40KB रखें। ज़रूरत पड़ने पर टेक्स्ट कम करें (चार्ट, एविडेंस पैनल, ऑपरेशन बिल्कुल न हटाएं)।
56- अंत में और बेहतर बनाने के लिए 2-3 सुझाव दें और यूज़र से चुनने को कहें।
57
58### अंतिम जांच
59आउटपुट देने से पहले, समीक्षा करें और ठीक करें: हर पेज पर "हेडलाइन को वेरिफाई करने वाला ऑपरेशन" और "सोर्स वाला एविडेंस पैनल" हो / कोई गढ़ा हुआ नंबर न हो / कोई खाली पट्टी, ओवरलैप, ओवरफ्लो, या <18px टेक्स्ट न हो / सभी पेजों पर हेडलाइन का अंत एक समान हो (सब "...should" पर खत्म न हों) / ऑटो-डेमो स्क्रिप्ट ऐसे एलिमेंट्स को रेफर न करे जो मौजूद ही नहीं हैं।
60
61(यहाँ एक सैंपल पेज का कोड दिया गया है। सैंपल शामिल करने से क्वालिटी में काफी सुधार होता है। कोड सहित पूरा वर्ज़न note पर उपलब्ध है।)