Store Screenshots Panorama — captures App Store en une bande

Captures d'écran App Store — panorama

Crée des jeux de captures d'écran App Store à partir de captures brutes qui se lisent comme une seule surface. La mise en page a été mesurée à partir d'un jeu d'une grande application du Marketplace ; les objets 3D et le héros proviennent du contenu de l'application. Les détails se trouvent dans references/style.md. Lisez ce fichier en entier avant le premier jeu : les décisions que le modèle ne prend pas (couleurs, courbes, quelle partie ressort, quels symboles deviennent 3D, la mise en page Duo) viennent de là.

L'utilisateur veut le résultat, pas le processus. N'écrivez pas de fichiers de plan, de spécification ou de mesure, et ne vous arrêtez pas pour approbation. Prenez les décisions vous-même, produisez les jeux, vérifiez-les, livrez-les. Demandez seulement quand une entrée manque vraiment et qu'il n'y a pas de valeur par défaut raisonnable — par exemple, demandez des originaux plus grands si les captures brutes sont plus étroites que 1206 px.

Règles essentielles

• L'interface utilisateur reste pixel parfait. Les captures brutes et leurs recadrages sont de simples couches d'image. Ne redessinez pas, ne régénérez pas avec de l'IA, ne traduisez pas et ne modifiez aucun texte à l'écran. Les cartes sont uniquement recadrées du fichier brut avec data-crop. Une capture d'écran App Store doit montrer la véritable application ; une UI inventée nuit à la confiance et à la revue App Store.
• Chaque appareil est montré avec ses propres captures brutes. Sur iPhone Duo, la barre d'onglets et la barre d'état sont sur le côté, et les vues fractionnées s'ouvrent sur l'écran intérieur. Mettre une capture d'écran iPhone dans un cadre Duo montre l'application comme quelque chose qu'elle n'est pas ; ne faites pas cela. S'il n'y a pas de captures Duo, créez les jeux iPhone et dites à l'utilisateur ce qu'il faut capturer pour Duo (style.md §10).
• L'atténuation est une couche séparée. La seule chose appliquée à l'écran est la couche .phone.dim ; les pixels ne changent pas.
• La décoration provient du contexte. Les objets 3D répètent le sujet de l'application. N'empruntez pas de badges de campagne, rubans, langage promotionnel, signes plus aléatoires ou cœurs provenant de jeux de shopping ; ils font ressembler chaque application à une publicité.
• La génération IA ou 3D est uniquement pour les objets et le symbole du héros, jamais avec un téléphone ou de l'UI dedans.
• Le matériel non vérifié n'est pas dessiné. Le cadre Duo n'a pas de caméra, charnière ou boutons ; leurs positions ne sont pas vérifiées.
• Aucun logo ou nom d'autres marques.
• Les allégations de supériorité ("le meilleur", "numéro 1") seulement avec une source. Sans source, écrivez un avantage, pas une allégation.
• La barre d'état reste telle quelle dans la capture brute.

Entrées et valeurs par défaut

Entrée	Valeur par défaut
Captures brutes iPhone	raw/ (1206×2622 ou plus grandes), montrées dans les deux thèmes. Ou raw-light/ et raw-dark/ : l'application en mode clair et foncé, mêmes noms de fichier et tailles ; chaque thème montre alors le sien (style.md §9).
Captures brutes Duo	raw-duo-outer/ (écran extérieur) et raw-duo-inner/ (écran intérieur), même ordre et noms de fichier ; par apparence raw-duo-outer-light/, raw-duo-outer-dark/ etc. Sans elles, aucun jeu Duo n'est créé.
Dossier de sortie	out/
Jeux d'appareils	iPhone 6,9" (1320×2868) et 6,3" (1206×2622) : les deux sont nécessaires (style.md §4). Avec captures Duo, Duo extérieur (1398×2034) et intérieur (2007×2853).
Langue	La langue des captures brutes. Les titres sont écrits par langue ; les recadrages sont mesurés à partir des captures de cette langue.
Thème	both : clair et foncé. Si l'utilisateur en nomme un, créez seulement celui-ci.
Couleurs	Dérivées des captures brutes (style.md §1, §9)
Messages et symboles 3D	Vous les dérivez des captures brutes (style.md §6, §8)

