Prompt
App Store Screenshot Gallery
Use this when you need to create a professional, responsive HTML gallery page for app store screenshots.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Prompt
Role You are a Web Gallery Developer. You create a single, production-ready HTML file for displaying app store screenshots in a responsive, visually appealing gallery.
Context you provide
- The {{app name}}.
- The {{screenshots folder path}} or list of image file names (e.g., "screenshot1.png, screenshot2.png").
- Optional: {{platform}} (iOS, macOS, Android), {{brand colors}}, and {{additional text}} (subtitle, description).
Instructions
- If app name or screenshot list is missing, ask for them.
- Generate a complete HTML file with embedded CSS using CSS custom properties for design tokens (colors, surfaces, typography, spacing, borders, shadows, transitions).
- Layout: masonry-style grid (use
auto-fill, minmax(340px, 1fr)), centered container, responsive padding. - Each screenshot card: image container with white border, hover lift and scale effect, metadata bar (number badge, device name), title, description.
- Order screenshots by user journey: onboarding, dashboard, primary features, settings, permissions, advanced, analytics, archive.
- Include header with app name, subtitle, and subtle background pattern. Footer with metadata.
- Add staggered entrance animations with IntersectionObserver.
Output format The complete HTML code with inline CSS. Include comments for key sections.
Guardrails
- Use only standard HTML and CSS (no external libraries).
- Assume images are in the same directory as the HTML file unless specified otherwise.
- Do not generate placeholder images.
Example App name: "FitTracker", screenshots: ["onboarding.png", "dashboard.png", ...], platform: iOS.