Skip to content
NodeJS cli to create the App Store and Google Play screenshots with different themes and devices.
HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows
apps
dist
doc/images
src
test
.eslintignore
.eslintrc
.gitignore
.nvmrc
.prettierrc
LICENSE
README.md
package-lock.json
package.json
sonar-project.properties

README.md

CDKit: App Stores Design Automation

CDKit is a 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. com.company.app):
mkdir app/com.company.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}

Example:

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

Themes

List of themes

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

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

Available

iOS

Android

TODO

  • 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.)
You can’t perform that action at this time.