gpt-image-2 技能实战：用 JSON 模板生成电商落地页商品卡叠加样机

本篇技术指南围绕 garden-skills 仓库中 gpt-image-2 技能的 product-card-overlay 模板 展开，讲解如何用「人物 / 场景图为底 + 商品卡 / 卖点徽章叠加」的结构化 JSON 提示词，为电商详情页主图、落地页 hero 区、朋友圈配图、单图广告批量产出"一张图讲清商品、卖点、价格"的营销样机。读完你将掌握主模板与三种变体的完整结构、参数分层（必问 / 可默认 / 可随机）、自动补全策略，并能在 gpt-image-2 技能的三类运行模式（Garden 本地生图 / Host-Native 委托宿主 / Advisor 提示词顾问）下直接落地执行。

模板定位：产品营销视觉，而非直播平台仿真

product-card-overlay.md 属于 gpt-image-2 技能 18 大类模板中的 UI Mockups 分类，同目录还有 live-commerce-ui.md（电商直播 UI 样机）、social-interface-mockup.md 等。两者边界需要先分清：

• live-commerce-ui.md：仿真直播平台界面，强调聊天区 / 礼物区 / 平台 UI，画面主体是"直播截图"；
• 本模板：偏向"商品 + 模特 / 商品 + 场景 + 卖点卡"的产品营销视觉，更接近落地页 hero 区或电商详情页主图。

适用范围

• 电商详情页主图样机
• 落地页 hero section
• 朋友圈 / 公众号配图带商品卡
• 单图广告：人物 + 商品卡 + 卖点徽章
• 模特拿着商品 + 信息卡叠加

何时使用

• 用户要的是"一张图能讲清楚商品是什么 / 卖点是什么 / 价格是多少"
• 用户提到"详情页主图 / 投放图 / hero 图 / 落地页样机"
• 用户希望既有真实人物视觉，又有电商信息层

不要使用的场景：用户要真实直播间截图（改用 live-commerce-ui.md）；用户要纯白底产品图（改用 white-background-product.md）。

缺失信息优先提问顺序

当用户只说"做一张商品卡样机"时，按以下优先级提问（不要笼统地问"你想要什么风格"）：

1. 商品是什么（名称 + 类目）
2. 主体来源：真人模特照片、模特描述、抽象"无人"场景
3. 是否要展示价格 / 卖点 / 徽章
4. 风格：日式简洁 / 极客科技 / 暖色生活方式 / 高级影棚 / 街头时尚
5. 配色主调
6. 文案语种：中文 / 英文 / 日文 / 双语

这一顺序与 prompt-writing.md 中"缺失信息提问策略"的总原则一致：提问必须精准、少量、只围绕模板关键字段。模板中的 {argument name="..." default="..."} 写法即对应 skill 参数规范：name 简洁明确、default 给出一个可直接工作的默认值，字段要么必问、要么带默认值，避免"没有默认值又不是必问"的含糊参数。

主模板：人物 + 商品卡 + 卖点叠加

模板要求生成一张电商落地页 hero 区视觉，结构稳定为：左侧文案 + 中间产品 + 右侧模特 / 场景。完整 JSON 如下：

