企业官网建设流程全解析

• 人工智能
• AI 技能/插件
• 提示工程

本文围绕 garden-skills 仓库中gpt-image-2技能的「成套图标 / 拟物 / Y2K / 复古」模板 retro-skeuomorphic-icons.md 展开，讲解如何用一套可复用的结构化提示词，一次生成 6 / 8 / 12 / 16 枚风格统一、材质逼真的拟物图标集，覆盖应用图标包、主题图标包、UI 图标系统与周边贴纸 / 卡片等场景。读完本文，你将掌握主模板与三个变体的完整 JSON 写法、参数优先级设计、缺失信息提问顺序，以及如何结合gpt-image-2技能的三种运行模式（A / B / C）把它真正跑成一张图或一份高质量 prompt。

模板定位：什么是"成套图标"任务

该模板服务的是一类多图标、统一风格的视觉任务，典型形态包括：

• 拟物风应用图标集（Skeuomorphic）
• Y2K 风格水晶图标
• 像素 / 复古游戏图标
• 主题图标包（生活 / 工作 / 旅行）
• UI 图标系统

它在视觉上有四个可识别的共性特征（原文档定义）：

• 多个图标，统一风格；
• 通常 6 / 8 / 12 / 16 个；
• 每个图标圆角方形 / 圆形；
• 强调材质质感（玻璃 / 金属 / 拟物），适合作为 app 图标包 / icon set。

在gpt-image-2技能的references/目录体系中，它位于assets-and-props/分类下，与 game-screenshot-mockup.md 同属「成套素材 / 游戏资产」类视觉（见 SKILL.md 第 15 节模板索引）。在仓库的案例索引 _mapping.json 中，该模板登记为assets-and-props/retro-skeuomorphic-icons，并挂有 2 个已渲染案例（iOS 拟物 12 图标集、Y2K 水晶 8 图标包）。

适用范围与使用边界

原文档明确列出适用场景：

• 应用图标集
• 主题图标包
• UI 图标系统
• 周边贴纸 / 卡片

何时使用：当用户提到"图标 / icon set / 拟物 / skeuomorphic / Y2K / 像素图标"，或明确希望得到一套成套图标时，优先选用本模板。

不要使用（避免与相邻模板混淆）：

• 单个 3D 图标头像 → 用 themed-3d-icon.md（该模板是单图、单角色、1:1 头像构图）；
• 贴纸套装 → 用 sticker-set.md（强调独立元素 + 描边 + 标签）；
• 通用品牌识别 → 用 brand-identity-board.md。

也就是说，判定核心是**"成套"**：本模板产出的是一张图内的多图标网格，而不是单枚图标或角色形象。

缺失信息优先提问顺序

与 prompt-writing.md 第 8 节"缺失信息提问策略"一致，模板把提问收敛到 6 个关键字段，按影响度排序：

1. 风格（拟物 / Y2K / 像素 / Flat / Glass / Clay）
2. 图标主题（应用 / 工作 / 生活 / 旅行）
3. 图标数量（6 / 8 / 12 / 16）
4. 主色 1-2 个
5. 形状基底（圆角方形 / 圆形 / 自由形）
6. 是否带文字标签

参数策略（原文档）：

• 必问：主题、数量、风格 —— 这三个字段缺失会显著影响成图方向；
• 可默认：layout、配色、形状基底 —— 缺失时可用模板默认值正常工作；
• 可随机：每个图标具体设计 —— 允许在风格范围内自动补全。

这与prompt-writing.md第 6 节"参数设计规则"的三分类（核心参数 / 可默认参数 / 可随机参数）完全对应，也是gpt-image-2Skill 在 SKILL.md「JSON 模板工作方式」中的约定：用户明确给的值直接填入，没给但有default的先用默认值，仍缺失才问。

主模板：拟物风应用图标集

原文档的主模板是一份可直接复制使用的结构化 JSON 提示词（注意：按 SKILL.md「重要约束」所述，它只是提示词结构模板，不是 API 请求体，最终交给图像模型的是渲染后的 prompt 字符串）：

