Discussion reply from discuss-1770906513196

discuss-1770906513196-turn-2.md

Perfect! This clarifies everything. You're building an AI-agent-operated screenshot generator - way more interesting than just a script. Here's the architecture:

System Architecture

Two-Phase Pipeline

Phase 1: CAPTURE (new - iOS Simulator automation)

• Launch simulator for the project
• Navigate through key app screens
• Capture raw screenshots
• Extract app metadata (name, primary colors, icon)

Phase 2: GENERATE (your existing compositor + enhancements)

• Submission mode: Resize to exact App Store dimensions, no frills
• Display mode: Apply device frames, gradients, trending text styles

AI Agent Prompt Interface

The agent should be able to run a single command like:

ios-screenshot-gen /path/to/LMWFY --output-dir ./screenshots

This generates:

screenshots/
├── submission/          # App Store size requirements
│   ├── 6.9inch/        # iPhone 15 Pro Max
│   │   ├── 01-main.png
│   │   └── 02-detail.png
│   └── 6.5inch/        # iPhone 11 Pro Max (secondary)
└── display/            # Marketing screenshots
    ├── 01-main-hero.png
    ├── 02-detail-gradient.png
    └── config.json      # What was generated

Key Components to Build

1. Simulator Controller (lib/simulator.js)

// Launch app in simulator
async function launchApp(projectPath, simulator = 'iPhone 15 Pro')
// Navigate to screen (via deep link or UI automation)
async function navigateTo(screen)
// Capture screenshot
async function captureScreen(outputPath)
// Get app info (bundle ID, display name, colors)
async function getAppMetadata(projectPath)

2. App Store Size Config (lib/appstore-specs.js)

// Official App Store screenshot dimensions
const SPECS = {
  '6.9inch': { width: 1320, height: 2868 },  // Required
  '6.5inch': { width: 1242, height: 2688 },  // Secondary
  '6.7inch': { width: 1290, height: 2796 },  // Also common
  '5.5inch': { width: 1242, height: 2208 },  // Legacy support
}

3. Trend Detector (lib/trending-styles.js)

• Parse current App Store top apps
• Extract common patterns: gradient directions, font weights, layouts
• Generate style presets: "minimal-2024", "gradient-bold", "dark-premium"

4. AI Prompt Parser (lib/prompt-parser.js)

// Parse natural language → config
parsePrompt("generate screenshots for LMWFY with dark theme")
// Returns: { project: 'LMWFY', displayStyle: 'dark', ... }

What You Keep from Current System

Your existing compositor is perfect - just refactor it:

• createDeviceFrame() ✅ keep
• addTextOverlay() ✅ keep
• createBackground() ✅ keep
• Template processing → replace with real screenshots

What Changes

Before: HTML templates → Puppeteer → compositing After: iOS Simulator → screenshots → compositing

The compositing logic stays the same, just swap the input source.

Implementation Plan

Minimal V1 (1-2 days)

1. Simulator automation - capture raw screenshots from real app
2. Submission generator - resize to App Store specs (no frames)
3. Simple display generator - reuse your existing compositor

V2 Enhancements (1 week)

4. Trend detector - analyze top apps, generate style presets
5. AI prompt system - natural language → screenshot configs
6. Auto screen detection - figure out which screens to capture

V3 Polish (ongoing)

7. Web scraper - monitor App Store trends weekly
8. Template library - pre-made styles users can choose
9. Preview mode - show before generating

Tech Stack Recommendation

{
  "core": {
    "simulator": "xcrun simctl",        // iOS Simulator CLI
    "imageProcessing": "sharp",         // Keep what you have
    "automation": "appium" or "maestro" // UI navigation (optional)
  },
  "aiPromptParsing": {
    "llm": "call Claude API",           // Parse user intent
    "fallback": "simple keyword matching"
  },
  "trendDetection": {
    "scraping": "playwright",           // Scrape App Store web
    "analysis": "manual + AI vision"    // Identify design patterns
  }
}

File Structure

ios-screenshot-generator/
├── bin/
│   └── ios-screenshot-gen         # CLI entry point
├── lib/
│   ├── simulator.js               # Simulator automation
│   ├── compositor.js              # Your existing logic (refactored)
│   ├── appstore-specs.js          # Size requirements
│   ├── trending-styles.js         # Design trend presets
│   └── prompt-parser.js           # AI prompt interface
├── presets/
│   ├── minimal-2024.json
│   ├── gradient-bold.json
│   └── dark-premium.json
├── tests/
└── README.md

AI Agent Usage Example

Agent sees this prompt: "Generate App Store screenshots for LMWFY with trending gradient style"

Agent does:

1. Finds LMWFY project path
2. Runs: ios-screenshot-gen ~/projects/LMWFY --style trending-gradient
3. Tool outputs both submission + display screenshots
4. Agent uploads to App Store Connect or shares with you

Next Steps

Want me to:

1. Start building the simulator automation module?
2. Refactor your existing compositor into the new architecture?
3. Create the App Store specs config?
4. Build a simple CLI wrapper first so we can test the flow?

Which part should we tackle first?