npm - @appscreenshotstudio/mcp - Versions diffs - 0.6.2 → 0.7.0 - Mend

@appscreenshotstudio/mcp 0.6.2 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/README.md +228 -227
package/dist/index.js +127 -122
package/package.json +49 -48
package/skills/appscreenshotstudio/SKILL.md +1 -1

package/README.md CHANGED Viewed

@@ -1,227 +1,228 @@
-# @appscreenshotstudio/mcp
-MCP server for generating App Store screenshots via [AppScreenshotStudio](https://appscreenshotstudio.com).
-Let your AI agent (Claude Code, Cursor, Windsurf) generate, edit, and export App Store screenshots as a native tool.
-## Setup
-### 1. Get an API key
-Create one at [appscreenshotstudio.com/settings](https://appscreenshotstudio.com/settings) under **API Keys**.
-### 2. Install
-**Claude Code:**
-```bash
-claude mcp add appscreenshotstudio -- npx -y @appscreenshotstudio/mcp
-```
-Then add to your shell profile (`.bashrc`, `.zshrc`, etc.):
-```bash
-export APPSCREENSHOTSTUDIO_API_KEY="sk_live_your_key_here"
-```
-**Cursor / Windsurf / Other MCP clients:**
-Add to your MCP config (`.cursor/mcp.json`, `settings.json`, etc.):
-```json
-{
-  "mcpServers": {
-    "appscreenshotstudio": {
-      "command": "npx",
-      "args": ["-y", "@appscreenshotstudio/mcp"],
-      "env": {
-        "APPSCREENSHOTSTUDIO_API_KEY": "sk_live_your_key_here"
-      }
-    }
-  }
-}
-```
-## Tools
-### `prepare-screenshot-brief`
-Get a research checklist and strategy guide before generating. Returns file patterns to search for across tech stacks, story flow recommendations per app category, headline tips, and the `codebase_context` schema to fill in.
-**Free — no API call or credits.**
-### `generate-screenshots`
-Create a complete set of App Store screenshots. The agent researches your codebase first, then passes rich context for accurate, app-specific designs.
-| Parameter | Type | Required | Description |
-|---|---|---|---|
-| `app_name` | string | Yes | App name |
-| `app_description` | string | Yes | What the app does (1-3 sentences) |
-| `features` | string[] | No | Key features, ordered by importance (max 10) |
-| `brand_colors` | object | No | `{ primary, secondary?, accent? }` as hex |
-| `mood` | string | No | "energetic", "calm", "minimal", "bold", etc. |
-| `device_id` | string | No | Target device (default: `iphone-6.9`) |
-| `count` | number | No | Number of cards, 3-10 (default: 5) |
-| `story_flow` | string | No | Narrative structure (default: `auto`) |
-| `codebase_context` | object | No | App context from codebase research (see below) |
-**Costs 5 credits.**
-#### `codebase_context`
-Pass this for dramatically better screenshots. The context is persisted on the project and used in all subsequent chats.
-| Field | Description |
-|---|---|
-| `readme_summary` | App overview from README or docs |
-| `key_screens` | Main screens/views (e.g. "Dashboard", "Settings") |
-| `color_tokens` | Brand colors from theme files (e.g. `{ "primary": "#7C3AED" }`) |
-| `target_audience` | Who the app is for |
-| `app_category` | fitness, finance, social, productivity, etc. |
-| `competitive_edge` | What makes it unique |
-| `app_store_description` | Existing store listing if found |
-| `tech_stack` | React Native, SwiftUI, Flutter, etc. |
-| `ui_style` | "dark mode with neon accents", "clean minimal", etc. |
-| `primary_user_flow` | Main user journey through the app |
-### `edit-screenshots`
-Make changes to an existing project with natural language. Optionally target specific cards.
-| Parameter | Type | Required | Description |
-|---|---|---|---|
-| `project_id` | string | Yes | From a previous `generate-screenshots` call |
-| `message` | string | Yes | What to change |
-| `card_indices` | number[] | No | Target specific cards by index (0-based). Omit to edit all. |
-| `codebase_context` | object | No | App context to enrich the edit (same schema as above) |
-**Costs 5 credits.**
-### `upload-screenshots`
-Upload local app screenshots (from Simulator, emulator, or screen captures) into the device mockups of an existing project. Reads files from your local filesystem and places them into the device frames.
-| Parameter | Type | Required | Description |
-|---|---|---|---|
-| `project_id` | string | Yes | From a previous `generate-screenshots` call |
-| `screenshots` | array | Yes | Array of `{ file_path, card_index }` — maps local files to cards |
-Each item in `screenshots`:
-| Field | Type | Description |
-|---|---|---|
-| `file_path` | string | Absolute path to a local PNG, JPG, or WEBP file |
-| `card_index` | number | Which card to place this screenshot on (0-based) |
-**Free.**
-### `render-screenshots`
-Export to high-resolution PNGs. Returns download URLs.
-| Parameter | Type | Required | Description |
-|---|---|---|---|
-| `project_id` | string | Yes | Project to render |
-**Free.**
-### `get-project`
-Retrieve a project's current state — cards, elements, backgrounds, and metadata.
-| Parameter | Type | Required | Description |
-|---|---|---|---|
-| `project_id` | string | Yes | Project ID to retrieve |
-**Free.**
-### `generate-background`
-Generate an AI background for a specific card. Uses project metadata (brand colors, mood, theme) for contextual results.
-| Parameter | Type | Required | Description |
-|---|---|---|---|
-| `project_id` | string | Yes | Project containing the card |
-| `card_index` | number | Yes | Which card (0-based) |
-| `prompt` | string | Yes | Description of the background |
-**Costs 6 credits.**
-### `generate-panoramic-background`
-Generate one wide image and slice it across multiple cards so they read as a continuous scene in the App Store gallery. Use after a panoramic chat edit ("pano the background across cards 1-3") to fulfill the pending panoramic, or pass an explicit `prompt` / `pexels_query`.
-| Parameter | Type | Required | Description |
-|---|---|---|---|
-| `project_id` | string | Yes | Project containing the cards |
-| `prompt` | string | No | AI scene description (Gemini). Costs 6 credits. |
-| `pexels_query` | string | No | Stock photo search query (Pexels). Free. |
-| `card_indices` | number[] | No | Cards sharing the panoramic (0-based, min 2). Default: first 3. |
-Omit both `prompt` and `pexels_query` to fulfill a panoramic already set up by `generate-screenshots` / `edit-screenshots`.
-**Costs 6 credits (AI prompt) or free (Pexels query).**
-### `list-devices`
-Show all supported device specs. No API call needed.
-**Free.**
-## Claude Code Skill
-The MCP server auto-installs a Claude Code skill on first startup. The skill teaches Claude a structured research-first workflow for better screenshot results. You can also install it manually:
-```bash
-npx @appscreenshotstudio/mcp install-skill
-```
-Once installed, use `/appscreenshotstudio` in Claude Code or just ask "generate App Store screenshots for my app".
-## Supported Devices
-| ID | Name | Size | Required |
-|---|---|---|---|
-| `iphone-6.9` | iPhone 16 Pro Max | 1260x2736 | App Store |
-| `iphone-6.3` | iPhone 17 Pro | 1206x2622 | Optional |
-| `ipad-13` | iPad Pro 13" | 2064x2752 | App Store |
-| `android-phone` | Android Phone | 1080x2340 | Play Store |
-| `android-tablet-10` | Android Tablet 7" | 1200x1920 | Play Store |
-| `android-tablet-large` | Android Tablet 10" | 1600x2560 | Play Store |
-| `apple-watch-ultra` | Apple Watch Ultra 2 | 410x502 | App Store |
-## Design Features
-The AI generates professional screenshots using:
-- **94 shape types** (17 core + 77 decorative across 13 categories): nature (leaf, flower, tree), weather (cloud, sun, snowflake), celebration (sparkle, trophy, crown, confetti), social (chat-bubble, music-note), tech (rocket, code-bracket), health (dumbbell, flame), food (coffee-cup, pizza), travel (airplane, compass), finance (dollar-sign, piggy-bank), education (graduation-cap, lightbulb), pets (paw-print, cat-face), emoji (smiley, fire-emoji), abstract (swirl, infinity, gem)
-- **Rich text**: per-word color, bold, italic, underline, highlight pills (colored backgrounds behind words), gradient fills, text stroke outlines, emoji
-- **Compound trust signals**: statRow, laurelStat, starRating, quote, pressBanner. Auto-positioned per layout, and opt-in: supply the real figure or the card ships clean
-- **Background textures**: diagonal-stripe, crosshatch, checkerboard, zigzag, hairline-grid, dot-grid, waves, grain, radial-rays, concentric-circles. Ask for one explicitly; they are subtle by design and run continuously across the set.
-- **Frame color**: recolor the device frame — `natural` (default), `black`, `white`, `gold`. Requires Growth plan or higher.
-- **Panoramics**: slice one wide image across cards (chat tags the cards, then `generate-panoramic-background` creates and slices the image) or stretch a foreground element across adjacent cards (`apply_element_span`). Gallery gutters are accounted for.
-- **9 device perspectives**: flat, left-15, left-30, right-15, right-30, isometric, top-down, landscape-left, landscape-right
-- **10 layouts**: `text-top-device-bottom`, `text-top-device-tilted`, `device-hero`, `social-proof`, `review-clip`, `screen-hero`, `lifestyle-hero`, `stats-hero`, `metric-badge`, `annotated-feature`. The AI varies `deviceScale`, `deviceSide`, `textPosition`, and `textAlign` per card so a set never looks like duplicates.
-## Workflow
-1. **Research** — Agent calls `prepare-screenshot-brief`, then searches your codebase for app name, features, colors, screens, and audience
-2. **Generate** — Agent calls `generate-screenshots` with `codebase_context` for app-specific designs
-3. **Iterate** — Agent calls `edit-screenshots` to refine (codebase context carries over automatically)
-4. **Upload** — Agent calls `upload-screenshots` with local file paths to fill device mockups
-5. **Export** — Agent calls `render-screenshots` or click "Download All" in the web app
-## Security
-- API key stays on your machine (environment variable)
-- All API calls over HTTPS
-- stdio transport — no network ports opened
-- Revoke keys anytime in Settings
-## Links
-- [Screenshot API + MCP overview](https://appscreenshotstudio.com/api)
-- [Full docs](https://appscreenshotstudio.com/docs/mcp)
-- [REST API reference](https://appscreenshotstudio.com/docs/api)
-- [Pricing](https://appscreenshotstudio.com/pricing)
+# @appscreenshotstudio/mcp
+MCP server for generating App Store screenshots via [AppScreenshotStudio](https://appscreenshotstudio.com).
+Let your AI agent (Claude Code, Cursor, Windsurf) generate, edit, and export App Store screenshots as a native tool.
+## Setup
+### 1. Get an API key
+Create one at [appscreenshotstudio.com/settings](https://appscreenshotstudio.com/settings) under **API Keys**.
+### 2. Install
+**Claude Code:**
+```bash
+claude mcp add appscreenshotstudio -- npx -y @appscreenshotstudio/mcp
+```
+Then add to your shell profile (`.bashrc`, `.zshrc`, etc.):
+```bash
+export APPSCREENSHOTSTUDIO_API_KEY="sk_live_your_key_here"
+```
+**Cursor / Windsurf / Other MCP clients:**
+Add to your MCP config (`.cursor/mcp.json`, `settings.json`, etc.):
+```json
+{
+  "mcpServers": {
+    "appscreenshotstudio": {
+      "command": "npx",
+      "args": ["-y", "@appscreenshotstudio/mcp"],
+      "env": {
+        "APPSCREENSHOTSTUDIO_API_KEY": "sk_live_your_key_here"
+      }
+    }
+  }
+}
+```
+## Tools
+### `prepare-screenshot-brief`
+Get a research checklist and strategy guide before generating. Returns file patterns to search for across tech stacks, story flow recommendations per app category, headline tips, and the `codebase_context` schema to fill in.
+**Free — no API call or credits.**
+### `generate-screenshots`
+Create a complete set of App Store screenshots. The agent researches your codebase first, then passes rich context for accurate, app-specific designs.
+| Parameter | Type | Required | Description |
+|---|---|---|---|
+| `app_name` | string | Yes | App name |
+| `app_description` | string | Yes | What the app does (1-3 sentences) |
+| `features` | string[] | No | Key features, ordered by importance (max 10) |
+| `brand_colors` | object | No | `{ primary, secondary?, accent? }` as hex |
+| `mood` | string | No | "energetic", "calm", "minimal", "bold", etc. |
+| `device_id` | string | No | Target device (default: `iphone-6.9`) |
+| `count` | number | No | Number of cards, 3-10 (default: 5) |
+| `story_flow` | string | No | Narrative structure (default: `auto`) |
+| `codebase_context` | object | No | App context from codebase research (see below) |
+**Costs 5 credits.**
+#### `codebase_context`
+Pass this for dramatically better screenshots. The context is persisted on the project and used in all subsequent chats.
+| Field | Description |
+|---|---|
+| `readme_summary` | App overview from README or docs |
+| `key_screens` | Main screens/views (e.g. "Dashboard", "Settings") |
+| `color_tokens` | Brand colors from theme files (e.g. `{ "primary": "#7C3AED" }`) |
+| `target_audience` | Who the app is for |
+| `app_category` | fitness, finance, social, productivity, etc. |
+| `competitive_edge` | What makes it unique |
+| `app_store_description` | Existing store listing if found |
+| `tech_stack` | React Native, SwiftUI, Flutter, etc. |
+| `ui_style` | "dark mode with neon accents", "clean minimal", etc. |
+| `primary_user_flow` | Main user journey through the app |
+### `edit-screenshots`
+Make changes to an existing project with natural language. Optionally target specific cards.
+| Parameter | Type | Required | Description |
+|---|---|---|---|
+| `project_id` | string | Yes | From a previous `generate-screenshots` call |
+| `message` | string | Yes | What to change |
+| `card_indices` | number[] | No | Target specific cards by index (0-based). Omit to edit all. |
+| `codebase_context` | object | No | App context to enrich the edit (same schema as above) |
+**Costs 5 credits.**
+### `upload-screenshots`
+Upload local app screenshots (from Simulator, emulator, or screen captures) into the device mockups of an existing project. Reads files from your local filesystem and places them into the device frames.
+| Parameter | Type | Required | Description |
+|---|---|---|---|
+| `project_id` | string | Yes | From a previous `generate-screenshots` call |
+| `screenshots` | array | Yes | Array of `{ file_path, card_index }` — maps local files to cards |
+Each item in `screenshots`:
+| Field | Type | Description |
+|---|---|---|
+| `file_path` | string | Absolute path to a local PNG, JPG, or WEBP file |
+| `card_index` | number | Which card to place this screenshot on (0-based) |
+**Free.**
+### `render-screenshots`
+Export to high-resolution PNGs. Returns download URLs.
+| Parameter | Type | Required | Description |
+|---|---|---|---|
+| `project_id` | string | Yes | Project to render |
+**Free.**
+### `get-project`
+Retrieve a project's current state — cards, elements, backgrounds, and metadata.
+| Parameter | Type | Required | Description |
+|---|---|---|---|
+| `project_id` | string | Yes | Project ID to retrieve |
+**Free.**
+### `generate-background`
+Generate an AI background for a specific card. Uses project metadata (brand colors, mood, theme) for contextual results.
+| Parameter | Type | Required | Description |
+|---|---|---|---|
+| `project_id` | string | Yes | Project containing the card |
+| `card_index` | number | Yes | Which card (0-based) |
+| `prompt` | string | Yes | Description of the background |
+**Costs 6 credits.**
+### `generate-panoramic-background`
+Generate one wide image and slice it across multiple cards so they read as a continuous scene in the App Store gallery. Use after a panoramic chat edit ("pano the background across cards 1-3") to fulfill the pending panoramic, or pass an explicit `prompt` / `pexels_query`.
+| Parameter | Type | Required | Description |
+|---|---|---|---|
+| `project_id` | string | Yes | Project containing the cards |
+| `prompt` | string | No | AI scene description (Gemini). Costs 6 credits. |
+| `pexels_query` | string | No | Stock photo search query (Pexels). Free. |
+| `card_indices` | number[] | No | Cards sharing the panoramic (0-based, min 2). Default: first 3. |
+Omit both `prompt` and `pexels_query` to fulfill a panoramic already set up by `generate-screenshots` / `edit-screenshots`.
+**Costs 6 credits (AI prompt) or free (Pexels query).**
+### `list-devices`
+Show all supported device specs. No API call needed.
+**Free.**
+## Claude Code Skill
+The MCP server auto-installs a Claude Code skill on first startup. The skill teaches Claude a structured research-first workflow for better screenshot results. You can also install it manually:
+```bash
+npx @appscreenshotstudio/mcp install-skill
+```
+Once installed, use `/appscreenshotstudio` in Claude Code or just ask "generate App Store screenshots for my app".
+## Supported Devices
+| ID | Name | Size | Required |
+|---|---|---|---|
+| `iphone-6.9` | iPhone 16 Pro Max | 1260x2736 | App Store |
+| `iphone-6.3` | iPhone 17 Pro | 1206x2622 | Optional |
+| `ipad-13` | iPad Pro 13" | 2064x2752 | App Store |
+| `android-phone` | Android Phone | 1080x2340 | Play Store |
+| `pixel-11-pro` | Google Pixel 11 Pro | 1280x2856 | Play Store |
+| `android-tablet-10` | Android Tablet 7" | 1200x1920 | Play Store |
+| `android-tablet-large` | Android Tablet 10" | 1600x2560 | Play Store |
+| `apple-watch-ultra` | Apple Watch Ultra 2 | 410x502 | App Store |
+## Design Features
+The AI generates professional screenshots using:
+- **94 shape types** (17 core + 77 decorative across 13 categories): nature (leaf, flower, tree), weather (cloud, sun, snowflake), celebration (sparkle, trophy, crown, confetti), social (chat-bubble, music-note), tech (rocket, code-bracket), health (dumbbell, flame), food (coffee-cup, pizza), travel (airplane, compass), finance (dollar-sign, piggy-bank), education (graduation-cap, lightbulb), pets (paw-print, cat-face), emoji (smiley, fire-emoji), abstract (swirl, infinity, gem)
+- **Rich text**: per-word color, bold, italic, underline, highlight pills (colored backgrounds behind words), gradient fills, text stroke outlines, emoji
+- **Compound trust signals**: statRow, laurelStat, starRating, quote, pressBanner, credential, guarantee. Auto-positioned per layout, and opt-in: supply the real figure or the card ships clean
+- **Background textures**: diagonal-stripe, crosshatch, checkerboard, zigzag, hairline-grid, dot-grid, waves, grain, radial-rays, concentric-circles. Ask for one explicitly; they are subtle by design and run continuously across the set.
+- **Frame color**: recolor the device frame — `natural` (default), `black`, `white`, `gold`. Requires Growth plan or higher.
+- **Panoramics**: slice one wide image across cards (chat tags the cards, then `generate-panoramic-background` creates and slices the image) or stretch a foreground element across adjacent cards (`apply_element_span`). Gallery gutters are accounted for.
+- **9 device perspectives**: flat, left-15, left-30, right-15, right-30, isometric, top-down, landscape-left, landscape-right
+- **10 layouts**: `text-top-device-bottom`, `text-top-device-tilted`, `device-hero`, `social-proof`, `review-clip`, `screen-hero`, `lifestyle-hero`, `stats-hero`, `metric-badge`, `annotated-feature`. The AI varies `deviceScale`, `deviceSide`, `textPosition`, and `textAlign` per card so a set never looks like duplicates.
+## Workflow
+1. **Research** — Agent calls `prepare-screenshot-brief`, then searches your codebase for app name, features, colors, screens, and audience
+2. **Generate** — Agent calls `generate-screenshots` with `codebase_context` for app-specific designs
+3. **Iterate** — Agent calls `edit-screenshots` to refine (codebase context carries over automatically)
+4. **Upload** — Agent calls `upload-screenshots` with local file paths to fill device mockups
+5. **Export** — Agent calls `render-screenshots` or click "Download All" in the web app
+## Security
+- API key stays on your machine (environment variable)
+- All API calls over HTTPS
+- stdio transport — no network ports opened
+- Revoke keys anytime in Settings
+## Links
+- [Screenshot API + MCP overview](https://appscreenshotstudio.com/api)
+- [Full docs](https://appscreenshotstudio.com/docs/mcp)
+- [REST API reference](https://appscreenshotstudio.com/docs/api)
+- [Pricing](https://appscreenshotstudio.com/pricing)

package/dist/index.js CHANGED Viewed

@@ -29,12 +29,15 @@ const API_BASE = process.env.APPSCREENSHOTSTUDIO_URL || 'https://appscreenshotst
 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,
-//    mcp-server/skills/appscreenshotstudio/SKILL.md (ships in the npm package, so it drifts unseen)
+//    mcp-server/skills/appscreenshotstudio/SKILL.md (ships in the npm package, so it drifts unseen),
+//    public/api-docs.md (served raw at /api-docs.md, linked from nowhere, so it drifts unseen too)
+//    Enforced by `npm run test:device-specs`, which reads all six files.
 const DEVICES = [
     { id: 'iphone-6.9', name: 'iPhone 16 Pro Max', width: 1260, height: 2736, category: 'iphone', required: true },
     { id: 'iphone-6.3', name: 'iPhone 17 Pro', width: 1206, height: 2622, category: 'iphone', required: false },
     { 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: 'pixel-11-pro', name: 'Google Pixel 11 Pro', width: 1280, height: 2856, category: 'android-phone', required: false },
     { id: 'android-tablet-10', name: 'Android Tablet 7"', width: 1200, height: 1920, category: 'android-tablet', required: true },
     { id: 'android-tablet-large', name: 'Android Tablet 10"', width: 1600, height: 2560, category: 'android-tablet', required: false },
     { id: 'apple-watch-ultra', name: 'Apple Watch Ultra 2', width: 410, height: 502, category: 'apple-watch', required: true },
@@ -194,41 +197,43 @@ const chatImagesSchema = z.array(z.object({
 // ─── MCP Server ─────────────────────────────────────────────────────────────────
 const server = new McpServer({
     name: 'appscreenshotstudio',
-    version: '0.6.1',
+    // Keep in step with package.json: this is the version a client sees in the
+    // MCP handshake, and it silently sat at 0.6.1 through the 0.6.2 release.
+    version: '0.6.3',
 });
 // Tool 1: generate-screenshots
 server.registerTool('generate-screenshots', {
     title: 'Generate App Store Screenshots',
-    description: `Create a complete set of App Store screenshot designs for an app. Attach real app screenshots via the images param and they are placed inside the device frames automatically; attach a mascot/character image (kind: "mascot", transparent PNG) and it gets placed around the phones. Returns a project URL where the developer can preview, refine, and export final PNGs.
-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.
-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.
-13 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, no device (testimonial-led)
-- review-clip: rating-statement headline + stars + quote + bottom-clipped device
-- screen-hero: top-clipped device + centered headline + optional trust stat
-- lifestyle-hero: full-bleed photo background + text overlay (no device)
-- stats-hero: giant centered stat(s), no device, numbers-led
-- metric-badge: centered device + chunky "achievement card" floating over its screen
-- annotated-feature: tilted device + side callout chip linked by a connector line
-Each card can carry auto-positioned compound fields: statRow, laurelStat, pressBanner, starRating, quote. Trust signals are opt-in: supply the real number, quote or press name, or the card ships clean rather than inventing one.
-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. Note: if the design comes back with a panoramic background, the chat only tags the cards; call generate-panoramic-background afterwards to actually create and slice the wide image.
-Design features:
-- Rich text with per-word color, weight, italic, underline, highlight pills, gradient fills, stroke outlines, and emoji
-- 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 enforced: minimum 60% of cards must show a device mockup, maximum 40% can be marketing-only.
+    description: `Create a complete set of App Store screenshot designs for an app. Attach real app screenshots via the images param and they are placed inside the device frames automatically; attach a mascot/character image (kind: "mascot", transparent PNG) and it gets placed around the phones. Returns a project URL where the developer can preview, refine, and export final PNGs.
+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.
+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.
+10 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, no device (testimonial-led)
+- review-clip: rating-statement headline + stars + quote + bottom-clipped device
+- screen-hero: top-clipped device + centered headline + optional trust stat
+- lifestyle-hero: full-bleed photo background + text overlay (no device)
+- stats-hero: giant centered stat(s), no device, numbers-led
+- metric-badge: centered device + chunky "achievement card" floating over its screen
+- annotated-feature: tilted device + side callout chip linked by a connector line
+Each card can carry auto-positioned compound fields: statRow, laurelStat, pressBanner, starRating, quote, credential ("FDIC insured"-style trust pills), guarantee ("Cancel anytime"-style risk-reversal pills). Trust signals are opt-in: supply the real number, quote or press name, or the card ships clean rather than inventing one.
+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. Note: if the design comes back with a panoramic background, the chat only tags the cards; call generate-panoramic-background afterwards to actually create and slice the wide image.
+Design features:
+- Rich text with per-word color, weight, italic, underline, highlight pills, gradient fills, stroke outlines, and emoji
+- 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 enforced: minimum 60% of cards must show a device mockup, maximum 40% can be marketing-only.
 Costs 5 credits per generation.`,
     inputSchema: z.object({
         app_name: z.string().describe('Name of the app'),
@@ -345,44 +350,44 @@ Costs 5 credits per generation.`,
 // Tool 2: edit-screenshots
 server.registerTool('edit-screenshots', {
     title: 'Edit Screenshot Designs',
-    description: `Make changes to an existing screenshot project. Use natural language to describe what you want to change. Costs 5 credits per edit. You can also attach images: app screenshots fill the device frames of regenerated cards, a mascot (kind: "mascot") gets placed around the phones.
-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. A set can rotate MULTIPLE accents card by card ("pink, then coral, then brick") and each card keeps its own highlight colour.
-- Background textures (ask for one explicitly, they are never added on their own): diagonal-stripe, crosshatch, checkerboard, zigzag, hairline-grid, dot-grid, waves, grain, radial-rays, concentric-circles. Kept subtle by design so they cannot affect headline contrast. Tiled textures run continuously across the whole set; radial-rays and concentric-circles can be centred on the middle of the set so the pattern fans out across every card.
-- Layouts (10 types): text-top-device-bottom, text-top-device-tilted, device-hero, social-proof, review-clip, screen-hero, lifestyle-hero, stats-hero, metric-badge, annotated-feature. 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), textAlign (left/center)
-- 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
-- Compound fields (auto-positioned): statRow, laurelStat, pressBanner, starRating, quote, featureGrid, beforeAfterSplit, stepList
-- Panoramic backgrounds: one wide AI or Pexels image sliced across multiple cards ("pano the background across cards 1-3"). The edit only tags the cards; call generate-panoramic-background afterwards to create and slice the wide image.
-- 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: 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"
-- "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 decorative leaf and sparkle shapes scattered in the background"
+    description: `Make changes to an existing screenshot project. Use natural language to describe what you want to change. Costs 5 credits per edit. You can also attach images: app screenshots fill the device frames of regenerated cards, a mascot (kind: "mascot") gets placed around the phones.
+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. A set can rotate MULTIPLE accents card by card ("pink, then coral, then brick") and each card keeps its own highlight colour.
+- Background textures (ask for one explicitly, they are never added on their own): diagonal-stripe, crosshatch, checkerboard, zigzag, hairline-grid, dot-grid, waves, grain, radial-rays, concentric-circles. Kept subtle by design so they cannot affect headline contrast. Tiled textures run continuously across the whole set; radial-rays and concentric-circles can be centred on the middle of the set so the pattern fans out across every card.
+- Layouts (10 types): text-top-device-bottom, text-top-device-tilted, device-hero, social-proof, review-clip, screen-hero, lifestyle-hero, stats-hero, metric-badge, annotated-feature. 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), textAlign (left/center)
+- 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
+- Compound fields (auto-positioned): statRow, laurelStat, pressBanner, starRating, quote, credential, guarantee
+- Panoramic backgrounds: one wide AI or Pexels image sliced across multiple cards ("pano the background across cards 1-3"). The edit only tags the cards; call generate-panoramic-background afterwards to create and slice the wide image.
+- 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: 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"
+- "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 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'),
@@ -531,14 +536,14 @@ server.registerTool('list-devices', {
 // Tool 5: get-project
 server.registerTool('get-project', {
     title: 'Get Project Details',
-    description: `Retrieve the full state of a screenshot project, including all cards and their elements. Use this to inspect what was generated before making edits. Free — no credit cost.
-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, landscape-left, landscape-right), screenshotImage (null if no upload), frameStyle (realistic | none), showIsland (false hides the Dynamic Island pill; Apple accepts screenshots either way)
-- 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)
+    description: `Retrieve the full state of a screenshot project, including all cards and their elements. Use this to inspect what was generated before making edits. Free — no credit cost.
+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, landscape-left, landscape-right), screenshotImage (null if no upload), frameStyle (realistic | none), showIsland (false hides the Dynamic Island pill; Apple accepts screenshots either way)
+- 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'),
@@ -583,14 +588,14 @@ Returns the canvas state with:
 // Tool 6: generate-background
 server.registerTool('generate-background', {
     title: 'Generate AI Background',
-    description: `Generate an AI background image for a specific card using Gemini. The background is generated based on a text prompt and applied directly to the card. Costs 6 credits.
-Good prompts describe mood, lighting, and color — not objects or text:
-- "Deep purple nebula with soft pink and blue light rays"
-- "Warm sunset gradient with golden bokeh particles"
-- "Dark moody atmosphere with teal and emerald glow"
-- "Clean minimal white-to-light-gray gradient with subtle noise texture"
+    description: `Generate an AI background image for a specific card using Gemini. The background is generated based on a text prompt and applied directly to the card. Costs 6 credits.
+Good prompts describe mood, lighting, and color — not objects or text:
+- "Deep purple nebula with soft pink and blue light rays"
+- "Warm sunset gradient with golden bokeh particles"
+- "Dark moody atmosphere with teal and emerald glow"
+- "Clean minimal white-to-light-gray gradient with subtle noise texture"
 The generated image is cropped to exact device dimensions and set as the card's background.`,
     inputSchema: z.object({
         project_id: z.string().describe('Project ID'),
@@ -622,17 +627,17 @@ The generated image is cropped to exact device dimensions and set as the card's
 // Tool 7: generate-panoramic-background
 server.registerTool('generate-panoramic-background', {
     title: 'Generate Panoramic Background',
-    description: `Generate one wide background image and slice it across multiple cards so they read as a continuous scene when the App Store gallery scrolls. The store gallery gap is accounted for, so slices line up after Apple's gutter.
-Two image sources:
-- prompt: AI-generated via Gemini. Costs 6 credits.
-- pexels_query: stock landscape photo from Pexels. Free.
-If you omit both, the tool fulfills a panoramic the chat already set up: when generate-screenshots or edit-screenshots returns a design with a panoramic background (e.g. after "pano the background across cards 1-3"), the cards are tagged but the wide image isn't created yet. Calling this tool with just the project_id picks up that pending panoramic and generates it.
-Good prompts describe a continuous scene, not objects or text:
-- "Misty mountain range at dawn, soft pink-to-blue gradient sky"
-- "Calm ocean horizon at golden hour with gentle waves"
+    description: `Generate one wide background image and slice it across multiple cards so they read as a continuous scene when the App Store gallery scrolls. The store gallery gap is accounted for, so slices line up after Apple's gutter.
+Two image sources:
+- prompt: AI-generated via Gemini. Costs 6 credits.
+- pexels_query: stock landscape photo from Pexels. Free.
+If you omit both, the tool fulfills a panoramic the chat already set up: when generate-screenshots or edit-screenshots returns a design with a panoramic background (e.g. after "pano the background across cards 1-3"), the cards are tagged but the wide image isn't created yet. Calling this tool with just the project_id picks up that pending panoramic and generates it.
+Good prompts describe a continuous scene, not objects or text:
+- "Misty mountain range at dawn, soft pink-to-blue gradient sky"
+- "Calm ocean horizon at golden hour with gentle waves"
 - "Abstract flowing emerald and teal silk waves"`,
     inputSchema: z.object({
         project_id: z.string().describe('Project ID'),
@@ -670,16 +675,16 @@ Good prompts describe a continuous scene, not objects or text:
 // Tool 8: prepare-screenshot-brief
 server.registerTool('prepare-screenshot-brief', {
     title: 'Prepare Screenshot Brief',
-    description: `Get a category playbook and repo-research checklist to prepare for screenshot generation. Call this BEFORE generate-screenshots. Free (no credits).
-Pass app_category to get category-specific guidance pulled live from AppScreenshotStudio: the frame-1 hook playbook (default layout, what to avoid, caption patterns), the recommended story_flow and mood, and the exact facts to dig out of THIS app's repo for its category (e.g. security and compliance signals for finance, real gameplay art for games, the outcome for fitness).
-Returns:
-- A category playbook (frame-1 hooks + layout + arc + mood) for the app_category
-- A category-specific repo research focus (what to grep this app for)
-- A generic codebase research checklist (file patterns per tech stack)
-- Headline tips + the codebase_context schema to fill in
+    description: `Get a category playbook and repo-research checklist to prepare for screenshot generation. Call this BEFORE generate-screenshots. Free (no credits).
+Pass app_category to get category-specific guidance pulled live from AppScreenshotStudio: the frame-1 hook playbook (default layout, what to avoid, caption patterns), the recommended story_flow and mood, and the exact facts to dig out of THIS app's repo for its category (e.g. security and compliance signals for finance, real gameplay art for games, the outcome for fitness).
+Returns:
+- A category playbook (frame-1 hooks + layout + arc + mood) for the app_category
+- A category-specific repo research focus (what to grep this app for)
+- A generic codebase research checklist (file patterns per tech stack)
+- Headline tips + the codebase_context schema to fill in
 The more you gather here, the better generate-screenshots does on the first try.`,
     inputSchema: z.object({
         app_category: z.string().optional()
@@ -860,21 +865,21 @@ The more you gather here, the better generate-screenshots does on the first try.
 // Tool 9: upload-screenshots
 server.registerTool('upload-screenshots', {
     title: 'Upload App Screenshots',
-    description: `Upload local app screenshots (from Simulator, emulator, or screen captures) into the device mockups of an existing project. This lets you add real app UI into the device frames without leaving the terminal.
-Reads files from your local filesystem, converts them to base64, and sets them on the device mockup elements in the specified cards.
-Free — no credit cost. The screenshots are placed into the device frames that were created by generate-screenshots.
-Workflow:
-1. generate-screenshots → creates project with empty device frames
-2. upload-screenshots → fills the device frames with your actual app UI
-3. render-screenshots → exports final PNGs at App Store dimensions
-Tips:
-- Take screenshots from the iOS Simulator (Cmd+S) or Android emulator
-- Use PNG format for best quality
-- Screenshots are automatically fitted into the device frame
+    description: `Upload local app screenshots (from Simulator, emulator, or screen captures) into the device mockups of an existing project. This lets you add real app UI into the device frames without leaving the terminal.
+Reads files from your local filesystem, converts them to base64, and sets them on the device mockup elements in the specified cards.
+Free — no credit cost. The screenshots are placed into the device frames that were created by generate-screenshots.
+Workflow:
+1. generate-screenshots → creates project with empty device frames
+2. upload-screenshots → fills the device frames with your actual app UI
+3. render-screenshots → exports final PNGs at App Store dimensions
+Tips:
+- Take screenshots from the iOS Simulator (Cmd+S) or Android emulator
+- Use PNG format for best quality
+- Screenshots are automatically fitted into the device frame
 - You can upload different screenshots to different cards`,
     inputSchema: z.object({
         project_id: z.string().describe('Project ID from a previous generate-screenshots call'),

package/package.json CHANGED Viewed

@@ -1,48 +1,49 @@
-{
-  "name": "@appscreenshotstudio/mcp",
-  "version": "0.6.2",
-  "description": "MCP server for generating App Store screenshots via AppScreenshotStudio",
-  "type": "module",
-  "license": "MIT",
-  "homepage": "https://appscreenshotstudio.com/docs/mcp",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/TWWorks-org/mcp-server"
-  },
-  "bugs": {
-    "url": "https://github.com/TWWorks-org/mcp-server/issues"
-  },
-  "keywords": [
-    "mcp",
-    "model-context-protocol",
-    "app-store-screenshots",
-    "screenshot-generator",
-    "appscreenshotstudio",
-    "ai-tools"
-  ],
-  "bin": {
-    "appscreenshotstudio-mcp": "dist/index.js"
-  },
-  "scripts": {
-    "build": "tsc",
-    "start": "node dist/index.js",
-    "dev": "tsc --watch",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.27.1",
-    "zod": "^3.25.67"
-  },
-  "devDependencies": {
-    "@types/node": "^22.0.0",
-    "typescript": "^5.8.0"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "files": [
-    "dist",
-    "skills",
-    "README.md"
-  ]
-}
+{
+  "name": "@appscreenshotstudio/mcp",
+  "version": "0.7.0",
+  "mcpName": "com.appscreenshotstudio/mcp",
+  "description": "MCP server for generating App Store screenshots via AppScreenshotStudio",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://appscreenshotstudio.com/docs/mcp",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TWWorks-org/mcp-server"
+  },
+  "bugs": {
+    "url": "https://github.com/TWWorks-org/mcp-server/issues"
+  },
+  "keywords": [
+    "mcp",
+    "model-context-protocol",
+    "app-store-screenshots",
+    "screenshot-generator",
+    "appscreenshotstudio",
+    "ai-tools"
+  ],
+  "bin": {
+    "appscreenshotstudio-mcp": "dist/index.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.27.1",
+    "zod": "^3.25.67"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "^5.8.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "files": [
+    "dist",
+    "skills",
+    "README.md"
+  ]
+}

package/skills/appscreenshotstudio/SKILL.md CHANGED Viewed

@@ -64,7 +64,7 @@ Call the `generate-screenshots` MCP tool with:
 - `features`: top 3-5 features as array
 - `brand_colors`: `{ primary, secondary?, accent? }` from theme files
 - `mood`: user's chosen mood
-- `device_id`: `"iphone-6.9"` (default), `"iphone-6.3"`, `"ipad-13"`, `"android-phone"`, `"android-tablet-10"` (7"), `"android-tablet-large"` (10"), `"apple-watch-ultra"`
+- `device_id`: `"iphone-6.9"` (default), `"iphone-6.3"`, `"ipad-13"`, `"android-phone"`, `"pixel-11-pro"`, `"android-tablet-10"` (7"), `"android-tablet-large"` (10"), `"apple-watch-ultra"`
 - `count`: number of cards (3-10)
 - `story_flow`: `"auto"` (default), `"hero-intro"`, `"problem-solution"`, `"benefit-first"`, etc.
 - `codebase_context`: the full context object from Step 1