As capturas da App Store quem as faz é uma skill

O que é e porque importa

As capturas da tua app na App Store são a primeira coisa que as pessoas veem. E nas apps feitas a solo costumam ser a parte mais feia: capturas cruas, texto minúsculo, nem uma frase a dizer para que serve a app.

A app-store-screenshots é uma skill gratuita e open source, com licença MIT e mais de 7.000 estrelas no GitHub. Uma skill é um pacote de instruções que o Claude Code carrega quando é preciso. Esta não te desenha uma imagem de cada vez: cria-te um editor no browser, um pequeno projeto Next.js só teu, onde pões as capturas reais da tua app dentro de molduras de telemóvel, escreves frases grandes que se leem e exportas de uma vez todos os tamanhos que a Apple e a Google pedem.

É para quem publica uma app na App Store ou no Google Play sem designer. Também funciona com outros agentes, como o Cursor e o Codex, mas aqui falo do Claude Code.

1. Instala-a

Precisas do Node.js, numa versão recente (a mínima está no README), e de um destes: bun, pnpm, yarn ou npm. Depois, no terminal:

• npx skills add ParthJadhav/app-store-screenshots instala-a no projeto em que estás.
• Acrescenta -g para a teres em todos os teus projetos: vai para a pasta do teu utilizador em vez do projeto.
• Acrescenta -a claude-code para a instalar só para o Claude Code.

À mão, o README propõe clonar o repositório para ~/.claude/skills/app-store-screenshots. Mas atenção: no repositório o ficheiro SKILL.md está em skills/app-store-screenshots/, enquanto o Claude Code procura as skills pessoais em ~/.claude/skills/<nome>/SKILL.md. Eu clonava o repositório numa pasta temporária e copiava só essa subpasta:

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/

Depois abre uma sessão nova do Claude Code e escreve /: na lista tem de aparecer app-store-screenshots.

2. O pedido e as perguntas que te faz

Abre o Claude Code numa pasta vazia, ao lado da pasta da app: a skill copia para lá o projeto do editor. Depois pede as capturas. Quanto mais detalhes deres logo, menos perguntas te faz:

Faz-me as capturas para a App Store e o Google Play da minha app <nome>.
Numa frase: <o que faz>.
As funcionalidades, da mais importante para a menos: <1>, <2>, <3>.
As capturas estão em <pasta>, o ícone é <caminho>.
Quero 6 capturas, estilo <limpo, cores quentes>, em português e em inglês.

Antes de criar seja o que for, a skill faz-te as perguntas dela. Estas são obrigatórias:

1. Já tens as capturas de ecrã, e onde estão? Se não as tiveres e a app for iOS em Swift, propõe-te uma skill companheira, a ios-marketing-capture, que as faz automaticamente. Para Android, React Native, Flutter ou web, as capturas fazes tu.
2. Onde está o ícone da app, em PNG.
3. Como se chama a app.
4. As funcionalidades por ordem de importância: qual é a primeira coisa que faz.
5. O estilo: um dos 18 estilos prontos, ou descreve-lo por palavras e ela constrói uma paleta à medida.

Depois as opcionais: que lojas, se precisas de iPad, Mac, tablets Android, Apple TV, Apple Watch ou CarPlay, quantas capturas, as cores e a fonte da tua marca. As línguas pergunta-te sempre, mesmo que não as tenhas dito. Entre os estilos há o Neon Athletic Night para fitness e corrida, o Swiss Grid Bold para finanças e ferramentas para programadores, o Soft Clay Wellness para meditação e sono. Se nomeares um no pedido, aplica o estilo inteiro.

3. O editor que te cria

Acabadas as perguntas, copia o modelo do editor para a pasta, instala as dependências, põe as capturas e o ícone no sítio, arranca o servidor e dá-te o endereço, normalmente http://localhost:3000. Abres no browser e encontras:

• A tela ligada (Connected canvas): vês a fila inteira de capturas de uma vez e podes arrastar um telemóvel ou um texto a meio de duas capturas. Ao exportar, cada uma é recortada exatamente como está na tela.
• As molduras reais: iPhone, iPad, Mac, Apple Watch e Apple TV usam as molduras da Apple tiradas das Apple Design Resources, que a Apple só autoriza para apps das suas plataformas. Para Android o editor tem as suas.
• A barra lateral à esquerda, para acrescentar e reordenar capturas, e o inspetor à direita, para mudar a paginação, o título, a captura e os elementos. Ao lado do título está o menu Copy ideas, com fórmulas prontas para reescrever.
• Style Lab: mostra-te quatro looks completos do teu conjunto lado a lado. Bloqueias as partes de que gostas (cores, letra, paginação, cena) e baralhas o resto. Na barra de cima há também o seletor de temas, com uma paleta por estilo.
• Export bundle: descarrega um zip com todos os tamanhos, separados por plataforma, dispositivo, resolução e língua.

