ScreenCraft CLI

App Store launch kit from one terminal command.

npx screencraft launch

Generates App Store screenshots, layered PSDs, and a preview video — automatically branded from your codebase.

What it does

1. Detects your framework (Expo, React Native, Flutter, Swift, Android)
2. Reads brand colors + app name from your theme files — no config needed
3. Captures screenshots from the iOS/Android simulator (or uses ./screenshots/ folder)
4. Suggests App Store headline text via Claude AI — you approve each one
5. Composites screenshots into device mockups with your headline text baked in
6. Renders a 30s vertical preview video using your branded After Effects template
7. Outputs a complete /launch-kit/ folder in your project root

Output

your-app/
  launch-kit/
    screenshots/
      screen_01.png     ← App Store-ready PNG, 1290×2796px
      screen_02.png
      screen_03.png
      screen_04.png
      screen_05.png
    video/
      preview.mp4       ← 30s vertical preview (watermarked until activated)
    source/
      app-launch.aep    ← Editable After Effects project
      screen_01.psd     ← Layered PSD (Pro tier)
      ...
    README.md           ← App Store submission checklist

Tiers

| | Free | Launch ($49) | Pro ($99) | |---|---|---|---| | App Store PNGs | ✓ | ✓ | ✓ | | Preview video (clean) | watermarked | ✓ | ✓ | | After Effects file | — | ✓ | ✓ | | Layered PSDs | — | — | ✓ | | Social cut (1:1) | — | — | ✓ | | App Store copy | — | — | ✓ |

Quick Start

Option A — Automated (with simulator)

Add routes to screencraft.config.js in your project root:

module.exports = {
  app: {
    name: "YourApp",
    tagline: "Your tagline here.",
    cta: "Download Free",
  },
  screenshots: [
    { route: "/home",     label: "Everything at a glance" },
    { route: "/features", label: "Built for how you work" },
    { route: "/profile",  label: "Your space, your way" },
    { route: "/onboard",  label: "Get started in seconds" },
    { route: "/settings", label: "Simple and powerful" },
  ],
};

Then run:

npx screencraft launch

Option B — Manual screenshots (fastest for testing)

1. Take screenshots on your phone or simulator
2. Place them in ./screenshots/ in your project root
3. Run npx screencraft launch

The CLI will pick them up automatically.

Commands

npx screencraft launch                  # Full pipeline
npx screencraft launch --screenshots-only  # Free tier (no video)
npx screencraft activate MF-XXXX-XXXX  # Store license key
npx screencraft status                  # Check credits
npx screencraft init                    # Generate config file

Testing

# Test brand detection on your app project
node test/test_brand.js /path/to/your/app

# Test PSD compositor (add a screenshot first)
cp /path/to/screenshot.png test/sample_screenshot.png
node test/test_psd.js

Environment

ANTHROPIC_API_KEY=sk-ant-...     # For AI headline suggestions
SCREENCRAFT_API=https://...      # Override API endpoint
NODE_ENV=development             # Dev mode (accepts MF-* test keys)
SCREENCRAFT_DEV=1                # Also enables dev mode

Template Files (for motion designer)

Place these in templates/:

| File | Description | |------|-------------| | templates/device_frame.png | Transparent phone mockup overlay, 1130×1900px | | templates/screen_mask.png | White shape of screen area (for clipping) | | templates/app-launch.aep | After Effects template with swap layer naming |

See TEMPLATE_SPEC.md for the full AE build specification.

screencraft.dev