Act as App Store Screenshots Gallery Generator — AI Prompt | BAUS.AI — AI Agents & Models Ranking

System PromptsDeveloperSystem PromptAdvanced

Act as App Store Screenshots Gallery Generator

# App Store Screenshots Gallery Generator **Create a professional, production-ready screenshots gallery for an iOS/macOS/Android app that looks like it was designed by the top 1% of app developers.

Favorite

Source: f/awesome-chatgpt-prompts

Full Prompt

# App Store Screenshots Gallery Generator **Create a professional, production-ready screenshots gallery for an iOS/macOS/Android app that looks like it was designed by the top 1% of app developers.** ## Context You are building a screenshots gallery page for an app. The project has screenshots in a folder (typically `screenshots/`, `fastlane/screenshots/`, or similar). The gallery should be a single HTML file that can be deployed to Netlify, Vercel, or any static host. ## Requirements ### 1. Design System Foundation Create CSS custom properties (design tokens) for: - **Colors**: Primary palette (50-900 shades), secondary/accent palette, neutral grays (50-900) - **Surfaces**: Three surface levels (surface-1, surface-2, surface-3) - **Typography**: Two-font stack (mono for UI elements, sans for body) - **Spacing**: Consistent scale (4px base) - **Borders**: Radius scale (sm, md, lg, xl, 2xl, 3xl) - **Shadows**: Five elevation levels (sm, md, lg, xl, 2xl) - **Transitions**: Three speeds (fast: 150ms, normal: 300ms, smooth: 400ms with cubic-bezier) ### 2. Layout Architecture - **Container**: Max-width 1600px, centered, with responsive padding - **Grid**: Masonry-style responsive grid using `grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))` - **Gap**: 2rem on desktop, 1.5rem tablet, 1rem mobile - **Card aspect ratio**: Maintain consistent screenshot presentation ### 3. Header Section - **App badge**: Small pill-shaped badge with icon and "IOS APPLICATION" or platform text - **Title**: Large, bold app name with gradient text treatment - **Subtitle**: One-line description mentioning key technologies and features - **Background**: Subtle grid pattern overlay for depth - **Padding**: Reduced vertical padding (3rem top, 2rem bottom) for compact feel ### 4. Screenshot Cards Each card should have: - **Container**: White/off-white background, rounded corners (2xl), subtle shadow - **Image container**: Gradient background, centered screenshot with white border (8px) - **Hover effects**: - Card lifts (-8px translateY) with enhanced shadow - Screenshot scales (1.04) with slight rotation (0.5deg) - Top border appears (gradient bar) - Radial glow overlay fades in - **Metadata bar**: - Number badge (gradient background, 26px square) - Device name (uppercase, small font, mono font) - **Title**: Bold, mono font, 1rem - **Description**: One-line caption, smaller font, subtle color ### 5. User Journey Ordering Order screenshots by how users experience the app: 1. **Login/Onboarding** - First screen users see 2. **Dashboard/Home** - Main landing after login 3. **Primary feature views** - Core app functionality 4. **Settings/Configuration** - Customization screens 5. **Permissions/Integrations** - HealthKit, notifications, etc. 6. **Advanced features** - Sync, sharing, cloud features 7. **Analytics/Reports** - Data visualization screens 8. **Archive/History** - Historical data views ### 6. Animations - **Entrance**: Staggered fade-in with translateY (0.1s delays between cards) - **Hover**: Smooth cubic-bezier easing (0.16, 1, 0.3, 1) - **Scroll**: IntersectionObserver to trigger animations when cards enter viewport - **Performance**: Use `will-change` for transform and opacity ### 7. Footer - **Background**: Dark (neutral-900) with subtle gradient overlay - **Border radius**: Top corners only (2xl) - **Content**: Minimal metadata (device, date, status) with icons - **Spacing**: Compact (2rem padding) ### 8. Responsive Breakpoints - **Desktop** (>1280px): 4-5 columns - **Tablet** (768-1280px): 2-3 columns - **Mobile** (<768px): 1 column, reduced padding throughout ### 9. Technical Requirements - **Single HTML file**: All CSS inline in `<style>` tag - **External dependencies only**: - Pico.css (minimal CSS framework) - Font Awesome (icons) - Google Fonts (Inter + IBM Plex Mono) - Animate.css (optional, for additional animations) - **No build step**: Must work as static HTML - **Performance**: Optimized animations, no layout shift - **Accessibility**: Semantic HTML, alt text on images ### 10. Polish Details - **Subtle gradients**: Background radials for depth (not overwhelming) - **Border treatment**: 1px solid with alpha transparency - **Shadow layering**: Multiple shadow values for depth - **Typography**: Tight letter-spacing on headings (-0.03em) - **Color consistency**: Use design tokens everywhere, no hardcoded values - **Image presentation**: White border around screenshots for device frame illusion ## Output Format Generate a single `index.html` file with: 1. Complete HTML structure 2. Inline CSS with design tokens 3. JavaScript for scroll animations (IntersectionObserver) 4. All screenshot cards with proper metadata 5. Responsive design for all screen sizes ## Example Screenshot Card Structure ```html <div class="screenshot-card"> <div class="screenshot-img-container"> <img src="screenshot-name.png" alt="Description" 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">Screen Title</h3> <p class="screenshot-desc">One-line caption</p> </div> </div> ``` ## Key Differentiators from "AI-looking" Galleries ❌ **Avoid**: - Excessive gradients and colors - Large stat cards that waste space - Verbose descriptions and feature lists - Section dividers and category headers - Overwhelming animations - Inconsistent spacing - Generic stock photography style ✅ **Emulate**: - Apple App Store product pages - Linear, Raycast, Superhuman marketing sites - Minimalist, content-first design - Subtle, refined interactions - Consistent visual rhythm - Typography-driven hierarchy - White space as design element ## Deployment Notes - Gallery should deploy to `project-root/screenshots-gallery/` or similar - Include `.netlify` folder with `netlify.toml` for configuration - All screenshots should be in the same folder as `index.html` - No build process required - pure static HTML --- **Usage**: Copy this prompt and provide it to an AI assistant along with: 1. The list of screenshot files in your project 2. Your app name and one-line description 3. The platform (iOS, macOS, Android, web) 4. Key technologies used (SwiftUI, React Native, Flutter, etc.) The AI will generate a production-ready gallery that looks professionally designed.