{
  "type": "电商落地页 hero 商品卡叠加样机",
  "goal": "生成一张能直接当作电商详情页主视觉或营销落地页 hero 区使用的图，包含人物、产品、卖点、价格信息四要素",
  "brand": {
    "name": "{argument name=\"brand name\" default=\"DERMA CALM\"}",
    "subtext": "{argument name=\"brand subtext\" default=\"敏感肌专研\"}"
  },
  "color_palette": {
    "base": "{argument name=\"base color\" default=\"白\"}",
    "primary": "{argument name=\"primary color\" default=\"深蓝\"}",
    "accent": "{argument name=\"accent color\" default=\"浅蓝\"}"
  },
  "layout": {
    "header": {
      "logo": "左侧品牌名 + 副标题",
      "navigation_links": "{argument name=\"nav links\" default=\"ABOUT, PRODUCT, FEATURE, INGREDIENT, VOICE, Q&A\"}",
      "cta_buttons": "{argument name=\"cta buttons\" default=\"我的页面, 立即购买\"}"
    },
    "hero": {
      "left_column": {
        "headline": "{argument name=\"main headline\" default=\"敏感肌也能每天安心使用的温和护理\"}",
        "subtext": "{argument name=\"sub headline\" default=\"低刺激 · 持久保湿 · 无香料 · 无酒精\"}",
        "buttons": ["立即购买", "了解详情"]
      },
      "center_column": {
        "product": "{argument name=\"product description\" default=\"白色按压瓶，瓶身印 'Moisture Barrier Serum'\"}",
        "props": [
          "白色乳液质感液滴特写",
          "圆形 '皮肤科医生监修' 徽章"
        ]
      },
      "right_column": {
        "subject": "{argument name=\"model description\" default=\"东亚年轻女性，皮肤通透，手指轻触脸颊\"}",
        "background": "{argument name=\"background\" default=\"虚化的实验室玻璃器皿背景，明亮干净\"}"
      }
    },
    "bottom_features_panel": {
      "left_cards": {
        "count": "{argument name=\"left feature count\" default=\"3\"}",
        "items": [
          "{argument name=\"feature 1\" default=\"95% 用户给出 5 星好评\"}",
          "{argument name=\"feature 2\" default=\"低刺激配方，盾牌图标\"}",
          "{argument name=\"feature 3\" default=\"水滴图标 + 屏障修护\"}"
        ]
      },
      "right_badges": {
        "count": 3,
        "items": ["无香料", "无酒精", "敏感肌测试通过"]
      },
      "footer": "底部小字免责声明"
    }
  },
  "style": {
    "rendering": "干净、临床感、商业级渲染，看起来像真实落地页截图",
    "consistency": "色板严格按照 base / primary / accent 三色"
  },
  "constraints": {
    "must_keep": [
      "三栏结构清晰",
      "产品作为视觉中心",
      "文案与产品一致",
      "徽章不能比 logo 还大"
    ],
    "avoid": [
      "排版极度拥挤",
      "模特动作显得违和",
      "色板出现额外鲜艳颜色"
    ]
  }
}

逐字段要点

• 四要素：goal 中明确要求同时包含"人物、产品、卖点、价格信息"。即便模板 JSON 中没有单独的价格字段，按钮文案（如"立即购买"）与底部信息条也要能承载价格信息，这是"电商落地页"区别于纯海报的关键。
• 色板纪律：color_palette 只允许 base / primary / accent 三色，style.consistency 同步声明"严格按照三色"，避免模型自由发挥出额外鲜艳色。
• 布局三分：layout.hero 拆成 left（文案）/ center（产品）/ right（模特）三栏，对应落地页 hero 区常见的"左文右图"结构变形；底部 bottom_features_panel 用卖点卡 + 徽章把转化信息补全。
• 约束双向：must_keep 写死"三栏结构清晰、产品为视觉中心、徽章不能比 logo 大"；avoid 限定"排版拥挤、动作违和、额外鲜艳色"，两条约束同时给出，比只写"要好看"可执行得多。

参数策略

• 必问：商品名、品牌名、模特方向、主色
• 可默认：导航文案、按钮文案、徽章文案
• 可随机：底部小字免责声明、卖点措辞具体表述

自动补全策略

• 没有给品牌 → 生成一个简洁的英文品牌名 + 中文副标题
• 没有给模特方向 → 默认按目标用户画像补全（护肤 → 年轻女性 / 男士护肤 → 年轻男性 / 数码 → 都市年轻人）
• 卖点必须 3 条，互不重复、不空洞

变体 1：暗色科技产品落地页

面向男士护肤 / 数码硬件等"硬朗、专业"调性的品牌：

{
  "type": "暗色科技品牌落地页 hero 样机",
  "theme": "{argument name=\"theme\" default=\"男士护肤 / 数码硬件\"}",
  "color_palette": ["深海军蓝", "白", "蓝色渐变"],
  "header": {
    "logo": "{argument name=\"brand name\" default=\"NEX SKIN\"}",
    "navigation": ["HOME", "PRODUCT", "ABOUT", "FEATURE", "FAQ"],
    "cta_button": "立即开始 >"
  },
  "hero": {
    "left_column": {
      "headline": "{argument name=\"main headline\" default=\"清爽感，从每日护理开始\"}",
      "sub_headline": "男士肌肤，更需要简单",
      "feature_highlights": [
        "去油控亮：调节皮脂",
        "保湿：长时间润泽",
        "一瓶搞定：化妆水 + 精华 + 乳液"
      ]
    },
    "center_image": {
      "subject": "{argument name=\"model\" default=\"清爽干练的亚洲年轻男性\"}",
      "pose": "手部托腮思考"
    },
    "right_column": {
      "product_shot": "{argument name=\"product\" default=\"高瘦的深蓝色瓶身，瓶身带水珠\"}"
    }
  },
  "bottom_stats_bar": {
    "items": [
      "累计销量 120 万瓶",
      "满意度 92.1%",
      "复购率 85.3%"
    ]
  },
  "constraints": {
    "must_feel": "硬朗、专业、可信赖"
  }
}