{ "type": "拟物风应用图标集", "goal": "生成一组成套统一风格的图标，可作为 icon pack / 主题包", "theme": "{argument name=\"theme\" default=\"经典办公应用\"}", "style": { "rendering": "{argument name=\"rendering\" default=\"拟物 3D + 软光 + 柔和阴影\"}", "material": "{argument name=\"material\" default=\"玻璃质感 + 微微反光\"}", "color_palette": "{argument name=\"color palette\" default=\"米白 + 暖橙 + 浅蓝 + 灰\"}", "shape_base": "{argument name=\"shape base\" default=\"圆角方形（24% 圆角）\"}" }, "layout": { "grid": "{argument name=\"grid\" default=\"4x3\"}", "icon_count": "{argument name=\"icon count\" default=\"12\"}", "spacing": "16px", "background": "{argument name=\"background\" default=\"米色纸纹\"}", "label_below": "{argument name=\"label below\" default=\"true\"}", "label_style": "细灰色无衬线小字" }, "icons": [ {"id": 1, "concept": "{argument name=\"icon 1\" default=\"邮件 - 信封 + 发光指示\"}", "label": "Mail"}, {"id": 2, "concept": "{argument name=\"icon 2\" default=\"日历 - 翻开页面 + 红色今日标记\"}", "label": "Calendar"}, {"id": 3, "concept": "{argument name=\"icon 3\" default=\"备忘录 - 黄色便签 + 红色书签\"}", "label": "Notes"}, {"id": 4, "concept": "{argument name=\"icon 4\" default=\"相机 - 复古胶片机\"}", "label": "Camera"}, {"id": 5, "concept": "{argument name=\"icon 5\" default=\"音乐 - 黑胶唱片\"}", "label": "Music"}, {"id": 6, "concept": "{argument name=\"icon 6\" default=\"地图 - 折叠地图 + 红针\"}", "label": "Maps"}, {"id": 7, "concept": "{argument name=\"icon 7\" default=\"天气 - 太阳 + 云\"}", "label": "Weather"}, {"id": 8, "concept": "{argument name=\"icon 8\" default=\"计算器 - 数字按键\"}", "label": "Calc"}, {"id": 9, "concept": "{argument name=\"icon 9\" default=\"时钟 - 圆形表盘\"}", "label": "Clock"}, {"id": 10, "concept": "{argument name=\"icon 10\" default=\"设置 - 齿轮\"}", "label": "Settings"}, {"id": 11, "concept": "{argument name=\"icon 11\" default=\"健康 - 心形脉搏线\"}", "label": "Health"}, {"id": 12, "concept": "{argument name=\"icon 12\" default=\"钱包 - 棕色皮夹\"}", "label": "Wallet"} ], "constraints": { "must_keep": [ "12 个图标风格严格统一（同样光源、同样圆角、同样厚度）", "色板 ≤ 6 色", "label 字体一致", "每个图标可单独识别" ], "avoid": [ "图标风格漂移（有些拟物有些扁平）", "颜色超过 6 种", "图标内部细节过密", "label 错字" ] } }

逐字段拆解

对照 prompt-writing.md 第 4 节的 JSON 骨架（type / goal / subject / scene / layout / style / details / constraints），本模板做了适配，核心字段职责如下：

• type：任务类型名称，声明"拟物风应用图标集"，是模型理解整体目标的第一锚点；
• goal：说明产出用途（icon pack / 主题包），与type一起防止模型跑偏成单枚图标；
• theme：图标包主题。默认"经典办公应用"，实际使用时可替换为生活 / 工作 / 旅行等任意主题；
• style：风格四件套 ——rendering（渲染方式，默认"拟物 3D + 软光 + 柔和阴影"）、material（材质，默认"玻璃质感 + 微微反光"）、color_palette（默认"米白 + 暖橙 + 浅蓝 + 灰"）、shape_base（形状基底，默认"圆角方形（24% 圆角）"）；
• layout：网格布局 ——grid默认 4×3、icon_count默认 12、spacing固定 16px、background默认米色纸纹、label_below默认 true、label_style默认细灰色无衬线小字；
• icons：12 个图标的具体概念逐一定义，每项由id（序号）、concept（形象描述，如"邮件 - 信封 + 发光指示"）、label（图标下方文字标签）组成。这是"成套"质感的关键 —— 逐个点名，模型才不容易漏画或画成重复造型；
• constraints：must_keep（必须保持）与avoid（必须避免）双向约束，把统一性要求写成可执行条款。

