Las capturas del App Store las hace una skill

Qué es y por qué importa

Las capturas de tu app en el App Store son lo primero que mira la gente. Y en las apps hechas en solitario suelen ser la parte más fea: capturas sin más, texto diminuto, ni una frase que diga para qué sirve la app.

app-store-screenshots es una skill gratuita y de código abierto, con licencia MIT y más de 7.000 estrellas en GitHub. Una skill es un paquete de instrucciones que Claude Code carga cuando hace falta. Esta no te dibuja una imagen detrás de otra: te crea un editor en el navegador, un pequeño proyecto Next.js todo tuyo, donde metes las capturas reales de tu app dentro de marcos de teléfono, escribes frases grandes que se leen y exportas de una vez todos los tamaños que piden Apple y Google.

Es para quien publica una app en App Store o Google Play sin diseñador. Funciona también con otros agentes, como Cursor y Codex, pero aquí hablo de Claude Code.

1. Instálala

Necesitas Node.js, en una versión reciente (la mínima está en el README), y uno de estos: bun, pnpm, yarn o npm. Luego, desde el terminal:

• npx skills add ParthJadhav/app-store-screenshots la instala en el proyecto en el que estás.
• Añade -g para tenerla en todos tus proyectos: va a la carpeta de tu usuario en lugar de al proyecto.
• Añade -a claude-code para instalarla solo para Claude Code.

A mano, el README propone clonar el repositorio dentro de ~/.claude/skills/app-store-screenshots. Pero ojo: en el repositorio el archivo SKILL.md está en skills/app-store-screenshots/, mientras que Claude Code busca las skills personales en ~/.claude/skills/<nombre>/SKILL.md. Yo clonaría el repositorio en una carpeta de paso y copiaría solo esa subcarpeta:

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/

Luego abre una sesión nueva de Claude Code y escribe /: en la lista tiene que aparecer app-store-screenshots.

2. La petición y las preguntas que te hace

Abre Claude Code en una carpeta vacía, junto a la de la app: la skill copia ahí dentro el proyecto del editor. Luego pide las capturas. Cuantos más detalles des de entrada, menos preguntas te hace:

Hazme las capturas para App Store y Google Play de mi app <nombre>.
En una frase: <qué hace>.
Las funciones, de la más importante a la menos: <1>, <2>, <3>.
Las capturas están en <carpeta>, el icono es <ruta>.
Quiero 6 capturas, estilo <limpio, colores cálidos>, en español y en inglés.

Antes de crear nada, la skill te hace sus preguntas. Estas son obligatorias:

1. ¿Ya tienes las capturas de pantalla, y dónde están? Si no las tienes y la app es iOS en Swift, te propone una skill compañera, ios-marketing-capture, que las hace automáticamente. Para Android, React Native, Flutter o web las capturas las haces tú.
2. Dónde está el icono de la app, en PNG.
3. Cómo se llama la app.
4. Las funciones por orden de importancia: qué es lo primero que hace.
5. El estilo: uno de los 18 estilos listos, o lo describes con palabras y ella construye una paleta a medida.

Luego las opcionales: qué tiendas, si hacen falta iPad, Mac, tablets Android, Apple TV, Apple Watch o CarPlay, cuántas capturas, los colores y la fuente de tu marca. Los idiomas te los pregunta siempre, aunque no los hayas dicho. Entre los estilos están Neon Athletic Night para fitness y running, Swiss Grid Bold para finanzas y herramientas para desarrolladores, Soft Clay Wellness para meditación y sueño. Si nombras uno en la petición, aplica el estilo entero.

3. El editor que te crea

Terminadas las preguntas, copia la plantilla del editor en la carpeta, instala las dependencias, coloca capturas e icono en su sitio, arranca el servidor y te da la dirección, normalmente http://localhost:3000. La abres en el navegador y encuentras:

• El lienzo conectado (Connected canvas): ves toda la tira de capturas a la vez y puedes arrastrar un teléfono o un texto a caballo entre dos capturas. Al exportar, cada una se recorta exactamente como está en el lienzo.
• Los marcos reales: iPhone, iPad, Mac, Apple Watch y Apple TV usan los marcos de Apple sacados de Apple Design Resources, que Apple solo permite para apps de sus plataformas. Para Android el editor tiene los suyos.
• La barra lateral a la izquierda, para añadir y reordenar capturas, y el inspector a la derecha, para cambiar diseño, titular, captura y elementos. Junto al titular está el menú Copy ideas, con fórmulas listas para reescribir.
• Style Lab: te enseña cuatro looks completos de tu set uno al lado del otro. Bloqueas las partes que te gustan (colores, tipografía, diseño, escena) y mezclas el resto. En la barra de arriba está también el selector de temas, con una paleta por estilo.
• Export bundle: descarga un zip con todos los tamaños, separados por plataforma, dispositivo, resolución e idioma.

