App Store Screenshots

AI skill that builds custom screenshot studios -generative, not templated. 21 devices, 7 frame types, 11 slide types

AI skill that builds custom screenshot generators from scratch.

  • 900+ line SKILL.md teaches AI assistants the full workflow
  • Every project gets unique, tailored JSX - generative, not templated
  • 7 CSS-only device frames across 21 resolutions (iPhone, iPad, Android, Watch)
  • 11 slide types including marketing-only (Award Hero, Testimonial, Stats)
  • Marketing copy engine with narrative arc (Scene, Result, Relief)
  • 4 switchable themes, multi-language with RTL, browser-side PNG export
Private RepositoryThis is a private repository. You need collaborator access to view the source code on GitHub.
21
Devices
7
Frame Types
4
Themes
11
Slide Types
Stable
Status

Tech Stack

Next.jshtml-to-imageSKILL.md (900+ lines)CSS Device Frames

How It Works

1
💬Brand Discovery3 interactive rounds

App personality · Colors · Typography · Tone of voice

2
🎨Theme & Layout4 switchable themes

Minimal · Bold · Gradient · Glass

3
🖼Slide Generation11 slide types

Hero · Feature · Social proof · CTA · Comparison · Award · Stats · Testimonial · Feature Grid

4
📱Device Framing7 CSS-only frames · 21 resolutions

iPhone 16 Pro · Pixel 9 · iPad · Apple Watch · Wear OS

5
Marketing CopyProven techniques

Scene · Result · Relief · Narrative arc structure

6
📦ExportBrowser-side rendering

App Store · Play Store · Multi-language · RTL · Exact resolution

Features

Generative, Not Templated

The AI writes custom JSX for every project - no templates.

  • No two apps produce the same code
  • Layout, colors, decorations, and typography derived from your brand
  • Product is a 900+ line SKILL.md instruction file

3-Round Brand Discovery

7–15 questions across three rounds.

  • Round 1 (Brand Identity) - screenshots location, colors, font, value prop
  • Round 2 (Content) - platforms, slide count, features, languages
  • Round 3 (Style) - mood, device frames vs edge-to-edge, badges

11 Slide Types

With-screenshot and marketing-only slide types.

  • Hero - large title + floating device
  • Caption Left/Right/Top/Bottom - text + device
  • Two Devices - layered/overlapping
  • Full Bleed - screenshot fills canvas
  • Marketing-only: Award/Rating, Testimonial, Feature Grid, Stats, Brand Story, Feature Pills

7 CSS-Only Device Frames

Pure CSS bezels with no image assets.

  • iPhone with Dynamic Island and bezel sheen
  • iPad with camera dot
  • Android Phone with punch-hole camera
  • Android Tablet (portrait + landscape)
  • Apple Watch with digital crown (Ultra variant included)
  • Wear OS with circular frame
  • 21 device resolutions total

Marketing Copy Engine

AI-written headlines using proven copywriting techniques.

  • Scene - reader pictures themselves ('Check your balance without unlocking')
  • Result - life after the problem ('A place for every receipt')
  • Relief - names and erases pain ('Never forget a dose again')
  • Anti-patterns auto-detected: feature lists, dual promises, buzzwords

Narrative Arc Structure

Slides follow a story structure, not random order.

  • Hero - main benefit, first impression
  • Differentiator - what competitors don't have
  • Features - one per slide, most important first
  • Trust - craft, identity, 'built for people who...'
  • Breadth - remaining features, coming soon

4 Switchable Themes

Multiple visual presets per project.

  • clean-light - white backgrounds, minimal
  • dark-premium - black gradients, glowing accents
  • warm-editorial - muted earth tones, serif titles
  • bold-gradient - vibrant colors, heavy typography
  • Theme picker in toolbar, all slides re-render instantly

Multi-Language with RTL

Locale picker with culturally adapted messaging.

  • Copy rewritten per market, not literally translated
  • Arabic, Hebrew, Farsi get dir='rtl' with mirrored layouts
  • Bulk export: every locale × device × theme combination

Browser-Side Export

Pixel-perfect PNG export via html-to-image.

  • Single click exports all slides at exact store-required resolutions
  • Double-render technique for clean font/image output
  • Zero-padded filenames that sort correctly
  • Output organized by platform/device/language for direct upload