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.

Devices

Frame Types

Themes

Slide Types

Stable

Status

Tech Stack

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

How It Works

💬Brand Discovery3 interactive rounds

App personality · Colors · Typography · Tone of voice

🎨Theme & Layout4 switchable themes

Minimal · Bold · Gradient · Glass

🖼Slide Generation11 slide types

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

📱Device Framing7 CSS-only frames · 21 resolutions

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

✍Marketing CopyProven techniques

Scene · Result · Relief · Narrative arc structure

📦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