Vos captures pour l'App Store, c'est une skill qui les fait

Ce que c'est et pourquoi ça compte

Les captures de votre app sur l'App Store sont la première chose que les gens regardent. Et dans les apps faites en solo, c'est souvent la partie la plus moche : des captures brutes, un texte minuscule, pas une phrase qui dise à quoi sert l'app.

app-store-screenshots est une skill gratuite et open source, sous licence MIT et avec plus de 7 000 étoiles sur GitHub. Une skill, c'est un paquet d'instructions que Claude Code charge quand il en a besoin. Celle-ci ne vous dessine pas une image après l'autre : elle vous crée un éditeur dans le navigateur, un petit projet Next.js rien qu'à vous, où vous placez les vraies captures de votre app dans des cadres de téléphone, écrivez de grandes phrases lisibles et exportez d'un coup tous les formats que demandent Apple et Google.

C'est pour ceux qui publient une app sur l'App Store ou Google Play sans designer. Elle marche aussi avec d'autres agents, comme Cursor et Codex, mais ici je parle de Claude Code.

1. L'installer

Il vous faut Node.js, dans une version récente (la minimale est indiquée dans le README), et l'un de bun, pnpm, yarn ou npm. Puis, dans le terminal :

• npx skills add ParthJadhav/app-store-screenshots l'installe dans le projet où vous vous trouvez.
• Ajoutez -g pour l'avoir dans tous vos projets : elle va dans le dossier de votre utilisateur au lieu du projet.
• Ajoutez -a claude-code pour l'installer uniquement pour Claude Code.

À la main, le README propose de cloner le dépôt dans ~/.claude/skills/app-store-screenshots. Mais attention : dans le dépôt, le fichier SKILL.md se trouve dans skills/app-store-screenshots/, alors que Claude Code cherche les skills personnelles dans ~/.claude/skills/<nom>/SKILL.md. Je clonerais le dépôt dans un dossier temporaire et je copierais seulement ce sous-dossier :

git clone https://github.com/ParthJadhav/app-store-screenshots /tmp/app-store-screenshots
cp -R /tmp/app-store-screenshots/skills/app-store-screenshots ~/.claude/skills/

Ensuite, ouvrez une nouvelle session de Claude Code et tapez / : app-store-screenshots doit apparaître dans la liste.

2. La demande et les questions qu'elle vous pose

Ouvrez Claude Code dans un dossier vide, à côté de celui de l'app : la skill y copie le projet de l'éditeur. Ensuite, demandez les captures. Plus vous donnez de détails d'emblée, moins elle vous pose de questions :

Fais-moi les captures pour l'App Store et Google Play de mon app <nom>.
En une phrase : <ce qu'elle fait>.
Les fonctions, de la plus importante à la moins importante : <1>, <2>, <3>.
Les captures sont dans <dossier>, l'icône est <chemin>.
Je veux 6 captures, style <épuré, couleurs chaudes>, en français et en anglais.

Avant de créer quoi que ce soit, la skill vous pose ses questions. Celles-ci sont obligatoires :

1. Avez-vous déjà les captures d'écran, et où sont-elles ? Si vous ne les avez pas et que l'app est iOS en Swift, elle vous propose une skill compagne, ios-marketing-capture, qui les fait automatiquement. Pour Android, React Native, Flutter ou le web, c'est vous qui faites les captures.
2. Où se trouve l'icône de l'app, en PNG.
3. Comment s'appelle l'app.
4. Les fonctions par ordre d'importance : quelle est la chose numéro un qu'elle fait.
5. Le style : l'un des 18 styles tout prêts, ou vous le décrivez avec des mots et elle construit une palette sur mesure.

Puis les facultatives : quels stores, s'il faut l'iPad, le Mac, les tablettes Android, l'Apple TV, l'Apple Watch ou CarPlay, combien de captures, les couleurs et la police de votre marque. Les langues, elle vous les demande toujours, même si vous ne les avez pas dites. Parmi les styles, il y a Neon Athletic Night pour le fitness et la course, Swiss Grid Bold pour la finance et les outils de développeurs, Soft Clay Wellness pour la méditation et le sommeil. Si vous en nommez un dans la demande, elle applique tout le style.

3. L'éditeur qu'elle vous crée

Une fois les questions finies, elle copie le modèle de l'éditeur dans le dossier, installe les dépendances, range captures et icône à leur place, lance le serveur et vous donne l'adresse, en général http://localhost:3000. Vous l'ouvrez dans le navigateur et vous trouvez :

• Le canevas connecté (Connected canvas) : vous voyez toute la rangée de captures d'un coup et pouvez faire glisser un téléphone ou un texte à cheval sur deux captures. À l'export, chacune est recadrée exactement comme elle est sur le canevas.
• Les vrais cadres : iPhone, iPad, Mac, Apple Watch et Apple TV utilisent les cadres d'Apple tirés des Apple Design Resources, qu'Apple autorise uniquement pour les apps de ses plateformes. Pour Android, l'éditeur a les siens.
• La barre latérale à gauche, pour ajouter et réordonner les captures, et l'inspecteur à droite, pour changer la mise en page, le titre, la capture et les éléments. À côté du titre, il y a le menu Copy ideas, avec des formules toutes prêtes à réécrire.
• Style Lab : il vous montre quatre looks complets de votre série côte à côte. Vous verrouillez les parties qui vous plaisent (couleurs, typo, mise en page, scène) et vous mélangez le reste. Dans la barre du haut, il y a aussi le sélecteur de thèmes, avec une palette par style.
• Export bundle : il télécharge un zip avec tous les formats, rangés par plateforme, appareil, résolution et langue.