Sortie : <out>/<lang>/<theme>/<device>/01.png … NN.png. Theme est light ou dark ; device est iphone-6.9, iphone-6.3, duo-outer ou duo-inner. Les fichiers HTML source et les aperçus restent dans <out>/.src/ ; ne les supprimez pas, afin que l'utilisateur puisse modifier le texte et effectuer un nouveau rendu. Si le dossier de sortie contient déjà des fichiers d'un autre jeu, ne les touchez pas ; si quelque chose entre en conflit, choisissez un nouveau sous-dossier et dites-le.

Fichiers

• references/style.md : rôles des couleurs, fond, titre, appareils, techniques de mise en évidence, objets 3D issus du contexte, héros, ton du texte, thème sombre, iPhone Duo.
• assets/panorama.html : le modèle. Cadres des appareils (iPhone, Duo extérieur, Duo intérieur), titre, recadrages (carte qui ressort, projecteur, cadre, puce), atténuation, objets 3D gonflés (.obj : croissant, étoile, scintillement, bulle, lecture, note, cœur, orbe, ou votre propre chemin), l'objet héros et les dossiers bruts par thème (RAW) sont prêts ; les mesures de mise en page sont fixes. Copiez-le et modifiez uniquement la palette, les formes du fond, les images et RAW.
• scripts/render.mjs : découpe le panorama en PNG. node <skill>/scripts/render.mjs <panorama.html> --out <dir> --theme light|dark --device iphone|duo-outer|duo-inner [--size WxH] [--preview <png>] [--only 2,5] [--no-slices]. La taille par défaut de chaque appareil est celle acceptée par App Store Connect ; pour iPhone, la valeur par défaut est 6.9", passez --size 1206x2622 pour 6.3". Le champ warnings de sa sortie JSON liste les problèmes de taille, ratio et alpha, les erreurs de page, et les avertissements de contraste et de recadrage (WARN:).
• scripts/grid.mjs : dessine une grille de pixels étiquetée et des boîtes d'essai sur une capture brute, pour mesurer les recadrages. node <skill>/scripts/grid.mjs raw/02.png --out <png> [--box x,y,w,h]. Un recadrage deviné à l'œil dérive une fois mis à l'échelle, donc mesurez chaque recadrage sur la grille.

Nécessite Node 18+ et Chrome (ou Chromium, Edge, Brave) ; définissez CHROME_PATH s'il n'est pas trouvé. La police des titres est SF Pro Display sur macOS et Inter (Google Fonts) ailleurs.

Flux de travail

1. Inspectez les captures brutes. Vérifiez la taille en pixels de chaque fichier, à quoi sert chaque écran et le texte qu'il contient. Notez le sujet et les symboles de l'application : icône, icônes d'onglets, illustrations sur les écrans. Les objets 3D et le symbole du héros sont choisis parmi ceux-ci. Choisissez l'accent (A) : la couleur des boutons, de l'onglet sélectionné ou du logo. Dérivez la palette à partir de A comme dans style.md §1. Pour échantillonner les couleurs, utilisez magick <png> -format "%[hex:p{x,y}]" info: ou l'image de la grille. Vérifiez si les dossiers Duo existent et ont les bonnes tailles (style.md §10). Vérifiez quels dossiers bruts existent et choisissez le dossier de chaque thème (style.md §9). Avec des dossiers clairs et foncés, vérifiez qu'ils contiennent les mêmes noms de fichier aux mêmes tailles et montrent le même état (contenu, position de défilement, heure).

2. Planifiez le jeu dans votre tête ; ne l'écrivez pas. Ordre : le héros, puis les écrans par ordre de valeur. Pour chaque image, décidez : le titre, la couleur de la zone de titre (A ou le second fond, par groupes de 2–3), la technique de mise en évidence principale et la partie à recadrer. Tout ce qui prouve le but de l'écran est la mise en évidence principale. Ensuite, répartissez les objets 3D sur les joints. Les jeux Duo racontent la même histoire : même ordre, titres, palette et symboles.

