Le schermate dell'App Store le fa una skill

Cos'è e perché conta

Le schermate della tua app sull'App Store sono la prima cosa che la gente guarda. E nelle app fatte da soli di solito sono la parte più brutta: catture nude, testo minuscolo, nessuna frase che dica a cosa serve l'app.

app-store-screenshots è una skill gratuita e open source, con licenza MIT e più di 7.000 stelle su GitHub. Una skill è un pacchetto di istruzioni che Claude Code carica quando serve. Questa non ti disegna un'immagine alla volta: ti crea un editor nel browser, un piccolo progetto Next.js tutto tuo, dove metti le catture vere della tua app dentro cornici di telefono, scrivi frasi grandi che si leggono ed esporti in un colpo tutte le misure che chiedono Apple e Google.

È per chi pubblica un'app su App Store o Google Play senza un designer. Funziona anche con altri agenti, come Cursor e Codex, ma qui parlo di Claude Code.

1. Installala

Ti servono Node.js, in una versione recente (la minima è scritta nel README), e uno tra bun, pnpm, yarn e npm. Poi dal terminale:

• npx skills add ParthJadhav/app-store-screenshots la installa nel progetto in cui ti trovi.
• Aggiungi -g per averla in tutti i tuoi progetti: finisce nella cartella del tuo utente invece che nel progetto.
• Aggiungi -a claude-code per installarla solo per Claude Code.

A mano, il README propone di clonare il repository dentro ~/.claude/skills/app-store-screenshots. Attenzione però: nel repository il file SKILL.md sta in skills/app-store-screenshots/, mentre Claude Code cerca le skill personali in ~/.claude/skills/<nome>/SKILL.md. Io clonerei il repository in una cartella di passaggio e copierei solo quella sottocartella:

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/

Poi apri una sessione nuova di Claude Code e scrivi /: nell'elenco deve comparire app-store-screenshots.

2. La richiesta e le domande che ti fa

Apri Claude Code in una cartella vuota, accanto a quella dell'app: la skill ci copia dentro il progetto dell'editor. Poi chiedi le schermate. Più dettagli dai subito, meno domande ti fa:

Fammi le schermate per l'App Store e Google Play della mia app <nome>.
In una frase: <cosa fa>.
Le funzioni, dalla più importante: <1>, <2>, <3>.
Le catture sono in <cartella>, l'icona è <percorso>.
Voglio 6 schermate, stile <pulito, colori caldi>, in italiano e in inglese.

Prima di creare qualsiasi cosa, la skill ti fa le domande. Queste sono obbligatorie:

1. Hai già le catture dello schermo, e dove sono? Se non le hai e l'app è iOS in Swift, ti propone una skill compagna, ios-marketing-capture, che le fa in automatico. Per Android, React Native, Flutter o web le catture le fai tu.
2. Dov'è l'icona dell'app, in PNG.
3. Come si chiama l'app.
4. Le funzioni in ordine di importanza: qual è la prima cosa che fa.
5. Lo stile: uno dei 18 stili pronti, oppure lo descrivi a parole e lei costruisce una tavolozza su misura.

Poi quelle facoltative: quali store, se servono iPad, Mac, tablet Android, Apple TV, Apple Watch o CarPlay, quante schermate, i colori e il font del tuo marchio. Le lingue te le chiede sempre, anche se non le hai dette. Tra gli stili ci sono Neon Athletic Night per fitness e corsa, Swiss Grid Bold per finanza e strumenti per sviluppatori, Soft Clay Wellness per meditazione e sonno. Se ne nomini uno nella richiesta, applica tutto lo stile.

3. L'editor che ti crea

Finite le domande, copia il modello dell'editor nella cartella, installa le dipendenze, mette al loro posto catture e icona, avvia il server e ti dà l'indirizzo, di solito http://localhost:3000. Lo apri nel browser e trovi:

• La tela collegata (Connected canvas): vedi tutta la fila di schermate insieme e puoi trascinare un telefono o una scritta a cavallo tra due schermate. All'export ognuna viene ritagliata esattamente com'è sulla tela.
• Le cornici vere: iPhone, iPad, Mac, Apple Watch e Apple TV usano le cornici di Apple prese dalle Apple Design Resources, che Apple concede solo per app delle sue piattaforme. Per Android l'editor ha le sue.
• La barra laterale a sinistra, per aggiungere e riordinare le schermate, e l'ispettore a destra, per cambiare impaginazione, titolo, cattura ed elementi. Accanto al titolo c'è il menu Copy ideas, con formule pronte da riscrivere.
• Style Lab: ti mostra quattro look completi del tuo set uno accanto all'altro. Blocchi le parti che ti piacciono (colori, caratteri, impaginazione, scena) e rimescoli il resto. Nella barra in alto c'è anche il selettore dei temi, con una tavolozza per ogni stile.
• Export bundle: scarica uno zip con tutte le misure, divise per piattaforma, dispositivo, risoluzione e lingua.