Tout s'enregistre tout seul dans le fichier app-store-screenshots.json, et les captures que vous glissez dans l'éditeur dans public/screenshots/uploaded/. Mettez-les sur git et vous reprenez le travail même depuis un autre ordinateur. Pour rouvrir l'éditeur un autre jour : dans le dossier, npm install la première fois puis npm run dev, ou pareil avec bun, pnpm ou yarn.

4. Des captures propres depuis le simulateur

L'éditeur ne vaut que ce que valent les captures que vous lui donnez. Le README donne un conseil : pour l'iPhone, partez du simulateur de 6,1 pouces, parce que c'est celui qui vous oblige le moins à ajuster les images à la main dans les cadres. Une capture propre affiche aussi 9:41 et une batterie pleine. Avec le simulateur allumé, dans le terminal :

1. Figez la barre d'état : xcrun simctl status_bar booted override --time 9:41 --batteryState charged --batteryLevel 100 --cellularBars 4 --wifiBars 3.
2. Ouvrez dans l'app l'écran que vous voulez, rempli de données fictives mais crédibles.
3. Capturez : xcrun simctl io booted screenshot 01.png enregistre un PNG.
4. À la fin, remettez la barre normale avec xcrun simctl status_bar booted clear.

booted veut dire le simulateur allumé : si vous en avez plusieurs, mettez à la place son nom ou son identifiant. Apple n'accepte pas les images avec transparence : si une capture sort avec des coins transparents, refaites-la en ajoutant --mask=ignored, qui enregistre l'écran entier sans la découpe arrondie. Pour des écrans de démo qui s'ouvrent déjà remplis, il y a le guide SIMULATORE (strikt.fit/simulatore-ios). Ou vous le demandez à Claude :

Fais les captures pour les images du store. Compile l'app et lance-la sur le simulateur de l'iPhone de 6,1 pouces.
Fige la barre d'état à 9:41 avec batterie et réseau pleins (xcrun simctl status_bar booted override).
Puis ouvre un par un ces écrans : <liste>, chacun rempli de données fictives mais crédibles, et enregistre-les avec xcrun simctl io booted screenshot dans public/screenshots/apple/iphone/fr/ sous les noms 01.png, 02.png et ainsi de suite.
À la fin, remets la barre d'état normale et envoie-moi la liste des fichiers.

5. Les formats pour les stores

Les formats, c'est l'export qui les choisit, pas vous. Pour les téléphones et les tablettes, le README liste ceux-ci, en pixels :

• App Store, iPhone : 1320 × 2868 (6,9"), 1284 × 2778 (6,5"), 1206 × 2622 (6,3"), 1125 × 2436 (6,1").
• App Store, iPad : 2064 × 2752 (13") et 2048 × 2732 (iPad Pro 12,9").
• Google Play : téléphone 1080 × 1920 ; tablette 7" 1200 × 1920 ou 1920 × 1200 ; tablette 10" 1600 × 2560 ou 2560 × 1600 ; feature graphic 1024 × 500.

Il y a aussi le Mac, l'Apple TV, l'Apple Watch, CarPlay et les grandes images pour la page produit. Avant de charger, vérifiez la page Screenshot specifications d'App Store Connect, car Apple met à jour les formats avec les nouveaux téléphones. Aujourd'hui, Apple demande au moins une capture pour l'iPhone et en accepte jusqu'à 10 par taille, en JPEG ou PNG, sans transparence. Google Play en accepte jusqu'à 8 par type d'appareil.

Les erreurs les plus courantes

• Texte minuscule. La skill prévoit le test de la vignette : réduisez la capture à environ 160 pixels de large, comme dans les résultats de recherche. Si vous ne lisez pas le titre, il est trop long ou trop fin.
• Trop de mots. Une seule idée par titre, 3 à 5 mots par ligne, des mots courts. Jamais deux choses reliées par « et ».
• Des captures qui ne sont pas la vraie app. Les règles d'Apple demandent que les captures montrent l'app en cours d'utilisation, pas seulement le titre, la connexion ou l'écran de démarrage (point 2.3.3), et qu'elles reflètent l'expérience principale de l'app (point 2.3). Le texte autour, c'est vous qui le choisissez, mais dans le téléphone, c'est l'app telle qu'elle est.
• Des prix dans les captures. Le point 2.3.7 des règles d'Apple dit que les captures ne doivent pas contenir de prix.
• Des captures avec transparence : l'export peut sortir avec des rectangles noirs à la place de l'écran. Utilisez des captures sans canal alpha.
• Demander à Claude de réécrire à la main le code de l'éditeur. Les modifications se font dans l'éditeur, depuis le navigateur.

Check-list

• La skill app-store-screenshots apparaît dans Claude Code quand je tape /
• De vraies captures de la dernière version de l'app, avec la barre d'état à 9:41
• La première capture dit le principal bénéfice en une seconde
• Chaque titre se lit dans la vignette de 160 pixels
• app-store-screenshots.json et les captures importées sont sur git
• Export bundle téléchargé pour chaque appareil, formats vérifiés dans App Store Connect

Questions fréquentes