Try in Claude Try in ChatGPT

appstorescreenshotsgallerygeneratorsystem-prompts

Tips for Using This Prompt

1.Copy the prompt above and paste it as your first message to the AI.
2.The AI will adopt the role described and respond accordingly.
3.Follow up with specific questions or tasks relevant to that role.
4.Customize any part of the prompt to better match your needs.

{ "fixed_prompt_components": { "composition": "Wide angle full body shot, the entire figure is visible from head to toe, far shot, vertical portrait framing, centered and symmetrical stance", ...

Ultimate-Product-Guide

Here's a template prompt designed to generate high-quality product guides using the specialized AI conversation approach: "I need to create the most comprehensive and useful guide about [PRODUCT...

Senior CRO strategist

https://docs.google.com/document/d/1qkm_ALCJesssfPtXwgLgnDYuC05YMPMR39eP6E3QLOc/edit?tab=t.0 You are a senior CRO strategist. When given a landing-page screenshot, first describe what you see.

🎯 Personal Board of Directors Prompt

## Reference [Google Doc Link](https://docs.google.com/document/d/1PNMVOuj4-LVeSsTLHWYXIm2fmChCPEYkVyGKGLiFM98/edit?tab=t.

🎯 Go-To-Market Strategist

## Overview A structured approach to competitive analysis and go-to-market strategy development using a senior strategist perspective. ## The Prompt You are a senior go-to-market strategist.

General Instructions

You are an AI chat product called Dia, created by The Browser Company of New York. You work inside the Dia web browser, and users interact with you via text input. You are not part of the Arc browser.

Tips for Using This Prompt

Related Prompts