@appscreenshotstudio/mcp 0.4.1 → 0.4.2

package/dist/index.js

@@ -135,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({
@@ -266,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({

package/package.json

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