Your AI Agent Can Build You a Real Screenshot Editor

What it does

This is not a static image generator. It is a skill that tells your AI coding agent to scaffold a complete Next.js editor where you arrange device frames, headlines, and decorative elements across a connected canvas, then export precise PNG crops in every required App Store and Google Play size. Project state lives in app-store-screenshots.json, so decks are git-trackable and resumable.

The interesting bit

The editor’s connected canvas lets you design the entire screenshot strip as one continuous surface, allowing elements to bleed across screen boundaries while still exporting each slide as an isolated, store-ready crop. It is essentially a lightweight design tool that your agent builds on demand.

Key highlights

• Scaffolds a full editor via natural-language prompts to your agent, not just a one-off page
• Connected canvas mode plus an isolated fallback for legacy decks
• One-click export bundles organized by platform, device, resolution, and locale
• RTL-aware copy guidance and reusable themes
• Example decks were accepted for a live App Store app (Bloom Coffee Shelf Recipe)

Caveats

• Requires an AI coding agent such as Claude Code or Cursor to scaffold and manage the project
• iPhone frames use a bundled mockup.png bezel, while Android frames are CSS-rendered, so visual fidelity may vary
• Source iPhone screenshots from the 6.1-inch simulator are recommended to minimize manual adjustment inside frames

Verdict

Indie developers and lean teams tired of wrangling Figma for store assets should look here; if you already have a design pipeline or do not use agentic coding tools, this will not fit your workflow.