Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

CDKit: App Stores Design Automation

Build Status Quality Gate Status Security Rating Maintainability Rating

Bugs Code Smells Coverage Duplicated Lines (%)

CDKit is a DevOps framework that helps to deploy mobile apps (iOS and Android) to the app stores (iTunes and Google Play).

This tool create the App Store and Google Play screenshots with different themes and devices and it includes:

  • iOS and Android screenshots
  • Support for phones and tablets formats
  • Support for child themes
  • A HTML preview for all the screenshots generated with a magnifier!
  • Easy integration on CI/CD pipelines

App Stores Design Automation

Quick video

CDKit Design Automation demo

Getting started

Configure your screens

  1. Create a folder with your app bundle ID (ex.
mkdir app/
  1. Create a screens.json (see template below) and add configure each title, subtitle and source filename.

Example of a /app/{bundle ID}/screens.json

    "title": "Pipelines list",
    "subtitle": "Take care of your pipelines.",
    "screenshot": "pipelineList.png"
    "title": "Pipeline history",
    "subtitle": "Get the history of your pipelines.",
    "screenshot": "pipelineHistoryList.png"
    "title": "Console",
    "subtitle": "See why your build failed.",
    "screenshot": "consoleLog.png"
    "title": "Agents list",
    "subtitle": "Take a look at your Go Agents.",
    "screenshot": "agentList.png"
    "title": "Agents details",
    "subtitle": "Go Agent details and last jobs.",
    "screenshot": "agentDetails.png"
    "title": "Environments",
    "subtitle": "Pipelines, agents and variables.",
    "screenshot": "environmentDetails.png"
    "title": "Settings",
    "subtitle": "Configure the way you use the app.",
    "screenshot": "settings.png"
    "title": "Login",
    "subtitle": "Login to your GO.CD server.",
    "screenshot": "login.png"

Create a child theme

It's optional, but probably the default colors of the theme will not be the same as your design :)

You can create a child theme based on a theme to customize the colors, font and more!

See the Themes section to create your child theme.

Run the CLI

node src/cli.js --app {bundle ID} --platform {android|ios} --screenshots {path to your device screenshots}


node src/cli.js --app --platform ios --screenshots ~/screenshots


List of themes

For this early version, there is only one theme: default.


This theme allow you to customize:

  • device mockup (all available)
  • font file
  • background color
  • title color
  • title font size
  • subtitle color
  • subtitle font size

Create a child theme for your app

You can overwrite a theme for an app by changing the default values (font name, colors, background color, etc.).

To do that, you need to look at the theme configuration (theme.json under the folder /src/layouts/themes/{theme name}/) and add the value(s) that you want to customize.

Your theme will overwrite the defaults values of the theme that your app is using.

Example of a /app/{bundle ID}/theme.json

  "theme": "default",
  "backgroundColor": "#86569A",
  "font": "HelveticaNeueLight.ttf",
  "title": {
    "color": "#FFFFFF"
  "subtitle": {
    "color": "#C2AACC"

Device mockups





  • Add multi-languages support
  • Add more recent devices
  • Create more themes
  • Generate the HTML preview instead of using a static HTML file (needed for multi-languages support)
  • Extend the CLI with a wizard to create a new app (bundleID, theme to use, number of screenshots, etc.)


NodeJS cli to create the App Store and Google Play screenshots with different themes and devices.





No packages published