Aller au guide d’utilisation
App Store Screenshotspar ParthJadhav

App Store Screenshots Skill.

Composez des captures d’écran pour fiches de store comme des annonces individuelles qui fonctionnent aussi ensemble.

  • Marketing d’application
  • Captures d’écran
  • Localisation
Revue de la source · App Store ScreenshotsSKILL.md
Tâche Marketing d’application Produit • Un éditeur local de conception de captures d’écran avec du contenu d’application prérempli • Un fichier de projet JSON adapté au contrôle de version, ainsi que des ressources de captures locales • Des lots d’export PNG organisés par appareil, dimensions et langue Avant de commencer Nécessite l’éditeur Next.js fourni, un environnement Node/gestionnaire de paquets pris en charge et un navigateur. L’export PNG utilise html-to-image ; les captures sources, les polices et les autres ressources doivent disposer des droits d’usage appropriés.
Résumé éditorial · source examinée le 2026-10-07 · pas un exemple généré

01 Fonctionnement

App Store Screenshots

Un éditeur de captures d’écran à base de modèles, avec persistance locale du projet, decks séparés par plateforme, textes localisés, composition connectée et vérifications d’export centrées sur le recadrage.

Flux de travail fondé sur la sourcePas un benchmark d’exécution

La méthode de travail

App Store Screenshots met en place un éditeur Next.js et ShadCN préconstruit pour les visuels marketing des fiches de store. Vous fournissez de vraies captures d’application, une icône, les priorités fonctionnelles et une direction visuelle ; l’éditeur offre des cadres d’appareil, l’édition du texte en ligne, des choix de mise en page, des superpositions d’images et des commandes d’export. Le résultat est un visuel marketing, pas une nouvelle interface d’application ni une capture automatique des écrans produit de chaque plateforme.

Son canevas connecté permet à un appareil ou à un élément décoratif de s’étendre sur des captures voisines, tandis que chaque recadrage exporté doit encore transmettre une idée complète. L’état du projet est stocké dans un fichier JSON à côté des ressources locales, avec un miroir dans le navigateur par commodité. Des decks d’appareils séparés et des libellés localisés permettent de viser plusieurs stores. Les projets existants disposent d’un chemin de migration axé sur la préservation, plutôt que d’adopter silencieusement des exports connectés qui pourraient modifier des compositions auparavant rognées.

Livrables attendus

  • Un éditeur local de conception de captures d’écran avec du contenu d’application prérempli
  • Un fichier de projet JSON adapté au contrôle de version, ainsi que des ressources de captures locales
  • Des lots d’export PNG organisés par appareil, dimensions et langue
Voir le brief d’exemple

Du brief à la revue

  1. 01
    Examiner le travail existant

    Vérifiez s’il existe un projet de captures d’écran antérieur avant de générer la structure. Si la migration est souhaitée, préservez les textes, decks, ressources et instantanés récupérables de l’utilisateur au lieu de les remplacer par des exemples.

  2. 02
    Fournir de vraies données d’application

    Rassemblez les captures d’appareil, l’icône, le nom de l’application, les fonctionnalités prioritaires, les plateformes cibles, les langues et la direction de style. La réalisation des captures est une tâche distincte lorsque nécessaire.

  3. 03
    Composer le deck

    Utilisez l’éditeur fourni pour varier les mises en page et rédiger un bénéfice clair par image. Planifiez tout objet à cheval sur plusieurs écrans de sorte que le texte et l’interface importants restent lisibles dans chaque recadrage.

  4. 04
    Inspecter les exports

    Vérifiez la lisibilité des miniatures, les retours à la ligne localisés, le chargement des ressources et les recadrages exportés. Exportez le lot de chaque appareil sélectionné et vérifiez les exigences actuelles des stores avant soumission.

02 Cas d’usage

Quand l’utiliser

Nécessite l’éditeur Next.js fourni, un environnement Node/gestionnaire de paquets pris en charge et un navigateur. L’export PNG utilise html-to-image ; les captures sources, les polices et les autres ressources doivent disposer des droits d’usage appropriés.

Un bon choix

  • Ressources de fiche réutilisablesUtile pour maintenir les visuels marketing du store avec le dépôt du produit, afin qu’un autre collaborateur puisse rouvrir les mêmes contenus et ressources.
  • Séries de captures coordonnéesConvient aux decks qui ont besoin d’une continuité visuelle partagée sans obliger chaque capture à reprendre la même composition avec un téléphone centré.

Limites à vérifier

  • Pas un service de capture d’applicationL’éditeur attend de vraies captures. La source indique un parcours compagnon distinct pour certains flux iOS ; les autres plateformes nécessitent toujours un processus de capture approprié.
  • Aucune garantie d’approbation par les storesLes tailles d’export d’un modèle sont des données d’implémentation, pas une promesse de conformité actuelle aux stores. Confirmez les dernières règles du store visé et vérifiez les allégations réelles sur le produit avant l’envoi.