参数占位符写法

模板中的{argument name="theme" default="经典办公应用"}遵循prompt-writing.md第 7 节的参数写法规范：name简洁明确、default给出可直接工作的值；如果一个字段后续常需随机化，也应先给合理默认值。渲染最终 prompt 时，把用户提供的值或默认值填入即可。

自动补全策略

原文档定义了主模板的自动补全行为：

• 用户给主题 + 数量时：自动展开每个图标的具体形象（即补全icons数组里每个concept）；
• 默认 4×3 = 12 个；
• 默认拟物 3D + 玻璃质感。

这与prompt-writing.md第 9 节"自动补全策略"呼应：当用户说"你来补全 / 你随机生成 / 先给我一个 demo"时，只问最关键的 1-2 个问题，其余用默认值或在可随机字段中合理生成，同时保证不破坏主体一致性、不与用户已给信息冲突。

变体 1：Y2K 水晶图标包

在主模板基础上替换风格与材质字段即可，完整提示词：

{ "type": "Y2K 水晶图标包", "style": { "material": "透明水晶 + 折射光", "color_palette": "高饱和粉 + 蓝紫 + 银" }, "constraints": { "must_feel": "Y2K Aero 风" } }

注意该变体新增了must_feel约束字段：它不写具体rendering细节，而是用"Y2K Aero 风"这一风格锚点约束整体氛围 —— 这是 prompt-writing.md 第 10 节"变体不应完全脱离主模板，而应在主模板结构上调整少量字段"的典型用法。

变体 2：像素复古游戏图标

面向 16-bit 复古游戏主题的变体：

{ "type": "像素复古游戏图标", "style": { "rendering": "16-bit 像素 + 锐利边缘", "color_palette": "16 色复古游戏调色板" }, "constraints": { "must_feel": "FC / SNES 时代" } }

rendering改为"16-bit 像素 + 锐利边缘"、色板改为"16 色复古游戏调色板"，约束锚点设为"FC / SNES 时代"，即可让整套图标从拟物质感切换为复古游戏像素语言。

变体 3：自动补全模式

当用户只给一句主题、要求全自动产出时使用：

{ "type": "图标包自动补全", "mode": "auto-fill", "rule": "用户给主题，自动决定图标数量、风格、配色、layout", "constraints": { "must_feel": "可作为 icon pack 上架" } }

该变体显式声明mode: "auto-fill"，并把"可作为 icon pack 上架"写成验收标准，本质上是把"自动补全策略"字段化、交给模型执行。

仓库实战案例：两份真实渲染记录

gpt-image-2技能在 website/gpt-image2-website/public/case/ 下沉淀了该模板的两份真实案例 JSON，可作为主模板与变体 1 的"落地版"对照。

案例 1：iOS 拟物风 12 应用图标集（4×3 网格），见 retro-skeuomorphic-icons/1.json。它在主模板基础上做了商业化级细化：

• rendering升级为"skeuomorphic 3D + 柔光 + 1px 上沿高光 + 深柔影"；
• material混入"玻璃高光层 + 不锈钢拉丝 + 少量皮革与纸上 UV 光"；
• color_palette收敛为"奶油灰底 + 天蓝 + 信号绿 + 软橙 + 石墨黑"；
• icons的 12 个概念全部重写（如"牛皮信封口微张露出白信纸一角 + 红色蜡封点"→ Mail，"金属环日历翻至今日 + 红色圆钉"→ Cal）；
• constraints.must_keep追加"12 枚同主光左上 45°、同底边对齐"，avoid追加"与 iOS 官方图标 1:1 撞脸"。

这条案例证明：主模板的icons数组可以完全重排，只要style与constraints的统一条款不变，就能产出风格一致但内容全新的图标包。

案例 2：Y2K Aero 风水晶玻璃音乐主题 8 图标（2×4），见 retro-skeuomorphic-icons/2.json。这是变体 1 的完整落地：

