@appscreenshotstudio/mcp 0.4.1 → 0.4.3

package/README.md

@@ -182,7 +182,7 @@ The AI generates professional screenshots using:
 - **Rich text**: per-word color, bold, italic, underline, highlight pills (colored backgrounds behind words), gradient fills, text stroke outlines, emoji
 - **Laurel stats**: wing-left + wing-right shapes flanking stats like "4.9 Rating" or "1M+ Users"
 - **Floating UI snippets**: rounded-rect panels with text overlapping device edges
-- **11 device perspectives**: flat, left-15, left-30, right-15, right-30, isometric, top-down, flat-lay, side-profile, landscape-left, landscape-right
+- **9 device perspectives**: flat, left-15, left-30, right-15, right-30, isometric, top-down, landscape-left, landscape-right
 - **7 layouts**: Text Top + Device Center (A), Text Top + Device Offset (B), Social Proof (C), Marketing Title (M1), Feature Callout (M2), CTA (M3), Testimonial (M4)
 
 ## Workflow

package/dist/index.js

@@ -126,7 +126,7 @@ function buildDesignMessage(input) {
 // ─── MCP Server ─────────────────────────────────────────────────────────────────
 const server = new McpServer({
     name: 'appscreenshotstudio',
-    version: '0.4.0',
+    version: '0.4.3',
 });
 // Tool 1: generate-screenshots
 server.registerTool('generate-screenshots', {
@@ -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, featureGrid, 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, landscape
+- 77 decorative shapes across 13 categories (nature, weather, celebration, social, tech, health, food, travel, abstract, finance, education, pets, emoji), plus 17 core geometric shapes
+- 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,32 +268,44 @@ 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, landscape-left, landscape-right), 2D rotation, resize, reposition
+- Frame color: recolor the device frame — "natural" (default), "black", "white", "gold". Examples: "make the iPhone gold", "black titanium finish", "white iPhone". Requires Growth plan or higher.
+- 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, featureGrid, 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
 - 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: 77 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.
+- 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"
+- "Recolor the iPhone frame to gold across all cards"
+- "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({
         project_id: z.string().describe('Project ID from a previous generate-screenshots call'),
         message: z.string().describe('What to change — use natural language'),
-        card_indices: z.array(z.number()).optional()
-            .describe('Target specific cards by index (0-based). e.g. [0] for card 1, [2,3] for cards 3-4. Omit to apply changes to all cards.'),
+        card_indices: z.array(z.number().int().min(0)).max(10).optional()
+            .describe('Target specific cards by index (0-based). e.g. [0] for card 1, [2,3] for cards 3-4. Max 10 indices. Omit to apply changes to all cards.'),
         codebase_context: z.object({
             readme_summary: z.string().optional(),
             key_screens: z.array(z.string()).max(15).optional(),
@@ -410,8 +424,8 @@ Returns the canvas state with:
 - cards[]: each card has an id, elements array, and optional background settings
 - Each element has: type (text, device-mockup, shape, badge, image, star-rating), position (x, y), size (width, height), zIndex, and type-specific properties
 - Text elements: fontFamily, fontSize, fontWeight, color, segments (for multi-color text with per-word color, bold, italic, underline, highlightColor)
-- Device mockups: perspectiveVariant (flat, left-15, right-15, left-30, right-30, isometric, top-down, flat-lay, side-profile, landscape-left, landscape-right), screenshotImage (null if no upload)
-- Shapes: 78+ shape types across 13 categories — core shapes (circle, rectangle, rounded-rect, blob, wave, triangle, diamond, hexagon, ring, star, wing-left, wing-right, etc.) plus decorative library shapes (leaf, flower, cloud, sparkle, heart, rocket, trophy, crown, coffee-cup, airplane, dollar-sign, paw-print, and many more)
+- Device mockups: perspectiveVariant (flat, left-15, right-15, left-30, right-30, isometric, top-down, landscape-left, landscape-right), screenshotImage (null if no upload)
+- Shapes: 94 shape types (17 core + 77 decorative across 13 categories) — core shapes (circle, rectangle, rounded-rect, blob, wave, triangle, diamond, hexagon, ring, star, wing-left, wing-right, etc.) plus decorative library shapes (leaf, flower, cloud, sparkle, heart, rocket, trophy, crown, coffee-cup, airplane, dollar-sign, paw-print, and many more)
 - projectMeta: globalVisualTheme, brandColors, mood, appCategory`,
     inputSchema: z.object({
         project_id: z.string().describe('Project ID to inspect'),

package/package.json

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