与主模板相比，此变体的结构调整在于：color_palette 简化为数组；hero 三栏中的中间栏从"产品"改为"人物"，产品被移到右栏 product_shot；底部卖点卡替换为 bottom_stats_bar 数据条（销量 / 满意度 / 复购率）。这正是"变体不应脱离主模板，而应在主模板结构上调整少量字段"的体现——主骨架不变，仅重排各栏职能与底部信息类型。

变体 2：四格人物 + 商品卡集合

适合一张图覆盖多个人群 / 场景（护肤、餐饮、旅行、SaaS 同图展示）：

{
  "type": "四格人物-商品卡集合样机",
  "layout": "2x2 网格，每格独立人物 + 独立商品卡",
  "quadrants": [
    {
      "position": "左上",
      "industry": "护肤",
      "subject": "亚洲女性轻触脸颊",
      "product": "白色按压瓶",
      "headline": "{argument name=\"q1 headline\" default=\"素肌觉醒\"}"
    },
    {
      "position": "右上",
      "industry": "餐饮",
      "subject": "意大利肉酱面特写",
      "product": "餐厅 logo + 限定上市标识",
      "headline": "{argument name=\"q2 headline\" default=\"这碗面，事件级\"}"
    },
    {
      "position": "左下",
      "industry": "旅行",
      "subject": "背包女性面对高山湖泊",
      "product": "旅行品牌 + 折扣 banner",
      "headline": "{argument name=\"q3 headline\" default=\"出发，让自己自由\"}"
    },
    {
      "position": "右下",
      "industry": "SaaS 应用",
      "subject": "手机展示任务管理 App 界面",
      "product": "应用品牌 + 7 天免费试用",
      "headline": "{argument name=\"q4 headline\" default=\"让任务管理更简单\"}"
    }
  ],
  "constraints": {
    "must_feel": "像同一品牌矩阵或同一广告 campaign 出品"
  }
}

要点：quadrants 数组必须按 row-major 顺序（左上 / 右上 / 左下 / 右下）逐格列出，每格独立 industry + subject + product + headline；constraints.must_feel 负责把四格"捏成"同一 campaign 的统一视觉，避免四格各自为政。

变体 3：自动补全模式

适合用户只说"做一张电商落地页主图"、不愿提供细节的场景：

{
  "type": "落地页商品卡叠加自动补全模板",
  "mode": "auto-fill",
  "rule": "在主模板基础上，自动补齐品牌名、文案、模特方向，但保持四要素：品牌、人物、商品、卖点都齐",
  "constraints": {
    "must_feel": "真实电商投放图",
    "avoid": "看起来像 PPT"
  }
}

该变体对应 SKILL.md 中 JSON 模板的"自动补全"用法：用户没有提供但模板标了 default 的字段先用默认值；用户说"你随机生成"时在模板允许范围内合理随机化。注意 constraints.avoid 特别声明"看起来像 PPT"——这是商品卡叠加类样机最容易翻车的地方（信息层生硬、像排版稿而非真实投放图）。

仓库中的真实渲染案例

gpt-image-2 技能配套的案例站点 gpt-image2-website 在 public/case/ui-mockups/product-card-overlay/ 目录下收录了两份已渲染的完整案例（1.json / 2.json），是主模板与变体 1 的"填实版"，可直接对照学习参数如何落值：