Tudo se guarda sozinho no ficheiro app-store-screenshots.json, e as capturas que arrastas para o editor em public/screenshots/uploaded/. Põe-nos no git e retomas o trabalho até noutro computador. Para reabrir o editor noutro dia: na pasta, npm install da primeira vez e depois npm run dev, ou o mesmo com bun, pnpm ou yarn.

4. Capturas limpas no simulador

O editor só é tão bom quanto as capturas que lhe dás. O README dá uma dica: para o iPhone começa pelo simulador de 6,1 polegadas, porque é o que te obriga a acertar menos à mão as imagens dentro das molduras. Uma captura limpa tem ainda a hora nas 9:41 e a bateria cheia. Com o simulador ligado, no terminal:

1. Fixa a barra de estado: xcrun simctl status_bar booted override --time 9:41 --batteryState charged --batteryLevel 100 --cellularBars 4 --wifiBars 3.
2. Abre na app o ecrã que queres, cheio de dados falsos mas credíveis.
3. Captura: xcrun simctl io booted screenshot 01.png guarda um PNG.
4. No fim repõe a barra normal com xcrun simctl status_bar booted clear.

booted quer dizer o simulador ligado: se tiveres mais do que um, põe no lugar dele o nome ou o identificador. A Apple não aceita imagens com transparências: se uma captura sair com os cantos transparentes, repete-a acrescentando --mask=ignored, que guarda o ecrã inteiro sem o contorno arredondado. Para ecrãs de demonstração que abrem já cheios, há o guia SIMULATORE (strikt.fit/simulatore-ios). Ou pedes ao Claude:

Faz as capturas para as imagens da loja. Compila a app e arranca-a no simulador do iPhone de 6,1 polegadas.
Fixa a barra de estado nas 9:41 com bateria e rede cheias (xcrun simctl status_bar booted override).
Depois abre um a um estes ecrãs: <lista>, cada um cheio de dados falsos mas credíveis, e guarda-os com xcrun simctl io booted screenshot em public/screenshots/apple/iphone/pt/ como 01.png, 02.png e assim por diante.
No fim repõe a barra de estado normal e manda-me a lista dos ficheiros.

5. Os tamanhos para as lojas

Os tamanhos escolhe-os a exportação, não tu. Para telemóveis e tablets, o README lista estes, em píxeis:

• 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: telemóvel 1080 × 1920; tablet de 7" 1200 × 1920 ou 1920 × 1200; tablet de 10" 1600 × 2560 ou 2560 × 1600; feature graphic 1024 × 500.

Há também Mac, Apple TV, Apple Watch, CarPlay e as imagens grandes para a página do produto. Antes de carregar, vê a página Screenshot specifications do App Store Connect, porque a Apple atualiza os tamanhos com os telemóveis novos. Hoje a Apple pede pelo menos uma captura para iPhone e aceita até 10 por tamanho, em JPEG ou PNG, sem transparências. O Google Play aceita até 8 por tipo de dispositivo.

Os erros mais comuns

• Texto minúsculo. A skill prevê o teste da miniatura: reduz a captura para uns 160 píxeis de largura, como nos resultados de pesquisa. Se não consegues ler o título, é demasiado longo ou demasiado fino.
• Palavras a mais. Uma só ideia por título, 3 a 5 palavras por linha, palavras curtas. Nunca duas coisas ligadas por «e».
• Capturas que não são a app real. As diretrizes da Apple pedem que as capturas mostrem a app em uso, não só o título, o login ou o ecrã de arranque (ponto 2.3.3), e que reflitam a experiência principal da app (ponto 2.3). O texto à volta escolhes tu, mas dentro do telemóvel vai a app tal como é.
• Preços nas capturas. O ponto 2.3.7 das diretrizes da Apple diz que as capturas não devem incluir preços.
• Capturas com transparência: a exportação pode sair com retângulos pretos no lugar do ecrã. Usa capturas sem canal alfa.
• Pedir ao Claude que reescreva à mão o código do editor. As alterações fazem-se no editor, no browser.

Checklist

• A skill app-store-screenshots aparece no Claude Code quando escrevo /
• Capturas reais da última versão da app, com a barra de estado nas 9:41
• A primeira captura diz o benefício principal num segundo
• Cada título lê-se na miniatura de 160 píxeis
• O app-store-screenshots.json e as capturas carregadas estão no git
• Export bundle descarregado para cada dispositivo, tamanhos verificados no App Store Connect

Perguntas frequentes