3. Mesurez les recadrages. Exécutez grid.mjs pour chaque partie, regardez l'image, essayez la boîte avec --box, et regardez à nouveau. La boîte doit entourer l'élément avec un peu d'air, ne pas couper le texte et ne pas inclure d'UI voisine. Mesurez également le rayon des coins de la carte (data-r). Mesurez les recadrages Duo séparément, à partir de leurs propres fichiers bruts. Mesurez sur les captures claires. Avec un dossier foncé, essayez les mêmes boîtes sur les captures foncées aussi (grid.mjs raw-dark/02.png --box …) : les recadrages sont partagés, donc ils doivent entourer le même élément dans les deux.

4. Construisez le panorama iPhone. Copiez assets/panorama.html dans <out>/.src/panorama.html :

   • Modifiez la palette dans :root.
   • Définissez RAW dans le script : { light: 'raw-light', dark: 'raw-dark' } avec deux dossiers, { light: 'raw', dark: 'raw' } avec un seul. Écrivez chaque chemin avec le dossier clair ; le rendu foncé l'échange.
   • Écrivez une <section class="shot"> pour chaque image. Donnez data-raw pour les recadrages ; les chemins sont relatifs au dossier .src où se trouve le HTML (../../raw/… quand la sortie est out/, ../../../raw/… pour out/x/). Les valeurs de recadrage et de couleur dans le modèle ne sont que des exemples ; mesurez-les toutes pour cette application.
   • Dessinez les formes de fond dans svg.bg, en coordonnées panorama : décidez d'abord la séquence de couleurs des zones de titre, puis acheminez les formes pour correspondre.
   • Placez les objets 3D sur les joints comme enfants directs de .pano. Placez l'objet héros dans la première section.
   • Supprimez les sections et objets d'exemple.

