SEO & Marketing
Advanced
Core Concept
This prompt acts as a App Store Screenshots Gallery Generator to assist you with targeted tasks. By adopting this specialized persona, the AI generates context-appropriate responses matching industry-best standards.
How to Use it
1. Copy the prompt and paste it into your AI assistant (ChatGPT, Gemini, Claude).
2. Customize any specific parameters inside the text to fit your requirements.
Optimization Tips
- Provide Clear Context: Describe your specific scenario, audience, or target objectives to refine the AI's persona behavior.
- Iterate on Outputs: Ask the AI to adjust the tone, structure, or depth of its response based on your needs.
AI Prompt Blueprint
# 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.