#Screenshot Generator (Local-only)

Route:

  • /{locale}/{product}/screenshots-generator

This page is development-only (NODE_ENV=development) and returns 404 in production builds.

#Source Image Directory

The generator reads source images from:

  • public/products/{slug}/raw-screenshots/{locale}/phone
  • public/products/{slug}/raw-screenshots/{locale}/tablet

Example:

  • public/products/aurora-eos/raw-screenshots/en-US/phone/home.png
  • public/products/aurora-eos/raw-screenshots/en-US/tablet/home.png

Recommended file names:

  • home.png
  • capture.png
  • insights.png
  • shared.png
  • customize.png
  • reminder.png

#Per-product Customization

To manage copy/theme separately per product, create:

  • public/products/{slug}/raw-screenshots/screenshot-generator.config.json

To separate screenshot copy by locale only, add this file:

  • public/products/{slug}/raw-screenshots/{locale}/screenshot-generator.json

To sync locale input folders from the App Store / Google Play supported locales in ~/.config/pabal-mcp/registered-apps.json and generate final screenshot PNGs, run:

yarn screenshots:generate

The command lists apps in public/products and lets you select one by number. You can also pass a slug directly:

yarn screenshots:generate pabal

This command first prepares the raw-screenshots/{locale}/phone and raw-screenshots/{locale}/tablet input folders. It does not rewrite existing screenshot-generator.json copy files. Then it starts an internal Next dev server plus a Playwright browser, captures the same React/html-to-image output as the local generator UI, and saves PNG files here. You do not need to open localhost manually.

  • public/products/{slug}/screenshots/{locale}/phone/1.png
  • public/products/{slug}/screenshots/{locale}/tablet/1.png
  • public/products/{slug}/screenshots/{locale}/feature-graphic.png

Example config:

{
  "title": "Aurora EOS App Store Screenshots",
  "subtitle": "Localized marketing screenshots for weather intelligence",
  "statusLabel": "Export Status",
  "accentGradient": "linear-gradient(120deg, #0f172a 0%, #134e4a 55%, #0ea5e9 100%)",
  "theme": {
    "backgroundStart": "#0b1220",
    "backgroundEnd": "#12263a",
    "panel": "rgba(255,255,255,0.9)",
    "textPrimary": "#f8fafc",
    "textSecondary": "#cbd5e1",
    "accent": "#22c55e"
  },
  "slides": [
    {
      "fileName": "home.png",
      "headline": "Know tomorrow's aurora chance"
    },
    {
      "fileName": "capture.png",
      "headline": "Track Kp, cloud cover, and visibility"
    }
  ],
  "tabletSlides": [
    {
      "fileName": "home.png",
      "headline": "Know tomorrow's aurora chance"
    },
    {
      "fileName": "capture.png",
      "headline": "Track Kp, cloud cover, and visibility"
    },
    {
      "fileName": "insights.png",
      "headline": "Plan the night from a wider view"
    }
  ]
}

Locale copy example:

{
  "title": "Post Black Belt: BJJ Journal",
  "subtitle": "BJJ log & belt tracker",
  "slides": [
    {
      "fileName": "home.png",
      "headline": "Know what to train next after every session",
      "subheadline": "Clear next steps after every class."
    }
  ],
  "tabletSlides": [
    {
      "fileName": "home.png",
      "headline": "Review the training flow on a wider screen",
      "subheadline": "Tablet screenshots are generated as a 3-image set by default."
    }
  ]
}

#Notes

  • If slides is omitted, the generator auto-builds slide labels from file names.
  • Add tabletSlides to use iPad-only copy/file names. The generate script creates tablet content as a 3-image set by default.
  • If slides is omitted, the generator prioritizes this order: home.png, capture.png, insights.png, shared.png, customize.png, reminder.png.
  • screenshots:generate does not automatically overwrite existing screenshot-generator.json copy.
  • If a locale folder has no files, it falls back to default locale and then config.json screenshot metadata.
  • The local generator UI is for development preview/manual export. yarn screenshots:generate captures that same UI in an internal browser and writes PNG files.
Product PagesEmail Contact