App-Store-Screenshots-Galerie-Generator

# App-Store-Screenshots-Galerie-Generator **Erstellen Sie eine professionelle, produktionsreife Screenshots-Galerie für eine iOS/macOS/Android-App, die aussieht, als wäre sie von den besten 1 % der App-Entwickler entworfen worden.** ## Kontext Sie erstellen eine Screenshots-Galerie-Seite für eine App. Das Projekt enthält Screenshots in einem Ordner (typischerweise `screenshots/`, `fastlane/screenshots/` oder ähnlich). Die Galerie soll eine einzelne HTML-Datei sein, die auf Netlify, Vercel oder einem beliebigen statischen Host bereitgestellt werden kann. ## Anforderungen ### 1. Design-System-Grundlage Erstellen Sie CSS-Custom-Properties (Design-Tokens) für: - **Farben**: Primärpalette (50-900-Schattierungen), sekundäre/Akzent-Palette, neutrale Grautöne (50-900) - **Oberflächen**: Drei Oberflächen-Ebenen (surface-1, surface-2, surface-3) - **Typografie**: Zwei-Schriftarten-Stack (Mono für UI-Elemente, Sans für Fließtext) - **Abstände**: Konsistente Skala (4px-Basis) - **Ränder**: Radius-Skala (sm, md, lg, xl, 2xl, 3xl) - **Schatten**: Fünf Elevationsstufen (sm, md, lg, xl, 2xl) - **Übergänge**: Drei Geschwindigkeiten (fast: 150ms, normal: 300ms, smooth: 400ms mit cubic-bezier) ### 2. Layout-Architektur - **Container**: Maximale Breite 1600px, zentriert, mit responsivem Padding - **Grid**: Masonry-artiges responsives Grid mit `grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))` - **Abstand**: 2rem auf Desktop, 1.5rem Tablet, 1rem Mobil - **Karten-Seitenverhältnis**: Konsistente Screenshot-Darstellung beibehalten ### 3. Kopfbereich - **App-Badge**: Kleines pillenförmiges Badge mit Icon und "IOS-APPLIKATION" oder Plattformtext - **Titel**: Großer, fetter App-Name mit Gradient-Textbehandlung - **Untertitel**: Einzeilige Beschreibung mit Nennung der wichtigsten Technologien und Funktionen - **Hintergrund**: Dezentes Rastermuster-Overlay für Tiefe - **Padding**: Reduziertes vertikales Padding (3rem oben, 2rem unten) für ein kompaktes Gefühl ### 4. Screenshot-Karten Jede Karte sollte enthalten: - **Container**: Weißer/off-white Hintergrund, abgerundete Ecken (2xl), dezenter Schatten - **Bildcontainer**: Gradient-Hintergrund, zentrierter Screenshot mit weißem Rand (8px) - **Hover-Effekte**: - Karte hebt sich (-8px translateY) mit verstärktem Schatten - Screenshot skaliert (1.04) mit leichter Rotation (0.5deg) - Oberer Rand erscheint (Gradient-Balken) - Radialer Glow-Overlay blendet ein - **Metadaten-Leiste**: - Nummern-Badge (Gradient-Hintergrund, 26px quadratisch) - Gerätename (GROSSBUCHSTABEN, kleine Schrift, Mono-Schriftart) - **Titel**: Fett, Mono-Schriftart, 1rem - **Beschreibung**: Einzeilige Bildunterschrift, kleinere Schrift, dezente Farbe ### 5. User-Journey-Reihenfolge Screenshots nach der Nutzererfahrung ordnen: 1. **Login/Onboarding** - Erster Bildschirm, den Nutzer sehen 2. **Dashboard/Startseite** - Hauptansicht nach dem Login 3. **Primäre Funktionsansichten** - Kernfunktionalität der App 4. **Einstellungen/Konfiguration** - Anpassungsbildschirme 5. **Berechtigungen/Integrationen** - HealthKit, Benachrichtigungen usw. 6. **Erweiterte Funktionen** - Sync, Teilen, Cloud-Funktionen 7. **Analysen/Berichte** - Datenvisualisierungsbildschirme 8. **Archiv/Verlauf** - Ansichten historischer Daten ### 6. Animationen - **Eingang**: Gestaffeltes Einblenden mit translateY (0.1s Verzögerungen zwischen Karten) - **Hover**: Sanftes cubic-bezier-Easing (0.16, 1, 0.3, 1) - **Scroll**: IntersectionObserver zur Auslösung von Animationen, wenn Karten in den Viewport gelangen - **Leistung**: `will-change` für transform und opacity verwenden ### 7. Fußzeile - **Hintergrund**: Dunkel (neutral-900) mit dezentem Gradient-Overlay - **Randradius**: Nur obere Ecken (2xl) - **Inhalt**: Minimale Metadaten (Gerät, Datum, Status) mit Icons - **Abstände**: Kompakt (2rem Padding) ### 8. Responsive Breakpoints - **Desktop** (>1280px): 4-5 Spalten - **Tablet** (768-1280px): 2-3 Spalten - **Mobil** (<768px): 1 Spalte, reduziertes Padding überall ### 9. Technische Anforderungen - **Einzelne HTML-Datei**: Das gesamte CSS inline im `<style>`-Tag - **Externe Abhängigkeiten nur**: - Pico.css (minimales CSS-Framework) - Font Awesome (Icons) - Google Fonts (Inter + IBM Plex Mono) - Animate.css (optional, für zusätzliche Animationen) - **Kein Build-Schritt**: Muss als statisches HTML funktionieren - **Leistung**: Optimierte Animationen, kein Layout-Shift - **Barrierefreiheit**: Semantisches HTML, Alt-Text auf Bildern ### 10. Feinschliff-Details - **Subtile Gradienten**: Hintergrund-Radiale für Tiefe (nicht überwältigend) - **Randbehandlung**: 1px durchgezogen mit Alpha-Transparenz - **Schatten-Schichtung**: Mehrere Schattenwerte für Tiefe - **Typografie**: Enge Buchstabenabstände bei Überschriften (-0.03em) - **Farbkonsistenz**: Überall Design-Tokens verwenden, keine hartcodierten Werte - **Bilddarstellung**: Weißer Rand um Screenshots für die Illusion eines Geräterahmens ## Ausgabeformat Generieren Sie eine einzelne `index.html`-Datei mit: 1. Vollständiger HTML-Struktur 2. Inline-CSS mit Design-Tokens 3. JavaScript für Scroll-Animationen (IntersectionObserver) 4. Allen Screenshot-Karten mit korrekten Metadaten 5. Responsivem Design für alle Bildschirmgrößen ## Beispiel für eine Screenshot-Kartenstruktur ```html <div class="screenshot-card"> <div class="screenshot-img-container"> <img src="screenshot-name.png" alt="Beschreibung" 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">Bildschirmtitel</h3> <p class="screenshot-desc">Einzeilige Bildunterschrift</p> </div> </div> ``` ## Hauptunterscheidungsmerkmale von "KI-aussehenden" Galerien ❌ **Vermeiden**: - Übermäßige Gradienten und Farben - Große Statistik-Karten, die Platz verschwenden - Ausführliche Beschreibungen und Feature-Listen - Abschnittstrenner und Kategorie-Header - Überwältigende Animationen - Inkonsistente Abstände - Generischen Stockfoto-Stil ✅ **Nachahmen**: - Apple-App-Store-Produktseiten - Linear-, Raycast-, Superhuman-Marketing-Websites - Minimalistisches, inhaltsorientiertes Design - Subtile, raffinierte Interaktionen - Konsistenter visueller Rhythmus - Typografie-getriebene Hierarchie - Weißraum als Gestaltungselement ## Bereitstellungshinweise - Die Galerie sollte unter `project-root/screenshots-gallery/` oder ähnlich bereitgestellt werden - `.netlify`-Ordner mit `netlify.toml` für die Konfiguration einfügen - Alle Screenshots sollten sich im selben Ordner wie `index.html` befinden - Kein Build-Prozess erforderlich - reines statisches HTML --- **Verwendung**: Kopieren Sie diesen Prompt und geben Sie ihn zusammen mit Folgendem an einen KI-Assistenten: 1. Die Liste der Screenshot-Dateien in Ihrem Projekt 2. Ihren App-Namen und eine einzeilige Beschreibung 3. Die Plattform (iOS, macOS, Android, Web) 4. Wichtige verwendete Technologien (SwiftUI, React Native, Flutter usw.) Der KI-Assistent generiert eine produktionsreife Galerie, die professionell gestaltet aussieht.