All Projects

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

Claude Design Handoff

Skip Round 1 of Brand Discovery when arriving from Anthropic's Claude Design.

  • •Claude Design's color tokens, typography, and component primitives import directly
  • •Brand Discovery starts at Round 2 (Content) - features, slide count, languages
  • •Adapter is a planted slot today (lib/adapters/claude-design.js) - Claude Design's export schema is still research preview, so the importer throws SCHEMA_NOT_PUBLISHED and falls back to the 3-round flow gracefully
  • •When Anthropic publishes a stable export format, swapping in the real importer is a one-file change
Back to overview