人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载本篇文章以 banner-grid-2x2.md 为核心教程讲解如何在gpt-image-2技能中通过一张「2×2 等分网格」的 JSON 提示词模板一次性生成 4 个风格统一、可单独裁切投放的营销 banner课程、电商、活动、SNS 四件套。读完你将掌握主模板的字段结构、{argument ...}参数替换规则、三种业务变体、缺失信息提问顺序以及如何结合 SKILL.md 定义的 Mode A / B / C 工作流把渲染好的 prompt 真正变成图片。一、模板定位什么是「2×2 营销 Banner 网格」在gpt-image-2技能的分层模板库模板索引中grids-and-collages分类负责「多面板网格 / 拼贴 / 立项 board」类视觉。banner-grid-2x2是该分类下专门面向营销 banner 套装的模板整体一张图2×2 等大网格由 16px 白色分隔线切分每格是一个独立的 banner主标题 视觉 CTA 三要素齐全4 个 banner风格统一但内容差异共享品牌色、logo 风格、CTA 按钮位置每个 banner 可单独裁切发布到 SNS / 朋友圈 / 公众号顶部。典型适用范围在线教育课程系列 banner4 门课一套培训 / 招生 banner品牌活动多场景 banner预热 / 开抢 / 爆款 / 返场SNS / 朋友圈广告四件套何时使用用户提到「banner 系列 / 课程 banner / 4 张广告」希望一次出 4 个一致风格的 banner或需要 SNS 投放素材时直接使用本模板。不要用错模板模板文件明确给出了三个「不要使用」的场景用于与相邻模板做区分用户需求应使用的模板一张完整大 banner横向 hero 构图 CTAposter-and-campaigns/banner-hero.md多面板叙事起承转合 对话气泡storyboards-and-sequences/four-panel-comic.md同一角色 n×n 网格肖像avatars-and-profile/character-grid-portrait.md另外需要与同分类下的 ad-banner-multi-grid.md 区分banner-grid-2x2是同品牌多创意每格共享品牌色与 logoad-banner-multi-grid是多行业 / 多主题混合每格行业、主题、配色完全不同仅共享网格与留白节奏。二、缺失信息优先提问顺序模板要求缺信息时精准提问、少量提问、只围绕模板关键字段不要泛泛问「你想要什么风格」该方法论来自 prompt-writing.md。本模板的提问顺序是主题 / 业务教育 / 电商 / 品牌活动4 个 banner 分别推什么每个 banner 的核心人物 / 道具品牌色 / 品牌字是否需要 logo / CTA比例1:1 / 4:5 / 16:9 各 banner 内三、主模板2×2 课程 / 教育 Banner 套装 描述整体一张图2×2 四个独立 banner每个 banner 推一个课程共享品牌色与 logo 区。 提示词{ type: 2x2 课程 banner 套装, goal: 生成一组 4 张统一风格的课程 banner可单独裁切投放 SNS / 公众号顶部, brand: { name: {argument name\brand name\ default\星海学堂\}, logo_position: {argument name\logo position\ default\每个 banner 左上角\}, primary_color: {argument name\primary color\ default\#FF6B35\}, secondary_color: {argument name\secondary color\ default\#0F4C81\} }, layout: { format: 2x2 grid, panel_count: 4, gap: 16px 白色分隔, panel_aspect_ratio: {argument name\panel aspect\ default\4:5\}, overall_aspect_ratio: 1:1 }, panels: [ { position: top-left, course: {argument name\course 1\ default\少儿编程\}, headline: {argument name\headline 1\ default\6 岁就能学的 Scratch\}, visual: {argument name\visual 1\ default\卡通男孩在屏幕前敲键盘\}, cta: {argument name\cta 1\ default\立即试听\} }, { position: top-right, course: {argument name\course 2\ default\少儿英语\}, headline: {argument name\headline 2\ default\和外教自然对话\}, visual: {argument name\visual 2\ default\卡通女孩戴耳机说英文\}, cta: {argument name\cta 2\ default\领取试听课\} }, { position: bottom-left, course: {argument name\course 3\ default\少儿数学\}, headline: {argument name\headline 3\ default\思维训练 1v1\}, visual: {argument name\visual 3\ default\卡通孩子在白板做题\}, cta: {argument name\cta 3\ default\领取诊断\} }, { position: bottom-right, course: {argument name\course 4\ default\少儿美术\}, headline: {argument name\headline 4\ default\每周一幅作品\}, visual: {argument name\visual 4\ default\卡通孩子在画画\}, cta: {argument name\cta 4\ default\在线报名\} } ], style: { art_style: {argument name\art style\ default\扁平卡通 圆润\}, typography: 中文圆体 英文 sans }, constraints: { must_keep: [ 4 个 banner 共享同一品牌色与 logo 风格, 每个 banner 单独看也成立, 标题 ≤ 12 字 / 行, CTA 按钮位置统一 ], avoid: [ 4 个 banner 风格漂移, 标题字号差异过大, CTA 措辞不统一, 视觉元素塞太满 ] } }字段结构说明主模板遵循 prompt-writing.md 定义的 JSON 骨架type/goal/layout/style/constraints并按 banner 场景扩展出brand与panels两个场景字段type模板类型名用于让模型理解这是「2×2 课程 banner 套装」任务goal图像最终用途声明「可单独裁切投放」提示模型每格都要构图完整brand品牌名、logo 位置、主色如#FF6B35、辅助色如#0F4C81是 4 格视觉统一的来源layout2x2 gridpanel_count: 416px 白色分隔panel_aspect_ratio默认 4:5竖版 SNS 友好overall_aspect_ratio默认 1:1整张方形便于拼图展示panels按positiontop-left / top-right / bottom-left / bottom-right显式列出 4 格每格含course课程名、headline≤12 字、visual画面主体描述、cta按钮文案constraintsmust_keep列「必须出现什么」avoid列「必须避免什么」是防止 4 格风格漂移的关键约束。参数策略模板将参数分为三档规则源自 prompt-writing.md必问品牌名、4 个推广内容缺失会显著影响结果可默认品牌色、风格、layout先用默认值即可正常工作可随机每个 visual 的具体造型在风格范围内合理生成。自动补全策略用户给品牌 4 个产品时自动展开 4 个 headline visual CTA默认 2×2 16px 白色分隔CTA 措辞自动按业务类型选课程类「立即试听 / 领取试听课」电商类「立即购买 / 立即下单」等。四、三种业务变体变体 1电商商品 Banner 套装把「课程」替换为「商品心智」四个格子分别承担新品 / 热销 / 回购 / 组合四种转化诉求{ type: 电商商品 banner 套装, panels: [ {course: 新品, headline: 限时首发, cta: 立即购买}, {course: 热销, headline: TOP 1 爆款, cta: 查看}, {course: 回购, headline: 老顾客好评, cta: 回购优惠}, {course: 组合, headline: 买二送一, cta: 立即下单} ], constraints: { must_feel: 电商感 转化导向 } }变体 2活动多场景 Banner 套装把同一活动的生命周期拆成四格预热 → 开抢 → 爆款 → 返场共享一个「活动统一视觉系统」{ type: 活动多场景 banner 套装, brand: { name: {argument name\event\ default\618 大促\} }, panels: [ {headline: 预热}, {headline: 开抢}, {headline: 爆款}, {headline: 返场} ], constraints: { must_feel: 活动统一视觉系统 } }变体 3自动补全模式用户只给一句业务描述时的兜底模式由 Agent 自动决定 4 张 banner 的主题与设计{ type: 2x2 banner 自动补全, mode: auto-fill, rule: 用户给品牌 一句业务描述自动决定 4 张 banner 主题 设计, constraints: { must_feel: 可直接投放 } }五、仓库内的实战案例模板如何被真实填满模板仓库的配套展示站点 website/gpt-image2-website 中保留了该模板的真实渲染结果JSON 案例归档于website/gpt-image2-website/public/case/grids-and-collages/banner-grid-2x2/可以对照学习「参数替换」的完整过程案例 1Apple Vision 系列极简 3D 硬件风文件 1.json 将主模板替换为brand.nameApple · Vision 系列primary_color#F5F5F7secondary_color#1D1D1Flayout保持2x2 grid/panel_count: 4gap改为「16px 冷白微分隔 1px 发丝线」四格course替换为「空间办公 / 空间音频创作 / 空间健身 / 远程在场」每个headline控制在 12 字以内cta依次为「了解效率 / 观看短片 / 预约体验 / 加入候补名单」style.art_style 「苹果风极简 3D 渲染 亚光金属与磨砂玻璃 大留白」constraints.must_keep显式要求「四格白底/浅灰与深字对比一致CTA 药丸按钮同位置右下或下中」。案例 2星巴克四季特饮暖食摄影风文件 2.json 则是完全不同的业务域brand.name星巴克 · 四季特饮 2026primary_color#00704A品牌绿secondary_color#27251F四格course为「春 / 夏 / 秋 / 冬」headline如「樱花白桃拿铁回归」「青柠冷萃气泡撞醒午后」style.art_style 「暖食摄影感 轻微颗粒 高饱和但不过分」constraints.must_keep增加「四格同一条绿色主色与暗棕辅助色」「CTA 文案 4 字内」。这两个案例说明同一套 JSON 骨架只改brand、panels、style、constraints四类字段就能产出完全不同行业、却各自内部高度统一的 banner 套装——这正是「模板化提示词」的核心价值。六、从模板到成品Mode A / B / C 三种出图路径根据 SKILL.md 的模式感知工作流模板渲染出的 JSON 最终都要拍平成 prompt 字符串交给图像模型模板是提示词结构模板不是 API 请求体模板。任何任务的第一步是运行模式探测脚本node skills/gpt-image-2/scripts/check-mode.js # 想拿结构化结果给上层程序用 node skills/gpt-image-2/scripts/check-mode.js --json脚本 check-mode.js 按环境变量判定当前模式模式触发条件banner 模板怎么出图A · Garden 本地生图ENABLE_GARDEN_IMAGEGEN为真1/true/yes/on且存在OPENAI_API_KEY渲染好的 prompt 保存后调用generate.js直接出图落盘B · Host-Native 委托宿主出图未启用 Garden宿主 Agent 自带image_generation/dalle/ 图像 MCP 等工具prompt 直接传给宿主图像工具图片去向由宿主决定C · Advisor 纯提示词顾问未启用 Garden 且宿主无图像工具把 prompt 保存并打印给用户由其自行执行Mode A 下的完整调用以本模板为例按第二节的提问顺序补齐关键参数把{argument ...}全部替换为用户值或默认值拍平为一段 prompt用generate.js生图脚本参数解析见 generate.js支持--prompt、--promptfile、--size、--quality、--output-format、--n等参数node skills/gpt-image-2/scripts/generate.js \ --promptfile garden-gpt-image-2/prompt/banner-grid-2x2-20260424-153045.md \ --size 1024x1024 \ --quality highprompt 与图片默认落盘见 shared.js 的常量定义与命名规则提示词garden-gpt-image-2/prompt/task-slug-timestamp.md图片garden-gpt-image-2/image/task-slug-timestamp.png脚本内部的关键调用链可从 generate.js 与 shared.js 源码确认readPromptInput读入 prompt →savePrompt落盘 →postJson以 JSON body 请求${OPENAI_BASE_URL}/images/generations→extractGeneratedBytes优先按data[0].b64_json解析、兼容data[0].url→saveImage写盘。环境变量加载优先级为 CLI 参数 process.envcwd/.envcwd/.gateway.env~/.gateway.envOPENAI_IMAGE_MODEL默认gpt-image-2可换成网关支持的型号。七、避免事项容易翻车的地方模板最后列出的红线也是「2×2 统一系列」最容易失败的五处❌ 不要让 4 个 banner 风格漂移四格用四种无关插画语言❌ 不要让标题字号 / 字体不统一❌ 不要让 CTA 位置不一致❌ 不要让 logo 出现在不同位置❌ 不要让单个 banner 元素塞 5 个视觉元素塞太满会破坏可读性八、进阶如何在此基础上扩展新模板banner-grid-2x2是 prompt-writing.md 方法论在「统一系列网格」上的标准落点。如果你想做跨行业混合广告网格可参考 ad-banner-multi-grid.md它把global_style改为「仅统一字体与边框」每格独立指定themestylecolor_palette并在constraints.must_keep中声明「每格内容彼此独立、无叙事关联」。两者一「统一」一「多元」构成grids-and-collages分类下营销网格的两极覆盖从「同品牌 4 件套」到「跨行业 demo 板」的全部需求。赞分享人工智能AI 技能/插件提示工程【免费下载链接】garden-skillsConardLis open-source Skills collection, featuring web design, knowledge retrieval, image generation, and more.项目地址https://gitcode.com/GitHub_Trending/we/garden-skills点击查看免费下载相关推荐DiceBear Shape Grid 头像风格完全指南2×2 几何网格的原理、风格定义与实战用法DiceBear Shape Grid 头像风格完全指南2×2 几何网格的原理、风格定义与实战用法 Shape Grid 是 DiceBear 中一款纯粹的几UI组件后端DramaClaw风格模板实战上传一张参考图全项目自动统一视觉风格DramaClaw风格模板实战上传一张参考图全项目自动统一视觉风格 DramaClaw 是一款通用 AIGC 视频引擎主打剧本到成片一条流水线。它的PM Skills 实战用 /market-product 营销创意工具箱一键产出推广创意、定位、价值主张与产品命名PM Skills 实战用 /market product 营销创意工具箱一键产出推广创意、定位、价值主张与产品命名 /market product 是 pmAI 技能AI 插件上一篇在电脑上免费玩 Switchyuzu 模拟器 15 分钟上手教程下一篇霞鹜文楷屏幕阅读版完整入门5 分钟装好一款专为屏幕优化的中文字体创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考