Todo se guarda solo en el archivo app-store-screenshots.json, y las capturas que arrastras al editor en public/screenshots/uploaded/. Súbelos a git y retomas el trabajo también desde otro ordenador. Para volver a abrir el editor otro día: en la carpeta, npm install la primera vez y luego npm run dev, o lo mismo con bun, pnpm o yarn.

4. Capturas limpias desde el simulador

El editor es tan bueno como las capturas que le das. El README da un consejo: para el iPhone empieza por el simulador de 6,1 pulgadas, porque es el que menos te obliga a ajustar a mano las imágenes dentro de los marcos. Una captura limpia tiene además la hora a las 9:41 y la batería llena. Con el simulador encendido, desde el terminal:

1. Fija la barra de estado: xcrun simctl status_bar booted override --time 9:41 --batteryState charged --batteryLevel 100 --cellularBars 4 --wifiBars 3.
2. Abre en la app la pantalla que quieres, llena de datos falsos pero creíbles.
3. Captura: xcrun simctl io booted screenshot 01.png guarda un PNG.
4. Al final vuelve a poner la barra normal con xcrun simctl status_bar booted clear.

booted quiere decir el simulador encendido: si tienes más de uno, pon en su lugar el nombre o el identificador. Apple no acepta imágenes con transparencias: si una captura sale con las esquinas transparentes, repítela añadiendo --mask=ignored, que guarda la pantalla entera sin la silueta redondeada. Para tener pantallas demo que se abren ya llenas, está la guía SIMULATORE (strikt.fit/simulatore-ios). O se lo pides a Claude:

Haz las capturas para las imágenes de la tienda. Compila la app y arráncala en el simulador del iPhone de 6,1 pulgadas.
Fija la barra de estado a las 9:41 con batería y señal llenas (xcrun simctl status_bar booted override).
Luego abre una a una estas pantallas: <lista>, cada una llena de datos falsos pero creíbles, y guárdalas con xcrun simctl io booted screenshot en public/screenshots/apple/iphone/es/ como 01.png, 02.png y así.
Al final vuelve a poner la barra de estado normal y mándame la lista de archivos.

5. Los tamaños para las tiendas

Los tamaños los elige la exportación, no tú. Para teléfonos y tablets, el README da estos, en píxeles:

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

Están también Mac, Apple TV, Apple Watch, CarPlay y las imágenes grandes para la página del producto. Antes de subir, mira la página Screenshot specifications de App Store Connect, porque Apple actualiza los tamaños con los teléfonos nuevos. Hoy Apple pide al menos una captura para iPhone y acepta hasta 10 por tamaño, en JPEG o PNG, sin transparencias. Google Play acepta hasta 8 por tipo de dispositivo.

Errores comunes

• Texto diminuto. La skill prevé la prueba de la miniatura: reduce la captura a unos 160 píxeles de ancho, como en los resultados de búsqueda. Si no lees el titular, es demasiado largo o demasiado fino.
• Demasiadas palabras. Una sola idea por titular, 3-5 palabras por línea, palabras cortas. Nunca dos cosas unidas con «y».
• Capturas que no son la app de verdad. Las directrices de Apple piden que las capturas muestren la app en uso, no solo el título, el login o la pantalla de inicio (punto 2.3.3), y que reflejen la experiencia principal de la app (punto 2.3). El texto de alrededor lo eliges tú, pero dentro del teléfono va la app tal como es.
• Precios en las capturas. El punto 2.3.7 de las directrices de Apple dice que las capturas no deben incluir precios.
• Capturas con transparencia: la exportación puede salir con rectángulos negros en lugar de la pantalla. Usa capturas sin canal alfa.
• Pedirle a Claude que reescriba a mano el código del editor. Los cambios se hacen en el editor, desde el navegador.

Lista de comprobación

• La skill app-store-screenshots aparece en Claude Code cuando escribo /
• Capturas reales de la última versión de la app, con la barra de estado a las 9:41
• La primera captura dice el beneficio principal en un segundo
• Cada titular se lee en la miniatura de 160 píxeles
• app-store-screenshots.json y las capturas subidas están en git
• Export bundle descargado para cada dispositivo, tamaños comprobados en App Store Connect

Preguntas frecuentes