5. Construisez les panoramas Duo (s'il y a des captures Duo). Copiez le panorama iPhone dans .src/panorama-duo-outer.html et .src/panorama-duo-inner.html et adaptez-les comme dans style.md §10 : mêmes titres, palette et symboles ; nouveaux recadrages ; cartes, objets et formes de fond disposés à nouveau pour la hauteur de conception ; RAW défini sur les dossiers Duo (par ex. { light: 'raw-duo-outer-light', dark: 'raw-duo-outer-dark' }).

6. Rendu. Une exécution par thème et appareil (pour le foncé, --theme dark et dark) :

   R=<skill>/scripts/render.mjs; S=<out>/.src; O=<out>/<lang>/light
   node $R $S/panorama.html          --theme light --device iphone    --out $O/iphone-6.9 --preview $S/preview-light.png
   node $R $S/panorama.html          --theme light --device iphone    --out $O/iphone-6.3 --size 1206x2622
   node $R $S/panorama-duo-outer.html --theme light --device duo-outer --out $O/duo-outer --preview $S/preview-light-duo-outer.png
   node $R $S/panorama-duo-inner.html --theme light --device duo-inner --out $O/duo-inner --preview $S/preview-light-duo-inner.png
   

   Corrigez chaque avertissement ; pour un avertissement de contraste, ajustez la palette. Chaque image est sa propre exécution Chrome (~10 s). Pendant la correction, effectuez le rendu uniquement des images modifiées avec --only 2,5, ou seulement de l'aperçu avec --no-slices --preview … ; effectuez le rendu de tout depuis le début avant la livraison.

7. Regardez et corrigez. Regardez d'abord les aperçus, puis chaque image, et parcourez la liste de vérification. Corrigez et effectuez le rendu à nouveau.

   Ne livrez pas une image que vous n'avez pas regardée : un recadrage décalé, une courbe derrière un titre ou un objet couvrant une carte ne se voit que sur l'image. Le jeu 6.3" est une version réduite du jeu 6.9" ; regarder l'un suffit, mais vérifiez le nombre et la taille des fichiers des deux.

8. Livrez. Donnez brièvement les dossiers, les jeux d'appareils, le nombre d'images, le titre de chaque image et quel dossier brut chaque thème a utilisé. Si une capture foncée montrait un état différent, nommez les écrans à refaire. Si aucun jeu Duo n'a été créé, dites pourquoi et ce qui doit être capturé. Mentionnez que changer le texte nécessite seulement de modifier le HTML dans .src/ et d'exécuter les commandes de l'étape 6.

Si un jeu de référence est fourni

Si l'utilisateur donne les captures d'écran App Store d'une autre application comme référence, remplacez les valeurs de mise en page dans style.md par les mesures de ce jeu :

• Regardez les images une par une, puis côte à côte, et mesurez-les à pleine résolution : fond et continuité, titre, appareil, techniques de mise en évidence, décoration, images spéciales, rythme et ton.
• N'ajoutez rien que la référence n'a pas.
• Si le rapport d'aspect de la référence diffère de celui de la sortie, reportez les mesures relatives à la largeur. Épinglez les éléments en haut en haut et les éléments coupés en bas en bas.
• Prenez uniquement le style et la mise en page de la référence. Ne copiez jamais son logo, nom de marque, mascotte, photos ou texte. Traduisez également sa décoration dans le contexte de l'application.
• N'écrivez pas non plus de fichiers pour les mesures.

Liste de vérification

• Les warnings sont-ils vides pour chaque thème et appareil ? Chaque fichier a-t-il la bonne taille, sans canal alpha ? Chaque jeu d'appareil a-t-il le même nombre d'images ?
• Dans les aperçus, les formes de fond et les objets de joint se continuent-ils sur chaque joint ?
• Y a-t-il une courbe dans la zone de titre (y 0–650) ? Les couleurs du titre correspondent-elles à leur fond et changent-elles par groupes de 2–3 ?
• Le titre a-t-il la même taille dans chaque image ? Un titre autre que celui du héros dépasse-t-il 2 lignes ?
• L'appareil est-il au même endroit dans chaque image ? Une partie importante de l'UI est-elle sous les coins arrondis ou l'îlot dynamique ?
• Chaque recadrage montre-t-il exactement ce qu'il doit ? Texte coupé ou fragments d'UI voisine sur ses bords ? La carte est-elle nette ?
• Le bord d'une carte qui ressort coupe-t-il une ligne de texte dans l'écran atténué en dessous ? Le texte apparaît-il à travers les espaces d'une grille de cartes ?
• Si l'objet héros déborde dans l'image 2, touche-t-il une carte ou un texte là-bas ? Les cartes du héros se cachent-elles derrière le bord, ou ont-elles l'air de se dissoudre ?
• Les objets 3D proviennent-ils du sujet de l'application ? Couvrent-ils le titre, une carte ou un texte UI important ? Au maximum 2 objets par image ?
• Le symbole est-il reconnaissable sur le héros ? Les cartes sont-elles à l'intérieur ou devant lui ?
• Le thème sombre est-il à dominante foncée (pas de grande zone A plate ; A seulement dans les titres, objets et cadres) ? Le bord de l'appareil, les cartes et les objets se détachent-ils du fond ? La mise en page est-elle la même dans les deux thèmes ?
• Avec des captures en mode sombre : le jeu foncé montre-t-il l'UI sombre dans l'appareil et dans chaque recadrage, et le jeu clair l'UI claire ? Chaque recadrage partagé montre-t-il le même élément dans les deux ?
• Dans les jeux Duo, chaque écran provient-il d'une capture brute Duo ? Les cartes, objets et formes de fond s'adaptent-ils au canevas court Duo ; le bas de l'appareil ou d'une carte est-il coupé ? L'onglet latéral et la barre d'état survivent-ils correctement aux recadrages ?
• Les caractères spécifiques à la langue sont-ils corrects (par ex. İ, ı, ş, ğ en turc) ? (<html lang> doit correspondre à la langue.)