尧图网页设计 
人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载本篇技术指南围绕 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。缺失信息优先提问顺序当用户只说做一张商品卡样机时按以下优先级提问不要笼统地问你想要什么风格商品是什么名称 类目主体来源真人模特照片、模特描述、抽象无人场景是否要展示价格 / 卖点 / 徽章风格日式简洁 / 极客科技 / 暖色生活方式 / 高级影棚 / 街头时尚配色主调文案语种中文 / 英文 / 日文 / 双语这一顺序与 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, QA\}, 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 headlineconstraints.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 枚徽章 小字免责声明。案例 2NEX 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 步分叉跑模式检测脚本任何任务的第一步node skills/gpt-image-2/scripts/check-mode.js输出mode A / A? / B-or-C及recommendation决定后续是否调用生成脚本。判断任务是生图还是改图本模板属于生图。按模板索引定位到ui-mockups分类下的product-card-overlay.md按 SKILL.md 模板索引 的规则只读取最贴近的具体模板文件不要一次读整个references/。遵循模板格式把用户输入映射到{argument}字段关键信息不足时按上文缺失信息优先提问顺序发起精准澄清。渲染出最终 prompt 字符串模板中的 JSON 是提示词结构模板不是 API 请求体模板最终交给模型的是渲染后的 prompt。随后按模式出图Mode AGarden 本地生图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、--jsonshared.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 BHost-Native宿主 Agent 自带图像工具不调用脚本直接把渲染好的 prompt 作为输入传给宿主的image_generation类工具。Mode CAdvisor宿主无任何图像工具把 prompt 保存到garden-gpt-image-2/prompt/task-slug-timestamp.md并展示给用户提示其复制到任意 GPT Image 2 兼容网关或图像工具执行同时明确告知已生成可复用 prompt请用你的图像工具执行不得假装出图成功。避免事项踩坑清单商品卡叠加样机最容易在以下 6 处翻车模板在avoid之外还单列了经验性约束不要让人物表情过于夸张或假笑——会立刻破坏落地页可信度卖点徽章 ≤ 3-4 个——多了会变成广告噪音文案颜色不能与底图过于接近——否则不可读商品在画面中必须有清晰主光——不能跟模特一起虚化产品必须是视觉锚点不要让中文 英文 日文同时占据同等大小——必须有主导语种同时把主模板constraints.avoid的排版极度拥挤、模特动作违和、色板出现额外鲜艳颜色视为红线。这些约束同时是验证环节的依据渲染结果若出现徽章比 logo 大、三栏失衡、人物假笑、色板跑偏即可判定该 prompt 需要回炉调整对应字段。赞分享人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载相关推荐Jsonformer实际案例如何从GPT模型生成电商产品数据JSONJsonformer实际案例如何从GPT模型生成电商产品数据JSON 在当今AI驱动的电商时代从语言模型生成结构化的产品数据JSON已成为开发者和数据工程师AI 应用大模型5大实战技巧用ControlNet让AI精准生成电商商品图5大实战技巧用ControlNet让AI精准生成电商商品图 ControlNet是Stable Diffusion WebUI中功能最强大的扩展之一它能让A人工智能媒体生成计算机视觉深度学习gpt-image-2 Skill 实战用结构化 JSON 模板生成拟物 / Y2K / 像素成套图标gpt image 2 Skill 实战用结构化 JSON 模板生成拟物 / Y2K / 像素成套图标 本文围绕 garden skills 仓库中 gpt人工智能AI 技能/插件提示工程上一篇如何在PC上免费畅玩Switch游戏yuzu模拟器完整指南下一篇Material Shell快捷键导出为图片制作桌面壁纸提醒创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 gpt-image-2 技能实战：用 JSON 模板生成电商落地页商品卡叠加样机
人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载本篇技术指南围绕 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。缺失信息优先提问顺序当用户只说做一张商品卡样机时按以下优先级提问不要笼统地问你想要什么风格商品是什么名称 类目主体来源真人模特照片、模特描述、抽象无人场景是否要展示价格 / 卖点 / 徽章风格日式简洁 / 极客科技 / 暖色生活方式 / 高级影棚 / 街头时尚配色主调文案语种中文 / 英文 / 日文 / 双语这一顺序与 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, QA\}, 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 headlineconstraints.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 枚徽章 小字免责声明。案例 2NEX 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 步分叉跑模式检测脚本任何任务的第一步node skills/gpt-image-2/scripts/check-mode.js输出mode A / A? / B-or-C及recommendation决定后续是否调用生成脚本。判断任务是生图还是改图本模板属于生图。按模板索引定位到ui-mockups分类下的product-card-overlay.md按 SKILL.md 模板索引 的规则只读取最贴近的具体模板文件不要一次读整个references/。遵循模板格式把用户输入映射到{argument}字段关键信息不足时按上文缺失信息优先提问顺序发起精准澄清。渲染出最终 prompt 字符串模板中的 JSON 是提示词结构模板不是 API 请求体模板最终交给模型的是渲染后的 prompt。随后按模式出图Mode AGarden 本地生图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、--jsonshared.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 BHost-Native宿主 Agent 自带图像工具不调用脚本直接把渲染好的 prompt 作为输入传给宿主的image_generation类工具。Mode CAdvisor宿主无任何图像工具把 prompt 保存到garden-gpt-image-2/prompt/task-slug-timestamp.md并展示给用户提示其复制到任意 GPT Image 2 兼容网关或图像工具执行同时明确告知已生成可复用 prompt请用你的图像工具执行不得假装出图成功。避免事项踩坑清单商品卡叠加样机最容易在以下 6 处翻车模板在avoid之外还单列了经验性约束不要让人物表情过于夸张或假笑——会立刻破坏落地页可信度卖点徽章 ≤ 3-4 个——多了会变成广告噪音文案颜色不能与底图过于接近——否则不可读商品在画面中必须有清晰主光——不能跟模特一起虚化产品必须是视觉锚点不要让中文 英文 日文同时占据同等大小——必须有主导语种同时把主模板constraints.avoid的排版极度拥挤、模特动作违和、色板出现额外鲜艳颜色视为红线。这些约束同时是验证环节的依据渲染结果若出现徽章比 logo 大、三栏失衡、人物假笑、色板跑偏即可判定该 prompt 需要回炉调整对应字段。赞分享人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载相关推荐Jsonformer实际案例如何从GPT模型生成电商产品数据JSONJsonformer实际案例如何从GPT模型生成电商产品数据JSON 在当今AI驱动的电商时代从语言模型生成结构化的产品数据JSON已成为开发者和数据工程师AI 应用大模型5大实战技巧用ControlNet让AI精准生成电商商品图5大实战技巧用ControlNet让AI精准生成电商商品图 ControlNet是Stable Diffusion WebUI中功能最强大的扩展之一它能让A人工智能媒体生成计算机视觉深度学习gpt-image-2 Skill 实战用结构化 JSON 模板生成拟物 / Y2K / 像素成套图标gpt image 2 Skill 实战用结构化 JSON 模板生成拟物 / Y2K / 像素成套图标 本文围绕 garden skills 仓库中 gpt人工智能AI 技能/插件提示工程上一篇如何在PC上免费畅玩Switch游戏yuzu模拟器完整指南下一篇Material Shell快捷键导出为图片制作桌面壁纸提醒创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考