Store Screenshots Panorama — capturas de App Store en franja

Capturas de pantalla para la tienda — panorama

Genera conjuntos para la App Store a partir de capturas brutas de la app que se leen como una sola superficie. El diseño se midió a partir del conjunto de una gran app de marketplace; los objetos 3D y el héroe provienen del contenido propio de la app. Los detalles están en references/style.md. Lee ese archivo de principio a fin antes del primer conjunto: las decisiones que la plantilla no toma (colores, curvas, qué parte sobresale, qué símbolos se vuelven 3D, el diseño Duo) provienen de ahí.

El usuario quiere el resultado, no el proceso. No escribas archivos de plan, especificaciones ni medidas, y no te detengas para pedir aprobación. Toma las decisiones tú mismo, produce los conjuntos, revísalos y entrégalos. Pregunta solo cuando realmente falte una entrada y no haya un valor predeterminado razonable; por ejemplo, pide originales más grandes si las capturas brutas son más estrechas que 1206 px.

Reglas fundamentales

• La interfaz de usuario se mantiene exacta a nivel de píxel. Las capturas brutas y sus recortes son capas de imagen simples. No redibujes, regeneres con IA, traduzcas ni cambies ningún texto en pantalla. Las tarjetas solo se recortan del archivo original con data-crop. Una captura de la tienda debe mostrar la app real; una interfaz inventada cuesta tanto confianza como la revisión de la App Store.
• Cada dispositivo se muestra con sus propias capturas brutas. En iPhone Duo, la barra de pestañas y la barra de estado están en el lateral, y las vistas divididas se abren en la pantalla interior. Poner una captura de iPhone en un marco Duo muestra la app como algo que no es; no lo hagas. Si no hay capturas Duo, haz los conjuntos de iPhone e indica al usuario qué debe capturar para Duo (style.md §10).
• El atenuado es una capa separada. Lo único que se aplica a la pantalla es la capa .phone.dim; los píxeles no cambian.
• La decoración proviene del contexto. Los objetos 3D repiten el tema de la app. No tomes prestadas insignias de campañas, cintas, lenguaje de descuentos ni signos más y corazones aleatorios de conjuntos de compras; hacen que cada app parezca un anuncio de tienda.
• La generación con IA o 3D es solo para objetos y el símbolo del héroe, nunca con un teléfono o interfaz dentro.
• No se dibuja hardware no verificado. El marco Duo no tiene cámara, bisagra ni botones; sus posiciones no están verificadas.
• Sin logotipos ni nombres de otras marcas.
• Afirmaciones de superioridad ("el mejor", "número 1") solo con una fuente. Sin una, escribe un beneficio, no una afirmación.
• La barra de estado se mantiene tal como está en la captura bruta.

Entradas y valores predeterminados

Entrada	Valor predeterminado
Capturas brutas de iPhone	raw/ (1206×2622 o más grandes), mostradas en ambos temas. O raw-light/ y raw-dark/: la app en modo claro y oscuro, mismos nombres de archivo y tamaños; cada tema muestra entonces el suyo (style.md §9).
Capturas brutas Duo	raw-duo-outer/ (pantalla exterior) y raw-duo-inner/ (pantalla interior), mismo orden y nombres de archivo; por apariencia raw-duo-outer-light/, raw-duo-outer-dark/, etc. Sin ellas, no se generan conjuntos Duo.
Carpeta de salida	out/
Conjuntos de dispositivos	iPhone 6,9" (1320×2868) y 6,3" (1206×2622): ambos son necesarios (style.md §4). Con capturas Duo, Duo exterior (1398×2034) e interior (2007×2853).
Idioma	El idioma de las capturas brutas. Los titulares se escriben por idioma; los recortes se miden de las capturas de ese idioma.
Tema	both: claro y oscuro. Si el usuario nombra uno, haz solo ese.
Colores	Derivados de las capturas brutas (style.md §1, §9)
Mensajes y símbolos 3D	Los derivas de las capturas brutas (style.md §6, §8)

Salida: <out>/<lang>/<theme>/<device>/01.png … NN.png. El tema es light o dark; el dispositivo es iphone-6.9, iphone-6.3, duo-outer o duo-inner. Los archivos HTML de origen y las vistas previas permanecen en <out>/.src/; no los elimines, para que el usuario pueda cambiar el texto y renderizar de nuevo. Si la carpeta de salida ya contiene archivos de otro conjunto, no los toques; si algo choca, elige una subcarpeta nueva e indícalo.

Archivos

