Hilft beim Erstellen einer einzelnen statischen HTML-Datei fuer eine Screenshot-Galerie von iOS, macOS oder Android Apps. Der Prompt legt Designsystem, Layout, Karten, Animationen, responsives Verhalten und technische Anforderungen fest.
Diese Uebersetzung dient nur dem Verstaendnis. Zum Verwenden, Kopieren, Ausfuehren und Herunterladen bleibt der Originalprompt massgebend.
Erstelle eine professionelle, produktionsbereite Screenshot-Galerie fuer eine iOS, macOS oder Android App, die so wirkt, als waere sie von den besten 1 Prozent der App-Entwickler gestaltet worden. Die Ausgabe soll eine einzelne HTML-Datei sein und keinen Build-Schritt benoetigen. Kontext: Du erstellst eine Galerie-Seite fuer App-Screenshots. Die Screenshots liegen in einem Ordner wie screenshots, fastlane/screenshots oder einem aehnlichen Verzeichnis. Die Galerie soll als einzelne HTML-Datei auf Netlify, Vercel oder einem anderen statischen Host bereitgestellt werden koennen. Anforderungen: Lege ein Designsystem mit CSS Custom Properties fuer Farben, Oberflaechen, Typografie, Abstaende, Radien, Schatten und Uebergangszeiten an. Erstelle ein zentriertes Layout mit maximal 1600 Pixel Breite, responsivem Padding, einem Masonry-aehnlichen Grid und konsistenter Darstellung der Screenshots. Baue einen kompakten Header mit App-Badge, grossem App-Namen, kurzer Unterzeile und subtilem Hintergrundmuster. Jede Screenshot-Karte soll einen hellen Container mit abgerundeten Ecken, Schatten, einem Bildbereich mit Verlauf, weissem Rahmen um den Screenshot, Hover-Effekten, Metadatenleiste, Titel und einzeiliger Beschreibung haben. Die Screenshots sollen nach dem typischen Nutzerverlauf geordnet werden, beginnend mit Login oder Onboarding, danach Dashboard, Kernfunktionen, Einstellungen, Berechtigungen, erweiterte Funktionen, Analysen und Verlauf. Nutze gestaffelte Fade-in-Animationen, weiche Hover-Uebergaenge, IntersectionObserver fuer Scroll-Animationen und will-change fuer Transform und Opazitaet. Der Footer soll dunkel sein, oben abgerundete Ecken haben und kompakte Metadaten wie Geraet, Datum und Status mit Icons enthalten. Das Layout soll fuer Desktop, Tablet und Mobile passende Spaltenzahlen und reduzierte Abstaende verwenden. Technisch soll alles in einer einzigen index.html Datei enthalten sein, mit Inline-CSS im style-Tag, optionalen externen Abhaengigkeiten wie Pico.css, Font Awesome, Google Fonts und Animate.css, ohne Build-Schritt, mit semantischem HTML und Alt-Texten fuer Bilder. Achte auf dezente Verlaeufe, transparente Rahmen, geschichtete Schatten, enge Buchstabenabstaende bei Ueberschriften, konsequente Nutzung von Design-Tokens und einen weissen Rahmen um Screenshots fuer eine Geraeterahmen-Anmutung. Vermeide uebertriebene Verlaeufe, grosse Statistik-Karten, lange Beschreibungen, Bereichstrenner, ueberladene Animationen, uneinheitliche Abstaende und generische Stockfoto-Optik. Orientiere dich an App-Store-Produktseiten sowie an minimalistischen, inhaltsorientierten Marketing-Seiten mit subtilen Interaktionen, klarer Typografie und bewusst eingesetztem Weissraum. Die Ausgabe soll eine vollstaendige index.html mit HTML-Struktur, Inline-CSS, JavaScript fuer Scroll-Animationen, allen Screenshot-Karten samt Metadaten und responsivem Design enthalten. Fuer die Nutzung soll der Anwender den Prompt zusammen mit der Liste der Screenshot-Dateien, dem App-Namen, einer einzeiligen App-Beschreibung, der Plattform und den verwendeten Technologien an einen KI-Assistenten geben.
# 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.