Apportez ces éléments

  • Captures d’application et icôneFournissez des captures en résolution native pour les appareils et langues visés, ainsi que l’icône approuvée de l’application.
  • Priorités fonctionnellesListez les vrais bénéfices par ordre et fournissez les preuves derrière les notes, récompenses ou allégations d’usage. N’inventez pas de preuve sociale pour remplir la section principale.
  • Plateformes et languesIndiquez les stores souhaités, les decks d’appareils, les langues, le style visuel et si un projet existant doit être migré.

03 Décisions importantes

Décisions importantes

  1. Connecté mais indépendant

    Une composition à cheval sur plusieurs écrans peut donner de la continuité à la série, tandis que la revue de chaque recadrage séparé évite que les titres ou l’interface clé deviennent incompréhensibles hors de la bande complète.

  2. État du projet récupérable

    Le fichier JSON et les ressources importées rendent la collaboration plus durable qu’une maquette uniquement dans le navigateur. Les anciens exports isolés restent distincts tant que la composition connectée n’est pas activée volontairement.

04 Exemple de brief

Essayez un brief ciblé

Le brief d’exemple ci-dessous n’a pas été testé. Vérifiez la configuration du skill avant de l’utiliser.

Vérifier la configuration

Utilisez le dossier complet du skill avec son modèle d’éditeur et ses références de style. La commande d’installation du compagnon de capture indiquée dans la source installe un outil distinct ; elle n’installe pas cet éditeur de captures d’écran.

Fichier source amont
https://github.com/ParthJadhav/app-store-screenshots/blob/82d4ebba770ce821d89e27f6a5bd30a2cb65ab23/skills/app-store-screenshots/SKILL.md

Nécessite l’éditeur Next.js fourni, un environnement Node/gestionnaire de paquets pris en charge et un navigateur. L’export PNG utilise html-to-image ; les captures sources, les polices et les autres ressources doivent disposer des droits d’usage appropriés.

Commencez par un seul livrable

Adaptez la portée, les contenus sources et les contraintes de ce brief avant d’exécuter le skill.

Brief d’exemple
Utilisez App Store Screenshots pour créer un deck de fiche iPhone en anglais uniquement pour l’application d’habitudes fournie. Utilisez l’icône fournie et six captures réelles, donnez la priorité à la planification hebdomadaire et à la récupération des séries, et n’inventez ni notes ni récompenses. Préremplissez l’éditeur fourni avec des mises en page variées et un moment décoratif discret à cheval sur plusieurs écrans. Gardez chaque titre dans son propre recadrage, puis inspectez les PNG exportés en taille miniature. Ne mettez rien en ligne sur un store.

Inspecter le résultat

Comparez le résultat réel à ces critères observables.

  • Chaque image exportée transmet un bénéfice complet sans avoir besoin de la capture voisine.
  • Toutes les langues sélectionnées correspondent à de vrais textes et à des chemins de capture valides, sans texte de repli inexpliqué.
  • Le fichier de projet et les ressources locales permettent de reproduire le deck d’appareil prévu après réouverture.

OpenDesign fournit un espace de conception local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec l’ensemble, ni que ses outils externes, identifiants et dépendances logicielles sont inclus.

05 Source et licence

Source et licence

Cette page décrit la révision source épinglée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
ParthJadhav
Licence
MIT
Instantané examiné
2026-10-07 · 82d4ebba770c
Résumé éditorial de la source
Un éditeur de captures d’écran à base de modèles, avec persistance locale du projet, decks séparés par plateforme, textes localisés, composition connectée et vérifications d’export centrées sur le recadrage.

Résumé original par OpenDesign, d’après la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d’usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Génère-t-il les vraies captures d’écran de l’application ?

Sa fonction principale est de composer des visuels marketing à partir de captures fournies. L’automatisation de capture, le cas échéant, relève d’un flux compagnon distinct.

Un même appareil peut-il chevaucher deux captures ?

Oui, le mode connecté exporte des recadrages d’un canevas partagé. Gardez le texte et l’interface importants dans chaque recadrage et examinez les images séparément.

La mise à niveau d’un ancien projet modifiera-t-elle ses recadrages ?

La source conserve les projets existants en mode isolé, sauf s’ils ont déjà opté pour la composition connectée. La migration doit préserver les ressources et textes existants avec une sauvegarde récupérable.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, vos contenus sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l’ajouter à votre flux de travail.

Fichier source amont
https://github.com/ParthJadhav/app-store-screenshots/blob/82d4ebba770ce821d89e27f6a5bd30a2cb65ab23/skills/app-store-screenshots/SKILL.md