App Screenshot Mockups (iOS\/Android) - AI Prompt Card | AiPro Institute\u2122<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n color: #1a1a1a;\n background: #ffffff;\n padding: 2rem 1rem;\n }\n\n .container {\n max-width: 900px;\n margin: 0 auto;\n background: white;\n border-radius: 20px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.15);\n }\n\n .header {\n text-align: center;\n padding: 3rem 2rem 2rem;\n }\n\n .header h1 {\n font-size: 2.5rem;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n margin-bottom: 0.5rem;\n }\n\n .header p {\n color: #666;\n font-size: 1.1rem;\n }\n\n .card {\n margin: 2rem;\n border: 1px solid #e5e7eb;\n border-radius: 16px;\n overflow: hidden;\n background: white;\n box-shadow: 0 4px 6px rgba(0,0,0,0.07);\n }\n\n .card-header {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 2rem;\n }\n\n .card-header h2 {\n font-size: 1.8rem;\n margin-bottom: 0.5rem;\n }\n\n .card-header p {\n font-size: 1rem;\n opacity: 0.95;\n line-height: 1.6;\n margin-bottom: 1.5rem;\n }\n\n .meta-badges {\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n margin-bottom: 1.5rem;\n }\n\n .badge {\n display: inline-flex;\n align-items: center;\n padding: 0.4rem 0.9rem;\n border-radius: 20px;\n font-size: 0.85rem;\n font-weight: 600;\n }\n\n .badge-beginner { background: rgba(255,255,255,0.25); color: white; }\n .badge-intermediate { background: rgba(255,255,255,0.25); color: white; }\n .badge-advanced { background: rgba(255,255,255,0.25); color: white; }\n .badge-time { background: rgba(255,255,255,0.25); color: white; }\n .badge-cost { background: rgba(255,255,255,0.25); color: white; }\n .badge-format { background: rgba(255,255,255,0.25); color: white; }\n\n .tool-compatibility {\n background: rgba(255,255,255,0.15);\n backdrop-filter: blur(10px);\n border-radius: 12px;\n padding: 1.25rem;\n margin-top: 1rem;\n }\n\n .tool-compatibility h3 {\n font-size: 1rem;\n margin-bottom: 0.75rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .tool-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n }\n\n .tool-tag {\n background: rgba(255,255,255,0.25);\n padding: 0.4rem 0.8rem;\n border-radius: 16px;\n font-size: 0.8rem;\n font-weight: 500;\n }\n\n .card-body {\n padding: 2rem;\n }\n\n .section {\n margin-bottom: 2.5rem;\n }\n\n .section h3 {\n color: #1a1a1a;\n font-size: 1.3rem;\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .prompt-box {\n background: #f8f9fa;\n border-left: 4px solid #667eea;\n padding: 1.5rem;\n border-radius: 8px;\n font-family: 'Courier New', monospace;\n font-size: 0.95rem;\n line-height: 1.8;\n color: #2d3748;\n position: relative;\n margin-bottom: 1rem;\n }\n\n .copy-button {\n position: absolute;\n top: 1rem;\n right: 1rem;\n background: #667eea;\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 6px;\n cursor: pointer;\n font-size: 0.85rem;\n font-weight: 600;\n transition: all 0.3s;\n }\n\n .copy-button:hover {\n background: #764ba2;\n transform: translateY(-2px);\n }\n\n .placeholder {\n color: #f97316;\n font-weight: 600;\n background: rgba(249, 115, 22, 0.1);\n padding: 0.15rem 0.4rem;\n border-radius: 4px;\n }\n\n .logic-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .logic-item {\n background: #f8f9fa;\n padding: 1.25rem;\n border-radius: 10px;\n border-left: 3px solid #667eea;\n }\n\n .logic-item h4 {\n color: #667eea;\n font-size: 1rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .logic-item p {\n color: #4a5568;\n font-size: 0.9rem;\n line-height: 1.6;\n }\n\n .output-preview {\n background: linear-gradient(135deg, #f6f8fb 0%, #e9ecef 100%);\n padding: 1.5rem;\n border-radius: 12px;\n margin-top: 1rem;\n }\n\n .output-preview h4 {\n color: #1a1a1a;\n margin-bottom: 1rem;\n font-size: 1.1rem;\n }\n\n .preview-specs {\n display: grid;\n gap: 0.75rem;\n }\n\n .spec-item {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n background: white;\n padding: 0.75rem 1rem;\n border-radius: 8px;\n font-size: 0.9rem;\n }\n\n .spec-label {\n font-weight: 600;\n color: #667eea;\n min-width: 140px;\n }\n\n .spec-value {\n color: #4a5568;\n }\n\n .chain-strategy {\n background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);\n padding: 1.5rem;\n border-radius: 12px;\n margin-top: 1rem;\n }\n\n .chain-steps {\n display: grid;\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .chain-step {\n display: flex;\n gap: 1rem;\n align-items: start;\n }\n\n .step-number {\n background: #667eea;\n color: white;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n flex-shrink: 0;\n }\n\n .step-content h5 {\n color: #1a1a1a;\n margin-bottom: 0.25rem;\n font-size: 1rem;\n }\n\n .step-content p {\n color: #4a5568;\n font-size: 0.9rem;\n line-height: 1.6;\n }\n\n .tips-section {\n background: #fffbeb;\n border-left: 4px solid #f59e0b;\n padding: 1.5rem;\n border-radius: 8px;\n }\n\n .tips-section h4 {\n color: #f59e0b;\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .tips-section ul {\n list-style: none;\n padding: 0;\n }\n\n .tips-section li {\n padding: 0.5rem 0;\n padding-left: 1.5rem;\n position: relative;\n color: #78350f;\n line-height: 1.6;\n }\n\n .tips-section li:before {\n content: \"\u2192\";\n position: absolute;\n left: 0;\n color: #f59e0b;\n font-weight: bold;\n }\n\n .footer {\n text-align: center;\n padding: 2rem;\n background: #f8f9fa;\n border-top: 1px solid #e5e7eb;\n color: #666;\n font-size: 0.9rem;\n }\n\n .footer strong {\n color: #667eea;\n }\n\n @media (max-width: 768px) {\n .header h1 {\n font-size: 2rem;\n }\n \n .card {\n margin: 1rem;\n }\n\n .logic-grid {\n grid-template-columns: 1fr;\n }\n\n .meta-badges {\n font-size: 0.8rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>\ud83c\udfa8 AiPro Institute\u2122<\/h1>\n <p>Professional AI Prompt Library<\/p>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-header\">\n <h2>\ud83d\udcf1 App Screenshot Mockups (iOS\/Android)<\/h2>\n <p>Create professional app store screenshots with realistic device frames, compelling UI designs, and marketing overlays that showcase features, drive downloads, and convert browsers into users\u2014optimized for App Store and Google Play Store requirements.<\/p>\n \n <div class=\"meta-badges\">\n <span class=\"badge badge-advanced\">\ud83c\udfaf Advanced<\/span>\n <span class=\"badge badge-time\">\u23f1\ufe0f 7-10 minutes<\/span>\n <span class=\"badge badge-cost\">\ud83d\udcb0 Medium-High Cost<\/span>\n <span class=\"badge badge-format\">\ud83d\udcd0 1242x2688px (iOS)<\/span>\n <\/div>\n\n <div class=\"tool-compatibility\">\n <h3>\ud83d\udee0\ufe0f Tool Compatibility<\/h3>\n <div class=\"tool-tags\">\n <span class=\"tool-tag\">Midjourney<\/span>\n <span class=\"tool-tag\">DALL-E 3<\/span>\n <span class=\"tool-tag\">Figma + AI<\/span>\n <span class=\"tool-tag\">Sketch + AI<\/span>\n <span class=\"tool-tag\">Adobe Firefly<\/span>\n <span class=\"tool-tag\">Placeit Mockups<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-body\">\n <section class=\"section\">\n <h3>\ud83d\udcdd Master Prompt Template<\/h3>\n <div class=\"prompt-box\">\n <button class=\"copy-button\" onclick=\"copyPrompt()\">\ud83d\udccb Copy<\/button>\nCreate a professional app store screenshot mockup for <span class=\"placeholder\">[APP NAME]<\/span>, a <span class=\"placeholder\">[APP CATEGORY: productivity\/social\/fitness\/finance\/gaming\/utility]<\/span> app, showcasing <span class=\"placeholder\">[KEY FEATURE: main dashboard\/chat interface\/workout tracker\/payment screen]<\/span> on a <span class=\"placeholder\">[DEVICE: iPhone 14 Pro \/ Samsung Galaxy S23 \/ iPad Pro]<\/span> with <span class=\"placeholder\">[iOS\/Android]<\/span> design language.\n\n**Platform Specifications:**\n\n**iOS App Store Requirements:**\n- Dimensions: 1242 x 2688 pixels (iPhone 6.5\" display)\n- Alternative: 1284 x 2778 pixels (iPhone 6.7\" ProMax)\n- Device frame: <span class=\"placeholder\">[iPhone 14 Pro \/ iPhone 13 \/ iPhone SE]<\/span> in <span class=\"placeholder\">[Black\/White\/Gold\/Space Gray]<\/span>\n- OS version: iOS <span class=\"placeholder\">[16\/17]<\/span> design aesthetic\n- Status bar: Show time \"9:41\", signal, battery, WiFi icons\n\n**Android Play Store Requirements:**\n- Dimensions: 1080 x 1920 pixels (standard Android)\n- Alternative: 1440 x 2560 pixels (QHD)\n- Device frame: <span class=\"placeholder\">[Samsung Galaxy \/ Google Pixel \/ OnePlus]<\/span>\n- OS version: Android <span class=\"placeholder\">[13\/14]<\/span> Material Design 3\n- Status bar: Show time, signal, battery, notification icons\n\n**App UI Screen Content:**\n\n**Screen Type:** <span class=\"placeholder\">[Home Dashboard \/ Feature Screen \/ Onboarding \/ Profile \/ Settings]<\/span>\n\n**UI Elements to Include:**\n- Navigation: <span class=\"placeholder\">[Top app bar with [App Name] \/ Bottom tab bar with icons]<\/span>\n- Primary content: <span class=\"placeholder\">[DESCRIBE: \"Calendar view with events\" \/ \"Chat messages with bubbles\" \/ \"Data visualization charts\" \/ \"Product gallery grid\"]<\/span>\n- Interactive elements: <span class=\"placeholder\">[Buttons, cards, lists, forms, switches, sliders]<\/span>\n- Typography: <span class=\"placeholder\">[SF Pro (iOS) \/ Roboto (Android)]<\/span> in <span class=\"placeholder\">[sizes: 28pt headline, 17pt body, 13pt caption]<\/span>\n- Color scheme: <span class=\"placeholder\">[PRIMARY: #______ \/ ACCENT: #______ \/ BACKGROUND: #______]<\/span>\n- Icons: <span class=\"placeholder\">[SF Symbols (iOS) \/ Material Icons (Android)]<\/span> style\n\n**Design Fidelity:**\n- Level: <span class=\"placeholder\">[High-fidelity with realistic data \/ Mid-fidelity wireframe with actual UI \/ Photorealistic final design]<\/span>\n- Content: <span class=\"placeholder\">[Use realistic dummy data \/ Show actual feature functionality \/ Display sample user content]<\/span>\n- State: <span class=\"placeholder\">[Default state \/ Active interaction \/ Populated with data \/ Empty state]<\/span>\n\n**Marketing Overlay (Optional):**\n- Text overlay: \"<span class=\"placeholder\">[FEATURE CALLOUT: \"Track Your Progress in Real-Time\" \/ \"Chat with Friends Instantly\"]<\/span>\"\n- Overlay position: <span class=\"placeholder\">[Top third \/ Bottom third \/ Side overlay]<\/span>\n- Overlay style: <span class=\"placeholder\">[Semi-transparent gradient \/ Solid color bar \/ Floating badge]<\/span>\n- Typography: <span class=\"placeholder\">[Bold sans-serif, 64-80pt]<\/span> in <span class=\"placeholder\">[white\/accent color]<\/span>\n- Arrow\/pointer: <span class=\"placeholder\">[Pointing to key feature with annotation]<\/span>\n\n**Device Frame & Context:**\n\n**Frame Style:**\n- Type: <span class=\"placeholder\">[Realistic device with shadow \/ Flat device mockup \/ Minimal bezel \/ No frame (UI only)]<\/span>\n- Perspective: <span class=\"placeholder\">[Straight-on flat \/ Slight 3D tilt \/ Floating with shadow \/ Hand holding device]<\/span>\n- Device color: <span class=\"placeholder\">[Match brand aesthetic or neutral]<\/span>\n\n**Background:**\n- Style: <span class=\"placeholder\">[Solid color \/ Gradient \/ Abstract pattern \/ Blurred environment \/ White\/light gray]<\/span>\n- Color: <span class=\"placeholder\">[Brand color \/ Neutral \/ High contrast to make UI pop]<\/span>\n- Additional elements: <span class=\"placeholder\">[Decorative shapes \/ Brand logo watermark \/ None]<\/span>\n\n**Platform Design Language:**\n\n**iOS Design Principles:**\n- Design system: Human Interface Guidelines\n- Navigation: Large titles, tab bars, navigation bars\n- Cards: Rounded corners (12-16px radius)\n- Shadows: Subtle elevation (2-4px offset)\n- Colors: iOS system colors or custom brand colors\n- Typography: SF Pro (system font)\n- Spacing: 8pt grid system\n- Buttons: Filled, tinted, or text style\n\n**Android Material Design 3:**\n- Design system: Material Design 3\n- Navigation: Top app bars, bottom navigation, FAB\n- Cards: Rounded corners (12-28px radius)\n- Elevation: Material shadows (4-8dp)\n- Colors: Dynamic color \/ M3 color system\n- Typography: Roboto (system font)\n- Spacing: 8dp grid system\n- Buttons: Filled, outlined, or text style\n\n**Screenshot Series Strategy:**\n\n**Screenshot 1 (Hero):** <span class=\"placeholder\">[Main feature that defines the app]<\/span>\n**Screenshot 2:** <span class=\"placeholder\">[Secondary key feature]<\/span>\n**Screenshot 3:** <span class=\"placeholder\">[Social\/sharing capability OR data visualization]<\/span>\n**Screenshot 4:** <span class=\"placeholder\">[Settings\/customization OR onboarding]<\/span>\n**Screenshot 5:** <span class=\"placeholder\">[Testimonial\/social proof OR unique selling point]<\/span>\n\n**Technical Specifications:**\n- Resolution: <span class=\"placeholder\">[2x or 3x retina for crisp display]<\/span>\n- Color mode: RGB (digital display)\n- Format: PNG (lossless, transparency support) or JPG\n- File size: Under 8MB per screenshot (App Store limit)\n- Color profile: sRGB (standard web\/mobile)\n\n**Realistic UI Details:**\n- Time: Show \"9:41 AM\" (Apple convention) or realistic time\n- Battery: Show 80-100% (positive impression)\n- Signal: Full bars (5G\/LTE indicator)\n- Notifications: Optional badge counts on icons\n- Keyboard: If showing input, use system keyboard\n\n**App Store Optimization (ASO):**\n- Feature highlight: Ensure key feature is obvious in <3 seconds\n- Text readability: Marketing text large enough to read in thumbnail (App Store preview)\n- Visual hierarchy: Most important element = largest\/brightest\n- First impression: Screenshot 1 must capture attention instantly\n\nStyle: Professional app store marketing screenshot, platform-accurate UI design, realistic device frame, conversion-optimized presentation\n\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83e\udde0 Why This Works<\/h3>\n <div class=\"logic-grid\">\n <div class=\"logic-item\">\n <h4>\ud83d\udcf1 Platform Native Design<\/h4>\n <p>Matching iOS\/Android design language (SF Pro vs. Roboto, iOS cards vs. Material Design) creates credibility\u2014users subconsciously recognize \"this looks real\" and trust it more than generic UI mockups.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>\ud83c\udfaf Feature-First Showcase<\/h4>\n <p>Each screenshot highlighting ONE key feature (not cluttered feature dump) makes value proposition clear. Users scan screenshots in 2-3 seconds\u2014single-focus images convert better than busy composite screens.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>\ud83d\udcd0 Apple's 9:41 Convention<\/h4>\n <p>Showing 9:41 AM (time of original iPhone announcement) signals professional attention to detail. Small touches like full battery, strong signal create positive subconscious impression of polished app.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>\ud83d\udcac Marketing Overlay Impact<\/h4>\n <p>Text overlay (\"Track Your Progress in Real-Time\") converts 23% better than UI-only screenshots\u2014explicitly states benefit while visual shows how. Combines telling + showing for maximum clarity.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83c\udfaf Expected Output Preview<\/h3>\n <div class=\"output-preview\">\n <h4>Screenshot Mockup Specifications<\/h4>\n <div class=\"preview-specs\">\n <div class=\"spec-item\">\n <span class=\"spec-label\">\ud83d\udcd0 Dimensions:<\/span>\n <span class=\"spec-value\">1242x2688px (iOS) or 1080x1920px (Android) per App Store requirements<\/span>\n <\/div>\n <div class=\"spec-item\">\n <span class=\"spec-label\">\ud83c\udfa8 Design Style:<\/span>\n <span class=\"spec-value\">Platform-accurate UI (iOS Human Interface \/ Android Material Design 3)<\/span>\n <\/div>\n <div class=\"spec-item\">\n <span class=\"spec-label\">\ud83d\udcf1 Device Frame:<\/span>\n <span class=\"spec-value\">Realistic iPhone\/Android device with proper status bar, bezels, and screen proportions<\/span>\n <\/div>\n <div class=\"spec-item\">\n <span class=\"spec-label\">\ud83d\udcac Marketing Layer:<\/span>\n <span class=\"spec-value\">Optional text overlay highlighting key feature with compelling benefit statement<\/span>\n <\/div>\n <div class=\"spec-item\">\n <span class=\"spec-label\">\ud83d\ude80 ASO Optimized:<\/span>\n <span class=\"spec-value\">First screenshot is hero feature, series tells complete app story, thumbnail-readable text<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\u26a1 Advanced Chain Strategy<\/h3>\n <div class=\"chain-strategy\">\n <p><strong>Complete App Store Screenshot Suite:<\/strong><\/p>\n <div class=\"chain-steps\">\n <div class=\"chain-step\">\n <div class=\"step-number\">1<\/div>\n <div class=\"step-content\">\n <h5>UI Screen Design<\/h5>\n <p>Design 5-7 key app screens showing main features (home, core feature, social, settings). Use Figma\/Sketch with platform-accurate components. Populate with realistic data, not Lorem Ipsum.<\/p>\n <\/div>\n <\/div>\n <div class=\"chain-step\">\n <div class=\"step-number\">2<\/div>\n <div class=\"step-content\">\n <h5>Device Frame Mockups<\/h5>\n <p>Place UI screens into device frames (iPhone 14 Pro, Galaxy S23). Use Placeit, Mockuuups, or design tools. Ensure status bar matches platform (9:41 for iOS, realistic time for Android).<\/p>\n <\/div>\n <\/div>\n <div class=\"chain-step\">\n <div class=\"step-number\">3<\/div>\n <div class=\"step-content\">\n <h5>Marketing Overlay Addition<\/h5>\n <p>Add text overlays to 3-5 screenshots highlighting key benefits (\"Stay Organized\", \"Track Progress\", \"Connect with Friends\"). Use brand colors, large typography (64-80pt), semi-transparent backgrounds.<\/p>\n <\/div>\n <\/div>\n <div class=\"chain-step\">\n <div class=\"step-number\">4<\/div>\n <div class=\"step-content\">\n <h5>A\/B Testing & Optimization<\/h5>\n <p>Create 2 screenshot sets with different hero images, text overlays, or feature highlights. Upload to App Store Connect, run A\/B test, measure which set drives more conversions. Iterate based on data.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83d\udca1 Pro Tips & Best Practices<\/h3>\n <div class=\"tips-section\">\n <h4>\u26a1 Insider Secrets<\/h4>\n <ul>\n <li><strong>9:41 AM Convention:<\/strong> Apple always shows 9:41 in keynotes (time of original iPhone reveal)\u2014using this time signals you understand Apple's design culture and attention to detail.<\/li>\n <li><strong>Screenshot Order Matters:<\/strong> First screenshot gets 85% of attention\u2014make it your HERO feature, not login screen or splash page. Screenshot 1 = make or break for downloads.<\/li>\n <li><strong>Localization Strategy:<\/strong> App Store supports 40+ languages\u2014create screenshot variants with localized text overlays for top markets (Spanish, French, German, Chinese, Japanese) to boost international downloads 3x.<\/li>\n <li><strong>Avoid UI-Only Boredom:<\/strong> Pure UI screenshots without marketing text convert 23% lower\u2014users can't tell what app DOES from UI alone. Add benefit-driven text overlays to 60% of screenshots.<\/li>\n <li><strong>Dark Mode Screenshots:<\/strong> 70% of users enable dark mode\u2014include 1-2 dark mode screenshots to show app adapts. Light-only screenshots alienate dark mode users who assume app lacks support.<\/li>\n <li><strong>Hand-Holding Mockups:<\/strong> Screenshots with hands holding device (+35% engagement) vs. floating device\u2014humanizes app, shows real-world use, creates aspirational \"that could be me\" connection.<\/li>\n <li><strong>Size Requirements Strict:<\/strong> iOS rejects screenshots under 1242x2688px or wrong aspect ratio\u2014always double-check Apple's current requirements; they change with new device releases. Save rejection headaches.<\/li>\n <li><strong>Competitor Analysis First:<\/strong> Before designing, screenshot top 10 apps in category\u2014identify visual patterns (what colors? text overlays? device frames?) and differentiate while respecting proven conventions.<\/li>\n <\/ul>\n <\/div>\n <\/section>\n <\/div>\n\n <div class=\"footer\">\n <p><strong>AiPro Institute\u2122<\/strong> | Premium AI Prompt Engineering<\/p>\n <p>Unlock the full potential of AI-powered design | Professional-grade prompts for creators<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n function copyPrompt() {\n const promptText = document.querySelector('.prompt-box').innerText;\n navigator.clipboard.writeText(promptText).then(() => {\n const button = document.querySelector('.copy-button');\n const originalText = button.innerHTML;\n button.innerHTML = '\u2705 Copied!';\n setTimeout(() => {\n button.innerHTML = originalText;\n }, 2000);\n });\n }\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>App Screenshot Mockups (iOS\/Android) – AI Prompt Card | AiPro Institute\u2122 \ud83c\udfa8 AiPro Institute\u2122 Professional AI Prompt Library \ud83d\udcf1 App Screenshot Mockups (iOS\/Android) Create professional app store screenshots with realistic device frames, compelling UI designs, and marketing overlays that showcase features, drive downloads, and convert browsers into users\u2014optimized for App Store and Google Play Store…<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[112,99,130,129,110,96],"tags":[],"class_list":["post-4217","post","type-post","status-publish","format-standard","hentry","category-creative-artistic","category-design-presentation","category-digital-ui-ux-web-design","category-graphic-print-design","category-marketing-visuals","category-visual-creation"],"acf":[],"_links":{"self":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/comments?post=4217"}],"version-history":[{"count":4,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4217\/revisions"}],"predecessor-version":[{"id":4226,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4217\/revisions\/4226"}],"wp:attachment":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/media?parent=4217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/categories?post=4217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/tags?post=4217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n App Screenshot Mockups (iOS\/Android) - AI Prompt Card | AiPro Institute\u2122<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n line-height: 1.6;\n color: #1a1a1a;\n background: #ffffff;\n padding: 2rem 1rem;\n }\n\n .container {\n max-width: 900px;\n margin: 0 auto;\n background: white;\n border-radius: 20px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.15);\n }\n\n .header {\n text-align: center;\n padding: 3rem 2rem 2rem;\n }\n\n .header h1 {\n font-size: 2.5rem;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n margin-bottom: 0.5rem;\n }\n\n .header p {\n color: #666;\n font-size: 1.1rem;\n }\n\n .card {\n margin: 2rem;\n border: 1px solid #e5e7eb;\n border-radius: 16px;\n overflow: hidden;\n background: white;\n box-shadow: 0 4px 6px rgba(0,0,0,0.07);\n }\n\n .card-header {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 2rem;\n }\n\n .card-header h2 {\n font-size: 1.8rem;\n margin-bottom: 0.5rem;\n }\n\n .card-header p {\n font-size: 1rem;\n opacity: 0.95;\n line-height: 1.6;\n margin-bottom: 1.5rem;\n }\n\n .meta-badges {\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n margin-bottom: 1.5rem;\n }\n\n .badge {\n display: inline-flex;\n align-items: center;\n padding: 0.4rem 0.9rem;\n border-radius: 20px;\n font-size: 0.85rem;\n font-weight: 600;\n }\n\n .badge-beginner { background: rgba(255,255,255,0.25); color: white; }\n .badge-intermediate { background: rgba(255,255,255,0.25); color: white; }\n .badge-advanced { background: rgba(255,255,255,0.25); color: white; }\n .badge-time { background: rgba(255,255,255,0.25); color: white; }\n .badge-cost { background: rgba(255,255,255,0.25); color: white; }\n .badge-format { background: rgba(255,255,255,0.25); color: white; }\n\n .tool-compatibility {\n background: rgba(255,255,255,0.15);\n backdrop-filter: blur(10px);\n border-radius: 12px;\n padding: 1.25rem;\n margin-top: 1rem;\n }\n\n .tool-compatibility h3 {\n font-size: 1rem;\n margin-bottom: 0.75rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .tool-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n }\n\n .tool-tag {\n background: rgba(255,255,255,0.25);\n padding: 0.4rem 0.8rem;\n border-radius: 16px;\n font-size: 0.8rem;\n font-weight: 500;\n }\n\n .card-body {\n padding: 2rem;\n }\n\n .section {\n margin-bottom: 2.5rem;\n }\n\n .section h3 {\n color: #1a1a1a;\n font-size: 1.3rem;\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .prompt-box {\n background: #f8f9fa;\n border-left: 4px solid #667eea;\n padding: 1.5rem;\n border-radius: 8px;\n font-family: 'Courier New', monospace;\n font-size: 0.95rem;\n line-height: 1.8;\n color: #2d3748;\n position: relative;\n margin-bottom: 1rem;\n }\n\n .copy-button {\n position: absolute;\n top: 1rem;\n right: 1rem;\n background: #667eea;\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 6px;\n cursor: pointer;\n font-size: 0.85rem;\n font-weight: 600;\n transition: all 0.3s;\n }\n\n .copy-button:hover {\n background: #764ba2;\n transform: translateY(-2px);\n }\n\n .placeholder {\n color: #f97316;\n font-weight: 600;\n background: rgba(249, 115, 22, 0.1);\n padding: 0.15rem 0.4rem;\n border-radius: 4px;\n }\n\n .logic-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .logic-item {\n background: #f8f9fa;\n padding: 1.25rem;\n border-radius: 10px;\n border-left: 3px solid #667eea;\n }\n\n .logic-item h4 {\n color: #667eea;\n font-size: 1rem;\n margin-bottom: 0.5rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .logic-item p {\n color: #4a5568;\n font-size: 0.9rem;\n line-height: 1.6;\n }\n\n .output-preview {\n background: linear-gradient(135deg, #f6f8fb 0%, #e9ecef 100%);\n padding: 1.5rem;\n border-radius: 12px;\n margin-top: 1rem;\n }\n\n .output-preview h4 {\n color: #1a1a1a;\n margin-bottom: 1rem;\n font-size: 1.1rem;\n }\n\n .preview-specs {\n display: grid;\n gap: 0.75rem;\n }\n\n .spec-item {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n background: white;\n padding: 0.75rem 1rem;\n border-radius: 8px;\n font-size: 0.9rem;\n }\n\n .spec-label {\n font-weight: 600;\n color: #667eea;\n min-width: 140px;\n }\n\n .spec-value {\n color: #4a5568;\n }\n\n .chain-strategy {\n background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);\n padding: 1.5rem;\n border-radius: 12px;\n margin-top: 1rem;\n }\n\n .chain-steps {\n display: grid;\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .chain-step {\n display: flex;\n gap: 1rem;\n align-items: start;\n }\n\n .step-number {\n background: #667eea;\n color: white;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n flex-shrink: 0;\n }\n\n .step-content h5 {\n color: #1a1a1a;\n margin-bottom: 0.25rem;\n font-size: 1rem;\n }\n\n .step-content p {\n color: #4a5568;\n font-size: 0.9rem;\n line-height: 1.6;\n }\n\n .tips-section {\n background: #fffbeb;\n border-left: 4px solid #f59e0b;\n padding: 1.5rem;\n border-radius: 8px;\n }\n\n .tips-section h4 {\n color: #f59e0b;\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .tips-section ul {\n list-style: none;\n padding: 0;\n }\n\n .tips-section li {\n padding: 0.5rem 0;\n padding-left: 1.5rem;\n position: relative;\n color: #78350f;\n line-height: 1.6;\n }\n\n .tips-section li:before {\n content: \"\u2192\";\n position: absolute;\n left: 0;\n color: #f59e0b;\n font-weight: bold;\n }\n\n .footer {\n text-align: center;\n padding: 2rem;\n background: #f8f9fa;\n border-top: 1px solid #e5e7eb;\n color: #666;\n font-size: 0.9rem;\n }\n\n .footer strong {\n color: #667eea;\n }\n\n @media (max-width: 768px) {\n .header h1 {\n font-size: 2rem;\n }\n \n .card {\n margin: 1rem;\n }\n\n .logic-grid {\n grid-template-columns: 1fr;\n }\n\n .meta-badges {\n font-size: 0.8rem;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>\ud83c\udfa8 AiPro Institute\u2122<\/h1>\n <p>Professional AI Prompt Library<\/p>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-header\">\n <h2>\ud83d\udcf1 App Screenshot Mockups (iOS\/Android)<\/h2>\n <p>Create professional app store screenshots with realistic device frames, compelling UI designs, and marketing overlays that showcase features, drive downloads, and convert browsers into users\u2014optimized for App Store and Google Play Store requirements.<\/p>\n \n <div class=\"meta-badges\">\n <span class=\"badge badge-advanced\">\ud83c\udfaf Advanced<\/span>\n <span class=\"badge badge-time\">\u23f1\ufe0f 7-10 minutes<\/span>\n <span class=\"badge badge-cost\">\ud83d\udcb0 Medium-High Cost<\/span>\n <span class=\"badge badge-format\">\ud83d\udcd0 1242x2688px (iOS)<\/span>\n <\/div>\n\n <div class=\"tool-compatibility\">\n <h3>\ud83d\udee0\ufe0f Tool Compatibility<\/h3>\n <div class=\"tool-tags\">\n <span class=\"tool-tag\">Midjourney<\/span>\n <span class=\"tool-tag\">DALL-E 3<\/span>\n <span class=\"tool-tag\">Figma + AI<\/span>\n <span class=\"tool-tag\">Sketch + AI<\/span>\n <span class=\"tool-tag\">Adobe Firefly<\/span>\n <span class=\"tool-tag\">Placeit Mockups<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-body\">\n <section class=\"section\">\n <h3>\ud83d\udcdd Master Prompt Template<\/h3>\n <div class=\"prompt-box\">\n <button class=\"copy-button\" onclick=\"copyPrompt()\">\ud83d\udccb Copy<\/button>\nCreate a professional app store screenshot mockup for <span class=\"placeholder\">[APP NAME]<\/span>, a <span class=\"placeholder\">[APP CATEGORY: productivity\/social\/fitness\/finance\/gaming\/utility]<\/span> app, showcasing <span class=\"placeholder\">[KEY FEATURE: main dashboard\/chat interface\/workout tracker\/payment screen]<\/span> on a <span class=\"placeholder\">[DEVICE: iPhone 14 Pro \/ Samsung Galaxy S23 \/ iPad Pro]<\/span> with <span class=\"placeholder\">[iOS\/Android]<\/span> design language.\n\n**Platform Specifications:**\n\n**iOS App Store Requirements:**\n- Dimensions: 1242 x 2688 pixels (iPhone 6.5\" display)\n- Alternative: 1284 x 2778 pixels (iPhone 6.7\" ProMax)\n- Device frame: <span class=\"placeholder\">[iPhone 14 Pro \/ iPhone 13 \/ iPhone SE]<\/span> in <span class=\"placeholder\">[Black\/White\/Gold\/Space Gray]<\/span>\n- OS version: iOS <span class=\"placeholder\">[16\/17]<\/span> design aesthetic\n- Status bar: Show time \"9:41\", signal, battery, WiFi icons\n\n**Android Play Store Requirements:**\n- Dimensions: 1080 x 1920 pixels (standard Android)\n- Alternative: 1440 x 2560 pixels (QHD)\n- Device frame: <span class=\"placeholder\">[Samsung Galaxy \/ Google Pixel \/ OnePlus]<\/span>\n- OS version: Android <span class=\"placeholder\">[13\/14]<\/span> Material Design 3\n- Status bar: Show time, signal, battery, notification icons\n\n**App UI Screen Content:**\n\n**Screen Type:** <span class=\"placeholder\">[Home Dashboard \/ Feature Screen \/ Onboarding \/ Profile \/ Settings]<\/span>\n\n**UI Elements to Include:**\n- Navigation: <span class=\"placeholder\">[Top app bar with [App Name] \/ Bottom tab bar with icons]<\/span>\n- Primary content: <span class=\"placeholder\">[DESCRIBE: \"Calendar view with events\" \/ \"Chat messages with bubbles\" \/ \"Data visualization charts\" \/ \"Product gallery grid\"]<\/span>\n- Interactive elements: <span class=\"placeholder\">[Buttons, cards, lists, forms, switches, sliders]<\/span>\n- Typography: <span class=\"placeholder\">[SF Pro (iOS) \/ Roboto (Android)]<\/span> in <span class=\"placeholder\">[sizes: 28pt headline, 17pt body, 13pt caption]<\/span>\n- Color scheme: <span class=\"placeholder\">[PRIMARY: #______ \/ ACCENT: #______ \/ BACKGROUND: #______]<\/span>\n- Icons: <span class=\"placeholder\">[SF Symbols (iOS) \/ Material Icons (Android)]<\/span> style\n\n**Design Fidelity:**\n- Level: <span class=\"placeholder\">[High-fidelity with realistic data \/ Mid-fidelity wireframe with actual UI \/ Photorealistic final design]<\/span>\n- Content: <span class=\"placeholder\">[Use realistic dummy data \/ Show actual feature functionality \/ Display sample user content]<\/span>\n- State: <span class=\"placeholder\">[Default state \/ Active interaction \/ Populated with data \/ Empty state]<\/span>\n\n**Marketing Overlay (Optional):**\n- Text overlay: \"<span class=\"placeholder\">[FEATURE CALLOUT: \"Track Your Progress in Real-Time\" \/ \"Chat with Friends Instantly\"]<\/span>\"\n- Overlay position: <span class=\"placeholder\">[Top third \/ Bottom third \/ Side overlay]<\/span>\n- Overlay style: <span class=\"placeholder\">[Semi-transparent gradient \/ Solid color bar \/ Floating badge]<\/span>\n- Typography: <span class=\"placeholder\">[Bold sans-serif, 64-80pt]<\/span> in <span class=\"placeholder\">[white\/accent color]<\/span>\n- Arrow\/pointer: <span class=\"placeholder\">[Pointing to key feature with annotation]<\/span>\n\n**Device Frame & Context:**\n\n**Frame Style:**\n- Type: <span class=\"placeholder\">[Realistic device with shadow \/ Flat device mockup \/ Minimal bezel \/ No frame (UI only)]<\/span>\n- Perspective: <span class=\"placeholder\">[Straight-on flat \/ Slight 3D tilt \/ Floating with shadow \/ Hand holding device]<\/span>\n- Device color: <span class=\"placeholder\">[Match brand aesthetic or neutral]<\/span>\n\n**Background:**\n- Style: <span class=\"placeholder\">[Solid color \/ Gradient \/ Abstract pattern \/ Blurred environment \/ White\/light gray]<\/span>\n- Color: <span class=\"placeholder\">[Brand color \/ Neutral \/ High contrast to make UI pop]<\/span>\n- Additional elements: <span class=\"placeholder\">[Decorative shapes \/ Brand logo watermark \/ None]<\/span>\n\n**Platform Design Language:**\n\n**iOS Design Principles:**\n- Design system: Human Interface Guidelines\n- Navigation: Large titles, tab bars, navigation bars\n- Cards: Rounded corners (12-16px radius)\n- Shadows: Subtle elevation (2-4px offset)\n- Colors: iOS system colors or custom brand colors\n- Typography: SF Pro (system font)\n- Spacing: 8pt grid system\n- Buttons: Filled, tinted, or text style\n\n**Android Material Design 3:**\n- Design system: Material Design 3\n- Navigation: Top app bars, bottom navigation, FAB\n- Cards: Rounded corners (12-28px radius)\n- Elevation: Material shadows (4-8dp)\n- Colors: Dynamic color \/ M3 color system\n- Typography: Roboto (system font)\n- Spacing: 8dp grid system\n- Buttons: Filled, outlined, or text style\n\n**Screenshot Series Strategy:**\n\n**Screenshot 1 (Hero):** <span class=\"placeholder\">[Main feature that defines the app]<\/span>\n**Screenshot 2:** <span class=\"placeholder\">[Secondary key feature]<\/span>\n**Screenshot 3:** <span class=\"placeholder\">[Social\/sharing capability OR data visualization]<\/span>\n**Screenshot 4:** <span class=\"placeholder\">[Settings\/customization OR onboarding]<\/span>\n**Screenshot 5:** <span class=\"placeholder\">[Testimonial\/social proof OR unique selling point]<\/span>\n\n**Technical Specifications:**\n- Resolution: <span class=\"placeholder\">[2x or 3x retina for crisp display]<\/span>\n- Color mode: RGB (digital display)\n- Format: PNG (lossless, transparency support) or JPG\n- File size: Under 8MB per screenshot (App Store limit)\n- Color profile: sRGB (standard web\/mobile)\n\n**Realistic UI Details:**\n- Time: Show \"9:41 AM\" (Apple convention) or realistic time\n- Battery: Show 80-100% (positive impression)\n- Signal: Full bars (5G\/LTE indicator)\n- Notifications: Optional badge counts on icons\n- Keyboard: If showing input, use system keyboard\n\n**App Store Optimization (ASO):**\n- Feature highlight: Ensure key feature is obvious in <3 seconds\n- Text readability: Marketing text large enough to read in thumbnail (App Store preview)\n- Visual hierarchy: Most important element = largest\/brightest\n- First impression: Screenshot 1 must capture attention instantly\n\nStyle: Professional app store marketing screenshot, platform-accurate UI design, realistic device frame, conversion-optimized presentation\n\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83e\udde0 Why This Works<\/h3>\n <div class=\"logic-grid\">\n <div class=\"logic-item\">\n <h4>\ud83d\udcf1 Platform Native Design<\/h4>\n <p>Matching iOS\/Android design language (SF Pro vs. Roboto, iOS cards vs. Material Design) creates credibility\u2014users subconsciously recognize \"this looks real\" and trust it more than generic UI mockups.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>\ud83c\udfaf Feature-First Showcase<\/h4>\n <p>Each screenshot highlighting ONE key feature (not cluttered feature dump) makes value proposition clear. Users scan screenshots in 2-3 seconds\u2014single-focus images convert better than busy composite screens.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>\ud83d\udcd0 Apple's 9:41 Convention<\/h4>\n <p>Showing 9:41 AM (time of original iPhone announcement) signals professional attention to detail. Small touches like full battery, strong signal create positive subconscious impression of polished app.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>\ud83d\udcac Marketing Overlay Impact<\/h4>\n <p>Text overlay (\"Track Your Progress in Real-Time\") converts 23% better than UI-only screenshots\u2014explicitly states benefit while visual shows how. Combines telling + showing for maximum clarity.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83c\udfaf Expected Output Preview<\/h3>\n <div class=\"output-preview\">\n <h4>Screenshot Mockup Specifications<\/h4>\n <div class=\"preview-specs\">\n <div class=\"spec-item\">\n <span class=\"spec-label\">\ud83d\udcd0 Dimensions:<\/span>\n <span class=\"spec-value\">1242x2688px (iOS) or 1080x1920px (Android) per App Store requirements<\/span>\n <\/div>\n <div class=\"spec-item\">\n <span class=\"spec-label\">\ud83c\udfa8 Design Style:<\/span>\n <span class=\"spec-value\">Platform-accurate UI (iOS Human Interface \/ Android Material Design 3)<\/span>\n <\/div>\n <div class=\"spec-item\">\n <span class=\"spec-label\">\ud83d\udcf1 Device Frame:<\/span>\n <span class=\"spec-value\">Realistic iPhone\/Android device with proper status bar, bezels, and screen proportions<\/span>\n <\/div>\n <div class=\"spec-item\">\n <span class=\"spec-label\">\ud83d\udcac Marketing Layer:<\/span>\n <span class=\"spec-value\">Optional text overlay highlighting key feature with compelling benefit statement<\/span>\n <\/div>\n <div class=\"spec-item\">\n <span class=\"spec-label\">\ud83d\ude80 ASO Optimized:<\/span>\n <span class=\"spec-value\">First screenshot is hero feature, series tells complete app story, thumbnail-readable text<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\u26a1 Advanced Chain Strategy<\/h3>\n <div class=\"chain-strategy\">\n <p><strong>Complete App Store Screenshot Suite:<\/strong><\/p>\n <div class=\"chain-steps\">\n <div class=\"chain-step\">\n <div class=\"step-number\">1<\/div>\n <div class=\"step-content\">\n <h5>UI Screen Design<\/h5>\n <p>Design 5-7 key app screens showing main features (home, core feature, social, settings). Use Figma\/Sketch with platform-accurate components. Populate with realistic data, not Lorem Ipsum.<\/p>\n <\/div>\n <\/div>\n <div class=\"chain-step\">\n <div class=\"step-number\">2<\/div>\n <div class=\"step-content\">\n <h5>Device Frame Mockups<\/h5>\n <p>Place UI screens into device frames (iPhone 14 Pro, Galaxy S23). Use Placeit, Mockuuups, or design tools. Ensure status bar matches platform (9:41 for iOS, realistic time for Android).<\/p>\n <\/div>\n <\/div>\n <div class=\"chain-step\">\n <div class=\"step-number\">3<\/div>\n <div class=\"step-content\">\n <h5>Marketing Overlay Addition<\/h5>\n <p>Add text overlays to 3-5 screenshots highlighting key benefits (\"Stay Organized\", \"Track Progress\", \"Connect with Friends\"). Use brand colors, large typography (64-80pt), semi-transparent backgrounds.<\/p>\n <\/div>\n <\/div>\n <div class=\"chain-step\">\n <div class=\"step-number\">4<\/div>\n <div class=\"step-content\">\n <h5>A\/B Testing & Optimization<\/h5>\n <p>Create 2 screenshot sets with different hero images, text overlays, or feature highlights. Upload to App Store Connect, run A\/B test, measure which set drives more conversions. Iterate based on data.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83d\udca1 Pro Tips & Best Practices<\/h3>\n <div class=\"tips-section\">\n <h4>\u26a1 Insider Secrets<\/h4>\n <ul>\n <li><strong>9:41 AM Convention:<\/strong> Apple always shows 9:41 in keynotes (time of original iPhone reveal)\u2014using this time signals you understand Apple's design culture and attention to detail.<\/li>\n <li><strong>Screenshot Order Matters:<\/strong> First screenshot gets 85% of attention\u2014make it your HERO feature, not login screen or splash page. Screenshot 1 = make or break for downloads.<\/li>\n <li><strong>Localization Strategy:<\/strong> App Store supports 40+ languages\u2014create screenshot variants with localized text overlays for top markets (Spanish, French, German, Chinese, Japanese) to boost international downloads 3x.<\/li>\n <li><strong>Avoid UI-Only Boredom:<\/strong> Pure UI screenshots without marketing text convert 23% lower\u2014users can't tell what app DOES from UI alone. Add benefit-driven text overlays to 60% of screenshots.<\/li>\n <li><strong>Dark Mode Screenshots:<\/strong> 70% of users enable dark mode\u2014include 1-2 dark mode screenshots to show app adapts. Light-only screenshots alienate dark mode users who assume app lacks support.<\/li>\n <li><strong>Hand-Holding Mockups:<\/strong> Screenshots with hands holding device (+35% engagement) vs. floating device\u2014humanizes app, shows real-world use, creates aspirational \"that could be me\" connection.<\/li>\n <li><strong>Size Requirements Strict:<\/strong> iOS rejects screenshots under 1242x2688px or wrong aspect ratio\u2014always double-check Apple's current requirements; they change with new device releases. Save rejection headaches.<\/li>\n <li><strong>Competitor Analysis First:<\/strong> Before designing, screenshot top 10 apps in category\u2014identify visual patterns (what colors? text overlays? device frames?) and differentiate while respecting proven conventions.<\/li>\n <\/ul>\n <\/div>\n <\/section>\n <\/div>\n\n <div class=\"footer\">\n <p><strong>AiPro Institute\u2122<\/strong> | Premium AI Prompt Engineering<\/p>\n <p>Unlock the full potential of AI-powered design | Professional-grade prompts for creators<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n function copyPrompt() {\n const promptText = document.querySelector('.prompt-box').innerText;\n navigator.clipboard.writeText(promptText).then(() => {\n const button = document.querySelector('.copy-button');\n const originalText = button.innerHTML;\n button.innerHTML = '\u2705 Copied!';\n setTimeout(() => {\n button.innerHTML = originalText;\n }, 2000);\n });\n }\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>App Screenshot Mockups (iOS\/Android) – AI Prompt Card | AiPro Institute\u2122 \ud83c\udfa8 AiPro Institute\u2122 Professional AI Prompt Library \ud83d\udcf1 App Screenshot Mockups (iOS\/Android) Create professional app store screenshots with realistic device frames, compelling UI designs, and marketing overlays that showcase features, drive downloads, and convert browsers into users\u2014optimized for App Store and Google Play Store…<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[112,99,130,129,110,96],"tags":[],"class_list":["post-4217","post","type-post","status-publish","format-standard","hentry","category-creative-artistic","category-design-presentation","category-digital-ui-ux-web-design","category-graphic-print-design","category-marketing-visuals","category-visual-creation"],"acf":[],"_links":{"self":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/comments?post=4217"}],"version-history":[{"count":4,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4217\/revisions"}],"predecessor-version":[{"id":4226,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4217\/revisions\/4226"}],"wp:attachment":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/media?parent=4217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/categories?post=4217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/tags?post=4217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}