O problema: 20 apps, 20 marcas, centenas de screenshots

Há alguns anos, eu trabalhava como desenvolvedor em uma startup onde construíamos um app mobile whitelabel. Uma base de código, mas 20 clientes diferentes — cada um com sua própria identidade visual, cores, logos e listagens na App Store. Cada um precisava de seu próprio conjunto de screenshots polidos para a App Store e o Google Play.

Se você já publicou um app, conhece a rotina: a Apple quer screenshots para cada tamanho de dispositivo (6.7", 6.5", 5.5", iPad Pro, iPad...), o Google Play quer seu próprio conjunto, e se você suporta múltiplos idiomas, multiplique tudo de novo. Agora multiplique isso por 20 clientes.

Estamos falando de milhares de screenshots que precisavam ser gerados, enquadrados em mockups de dispositivos, marcados com as cores corretas e enviados — a cada ciclo de release.

O que tínhamos: screenshots automatizados no pipeline

Os screenshots brutos em si não eram o problema. Tínhamos essa parte resolvida. Nossos testes de UI, rodando em nosso pipeline GitLab CI, lançavam cada variante do app, navegavam pelas telas principais e capturavam screenshots automaticamente. O snapshot do Fastlane (iOS) e o screengrab (Android) faziam o trabalho pesado.

Então tínhamos centenas de arquivos PNG brutos chegando em nossos artefatos de pipeline após cada build. Ótimo. Mas screenshots brutos não vão para a App Store. Eles precisam ser processados — colocados dentro de molduras de dispositivo, receber um fundo que combine com a marca do cliente, sobrepostos com textos de marketing e exportados nas dimensões exatas de pixel que cada loja exige.

Os pontos de dor

1. O gargalo do designer

Nosso designer era talentoso, mas pedir que atualizasse manualmente os arquivos Figma para 20 marcas a cada release era absurdo. Ele passava dias apenas trocando screenshots e ajustando cores. E se um cliente mudasse sua identidade visual no meio do ciclo? Começar tudo de novo.

2. Sem tempo para construir ferramentas internas

Éramos uma startup. Cada sprint estava repleto de funcionalidades, correções de bugs e solicitações de clientes. Construir um serviço interno de processamento de screenshots — com um sistema de templates, renderização de molduras de dispositivo, sobreposição de texto e exportação específica para cada loja — era um projeto de meses que simplesmente não podíamos justificar. Precisávamos entregar produto, não ferramentas.

3. Trabalho manual que não escalava

Por um tempo, tentamos uma abordagem semi-manual: o designer criava templates, um script os processava em lote, e alguém verificava e enviava manualmente. Mas isso quebrava constantemente. Uma fonte estaria errada, uma moldura não alinhava, o texto transbordava em alemão mas parecia correto em inglês. Cada caso extremo se tornava um problema urgente.

4. A integração no pipeline era a peça faltante

Queríamos um fluxo totalmente automatizado: código é enviado, pipeline executa testes, screenshots são capturados, screenshots são processados com o branding correto, e o Fastlane os envia para as lojas. A peça faltante era sempre a etapa de processamento. Não havia nenhum serviço que pudéssemos simplesmente chamar do nosso pipeline CI com uma API.

Como resolvemos

Essa frustração é exatamente por que o Screenshots Live existe. A ideia era simples: um serviço de processamento que pega screenshots brutos, aplica templates criados por designers com molduras de dispositivos e branding, e retorna imagens prontas para as lojas — tudo via uma simples chamada de API que se encaixa em qualquer pipeline CI/CD.

A integração GitLab + Fastlane

Veja como ficou nosso pipeline após integrar o Screenshots Live:

Estágio de Build & Teste: O GitLab CI constrói o app para cada variante whitelabel. Os testes de UI rodam e capturam screenshots brutos usando Fastlane snapshot / screengrab.
Estágio de Processamento de Screenshots: Um script simples percorre os screenshots capturados, chama o Screenshots Live com o ID de template correto e parâmetros de branding para cada cliente, e baixa as imagens processadas.
Estágio de Upload: Fastlane deliver (iOS) e supply (Android) enviam os screenshots processados para as respectivas lojas.

Todo o fluxo — desde o push do código até os screenshots prontos para a loja — tornou-se totalmente automatizado. Sem envolvimento do designer para releases de rotina. Sem QA manual de layouts de screenshots. Sem urgências quando um cliente solicitava um hotfix release às 17h de uma sexta-feira.

O que mudou

Economia de tempo

O que costumava levar 2 a 3 dias do nosso designer por ciclo de release agora leva zero tempo humano. O pipeline cuida de tudo. Para 20 apps com releases quinzenais, são aproximadamente 40 a 60 dias-designer economizados por ano — tempo que nosso designer poderia gastar em design real de produto em vez de montagem repetitiva de screenshots.

Consistência

Cada screenshot, para cada cliente, para cada tamanho de dispositivo, segue exatamente o mesmo template. Sem mais problemas do tipo "a versão iPhone 15 Pro Max tem o texto ligeiramente desalinhado". Os templates são perfeitos ao pixel, e são aplicados de forma consistente toda vez.

Independência do designer

Nosso designer podia atualizar templates quando quisesse — novas molduras de dispositivos, textos de marketing atualizados, designs sazonais — sem precisar de envolvimento dos desenvolvedores. Ele atualizava o template no editor visual, e a próxima execução do pipeline o pegava automaticamente.

Onboarding de clientes

Adicionar um novo cliente whitelabel passou de "agendar 2 dias de trabalho de design" para "criar uma nova variante de template com as cores e logo deles". O pipeline cuidava do resto.

Por que estamos disponibilizando

Após usar isso internamente e ver quanto tempo economizava, percebemos que este não era um problema único. Todo desenvolvedor de app que publica na App Store ou no Google Play lida com geração de screenshots. Desenvolvedores whitelabel têm a situação mais difícil, mas até mesmo uma equipe de app único com suporte a múltiplos idiomas enfrenta o mesmo problema multiplicador.

Então nós o limpamos, construímos uma API adequada com documentação, adicionamos um editor de templates que não-desenvolvedores podem usar e o abrimos. Se você está gastando horas criando manualmente screenshots da App Store, ou se seu pipeline tem uma lacuna entre "capturar screenshots" e "enviar para a loja", o Screenshots Live preenche essa lacuna.

Nós o construímos porque precisávamos. Estamos compartilhando porque sabemos que você também precisa.