Tutto si salva da solo nel file app-store-screenshots.json, e le catture che trascini nell'editor in public/screenshots/uploaded/. Mettili su git e riprendi il lavoro anche da un altro computer. Per riaprire l'editor un altro giorno: nella cartella, npm install la prima volta e poi npm run dev, o lo stesso con bun, pnpm o yarn.

4. Catture pulite dal simulatore

L'editor è bravo quanto le catture che gli dai. Il README dà un consiglio: per l'iPhone parti dal simulatore da 6,1 pollici, perché è quello che ti fa sistemare meno a mano le immagini dentro le cornici. Una cattura pulita ha poi l'ora alle 9:41 e la batteria piena. Con il simulatore acceso, dal terminale:

1. Fissa la barra di stato: xcrun simctl status_bar booted override --time 9:41 --batteryState charged --batteryLevel 100 --cellularBars 4 --wifiBars 3.
2. Apri nell'app la schermata che vuoi, piena di dati finti ma credibili.
3. Scatta: xcrun simctl io booted screenshot 01.png salva un PNG.
4. Alla fine rimetti la barra normale con xcrun simctl status_bar booted clear.

booted vuol dire il simulatore acceso: se ne hai più di uno, metti al suo posto il nome o l'identificativo. Apple non accetta immagini con trasparenze: se una cattura esce con gli angoli trasparenti, rifalla aggiungendo --mask=ignored, che salva lo schermo intero senza la sagoma arrotondata. Per avere schermate demo che si aprono già piene, c'è la guida SIMULATORE (strikt.fit/simulatore-ios). Oppure lo chiedi a Claude:

Fai le catture per le schermate dello store. Compila l'app e avviala sul simulatore dell'iPhone da 6,1 pollici.
Fissa la barra di stato alle 9:41 con batteria e segnale pieni (xcrun simctl status_bar booted override).
Poi apri una alla volta queste schermate: <elenco>, ognuna piena di dati finti ma credibili, e salvale con xcrun simctl io booted screenshot in public/screenshots/apple/iphone/it/ come 01.png, 02.png e così via.
Alla fine rimetti la barra di stato normale e mandami l'elenco dei file.

5. Le misure per gli store

Le misure le sceglie l'export, non tu. Per telefoni e tablet, il README elenca queste, in pixel:

• 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") e 2048 × 2732 (iPad Pro 12,9").
• Google Play: telefono 1080 × 1920; tablet da 7" 1200 × 1920 o 1920 × 1200; tablet da 10" 1600 × 2560 o 2560 × 1600; feature graphic 1024 × 500.

Ci sono anche Mac, Apple TV, Apple Watch, CarPlay e le immagini grandi per la pagina del prodotto. Prima di caricare, controlla la pagina Screenshot specifications di App Store Connect, perché Apple aggiorna le misure con i nuovi telefoni. Oggi Apple chiede almeno una schermata per iPhone e ne accetta fino a 10 per dimensione, in JPEG o PNG, senza trasparenze. Google Play ne accetta fino a 8 per tipo di dispositivo.

Gli errori più comuni

• Testo minuscolo. La skill prevede la prova della miniatura: rimpicciolisci la schermata a circa 160 pixel di larghezza, come nei risultati di ricerca. Se non leggi il titolo, è troppo lungo o troppo sottile.
• Troppe parole. Un'idea sola per titolo, 3-5 parole per riga, parole corte. Mai due cose unite da «e».
• Schermate che non sono l'app vera. Le linee guida di Apple chiedono che le schermate mostrino l'app in uso, non solo il titolo, il login o la schermata di avvio (punto 2.3.3), e che rispecchino l'esperienza principale dell'app (punto 2.3). Il testo intorno lo scegli tu, dentro il telefono ci va l'app com'è.
• Prezzi nelle schermate. Il punto 2.3.7 delle linee guida di Apple dice che le schermate non devono contenere prezzi.
• Catture con trasparenza: l'export può uscire con rettangoli neri al posto dello schermo. Usa catture senza canale alfa.
• Chiedere a Claude di riscrivere a mano il codice dell'editor. Le modifiche si fanno nell'editor, dal browser.

Checklist

• La skill app-store-screenshots compare in Claude Code quando scrivo /
• Catture vere dell'ultima versione dell'app, con la barra di stato alle 9:41
• La prima schermata dice il beneficio principale in un secondo
• Ogni titolo si legge nella miniatura da 160 pixel
• app-store-screenshots.json e le catture caricate sono su git
• Export bundle scaricato per ogni dispositivo, misure controllate su App Store Connect

Domande frequenti