El problema: 20 apps, 20 marcas, cientos de capturas de pantalla

Hace unos años, trabajaba como desarrollador en una startup donde construimos una app móvil whitelabel. Un solo código base, pero 20 clientes diferentes — cada uno con su propia marca, colores, logos y listados en el App Store. Cada uno necesitaba su propio conjunto de capturas de pantalla pulidas para App Store y Google Play.

Si alguna vez has publicado una app, conoces el proceso: Apple quiere capturas para cada tamaño de dispositivo (6,7", 6,5", 5,5", iPad Pro, iPad...), Google Play quiere su propio conjunto, y si soportas múltiples idiomas, multiplica todo otra vez. Ahora multiplica eso por 20 clientes.

Estamos hablando de miles de capturas de pantalla que necesitaban ser generadas, enmarcadas en mockups de dispositivos, marcadas con los colores correctos y subidas — en cada ciclo de lanzamiento.

Lo que teníamos: Capturas automatizadas en el pipeline

Las capturas de pantalla en bruto no eran el problema. Eso lo teníamos resuelto. Nuestros tests de UI, ejecutándose en nuestro pipeline de GitLab CI, lanzaban cada variante de la app, navegaban por las pantallas clave y capturaban screenshots automáticamente. El snapshot de Fastlane (iOS) y screengrab (Android) hacían el trabajo pesado.

Así que teníamos cientos de archivos PNG aterrizando en los artefactos de nuestro pipeline después de cada build. Genial. Pero las capturas en bruto no van al App Store. Necesitan ser procesadas — colocadas dentro de marcos de dispositivos, con un fondo que coincida con la marca del cliente, superpuestas con texto de marketing y exportadas en las dimensiones exactas que cada tienda requiere.

Los puntos de dolor

1. El cuello de botella del diseñador

Nuestro diseñador era talentoso, pero pedirle que actualizara manualmente archivos de Figma para 20 marcas en cada lanzamiento era absurdo. Pasaba días simplemente intercambiando capturas y ajustando colores. ¿Y si un cliente cambiaba su branding a mitad de ciclo? Empezar de nuevo.

2. Sin tiempo para herramientas internas

Éramos una startup. Cada sprint estaba lleno de funcionalidades, corrección de errores y solicitudes de clientes. Construir un servicio interno de procesamiento de capturas — con sistema de plantillas, renderizado de marcos de dispositivos, superposición de texto y exportación específica por tienda — era un proyecto de meses que simplemente no podíamos justificar. Necesitábamos entregar producto, no herramientas.

3. Trabajo manual que no escalaba

Durante un tiempo, intentamos un enfoque semi-manual: el diseñador creaba plantillas, un script las procesaba por lotes, y alguien las verificaba y subía manualmente. Pero esto fallaba constantemente. Una fuente estaba mal, un marco no se alineaba, el texto se desbordaba en alemán pero se veía bien en inglés. Cada caso especial se convertía en una emergencia.

4. La integración del pipeline era la pieza faltante

Queríamos un flujo totalmente automatizado: se hace push del código, el pipeline ejecuta tests, se capturan screenshots, los screenshots se procesan con el branding correcto, y Fastlane los sube a las tiendas. La pieza faltante siempre fue el paso de procesamiento. No había ningún servicio que pudiéramos llamar desde nuestro pipeline CI con una API.

Cómo lo solucionamos

Esta frustración es exactamente la razón por la que existe Screenshots Live. La idea era simple: un servicio de procesamiento que toma capturas en bruto, aplica plantillas creadas por diseñadores con marcos de dispositivos y branding, y devuelve imágenes listas para la tienda — todo mediante una simple llamada API que encaja en cualquier pipeline CI/CD.

La integración GitLab + Fastlane

Así es como se veía nuestro pipeline después de integrar Screenshots Live:

Etapa de Build y Test: GitLab CI construye la app para cada variante whitelabel. Los tests de UI se ejecutan y capturan screenshots usando Fastlane snapshot / screengrab.
Etapa de procesamiento de screenshots: Un script simple recorre las capturas capturadas, llama a Screenshots Live con el ID de plantilla y los parámetros de branding correctos para cada cliente, y descarga las imágenes procesadas.
Etapa de subida: Fastlane deliver (iOS) y supply (Android) suben las capturas procesadas a las tiendas respectivas.

Todo el flujo — desde el push de código hasta capturas listas para la tienda — se automatizó completamente. Sin intervención del diseñador para lanzamientos rutinarios. Sin QA manual de layouts de capturas. Sin emergencias cuando un cliente pedía un hotfix release a las 5 PM de un viernes.

Lo que cambió

Ahorro de tiempo

Lo que antes tomaba a nuestro diseñador 2-3 días por ciclo de lanzamiento ahora toma cero tiempo humano. El pipeline maneja todo. Para 20 apps lanzando cada dos semanas, eso son aproximadamente 40-60 días de diseñador ahorrados por año — tiempo que nuestro diseñador podía dedicar al diseño real de producto en lugar del ensamblaje repetitivo de capturas.

Consistencia

Cada captura, para cada cliente, para cada tamaño de dispositivo, sigue exactamente la misma plantilla. No más problemas de "la versión del iPhone 15 Pro Max tiene el texto ligeramente desalineado". Las plantillas son pixel-perfect, y se aplican consistentemente cada vez.

Independencia del diseñador

Nuestro diseñador podía actualizar plantillas cuando quisiera — nuevos marcos de dispositivos, texto de marketing actualizado, diseños de temporada — sin necesitar la intervención de desarrolladores. Actualizaba la plantilla en el editor visual, y la siguiente ejecución del pipeline lo recogía automáticamente.

Incorporación de clientes

Añadir un nuevo cliente whitelabel pasó de "programar 2 días de trabajo de diseño" a "crear una nueva variante de plantilla con sus colores de marca y logo". El pipeline se encargaba del resto.

Por qué lo estamos haciendo disponible

Después de usarlo internamente y ver cuánto tiempo ahorraba, nos dimos cuenta de que este no era un problema único nuestro. Cada desarrollador de apps que publica en el App Store o Google Play lidia con la generación de capturas. Los desarrolladores whitelabel lo tienen peor, pero incluso un equipo de una sola app con soporte multiidioma enfrenta el mismo problema multiplicador.

Así que lo limpiamos, construimos una API con documentación, añadimos un editor de plantillas que los no-desarrolladores pueden usar, y lo abrimos. Si estás gastando horas creando manualmente capturas de App Store, o si tu pipeline tiene una brecha entre "capturar screenshots" y "subir a la tienda", Screenshots Live llena ese hueco.

Lo construimos porque lo necesitábamos. Lo compartimos porque sabemos que tú también lo necesitas.