Générateur de Galerie de Captures d'Écran pour l'App Store

# Générateur de Galerie de Captures d'Écran pour App Store **Créez une galerie de captures d'écran professionnelle et prête pour la production pour une application iOS/macOS/Android qui semble avoir été conçue par le top 1% des développeurs d'applications.** ## Contexte Vous construisez une page de galerie de captures d'écran pour une application. Le projet contient des captures d'écran dans un dossier (typiquement `screenshots/`, `fastlane/screenshots/`, ou similaire). La galerie doit être un fichier HTML unique pouvant être déployé sur Netlify, Vercel, ou tout hébergeur statique. ## Exigences ### 1. Fondation du Système de Design Créez des propriétés personnalisées CSS (tokens de design) pour : - **Couleurs** : Palette principale (nuances 50-900), palette secondaire/accent, gris neutres (50-900) - **Surfaces** : Trois niveaux de surface (surface-1, surface-2, surface-3) - **Typographie** : Double police (mono pour les éléments d'interface, sans pour le corps) - **Espacement** : Échelle cohérente (base 4px) - **Bordures** : Échelle de rayon (sm, md, lg, xl, 2xl, 3xl) - **Ombres** : Cinq niveaux d'élévation (sm, md, lg, xl, 2xl) - **Transitions** : Trois vitesses (rapide : 150ms, normale : 300ms, fluide : 400ms avec cubic-bezier) ### 2. Architecture de Mise en Page - **Conteneur** : Largeur maximale 1600px, centré, avec padding responsive - **Grille** : Grille responsive de type masonry utilisant `grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))` - **Espacement** : 2rem sur desktop, 1.5rem tablette, 1rem mobile - **Ratio d'aspect des cartes** : Présentation cohérente des captures d'écran ### 3. Section En-tête - **Badge d'application** : Petit badge en forme de pilule avec icône et texte "APPLICATION IOS" ou plateforme - **Titre** : Grand nom d'application en gras avec traitement de texte en dégradé - **Sous-titre** : Description sur une ligne mentionnant les technologies et fonctionnalités clés - **Arrière-plan** : Motif de grille subtil en superposition pour la profondeur - **Padding** : Padding vertical réduit (3rem en haut, 2rem en bas) pour un rendu compact ### 4. Cartes de Captures d'Écran Chaque carte doit avoir : - **Conteneur** : Fond blanc/blanc cassé, coins arrondis (2xl), ombre subtile - **Conteneur d'image** : Fond en dégradé, capture d'écran centrée avec bordure blanche (8px) - **Effets de survol** : - La carte s'élève (-8px translateY) avec ombre renforcée - La capture d'écran s'agrandit (1.04) avec légère rotation (0.5deg) - Une bordure supérieure apparaît (barre en dégradé) - Un halo radial en superposition s'estompe - **Barre de métadonnées** : - Badge numéroté (fond en dégradé, carré de 26px) - Nom de l'appareil (majuscules, petite police, police mono) - **Titre** : Gras, police mono, 1rem - **Description** : Légende sur une ligne, police plus petite, couleur subtile ### 5. Ordre du Parcours Utilisateur Ordonnez les captures d'écran selon l'expérience utilisateur de l'application : 1. **Connexion/Intégration** - Premier écran vu par les utilisateurs 2. **Tableau de bord/Accueil** - Page principale après connexion 3. **Vues des fonctionnalités principales** - Fonctionnalité centrale de l'application 4. **Paramètres/Configuration** - Écrans de personnalisation 5. **Autorisations/Intégrations** - HealthKit, notifications, etc. 6. **Fonctionnalités avancées** - Synchronisation, partage, fonctionnalités cloud 7. **Analytiques/Rapports** - Écrans de visualisation de données 8. **Archives/Historique** - Vues des données historiques ### 6. Animations - **Entrée** : Fondu en cascade avec translateY (délais de 0.1s entre les cartes) - **Survol** : Accélération cubic-bezier fluide (0.16, 1, 0.3, 1) - **Défilement** : IntersectionObserver pour déclencher les animations lorsque les cartes entrent dans le viewport - **Performance** : Utiliser `will-change` pour transform et opacity ### 7. Pied de Page - **Arrière-plan** : Sombre (neutral-900) avec superposition en dégradé subtile - **Rayon de bordure** : Coins supérieurs uniquement (2xl) - **Contenu** : Métadonnées minimales (appareil, date, statut) avec icônes - **Espacement** : Compact (padding de 2rem) ### 8. Points de Rupture Responsive - **Desktop** (>1280px) : 4-5 colonnes - **Tablette** (768-1280px) : 2-3 colonnes - **Mobile** (<768px) : 1 colonne, padding réduit partout ### 9. Exigences Techniques - **Fichier HTML unique** : Tout le CSS en ligne dans la balise `<style>` - **Dépendances externes uniquement** : - Pico.css (framework CSS minimal) - Font Awesome (icônes) - Google Fonts (Inter + IBM Plex Mono) - Animate.css (optionnel, pour animations supplémentaires) - **Aucune étape de build** : Doit fonctionner en HTML statique - **Performance** : Animations optimisées, aucun décalage de mise en page - **Accessibilité** : HTML sémantique, texte alternatif sur les images ### 10. Détails de Finition - **Dégradés subtils** : Radiaux d'arrière-plan pour la profondeur (pas envahissants) - **Traitement des bordures** : 1px solide avec transparence alpha - **Superposition d'ombres** : Valeurs d'ombre multiples pour la profondeur - **Typographie** : Espacement de lettres serré sur les titres (-0.03em) - **Cohérence des couleurs** : Utiliser les tokens de design partout, aucune valeur codée en dur - **Présentation des images** : Bordure blanche autour des captures d'écran pour l'illusion du cadre d'appareil ## Format de Sortie Générez un fichier `index.html` unique avec : 1. Structure HTML complète 2. CSS en ligne avec tokens de design 3. JavaScript pour les animations de défilement (IntersectionObserver) 4. Toutes les cartes de captures d'écran avec métadonnées appropriées 5. Design responsive pour toutes les tailles d'écran ## Exemple de Structure de Carte de Capture d'Écran ```html <div class="screenshot-card"> <div class="screenshot-img-container"> <img src="nom-capture.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">Titre de l'Écran</h3> <p class="screenshot-desc">Légende sur une ligne</p> </div> </div> ``` ## Différenciateurs Clés par Rapport aux Galeries "à l'Apparence IA" ❌ **À éviter** : - Dégradés et couleurs excessifs - Grandes cartes de statistiques qui gaspillent de l'espace - Descriptions verbeuses et listes de fonctionnalités - Séparateurs de sections et en-têtes de catégories - Animations envahissantes - Espacement incohérent - Style générique de photographie de stock ✅ **À imiter** : - Pages produit de l'App Store d'Apple - Sites marketing de Linear, Raycast, Superhuman - Design minimaliste, axé sur le contenu - Interactions subtiles et raffinées - Rythme visuel cohérent - Hiérarchie guidée par la typographie - Espace blanc comme élément de design ## Notes de Déploiement - La galerie doit être déployée dans `racine-du-projet/galerie-captures/` ou similaire - Inclure un dossier `.netlify` avec `netlify.toml` pour la configuration - Toutes les captures d'écran doivent être dans le même dossier que `index.html` - Aucun processus de build requis - HTML statique pur --- **Utilisation** : Copiez cette invite et fournissez-la à un assistant IA avec : 1. La liste des fichiers de captures d'écran de votre projet 2. Le nom de votre application et une description sur une ligne 3. La plateforme (iOS, macOS, Android, web) 4. Les technologies clés utilisées (SwiftUI, React Native, Flutter, etc.) L'IA générera une galerie prête pour la production qui semble avoir été conçue professionnellement.