• references/style.md: roles de color, fondo, titular, dispositivos, técnicas de resaltado, objetos 3D del contexto, héroe, tono del texto, tema oscuro, iPhone Duo.
• assets/panorama.html: la plantilla. Marcos de dispositivo (iPhone, Duo exterior, Duo interior), titular, recortes (tarjeta emergente, foco, marco, chip), atenuado, objetos 3D esponjosos (.obj: creciente, estrella, chispa, burbuja, play, nota, corazón, orbe, o tu propia ruta), el objeto héroe y las carpetas brutas por tema (RAW) están listos; las medidas de diseño son fijas. Cópiala y edita solo la paleta, las formas de fondo, las imágenes y RAW.
• scripts/render.mjs: divide el panorama en PNGs. node <skill>/scripts/render.mjs <panorama.html> --out <dir> --theme light|dark --device iphone|duo-outer|duo-inner [--size WxH] [--preview <png>] [--only 2,5] [--no-slices]. El tamaño predeterminado de cada dispositivo es uno que App Store Connect acepta; para iPhone el predeterminado es 6,9", pasa --size 1206x2622 para 6,3". El campo warnings de su salida JSON enumera problemas de tamaño, relación y alfa, errores de página, y advertencias de contraste y recorte (WARN:).
• scripts/grid.mjs: dibuja una cuadrícula de píxeles etiquetada y cajas de prueba sobre una captura bruta, para medir recortes. node <skill>/scripts/grid.mjs raw/02.png --out <png> [--box x,y,w,h]. Un recorte adivinado a ojo se desvía una vez escalado, así que mide cada recorte en la cuadrícula.

Necesita Node 18+ y Chrome (o Chromium, Edge, Brave); configura CHROME_PATH si no se encuentra. La fuente del titular es SF Pro Display en macOS e Inter (Google Fonts) en otros sistemas.

Flujo de trabajo

1. Inspecciona las capturas brutas. Verifica el tamaño en píxeles de cada archivo, para qué sirve cada pantalla y el texto en ella. Anota el tema y los símbolos de la app: icono, iconos de pestañas, ilustraciones en las pantallas. Los objetos 3D y el símbolo del héroe se eligen a partir de estos. Elige el acento (A): el color de los botones, la pestaña seleccionada o el logotipo. Deriva la paleta a partir de A como en style.md §1. Para muestrear colores, usa magick <png> -format "%[hex:p{x,y}]" info: o la imagen de la cuadrícula. Verifica si las carpetas Duo existen y tienen los tamaños correctos (style.md §10). Verifica qué carpetas brutas existen y elige la carpeta de cada tema (style.md §9). Con carpetas claro y oscuro, verifica que tengan los mismos nombres de archivo con los mismos tamaños de píxel y muestren el mismo estado (contenido, posición de desplazamiento, hora).
2. Planifica el conjunto en tu cabeza; no lo escribas. Orden: el héroe, luego las pantallas en orden de valor. Para cada imagen, decide: el titular, el color de la zona del titular (A o el segundo fondo, en grupos de 2–3), la técnica de resaltado principal y la parte que recortar. La parte que demuestre el punto de la pantalla es el resaltado principal. Luego distribuye los objetos 3D sobre las uniones. Los conjuntos Duo cuentan la misma historia: mismo orden, titulares, paleta y símbolos.
3. Mide los recortes. Ejecuta grid.mjs para cada parte, mira la imagen, prueba la caja con --box y vuelve a mirar. La caja debe abrazar el elemento con un poco de aire, no cortar texto y no tomar UI vecina. Mide también el radio de esquina de la tarjeta (data-r). Mide los recortes Duo por separado, desde sus propios archivos brutos. Mide en las capturas claras. Con una carpeta oscura, prueba las mismas cajas en las oscuras también (grid.mjs raw-dark/02.png --box …): los recortes se comparten, así que deben abrazar el mismo elemento en ambas.
4. Construye el panorama de iPhone. Copia assets/panorama.html a <out>/.src/panorama.html:
   • Cambia la paleta en :root.
   • Configura RAW en el script: { light: 'raw-light', dark: 'raw-dark' } con dos carpetas, { light: 'raw', dark: 'raw' } con una. Escribe cada ruta con la carpeta clara; el render oscuro la intercambia.
   • Escribe un <section class="shot"> para cada imagen. Proporciona data-raw para los recortes; las rutas son relativas a la carpeta .src donde está el HTML (../../raw/… cuando la salida está en out/, ../../../raw/… para out/x/). Los valores de recorte y color en la plantilla son solo ejemplos; mide todos para esta app.
   • Dibuja las formas de fondo en svg.bg, en coordenadas del panorama: decide primero la secuencia de colores de las zonas de titular, luego traza las formas para que coincidan.
   • Coloca los objetos 3D en las uniones como hijos directos de .pano. Coloca el objeto héroe en la primera sección.
   • Elimina las secciones y objetos de ejemplo.
5. Construye los panoramas Duo (si hay capturas Duo). Copia el panorama de iPhone a .src/panorama-duo-outer.html y .src/panorama-duo-inner.html y adáptalos como en style.md §10: los mismos titulares, paleta y símbolos; nuevos recortes; tarjetas, objetos y formas de fondo distribuidas de nuevo para la altura de diseño; RAW configurado con las carpetas Duo (por ejemplo, { light: 'raw-duo-outer-light', dark: 'raw-duo-outer-dark' }).
6. Renderiza. Una ejecución por tema y dispositivo (para oscuro, --theme dark y dark):

   R=<skill>/scripts/render.mjs; S=<out>/.src; O=<out>/<lang>/light
   node $R $S/panorama.html          --theme light --device iphone    --out $O/iphone-6.9 --preview $S/preview-light.png
   node $R $S/panorama.html          --theme light --device iphone    --out $O/iphone-6.3 --size 1206x2622
   node $R $S/panorama-duo-outer.html --theme light --device duo-outer --out $O/duo-outer --preview $S/preview-light-duo-outer.png
   node $R $S/panorama-duo-inner.html --theme light --device duo-inner --out $O/duo-inner --preview $S/preview-light-duo-inner.png
   

   Corrige cada advertencia; para una advertencia de contraste, ajusta la paleta. Cada imagen es su propia ejecución de Chrome (~10 s). Mientras corriges, renderiza solo las imágenes cambiadas con --only 2,5, o solo la vista previa con --no-slices --preview …; renderiza todo desde cero antes de la entrega.
