| name | asc-app-shots |
| description | App Store screenshot design, theming, and generation skill with three workflows:
(A) Template-based: browse templates, apply to screenshots, optionally enhance with Gemini AI.
(B) Gallery mode: multi-screen coordinated sets from gallery templates.
(C) Themed: apply visual themes (AI-generated ThemeDesign) on top of templates.
Use this skill when:
(1) User asks to "create App Store screenshots", "design screenshots", or "enhance screenshot"
(2) User mentions "templates", "app-shots", "screenshot marketing", "compose screenshots"
(3) User wants to browse/preview/apply screenshot templates or gallery templates
(4) User wants to apply visual themes (cartoon, luxury, space, zen, neon, etc.) to screenshots
(5) User asks about "ThemeDesign", "theme design", "apply theme", or "gallery templates"
|
asc-app-shots: App Store Screenshot Designer
Three workflows:
| A: Templates | B: Gallery | C: Themed |
|---|
| Flow | Browse → apply → generate | Gallery template → all screens | Template → ThemeDesign → apply |
| Screens | Single | Multi (hero + features) | Per-slide |
| AI | Optional (Gemini enhance) | Optional | 1 AI call for design, rest deterministic |
Workflow A — Single Template
Browse templates, apply to a screenshot, optionally enhance with Gemini AI.
Step 1 — Browse and apply
asc app-shots templates list --output table
asc app-shots templates get --id top-hero --preview > preview.html && open preview.html
asc app-shots templates apply \
--id top-hero --screenshot screen.png --headline "Ship Faster" \
--preview html > composed.html && open composed.html
asc app-shots templates apply \
--id top-hero --screenshot screen.png --headline "Ship Faster" \
--preview image --image-output marketing.png
Step 2 — Enhance with Gemini AI (optional)
asc app-shots generate --file marketing.png
asc app-shots generate --file marketing.png --device-type APP_IPHONE_67
asc app-shots generate --file marketing.png --style-reference inspiration.png
asc app-shots generate --file marketing.png --prompt "warmer colors, deeper shadows"
Workflow B — Gallery Templates
Coordinated multi-screen sets (hero + feature screens).
asc app-shots gallery-templates list --output table
asc app-shots gallery-templates get --id neon-pop --preview > gallery.html && open gallery.html
asc app-shots gallery-templates get --id neon-pop --pretty
Gallery templates include sample content (headlines, badges, trust marks) ready to customize.
Workflow C — Themed Screenshots
Apply visual themes on top of templates. Two-step flow: generate ThemeDesign once (1 AI call), then apply deterministically to any number of screenshots.
Step 1 — Browse themes
asc app-shots themes list --output table
asc app-shots themes get --id luxury --pretty
asc app-shots themes get --id luxury --context
Step 2 — Generate ThemeDesign (1 AI call, reusable)
asc app-shots themes design --id luxury > design.json
Returns JSON with palette (background + textColor) and decorations (floating elements with animations).
Step 3 — Apply ThemeDesign (deterministic, no AI)
asc app-shots themes apply-design \
--design design.json --template top-hero \
--screenshot screen.png --headline "Ship Faster" \
--preview html > themed.html
asc app-shots themes apply-design \
--design design.json --template top-hero \
--screenshot screen.png --headline "Ship Faster" \
--preview image --image-output themed.png
Alternative: Full AI restyle (fallback)
asc app-shots themes apply \
--theme luxury --template top-hero \
--screenshot screen.png --headline "Ship Faster"
Per-slide AI restyle — slower but more creative. Falls back to this when design isn't available.
Command Reference
See references/commands.md for full flag tables.
Templates
asc app-shots templates list [--size portrait] [--preview] [--output table]
asc app-shots templates get --id <ID> [--preview]
asc app-shots templates apply --id <ID> --screenshot <FILE> --headline <TEXT> [--preview html|image]
Gallery Templates
asc app-shots gallery-templates list [--output table]
asc app-shots gallery-templates get --id <ID> [--preview]
Themes
asc app-shots themes list [--output table]
asc app-shots themes get --id <ID> [--context]
asc app-shots themes design --id <ID>
asc app-shots themes apply-design --design <FILE> --template <ID> --screenshot <FILE> --headline <TEXT>
asc app-shots themes apply --theme <ID> --template <ID> --screenshot <FILE> --headline <TEXT>
Generate (Gemini AI)
asc app-shots generate --file <FILE> [--device-type <TYPE>] [--style-reference <FILE>] [--prompt <TEXT>]
Export & Config
asc app-shots export --html <FILE> --output <PNG>
asc app-shots config --gemini-api-key <KEY>
Available Templates
| Category | Templates |
|---|
| Bold | Top Hero, Bold CTA, Tilted Hero |
| Minimal | Minimal Light, Device Only |
| Elegant | Dark Premium, Sage Editorial, Cream Serif, Ocean Calm, Blush Editorial |
| Professional | Top & Bottom, Left Aligned, Bottom Text |
| Playful | Warm Sunset, Sky Soft, Cartoon Peach, Cartoon Mint, Cartoon Lavender |
| Showcase | Duo Devices (2), Triple Fan (3), Side by Side (2) |
Available Themes
| Theme | Style |
|---|
| Cartoon | Bold outlines, bright solid colors, playful shapes |
| Joyful | Confetti, sparkles, warm gradients |
| Holiday | Festive decorations, snowflakes |
| Zen | Calm, minimal, drifting leaves |
| Neon | Dark backdrop, glowing neon accents |
| Nature | Organic shapes, petals, watercolor |
| Retro | Vintage palette, geometric, 80s/90s |
| Space | Cosmic backgrounds, twinkling stars |
| Luxury | Gold accents, dark backgrounds, elegance |
Gemini API Key
Resolution order:
--gemini-api-key flag$GEMINI_API_KEY environment variable~/.asc/app-shots-config.json (via asc app-shots config)
Device Sizes
| Device Type | Width × Height | Required |
|---|
APP_IPHONE_69 | 1320 × 2868 | ✅ |
APP_IPHONE_67 | 1290 × 2796 | ✅ |
APP_IPHONE_65 | 1260 × 2736 | ✅ |
APP_IPAD_PRO_129 | 2048 × 2732 | ✅ |