• type为"Y2K 水晶图标包"，goal明确"8 个图标，2 行 4 列"；
• style.material为"水晶主体 + 镀铬薄圈 + 内部悬浮音符几何"，色板给出具体色值"高饱和品红 #FF2D95 + 电青 #00C8FF + 银白高光"；
• layout.background为"径向深紫到黑的 glossy 底，带轻微星尘颗粒"，label_style为"细白 8pt 全大写无衬线，下发光"；
• 8 个图标概念全部围绕音乐主题（AUX / WAVE / PLAY / MIC / VINYL / SYNTH / TUNE / NOTE）；
• constraints用must_feel声明"整体像 2000 年代中期多媒体皮肤宣传图，不混入 Metro 风扁平块"，并用avoid限定"水晶内部元素超过主形三层深度"。

这份案例演示了变体 1 的实践要点：主题越聚焦（音乐 / 耳机文化），整套图越有"上架感"。

把模板跑成图：三种运行模式

按 SKILL.md 的约定，gpt-image-2技能有 A / B / C 三种运行模式，任何任务的第一步都是先探测模式：

node skills/gpt-image-2/scripts/check-mode.js # 想拿结构化结果给上层程序用： node skills/gpt-image-2/scripts/check-mode.js --json

探测脚本的逻辑见 check-mode.js：当ENABLE_GARDEN_IMAGEGEN为真（1/true/yes/on/y）且存在OPENAI_API_KEY时为Mode A；只开开关但缺 key 时为A?；否则为B-or-C。三种模式的出图路径完全不同：

Mode A 下的完整命令示例（render 好模板后）：

node skills/gpt-image-2/scripts/generate.js \ --prompt '{"type":"拟物风应用图标集", ...}' \ --size 1024x1024 \ --quality high

从 generate.js 的实现看，脚本会先通过 shared.js 的loadAmbientEnv()按顺序加载<cwd>/.env、<cwd>/.gateway.env、~/.gateway.env，再把 prompt 保存到garden-gpt-image-2/prompt/<task-slug>-<timestamp>.md，图片输出到garden-gpt-image-2/image/<task-slug>-<timestamp>.png；extractGeneratedBytes优先按data[0].b64_json解析，兼容data[0].url。也支持把 prompt 先存成文件再引用：

node skills/gpt-image-2/scripts/generate.js \ --promptfile garden-gpt-image-2/prompt/retro-icon-pack-20260424-153045.md

Mode B / C 下没有命令行入口，按 SKILL.md「快速用法」第 5 节执行即可。生成完成后，无论哪种模式，都应向用户交代三件事：当前模式是什么、prompt 落在哪、图（如有）落在哪。

避免事项：成套图标最容易翻车的 6 个点

原文档在结尾给出完整的质检清单，这也是渲染前写进constraints.avoid的依据：

• 不要让图标风格漂移—— 部分拟物、部分扁平是成套图标最常见的失败形态，需在must_keep中显式声明"同样光源、同样圆角、同样厚度"；
• 不要让色板 > 6—— 超出后整套图会失去统一感，主模板与案例 1 都把"色板 ≤ 6 色"列为硬约束；
• 不要让 label 字体超过 1 种—— 标签是图标的"排版骨架"，字体混用会立刻显"散"；
• 不要让单个图标内部塞 > 3 元素—— 图标是低信息密度载体，元素过多在小尺寸下会糊成一团（案例 2 的avoid同样限定"水晶内部元素不超过主形三层深度"）；
• 不要让网格大小不一致—— 同一张图内各图标底边、尺寸必须对齐（案例 1 明确"12 枚同底边对齐"）；
• 不要让 icon 与 background 对比度不够—— 图标与底色互相融合会导致整张图失去可读性。

把这 6 条反向映射到constraints.must_keep / avoid字段，就是一份可直接用于质检的验收清单。

小结

retro-skeuomorphic-icons.md是gpt-image-2技能中"成套视觉"的样板模板：它示范了如何用type / goal / theme / style / layout / icons / constraints的 JSON 骨架，把"多图标 + 统一风格 + 材质质感"这一抽象需求拆解成模型可逐条执行的指令，并配套参数策略（必问 / 可默认 / 可随机）、自动补全策略与三类变体。结合仓库中的两份案例 JSON（拟物 12 图标集、Y2K 水晶 8 图标包）与 A / B / C 三模式执行链路，你可以直接照此生成可打包上架的应用图标包、主题图标包或 UI 图标系统。

• 人工智能
• AI 技能/插件
• 提示工程