screenshot-ai

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

• User uploads app screenshots and writes a short brief in the dashboard composer
• AI analyzes uploaded screenshots to extract colors, mood, features
• AI outputs JSON design specs (layouts, text, decorations, badges)
• HTML/CSS renderer builds pixel-perfect designs from JSON
• 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