Het probleem: 20 apps, 20 merken, honderden screenshots

Een paar jaar geleden werkte ik als ontwikkelaar bij een startup waar we een whitelabel mobiele app bouwden. Één codebase, maar 20 verschillende klanten — elk met hun eigen huisstijl, kleuren, logo's en App Store-lijsten. Elk van hen had hun eigen set gepolijste App Store- en Google Play-screenshots nodig.

Als je ooit een app hebt gepubliceerd, ken je de routine: Apple wil screenshots voor elke apparaatgrootte (6.7", 6.5", 5.5", iPad Pro, iPad...), Google Play wil zijn eigen set, en als je meerdere talen ondersteunt, vermenigvuldig je alles opnieuw. Vermenigvuldig dat nu met 20 klanten.

We hebben het over duizenden screenshots die gegenereerd, ingelijst in apparaatmockups, voorzien van de juiste kleuren en geüpload moesten worden — bij elke releasecyclus.

Wat we hadden: geautomatiseerde screenshots in de pipeline

De ruwe screenshots zelf waren niet het probleem. Dat hadden we opgelost. Onze UI-tests, draaiend in onze GitLab CI-pipeline, startten elke appvariant, navigeerden door de belangrijkste schermen en maakten automatisch screenshots. Fastlane's snapshot (iOS) en screengrab (Android) deden het zware werk.

Dus hadden we honderden ruwe PNG-bestanden die na elke build in onze pipeline-artefacten terechtkwamen. Prima. Maar ruwe screenshots gaan niet naar de App Store. Ze moeten worden verwerkt — geplaatst in apparaatframes, voorzien van een achtergrond die past bij het merk van de klant, overlaid met marketingtekst en geëxporteerd op de exacte pixelafmetingen die elke winkel vereist.

De pijnpunten

1. Het ontwerper-knelpunt

Onze ontwerper was getalenteerd, maar hem vragen om handmatig Figma-bestanden voor 20 merken bij te werken bij elke release was absurd. Hij besteedde dagen alleen maar aan het verwisselen van screenshots en het aanpassen van kleuren. En als een klant hun huisstijl halverwege de cyclus veranderde? Opnieuw beginnen.

2. Geen tijd om interne tools te bouwen

We waren een startup. Elke sprint zat vol met functies, bugfixes en klantverzoeken. Het bouwen van een interne screenshot-verwerkingsservice — met een sjabloonsysteem, apparaatframe-rendering, tekstoverlay en winkelspecifieke export — was een project van maanden dat we simpelweg niet konden rechtvaardigen. We moesten product leveren, geen tools.

3. Handmatig werk dat niet schaalde

Een tijdje probeerden we een semi-handmatige aanpak: de ontwerper maakte sjablonen, een script verwerkte ze in batch en iemand verificeerde en uploadte handmatig. Maar dit brak constant. Een lettertype was verkeerd, een frame richtte zich niet, de tekst overliep in het Duits maar zag er goed uit in het Engels. Elk randgeval werd een brandoefening.

4. Pipeline-integratie was het ontbrekende stuk

We wilden een volledig geautomatiseerde flow: code wordt gepusht, pipeline voert tests uit, screenshots worden gevangen, screenshots worden verwerkt met de juiste huisstijl en Fastlane uploadt ze naar de winkels. Het ontbrekende stuk was altijd de verwerkingsstap. Er was geen service die we gewoon vanuit onze CI-pipeline konden aanroepen via een API.

Hoe we het oplosten

Deze frustratie is precies waarom Screenshots Live bestaat. Het idee was simpel: een verwerkingsservice die ruwe screenshots neemt, door ontwerpers gemaakte sjablonen met apparaatframes en huisstijl toepast, en winkelklare afbeeldingen retourneert — allemaal via een eenvoudige API-aanroep die in elke CI/CD-pipeline past.

De GitLab + Fastlane-integratie

Zo zag onze pipeline eruit na de integratie van Screenshots Live:

Build- en testfase: GitLab CI bouwt de app voor elke whitelabel-variant. UI-tests draaien en vangen ruwe screenshots op met Fastlane snapshot / screengrab.
Screenshot-verwerkingsfase: Een eenvoudig script loopt door de gevangen screenshots, roept Screenshots Live aan met het juiste sjabloon-ID en huisstijlparameters voor elke klant, en downloadt de verwerkte afbeeldingen.
Uploadfase: Fastlane deliver (iOS) en supply (Android) uploaden de verwerkte screenshots naar de respectieve winkels.

De volledige flow — van code-push tot winkelklare screenshots — werd volledig geautomatiseerd. Geen betrokkenheid van de ontwerper voor routinematige releases. Geen handmatige QA van screenshot-lay-outs. Geen brandoefeningen wanneer een klant om een hotfix-release vroeg op vrijdag om 17:00.

Wat er veranderde

Tijdsbesparing

Wat onze ontwerper 2-3 dagen per releasecyclus kostte, kost nu nul menselijke tijd. De pipeline regelt alles. Voor 20 apps die tweewekelijks releasen, is dat ruwweg 40-60 ontwerpersdagen per jaar bespaard — tijd die onze ontwerper kon besteden aan echt productontwerp in plaats van repetitieve screenshot-montage.

Consistentie

Elke screenshot, voor elke klant, voor elke apparaatgrootte, volgt exact hetzelfde sjabloon. Geen problemen meer zoals "de iPhone 15 Pro Max-versie heeft de tekst iets scheef". De sjablonen zijn pixel-perfect en worden elke keer consistent toegepast.

Onafhankelijkheid van de ontwerper

Onze ontwerper kon sjablonen bijwerken wanneer hij wilde — nieuwe apparaatframes, bijgewerkte marketingtekst, seizoensontwerpen — zonder betrokkenheid van ontwikkelaars. Hij werkte het sjabloon bij in de visuele editor en de volgende pipeline-run pakte het automatisch op.

Klant-onboarding

Een nieuwe whitelabel-klant toevoegen ging van "plan 2 dagen ontwerpwerk" naar "maak een nieuwe sjabloonvariant met hun merkkleuren en logo". De pipeline regelde de rest.

Waarom we het beschikbaar stellen

Na dit intern te hebben gebruikt en te zien hoeveel tijd het bespaarde, realiseerden we ons dat dit geen uniek probleem van ons was. Elke app-ontwikkelaar die naar de App Store of Google Play publiceert, heeft te maken met screenshot-generatie. Whitelabel-ontwikkelaars hebben het het moeilijkst, maar zelfs een single-app-team met meertalige ondersteuning staat voor hetzelfde vermenigvuldigingsprobleem.

Dus hebben we het opgekuist, een goede API met documentatie gebouwd, een sjablooneditor toegevoegd die niet-ontwikkelaars kunnen gebruiken, en het opengesteld. Als je uren besteedt aan het handmatig maken van App Store-screenshots, of als je pipeline een gat heeft tussen "screenshots vangen" en "uploaden naar de winkel", vult Screenshots Live dat gat.

We hebben het gebouwd omdat we het nodig hadden. We delen het omdat we weten dat jij het ook nodig hebt.