@appscreenshotstudio/mcp 0.4.0 → 0.4.2

package/README.md

@@ -171,7 +171,8 @@ Once installed, use `/appscreenshotstudio` in Claude Code or just ask "generate
 | `iphone-6.9` | iPhone 16 Pro Max | 1260x2736 | App Store |
 | `ipad-13` | iPad Pro 13" | 2064x2752 | App Store |
 | `android-phone` | Android Phone | 1080x2340 | Play Store |
-| `android-tablet-10` | Android Tablet 10" | 2560x1600 | Play Store |
+| `android-tablet-10` | Android Tablet 7" | 1200x1920 | Play Store |
+| `apple-watch-ultra` | Apple Watch Ultra 2 | 410x502 | App Store |
 
 ## Design Features
 

package/dist/index.js

@@ -28,11 +28,13 @@ if (args[0] === 'install-skill') {
 const API_BASE = process.env.APPSCREENSHOTSTUDIO_URL || 'https://appscreenshotstudio.com';
 const API_KEY = process.env.APPSCREENSHOTSTUDIO_API_KEY;
 // ─── Devices (mirrors lib/device-specs.ts) ─────────────────────────────────────
+// ⚠️ Keep in sync: lib/device-specs.ts, mcp-server/README.md, docs/api page, docs/mcp page
 const DEVICES = [
     { id: 'iphone-6.9', name: 'iPhone 16 Pro Max', width: 1260, height: 2736, category: 'iphone', required: true },
     { id: 'ipad-13', name: 'iPad Pro 13"', width: 2064, height: 2752, category: 'ipad', required: true },
     { id: 'android-phone', name: 'Android Phone', width: 1080, height: 2340, category: 'android-phone', required: true },
-    { id: 'android-tablet-10', name: 'Android Tablet 10"', width: 2560, height: 1600, category: 'android-tablet', required: true },
+    { id: 'android-tablet-10', name: 'Android Tablet 7"', width: 1200, height: 1920, category: 'android-tablet', required: true },
+    { id: 'apple-watch-ultra', name: 'Apple Watch Ultra 2', width: 410, height: 502, category: 'apple-watch', required: true },
 ];
 const VALID_DEVICE_IDS = DEVICES.map(d => d.id);
 // ─── API helper ─────────────────────────────────────────────────────────────────
@@ -133,28 +135,30 @@ server.registerTool('generate-screenshots', {
 
 IMPORTANT: Before calling this tool, research the user's codebase to populate the codebase_context parameter. Search for: package.json/README (app name & description), theme/color config files (brand colors), route definitions (key screens), marketing copy (value proposition), and App Store metadata. The more context you provide, the better the screenshots will be. Call prepare-screenshot-brief first if you need a research checklist.
 
-Each card is a layered composition with: gradient background, decorative glow orbs, bold headline with colored accent words, device mockup (iPhone/iPad/Android with perspective tilts), and optional floating elements (badges, star ratings, UI snippets).
+The AI picks a narrative arc that fits the app's sell angle (trust-first for finance/health, visual-first for creative/lifestyle, problem-first for pain-relief apps, numbers-led for SaaS/analytics, community-first for social, feature-forward for multi-mode apps) and assigns a job to each card: HOOK → EDUCATE → PROVE → CONVERT.
 
-Available layouts per card:
-- Layout A: "Text Top, Device Bottom Center" — default, device fills lower portion
-- Layout B: "Text Top, Device Offset Right" — tilted phone with perspective
-- Layout C: "Social Proof" — star rating + quote + badge + device
-- Layout M1-M4: Marketing cards WITHOUT device (title cards, feature callouts, CTAs, testimonials)
+9 layout types available per card:
+- text-top-device-bottom: headline top, flat device bottom (feature/educate)
+- text-top-device-tilted: headline left, tilted device right (or mirrored)
+- device-hero: headline + large centered device, product-forward
+- social-proof: stars + quote + laurel stat, device optional
+- feature-callout: headline + features list, no device
+- lifestyle-hero: full-bleed photo background + text overlay
+- before-after: dark before-half + bright after-half (transformation apps)
+- text-bottom: headline anchored to lower third, cinematic
+- stats-hero: giant centered stat(s), no device, numbers-led
 
-Card types the system can generate:
-- Hero card (value proposition + device)
-- Feature spotlight (tilted phone + floating UI snippets)
-- Social proof (stars, quotes, badges, laurel wings with stats)
-- Marketing/title card (no device, bold text + rich background)
-- CTA/download card (no device, call to action)
+Each card can carry auto-positioned compound fields: statRow, laurelStat, pressBanner, starRating, quote, featurePills, featureGrid, stepFlow, snippets, beforeAfterSplit.
+
+Panoramic backgrounds slice one wide AI-generated or Pexels image across multiple cards for cohesion. Panoramic element spans stretch a foreground image or device across adjacent cards.
 
 Design features:
-- 78+ decorative shapes across 13 categories (nature, weather, celebration, social, tech, health, food, travel, abstract, finance, education, pets, emoji)
 - Rich text with per-word color, weight, italic, underline, highlight pills, gradient fills, stroke outlines, and emoji
-- Laurel stats pattern: wing-left + wing-right shapes flanking stats like "4.9 Rating" or "1M+ Users"
-- Floating UI snippets: rounded-rect panels with text overlapping the device edges
+- Device perspective variants: flat, left-15/30, right-15/30, isometric, top-down, flat-lay, side-profile, landscape
+- 76+ decorative shapes across 13 categories (nature, weather, celebration, social, tech, health, food, travel, abstract, finance, education, pets, emoji)
+- Laurel stats: wing-left + wing-right shapes flanking a hero number
 
-App Store 60/40 rule: minimum 60% of cards must show a device mockup, maximum 40% can be marketing-only.
+App Store 60/40 rule enforced: minimum 60% of cards must show a device mockup, maximum 40% can be marketing-only.
 
 Costs 5 credits per generation.`,
     inputSchema: z.object({
@@ -264,25 +268,36 @@ What you can change:
 - Text: headlines, subtitles, badge text, font size, font family (Inter, Poppins, Montserrat, DM Sans, Space Grotesk, etc.)
 - Text styling: per-word color, bold, italic, underline, highlight pills (colored background behind words), gradient text, text stroke outlines
 - Colors: brand palette, gradient backgrounds, accent colors, text colors
-- Layout: reposition elements, switch between layouts (A/B/C/M1-M4), change device tilt
-- Device mockups: perspective tilts (flat, left-15, right-15), resize, reposition
+- Layouts (9 types): text-top-device-bottom, text-top-device-tilted, device-hero, social-proof, feature-callout, lifestyle-hero, before-after, text-bottom, stats-hero. The AI picks a narrative arc (HOOK → EDUCATE → PROVE → CONVERT) across the set.
+- Layout params: deviceScale (small/medium/large), deviceSide (left/right), textPosition (above/below), compoundPlacement (below-text/below-device)
+- Device mockups: perspective variants (flat, left-15, right-15, left-30, right-30, isometric, top-down, flat-lay, side-profile, landscape-left, landscape-right), 2D rotation, resize, reposition
+- Switch devices: "make this for Apple Watch" / "duplicate for Android tablet" clones the project at the target device's canvas size
 - Add/remove cards: add a social proof card, remove card 3, add a marketing title card
-- Floating elements: add/edit badges, star ratings, floating UI snippets (rounded-rect + text overlays)
+- Compound fields (auto-positioned): statRow, laurelStat, pressBanner, starRating, quote, featurePills, featureGrid, stepFlow, snippets, beforeAfterSplit
+- Panoramic backgrounds: one wide AI or Pexels image sliced across multiple cards ("pano the background across cards 1-3")
+- Panoramic element spans: stretch a foreground image, device-mockup, or shape across adjacent cards ("pano the device across cards 1-2")
+- Floating elements: add/edit badges, star ratings, floating UI snippets
 - Shapes: glow orbs, waves, blobs, rounded rectangles, circles, custom SVG paths
-- Decorative shapes: 78+ library shapes — leaf, flower, cloud, sparkle, heart, rocket, trophy, crown, coffee-cup, airplane, dollar-sign, paw-print, and many more across 13 categories
-- Laurel stats: wing-left + wing-right shapes flanking a stat (e.g. "4.9 Rating", "1M+ Users", "#1 App")
-- Backgrounds: change gradient colors/angle, set a backgroundPrompt for AI-generated backgrounds
+- Decorative shapes: 76+ library shapes — leaf, flower, cloud, sparkle, heart, rocket, trophy, crown, coffee-cup, airplane, dollar-sign, paw-print, wing-left/wing-right (for laurels), and many more
+- Backgrounds: solid, subtle-gradient, rich-gradient, photo (Pexels), or ai-generated; change gradient colors/angle; set a backgroundPrompt for AI-generated
 - Style: shadows, opacity, border radius, rotation, blur
 
+What isn't supported (the AI will flag these in unsupportedAsks):
+- Multiple devices side-by-side in a single card (e.g. iPhone + Watch in one scene) — each card renders one device. Use the duplicate-for-device workflow instead, or split across cards.
+- Frame color selection (white/silver/space-black) — pick a frame style in the canvas device panel.
+- Uploading a specific user-supplied screenshot into a mockup — use upload-screenshots tool first, then reference the uploaded project.
+
 Example edit messages:
 - "Make the headlines larger and use Bebas Neue font"
 - "Change the color scheme to blue (#2563EB) across all cards"
 - "Add a social proof card with 5 stars and a testimonial quote"
 - "Tilt the phone on card 2 to the left"
-- "Add floating UI snippets around the device on card 1"
-- "Replace card 3 with a marketing CTA card saying Download Free"
-- "Add a wave shape flowing across all cards"
-- "Add laurel wings around a 4.9 rating on card 1"
+- "Pano the background photo across cards 1-3"
+- "Stretch the device on card 1 across into card 2"
+- "Make this project for Apple Watch"
+- "Replace card 3 with a CTA card saying Download Free"
+- "Switch card 2 to device-hero layout with statRow showing our three key metrics"
+- "Add a before-after card showing the transformation"
 - "Add decorative leaf and sparkle shapes scattered in the background"
 - "Make 'Every' underlined and italic in the headline"`,
     inputSchema: z.object({
@@ -690,7 +705,7 @@ This tool helps you gather the right information so generate-screenshots produce
     if (platform === 'android' || platform === 'both') {
         deviceTips.push('**Android (required for Play Store):**');
         deviceTips.push('- Android Phone (android-phone): 1080×2340 — REQUIRED');
-        deviceTips.push('- Android Tablet 10" (android-tablet-10): 2560×1600 — optional');
+        deviceTips.push('- Android Tablet 7" (android-tablet-10): 1200×1920 — optional');
         deviceTips.push('');
     }
     // Schema reminder

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscreenshotstudio/mcp",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "MCP server for generating App Store screenshots via AppScreenshotStudio",
   "type": "module",
   "license": "MIT",