screenshot-ai

1.0.17 • Public • Published

ScreenshotAI

AI-powered App Store and Google Play screenshot designer. Upload your app screenshots, write a short brief, and get professional store-ready designs.

Quick Start

npm install
npm run dev

Opens at http://localhost:8090

Project Structure

index.html                  Landing page
dashboard.html              Prompt-first composer (new-project entry point)
results.html                Design canvas and renderer
assets/
  ai-prompt/
    system-prompt.md        AI system prompt v5 (Elite Design Intelligence)
    few-shot-examples.json  Example AI outputs with fact-checking
  emoji/
    emoji-catalog.json      250+ Twemoji SVGs across 25 categories
  badges/
    laurel_wreath.svg
  backgrounds/
    backgrounds.json        80+ gradient presets
  colors/
    palettes.json           Reference palettes (AI extracts from screenshots)
  typography/
    fonts.json              Google Font pairings
  floating/                 SVG decorative elements
    sparkles/
    geometric/
  assets-manifest.json      Complete asset inventory for AI
scripts/
  export.js                 Puppeteer PNG export (future)

How It Works

  1. User uploads app screenshots and writes a short brief in the dashboard composer
  2. AI analyzes uploaded screenshots to extract colors, mood, features
  3. AI outputs JSON design specs (layouts, text, decorations, badges)
  4. HTML/CSS renderer builds pixel-perfect designs from JSON
  5. Puppeteer captures designs as store-ready PNGs

Key Principles

  • No preset colors: AI extracts palette from actual app screenshots
  • No hallucinations: AI never fakes ratings, downloads, or reviews
  • HTML/CSS rendering: not AI images, pixel-perfect deterministic output
  • 250+ emojis across 25 categories via Twemoji CDN
  • 50+ decorative shapes (sparkles, blobs, glows, geometric)

Scripts

  • npm run dev - Start dev server with auto-open
  • npm start - Start server without auto-open
  • npm run export - Export designs to PNG via Puppeteer