ऐप स्टोर स्क्रीनशॉट गैलरी जनरेटर

# ऐप स्टोर स्क्रीनशॉट गैलरी जनरेटर **एक पेशेवर, प्रोडक्शन-रेडी स्क्रीनशॉट गैलरी बनाएं जो iOS/macOS/Android ऐप के लिए हो और ऐसी दिखे जैसे इसे शीर्ष 1% ऐप डेवलपर्स ने डिज़ाइन किया हो।** ## संदर्भ आप एक ऐप के लिए स्क्रीनशॉट गैलरी पेज बना रहे हैं। प्रोजेक्ट में एक फोल्डर में स्क्रीनशॉट हैं (आमतौर पर `screenshots/`, `fastlane/screenshots/`, या समान)। गैलरी एक सिंगल HTML फाइल होनी चाहिए जिसे Netlify, Vercel, या किसी भी स्टैटिक होस्ट पर डिप्लॉय किया जा सके। ## आवश्यकताएं ### 1. डिज़ाइन सिस्टम फाउंडेशन CSS कस्टम प्रॉपर्टीज़ (डिज़ाइन टोकन) बनाएं: - **रंग**: प्राइमरी पैलेट (50-900 शेड्स), सेकेंडरी/एक्सेंट पैलेट, न्यूट्रल ग्रे (50-900) - **सतहें**: तीन सतह स्तर (surface-1, surface-2, surface-3) - **टाइपोग्राफी**: दो-फॉन्ट स्टैक (UI एलिमेंट्स के लिए mono, बॉडी के लिए sans) - **स्पेसिंग**: सुसंगत स्केल (4px बेस) - **बॉर्डर**: रेडियस स्केल (sm, md, lg, xl, 2xl, 3xl) - **शैडो**: पांच एलिवेशन स्तर (sm, md, lg, xl, 2xl) - **ट्रांज़िशन**: तीन गति (fast: 150ms, normal: 300ms, smooth: 400ms cubic-bezier के साथ) ### 2. लेआउट आर्किटेक्चर - **कंटेनर**: मैक्स-चौड़ाई 1600px, सेंटर्ड, रिस्पॉन्सिव पैडिंग के साथ - **ग्रिड**: मेसनरी-स्टाइल रिस्पॉन्सिव ग्रिड `grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))` का उपयोग करके - **गैप**: डेस्कटॉप पर 2rem, टैबलेट पर 1.5rem, मोबाइल पर 1rem - **कार्ड आस्पेक्ट रेशियो**: स्क्रीनशॉट प्रस्तुति में स्थिरता बनाए रखें ### 3. हेडर सेक्शन - **ऐप बैज**: आइकन और "IOS APPLICATION" या प्लेटफ़ॉर्म टेक्स्ट के साथ छोटा पिल-आकार का बैज - **टाइटल**: बड़ा, बोल्ड ऐप नाम ग्रेडिएंट टेक्स्ट इफेक्ट के साथ - **सबटाइटल**: एक-लाइन विवरण जिसमें मुख्य तकनीकों और फीचर्स का उल्लेख हो - **बैकग्राउंड**: गहराई के लिए हल्का ग्रिड पैटर्न ओवरले - **पैडिंग**: कॉम्पैक्ट फील के लिए कम वर्टिकल पैडिंग (ऊपर 3rem, नीचे 2rem) ### 4. स्क्रीनशॉट कार्ड प्रत्येक कार्ड में होना चाहिए: - **कंटेनर**: सफेद/ऑफ-व्हाइट बैकग्राउंड, गोल कोने (2xl), हल्की शैडो - **इमेज कंटेनर**: ग्रेडिएंट बैकग्राउंड, सफेद बॉर्डर (8px) के साथ सेंटर्ड स्क्रीनशॉट - **होवर इफेक्ट**: - कार्ड ऊपर उठता है (-8px translateY) बेहतर शैडो के साथ - स्क्रीनशॉट स्केल (1.04) हल्के रोटेशन (0.5deg) के साथ - टॉप बॉर्डर दिखाई देता है (ग्रेडिएंट बार) - रेडियल ग्लो ओवरले फेड इन होता है - **मेटाडेटा बार**: - नंबर बैज (ग्रेडिएंट बैकग्राउंड, 26px स्क्वायर) - डिवाइस नाम (अपरकेस, छोटा फॉन्ट, mono फॉन्ट) - **टाइटल**: बोल्ड, mono फॉन्ट, 1rem - **विवरण**: एक-लाइन कैप्शन, छोटा फॉन्ट, हल्का रंग ### 5. यूज़र जर्नी ऑर्डरिंग स्क्रीनशॉट को उस क्रम में व्यवस्थित करें जिसमें उपयोगकर्ता ऐप का अनुभव करते हैं: 1. **लॉगिन/ऑनबोर्डिंग** - पहली स्क्रीन जो उपयोगकर्ता देखते हैं 2. **डैशबोर्ड/होम** - लॉगिन के बाद मुख्य लैंडिंग 3. **प्राथमिक फीचर व्यू** - कोर ऐप कार्यक्षमता 4. **सेटिंग्स/कॉन्फ़िगरेशन** - कस्टमाइज़ेशन स्क्रीन 5. **परमिशन/इंटीग्रेशन** - HealthKit, नोटिफिकेशन, आदि 6. **एडवांस्ड फीचर्स** - सिंक, शेयरिंग, क्लाउड फीचर्स 7. **एनालिटिक्स/रिपोर्ट्स** - डेटा विज़ुअलाइज़ेशन स्क्रीन 8. **आर्काइव/हिस्ट्री** - ऐतिहासिक डेटा व्यू ### 6. एनिमेशन - **एंट्रेंस**: स्टैगर्ड फेड-इन translateY के साथ (कार्ड के बीच 0.1s देरी) - **होवर**: स्मूद cubic-bezier ईज़िंग (0.16, 1, 0.3, 1) - **स्क्रॉल**: कार्ड के व्यूपोर्ट में आने पर एनिमेशन ट्रिगर करने के लिए IntersectionObserver - **परफॉर्मेंस**: transform और opacity के लिए `will-change` का उपयोग करें ### 7. फुटर - **बैकग्राउंड**: डार्क (neutral-900) हल्के ग्रेडिएंट ओवरले के साथ - **बॉर्डर रेडियस**: केवल ऊपरी कोने (2xl) - **कंटेंट**: आइकन के साथ न्यूनतम मेटाडेटा (डिवाइस, दिनांक, स्थिति) - **स्पेसिंग**: कॉम्पैक्ट (2rem पैडिंग) ### 8. रिस्पॉन्सिव ब्रेकपॉइंट्स - **डेस्कटॉप** (>1280px): 4-5 कॉलम - **टैबलेट** (768-1280px): 2-3 कॉलम - **मोबाइल** (<768px): 1 कॉलम, हर जगह कम पैडिंग ### 9. तकनीकी आवश्यकताएं - **सिंगल HTML फाइल**: सभी CSS `<style>` टैग में इनलाइन - **केवल बाहरी डिपेंडेंसी**: - Pico.css (न्यूनतम CSS फ्रेमवर्क) - Font Awesome (आइकन) - Google Fonts (Inter + IBM Plex Mono) - Animate.css (वैकल्पिक, अतिरिक्त एनिमेशन के लिए) - **कोई बिल्ड स्टेप नहीं**: स्टैटिक HTML के रूप में काम करना चाहिए - **परफॉर्मेंस**: ऑप्टिमाइज़्ड एनिमेशन, कोई लेआउट शिफ्ट नहीं - **एक्सेसिबिलिटी**: सिमेंटिक HTML, इमेज पर alt टेक्स्ट ### 10. पॉलिश विवरण - **सूक्ष्म ग्रेडिएंट**: गहराई के लिए बैकग्राउंड रेडियल (अत्यधिक नहीं) - **बॉर्डर ट्रीटमेंट**: अल्फा ट्रांसपेरेंसी के साथ 1px सॉलिड - **शैडो लेयरिंग**: गहराई के लिए कई शैडो वैल्यू - **टाइपोग्राफी**: हेडिंग पर टाइट लेटर-स्पेसिंग (-0.03em) - **रंग स्थिरता**: हर जगह डिज़ाइन टोकन का उपयोग करें, कोई हार्डकोडेड वैल्यू नहीं - **इमेज प्रेजेंटेशन**: डिवाइस फ्रेम इल्यूजन के लिए स्क्रीनशॉट के चारों ओर सफेद बॉर्डर ## आउटपुट फॉर्मेट एक सिंगल `index.html` फाइल जनरेट करें जिसमें: 1. पूर्ण HTML संरचना 2. डिज़ाइन टोकन के साथ इनलाइन CSS 3. स्क्रॉल एनिमेशन के लिए JavaScript (IntersectionObserver) 4. उचित मेटाडेटा के साथ सभी स्क्रीनशॉट कार्ड 5. सभी स्क्रीन साइज़ के लिए रिस्पॉन्सिव डिज़ाइन ## उदाहरण स्क्रीनशॉट कार्ड संरचना ```html <div class="screenshot-card"> <div class="screenshot-img-container"> <img src="screenshot-name.png" alt="विवरण" class="screenshot-img"> </div> <div class="screenshot-info"> <div class="screenshot-meta"> <div class="screenshot-number">1</div> <div class="screenshot-device">iPhone 17 Pro Max</div> </div> <h3 class="screenshot-title">स्क्रीन टाइटल</h3> <p class="screenshot-desc">एक-लाइन कैप्शन</p> </div> </div> ``` ## "AI-जैसी" गैलरी से मुख्य अंतर ❌ **इनसे बचें**: - अत्यधिक ग्रेडिएंट और रंग - बड़े स्टैट कार्ड जो जगह बर्बाद करते हैं - लंबे विवरण और फीचर सूचियां - सेक्शन डिवाइडर और कैटेगरी हेडर - भारी एनिमेशन - असंगत स्पेसिंग - जेनेरिक स्टॉक फोटोग्राफी स्टाइल ✅ **इनका अनुसरण करें**: - Apple App Store प्रोडक्ट पेज - Linear, Raycast, Superhuman मार्केटिंग साइट्स - मिनिमलिस्ट, कंटेंट-फर्स्ट डिज़ाइन - सूक्ष्म, परिष्कृत इंटरैक्शन - सुसंगत विज़ुअल रिदम - टाइपोग्राफी-संचालित पदानुक्रम - डिज़ाइन एलिमेंट के रूप में सफेद स्थान ## डिप्लॉयमेंट नोट्स - गैलरी को `project-root/screenshots-gallery/` या समान में डिप्लॉय करें - कॉन्फ़िगरेशन के लिए `netlify.toml` के साथ `.netlify` फोल्डर शामिल करें - सभी स्क्रीनशॉट `index.html` के समान फोल्डर में होने चाहिए - कोई बिल्ड प्रोसेस आवश्यक नहीं - शुद्ध स्टैटिक HTML --- **उपयोग**: इस प्रॉम्प्ट को कॉपी करें और इसे AI असिस्टेंट को प्रदान करें साथ में: 1. आपके प्रोजेक्ट में स्क्रीनशॉट फाइलों की सूची 2. आपका ऐप नाम और एक-लाइन विवरण 3. प्लेटफ़ॉर्म (iOS, macOS, Android, वेब) 4. उपयोग की गई मुख्य तकनीकें (SwiftUI, React Native, Flutter, आदि) AI एक प्रोडक्शन-रेडी गैलरी जनरेट करेगा जो पेशेवर रूप से डिज़ाइन की गई दिखेगी।