7. Revisa y corrige. Mira primero las vistas previas, luego cada imagen, y repasa la lista de verificación. Corrige y renderiza de nuevo. No entregues una imagen que no hayas mirado: un recorte desplazado, una curva detrás de un titular o un objeto que cubre una tarjeta solo se ven en la imagen. El conjunto de 6,3" es el conjunto de 6,9" escalado hacia abajo; con mirar uno es suficiente, pero verifica el número de archivos y el tamaño de ambos.
8. Entrega. Indica brevemente las carpetas, los conjuntos de dispositivos, el número de imágenes, el titular de cada imagen y qué carpeta bruta usó cada tema. Si una captura oscura mostraba un estado diferente, nombra las pantallas para volver a tomar. Si no se hicieron conjuntos Duo, explica por qué y qué se necesita capturar. Menciona que cambiar el texto solo requiere editar el HTML en .src/ y ejecutar los comandos del paso 6.

Si se proporciona un conjunto de referencia

Si el usuario da las capturas de tienda de otra app como referencia, reemplaza los valores de diseño en style.md con las medidas de ese conjunto:

• Mira las imágenes una por una, luego una al lado de la otra, y mídelas a resolución completa: fondo y continuidad, titular, dispositivo, técnicas de resaltado, decoración, imágenes especiales, ritmo y tono.
• No agregues nada que la referencia no tenga.
• Si la relación de aspecto de la referencia difiere de la de la salida, traslada las medidas de forma relativa al ancho. Fija los elementos en la parte superior a la parte superior y los elementos cortados en la parte inferior a la parte inferior.
• Toma solo el estilo y el diseño de la referencia. Nunca copies su logotipo, nombre de marca, mascota, fotos o texto. Traduce también su decoración al contexto propio de la app.
• Tampoco escribas archivos para las medidas.

Lista de verificación

• ¿Están vacíos los warnings para cada tema y dispositivo? ¿Cada archivo tiene el tamaño correcto, sin canal alfa? ¿Cada conjunto de dispositivos tiene el mismo número de imágenes?
• En las vistas previas, ¿las formas de fondo y los objetos de unión continúan a través de cada unión?
• ¿Hay una curva en la zona del titular (y 0–650)? ¿Los colores del titular coinciden con su fondo y cambian en grupos de 2–3?
• ¿El titular tiene el mismo tamaño en cada imagen? ¿Algún titular que no sea el del héroe ocupa más de 2 líneas?
• ¿El dispositivo está en el mismo lugar en cada imagen? ¿Alguna parte importante de la interfaz está debajo de las esquinas redondeadas o de la Isla Dinámica?
• ¿Cada recorte muestra exactamente lo que debe? ¿Hay texto cortado o fragmentos de UI vecina en sus bordes? ¿La tarjeta se ve nítida?
• ¿El borde de una tarjeta emergente corta una línea de texto en la pantalla atenuada debajo de ella por la mitad? ¿Se ve texto a través de los huecos de una cuadrícula de tarjetas?
• Si el objeto héroe se derrama en la imagen 2, ¿toca una tarjeta o texto allí? ¿Las tarjetas del héroe se esconden detrás del borde, o parecen disolverse?
• ¿Los objetos 3D provienen del tema de la app? ¿Cubren el titular, una tarjeta o texto importante de la interfaz? ¿Máximo 2 objetos por imagen?
• ¿El símbolo es reconocible en el héroe? ¿Las tarjetas están dentro de él o delante de él?
• ¿El tema oscuro es predominantemente oscuro (sin área grande plana de A; A solo en titulares, objetos y marcos)? ¿El borde del dispositivo, las tarjetas y los objetos se destacan del fondo? ¿El diseño es el mismo en ambos temas?
• Con capturas en modo oscuro: ¿el conjunto oscuro muestra la interfaz oscura en el dispositivo y en cada recorte, y el conjunto claro la interfaz clara? ¿Cada recorte compartido muestra el mismo elemento en ambos?
• En los conjuntos Duo, ¿cada pantalla proviene de una captura bruta Duo? ¿Las tarjetas, objetos y formas de fondo encajan en el lienzo corto del Duo; el borde inferior del dispositivo o alguna tarjeta está cortado? ¿La pestaña lateral y la barra de estado sobreviven correctamente a los recortes?
• ¿Los caracteres específicos del idioma son correctos (por ejemplo, turco İ, ı, ş, ğ)? (<html lang> debe coincidir con el idioma.)