• 案例 1：敏感肌精华 hero：品牌 DERMA CALM，主色为纯白 + 深海军蓝 #1B3A6B + 薄荷浅蓝 #C5E2EB；左侧文案含"立即购买 ¥ 358"，中间产品为 30ml 白色磨砂按压瓶 + "皮肤科医生监修"圆形徽章，右侧为轻触脸颊的东亚女性模特，背景虚化实验室玻璃器皿；底部 3 张卖点卡（五星好评 / 盾牌低刺激 / 水滴屏障修护）+ 3 枚徽章 + 小字免责声明。
• 案例 2：NEX SKIN 暗色落地页：深海军蓝 #0A1A33 + 白 + 电光蓝渐变，中间栏为托腮男性模特，右栏为 120ml 深蓝磨砂瓶身，底部 bottom_stats_bar 含 4 项数据条，constraints.must_feel 声明"硬朗、专业、可信赖"，并显式 avoid 粉色 / 暖色少女风元素。

这两份案例与模板文件一一对应（_mapping.json 中 template_md 指向 references/ui-mockups/product-card-overlay.md），是"模板 → 真实 prompt"的最佳学习样本：你会发现案例在继承模板骨架的同时，把 {argument} 全部替换为具体值，并补充了模板默认值之外的细节（色号、容量、数据口径、免责声明原文）——这正是"渲染最终 prompt"的完整动作。

在 gpt-image-2 技能中如何执行

gpt-image-2 技能（SKILL.md）可在三种模式下运行，商品卡叠加样机的生成流程在前 6 步完全一致，仅第 7-8 步分叉：

1. 跑模式检测脚本（任何任务的第一步）：

   node skills/gpt-image-2/scripts/check-mode.js
   

   输出 mode = A / A? / B-or-C 及 recommendation，决定后续是否调用生成脚本。
2. 判断任务是生图还是改图（本模板属于生图）。
3. 按模板索引定位到 ui-mockups 分类下的 product-card-overlay.md（按 SKILL.md 模板索引 的规则"只读取最贴近的具体模板文件"，不要一次读整个 references/）。
4. 遵循模板格式，把用户输入映射到 {argument} 字段；关键信息不足时按上文"缺失信息优先提问顺序"发起精准澄清。
5. 渲染出最终 prompt 字符串（模板中的 JSON 是提示词结构模板，不是 API 请求体模板，最终交给模型的是渲染后的 prompt）。

随后按模式出图：

• Mode A（Garden 本地生图）：ENABLE_GARDEN_IMAGEGEN 为真且存在 OPENAI_API_KEY。将最终 prompt 保存到 garden-gpt-image-2/prompt/，再调用：

  node skills/gpt-image-2/scripts/generate.js \
    --promptfile garden-gpt-image-2/prompt/product-card-overlay-20260424-153045.md \
    --size 1024x1024 \
    --quality high
  

  图片默认落到 garden-gpt-image-2/image/。从 generate.js 源码看，其完整参数还包括 --model、--n、--background、--moderation、--output-format、--output-compression、--json；shared.js 中 buildDefaultImagePath / buildDefaultPromptPath 负责按 <task-slug>-<timestamp> 自动生成语义化文件名，extractGeneratedBytes 优先解析 data[0].b64_json、兼容 data[0].url，并将请求 POST 到 {OPENAI_BASE_URL}/images/generations（默认 https://api.openai.com/v1）。
• Mode B（Host-Native）：宿主 Agent 自带图像工具，不调用脚本，直接把渲染好的 prompt 作为输入传给宿主的 image_generation 类工具。
• Mode C（Advisor）：宿主无任何图像工具，把 prompt 保存到 garden-gpt-image-2/prompt/<task-slug>-<timestamp>.md 并展示给用户，提示其复制到任意 GPT Image 2 兼容网关或图像工具执行，同时明确告知"已生成可复用 prompt，请用你的图像工具执行"，不得假装出图成功。

避免事项（踩坑清单）

商品卡叠加样机最容易在以下 6 处翻车，模板在 avoid 之外还单列了经验性约束：

• 不要让人物表情过于夸张或假笑——会立刻破坏落地页可信度；
• 卖点徽章 ≤ 3-4 个——多了会变成广告噪音；
• 文案颜色不能与底图过于接近——否则不可读；
• 商品在画面中必须有清晰主光——不能跟模特一起虚化，产品必须是视觉锚点；
• 不要让中文 + 英文 + 日文同时占据同等大小——必须有主导语种；
• 同时把主模板 constraints.avoid 的"排版极度拥挤、模特动作违和、色板出现额外鲜艳颜色"视为红线。

这些约束同时是验证环节的依据：渲染结果若出现徽章比 logo 大、三栏失衡、人物假笑、色板跑偏，即可判定该 prompt 需要回炉调整对应字段。