awesome-gpt-image-2 实战指南：532 个逆向案例、21 套工业级模板与 GPT-Image2 Style Library 的 Prompt as Code 工程化实践

awesome-gpt-image-2 实战指南：532 个逆向案例、21 套工业级模板与 GPT-Image2 Style Library 的 Prompt as Code 工程化实践

【免费下载链接】awesome-gpt-image-2Prompt as Code | GPT-Image2 工业级提示词引擎与模板库，530+ 个案例逆向工程，20+ 套工业级模板，并提炼出Skills，持续更新中项目地址: https://gitcode.com/GitHub_Trending/awe/awesome-gpt-image-2

本文以开源仓库 awesome-gpt-image-2 为对象，系统讲解其将散落的社区提示词提炼为可复用资产的核心方法论：532 个逆向工程案例构成的多分类画廊、21 套"开箱即用"的工业级提示词模板与防坑指南，以及面向 Claude Code、Codex 等 Agent 的 GPT-Image2 Style Library 技能包。读完本文，你将掌握如何按"分类 → 风格 → 场景 → 案例"的链路快速产出稳定、可控、可复用的 GPT-Image2 提示词，并了解仓库配套的可视化网站（案例画廊 + 登录鉴权生成）的完整技术架构与部署清单。

项目定位：把提示词当作代码（Prompt as Code）

在 GPT-Image2 全面可用之后，AI 图像生成的核心问题已从"能不能出图"转向"能不能稳定、可控、可复用地产图"。本项目的答案是：把散文式的提示词压缩为结构化协议（structured protocols），让提示词像代码一样可组合、可复用、可被自动化流程调用——这正是"Prompt as Code"的含义。

项目愿景凝练为三个可落地的工程原则：

• 原子化 Schema（Atomic schema）：将主体（subject）、光照（lighting）、材质（materials）、版式（layout）、视觉细节（visual details）拆解为可组合的独立部分；
• 工作流友好（Workflow friendly）：结构专为 Agent、脚本与自动化系统设计，而非仅供人类阅读；
• 结构化控制（Structured control）：对版式、文案与信息层级提供更强的可控性，适配批量生成、模板系统和生产工作流。

从仓库数据层看，这套原则有直接落地证据：data/style-library.json 定义了categories（13 个分类）、styles（视觉风格标签）、scenes（场景标签）与templates（模板条目）四个维度的受控词表；data/cases.json 则是从画廊文档自动解析生成的案例数据集，每个案例都带有category、styles、scenes标签。整个仓库的数据模型围绕"可检索、可分类、可被程序消费"设计，而非单纯堆图。

案例画廊：532 个逆向工程案例与 13 大分类

画廊的组织方式

完整画廊按 GitHub 渲染体积拆分为两册，避免页面过长被截断：

• Gallery Part 1：例 1-165
• Gallery Part 2：例 166-532
• 画廊总览与推荐入口

仓库文档标注的当前案例总数为 532（README 徽章与 docs/gallery.md 均采用该数字；data/cases.json 为最近一次数据生成时的快照，其totalCases字段会随重新运行npm run generate:site-data而更新）。

13 大分类总览

画廊按输出类型划分为 13 个分类，每个分类对应独立的封面图与模板锚点（cat-*），分类数据定义见 data/style-library.json：

使用画廊的正确姿势是：先看案例相册找到视觉方向，再打开提示词模板分类，把方向转成可复用结构（README Category Overview 的明确指引）。

精选案例（Featured Cases）

README 首页精选了若干高价值案例作为学习入口，每个案例都标注了可重点研究的维度：

• Case 1 信息图可视化：工程白皮书风格信息图，研究模块化结构、信息层级与双语标注 —— 查看
• Case 2 社媒界面截图：混合"产品界面 + 社交内容截图"，研究文本块、UI 框架与内容卡片控制 —— 查看
• Case 6 插画艺术：日式幻想插画，研究氛围、色彩与大幅场景构图 —— 查看
• Case 17 交互设计图：经典"结构化拆解 + 说明性版式"案例 —— 查看
• Case 166 十二黄金圣斗士卡牌：多卡统一风格，研究批量生成与系列设计 —— 查看
• Case 310 零食品牌技术分解图："信息图 + 品牌视觉"混合参考 —— 查看

此外 docs/gallery.md 的推荐入口还收录了大量中文社区案例，例如 Case 330 月下美女直播画面、Case 334 RAG 技术详解图、Case 338《赤壁怀古》长卷图、Case 355 概念字体海报、Case 362 抹茶品牌触点系统视觉板等。

画廊的数据链路：源码如何解析案例

从源码结构看，画廊文档与站点数据是单向生成的关系：scripts/generate-site-data.mjs 负责把两册画廊 Markdown（docs/gallery-part-1.md、docs/gallery-part-2.md）解析为结构化的 data/cases.json：

• 通过正则/<a name="case-(\d+)"><\/a>/g切分每个案例块，提取标题、配图、**提示词：**代码块与**来源：**字段；
• 结合 data/style-library.json 中的分类锚点（cat-*）为案例标注分类；当分类缺失时，通过关键词规则（中英文关键词，如ui/app/界面、infographic/信息图等）自动推断；
• 依据风格/场景标签的关键词表为每个案例打上styles与scenes标签，并标记精选案例（featured列表）。

因此，网站、Agent 与数据文件共用同一份风格库：修改画廊文档后运行npm run generate:site-data即可重建数据集，无需手工维护 JSON。

工业级提示词模板：21 套模板与防坑指南

模板库完整存放在 docs/templates.md，README 首页提供了分类导航层（4 页 12 类，与画廊分类一一对应，通过tpl-*锚点跳转）。每套模板都自带"避坑指南"，目标是"直接复制填空，不再玄学抽卡"。

模板分类导航（Template Page 1-4）

常规模板 vs JSON 进阶模板

以UI 与界面为例，模板库提供了两条写作路径：

常规模板（人类直接填空）：

为[产品类型]生成一张[平台，如 iOS/Android/Web]界面图。 核心功能：[功能点A]、[功能点B]、[功能点C]。 视觉风格：[极简/科技/拟物]，主色[颜色]，强调色[颜色]。 布局：[顶部导航/双栏/卡片流]，信息层级清晰，留白充足。 输出：高保真UI截图，文字清晰可读，比例[9:16/16:9]。

JSON 进阶模板（README 明确标注"推荐给 Agent 调用"，可将业务数据直接序列化进提示词）：

{ "type": "UI Screenshot", "platform": "iOS", "product": "Fitness App", "layout": "Card-based feed with bottom tab bar", "style": { "theme": "Dark Mode", "primary_color": "Neon Green", "typography": "Clean sans-serif" }, "content": { "header": "Today's Activity", "cards": [ {"title": "Running", "data": "5.2 km", "button": "Start"}, {"title": "Calories", "data": "340 kcal"} ] }, "constraints": "High fidelity, readable text, 9:16 aspect ratio" }

此外 UI 分类下还针对高频细分场景提供了截图生成模板（指定平台 X/抖音/小红书/微信朋友圈、深色/浅色模式、账号信息/正文内容/互动数据/界面元素四段式）与直播界面模板（主播、背景、UI 叠加层分层描述）。

信息图模板示例

图表与信息可视化分类的常规模板强调"主题具体化 + 模块化结构"：

生成[主题：明确、具体，避免宽泛。例如：“老年人日常健康管理指南”而非“健康”]信息图，目标读者为[人群:细化人群特征，如年龄段、职业、兴趣等]。 结构：标题区 + [3-5]个模块（每模块含图标、短标题、1-2句说明,模块间逻辑：可用箭头、颜色区分或连接线提示信息流或关系等适当的方式）。 图表类型：[流程图/对比图/关系图/时间线]。 风格：[专业报告/科普插画/儿童教育等]，主色[颜色]，背景[浅色/深色]。 输出：信息层级清晰、可读性高的中文信息图。

模板库还收录了尺度缩放科学信息图模板（6-8 个按微观到宏观递进的框体、细线连接、标题命名规范）等进阶变体，以及概念字体海报、运动商业 Campaign、多风格签名选择海报等专项模板，完整内容请直接阅读 docs/templates.md。

通用的防坑原则

从模板库各分类的"避坑指南"中可以提炼出几条跨分类通用的工程经验：

• 拒绝模糊指令：明确"平台 + 比例 + 布局"，否则模型会随意排版；
• 强制文字锁定：要求"文字绝对可读、必须显示指定中文"，避免乱码按钮与占位文本；
• 锁定平台特征：X 有蓝勾认证、抖音有音乐碟片、小红书是双列瀑布流，生成前必须指定平台；
• 控制模块数量与文案篇幅：图表场景强制定制模块数量与图表类型，文案优先短句，不要塞长段正文；
• 特殊比例前置：车机、智能家居等固定比例（如 21:9）必须写在提示词最前面。

模板与风格库的源码级校验

从源码结构看，模板库与风格库之间存在强校验约束：scripts/generate-style-skill.mjs 在生成技能参考文件时会执行validateLibrary：

• 从 docs/templates.md 中提取全部<a name="..."></a>锚点，逐一校验每个模板的anchor与每个分类的templateAnchor必须真实存在（缺失即抛错）；
• 校验模板、分类、风格、场景的 ID/value 全局唯一；
• 校验模板封面图与分类封面图本地文件存在且不重复。

这意味着：任何指向 docs/templates.md 锚点的链接都在数据生成时被程序验证过，仓库内的跳转不会出现 404。这也是"Prompt as Code"中"代码可编译"思想的体现——数据与文档不一致时构建直接失败。

Agent Skill：GPT-Image2 Style Library 的安装与使用

仓库附带一个面向 Agent 的官方技能包gpt-image-2-style-library（npm 包版本 1.0.4，见 agents/skills/gpt-image-2-style-library/package.json）。它与网站共用 data/style-library.json 这一份风格库，因此网站浏览体验与 Agent 工作流完全同源。技能源文件位于 agents/skills/gpt-image-2-style-library/SKILL.md，其生成参考文档为 agents/skills/gpt-image-2-style-library/references/style-library.md。

技能定义与工作流程

从 SKILL.md 的 frontmatter 看，技能被定义为：Choose GPT-Image2 / gpt-image-2 visual styles and industrial prompt templates from the awesome-gpt-image-2 style library，适用于创建、重写、分类或优化图像生成提示词的场景。其内置工作流为：

1. 检测用户语言，并用该语言作答；
2. 识别目标输出类型：product、poster、UI、infographic、brand、photo、illustration、character、scene、history、document 或特殊任务；
3. 按顺序匹配：模板分类 → 视觉风格标签 → 场景标签 → 最近似的案例；
4. 若某模板明显最匹配则直接使用；若有多个候选，则给出 2-3 个选项及简短理由请用户选择；
5. 按六个模块组装最终提示词：主体与任务、构图与版式、视觉风格与材质、文字与标注要求、宽高比与输出格式、约束与负面细节；
6. 输出包含所选模板名与相关示例案例编号。

输出默认约定：先给可复制的提示词；中文请求输出中文提示词（除非用户要求英文）；多概念请求复用同一模板、变化主体/构图/配色/场景。

安装方式（四种）

方式一：npx skills 安装（推荐用于 Claude Code、Codex、Cursor 等支持skills的工具）

# 仅安装到指定 Agent npx skills add freestylefly/awesome-gpt-image-2 --skill gpt-image-2-style-library --agent claude-code codex --global --yes --copy # 安装到本地所有受支持的 Agent npx skills add freestylefly/awesome-gpt-image-2 --global --all --copy

方式二：Claude Code 插件市场（在 Claude Code 内执行）：

/plugin marketplace add freestylefly/awesome-gpt-image-2 /plugin install gpt-image-2-style-library@awesome-gpt-image-2

方式三：npm CLI（全局安装后同步技能）

npm install -g gpt-image-2-style-library gpt-image-2-style-library install all

免全局安装的等价命令：

npx gpt-image-2-style-library install all

方式四：GitHub Packages 安装（针对无法直接访问 npm 公共源的环境）：

npm login --scope=@freestylefly --registry=https://npm.pkg.github.com npm install -g @freestylefly/gpt-image-2-style-library --registry=https://npm.pkg.github.com gpt-image-2-style-library install all

install all会把技能写入 Codex 与 Claude Code 的公共本地目录，包括~/.codex/skills、~/.claude/skills与~/.agents/skills。安装完成后需要重启 Agent 会话。

安装后即可直接用自然语言调用，例如：

Use gpt-image-2-style-library to create an infographic prompt about Codex.

本地开发与源码机制

从 scripts/install-style-skill.mjs 源码可见，安装器支持all、codex、claude-code、agents/shared等目标别名，且尊重CODEX_HOME、CLAUDE_HOME、AGENTS_HOME环境变量来覆盖默认的~/.codex、~/.claude、~/.agents目录；安装采用"先清空目标目录再整目录复制"的策略，确保技能始终与仓库源码同步。

本地开发维护技能时：

npm run generate:style-skill # 从 data/style-library.json 重新生成 references/style-library.md npm run install:skill # 安装技能到本地 Codex 技能目录

从 scripts/generate-style-skill.mjs 看，生成的参考文档包含 Selection Rules（选择规则：先按产品类型匹配模板分类、再按视觉词匹配风格标签、再按上下文词匹配场景标签）、每个模板的 ID/分类/风格/场景/标签/封面/示例案例、以及各模板的 use-when、guidance 与 pitfalls 双语条目——这实际上把 docs/templates.md 的内容程序化地折叠进了 Agent 可直接读取的结构化参考文件。

网站与生成链路：Supabase + Vercel 的可验证架构

项目配套的可视化站点（gpt-image2.canghe.ai）不只是画廊展示，还包括Google 登录鉴权 + 案例生成能力。README 明确了技术栈：Supabase Auth、Supabase Postgres，以及一个作为 GPT Image 2 API 代理的 Vercel Function。对应到源码：src/supabaseClient.js 承载前端鉴权，api/generate-image.js 是生成接口的核心实现。

生成接口的源码要点

从 api/generate-image.js 源码结构看，生成接口具备以下工程特征：

• 定义MAX_PROMPT_LENGTH = 6000，对提示词长度做硬性上限约束；
• 默认代理基址DEFAULT_CIYUAN_BASE_URL = 'https://ciyuan.today'，由CIYUAN_API_KEY与 Supabase 服务端配置共同决定是否可用（isServerConfigured）；
• 通过getAuthContext、getProfileById等函数完成登录态与用户档案校验，并维护reservation_id、credit_amount、free_generations_used等积分/免费额度字段——与迁移文件中的积分表结构对应。

Vercel 环境变量清单

README 列出的必需环境变量如下（保留原始键名，按用途分组说明）：

# Supabase 客户端与服务端 VITE_SUPABASE_URL= VITE_SUPABASE_ANON_KEY= SUPABASE_SERVICE_ROLE_KEY= SUPER_ADMIN_EMAILS=2689458656@qq.com,canghe0818@gmail.com # GPT Image 2 生成代理（api/generate-image.js 使用） CIYUAN_API_KEY= CIYUAN_BASE_URL=https://ciyuan.today # 站点地址 APP_URL=https://gpt-image2.canghe.ai # Stripe 订阅与积分包支付（api/billing/* 使用） STRIPE_SECRET_KEY= STRIPE_WEBHOOK_SECRET= # GA4 分析与 Google OAuth（api/_lib/ga4.js、scripts/google-analytics-oauth.mjs 使用） VITE_GA_MEASUREMENT_ID= GA4_PROPERTY_ID= GOOGLE_ANALYTICS_CLIENT_ID= GOOGLE_ANALYTICS_CLIENT_SECRET= GOOGLE_ANALYTICS_REFRESH_TOKEN=

安全约束：SUPABASE_SERVICE_ROLE_KEY、STRIPE_SECRET_KEY、STRIPE_WEBHOOK_SECRET只能放在 Vercel Environment Variables 等服务端环境中，绝不能暴露到前端。

数据库迁移清单

按 README 的 Setup checklist，按顺序应用以下迁移文件即可逐步开启对应功能：

第三方集成设置清单

• Supabase Auth：将https://gpt-image2.canghe.ai与本地开发地址（如http://127.0.0.1:5173）加入 Auth 重定向白名单；在 Supabase Dashboard 添加 Google OAuth 凭据后启用 Google Provider；如需强制 Google 唯一登录，可在 Auth 设置中禁用 Email Provider。
• Stripe Checkout：Webhook URL 配置为https://gpt-image2.canghe.ai/api/billing/webhook；订阅事件需订阅checkout.session.completed、invoice.payment_succeeded、customer.subscription.updated、customer.subscription.deleted。
• GA4 分析：为站点创建 GA4 属性，将 Measurement ID 填入VITE_GA_MEASUREMENT_ID，数字属性 ID 填入GA4_PROPERTY_ID。
• Google Analytics OAuth：创建 Google OAuth Web Client，授权重定向 URI 设为http://localhost:8080/oauth2callback，将GOOGLE_ANALYTICS_CLIENT_ID与GOOGLE_ANALYTICS_CLIENT_SECRET写入本地.env.local；运行npm run ga4:oauth，打开生成的 URL，授权analytics.readonly权限，将回调 URL 粘贴回终端，最后把返回的GOOGLE_ANALYTICS_REFRESH_TOKEN以 Sensitive 环境变量形式加入 Vercel。

从零开始使用这个仓库

README 给出了简洁的三步使用法：

1. 从精选案例出发，确定你想模仿的输出类型；
2. 打开完整画廊寻找近似案例，先复制结构、再替换风格词汇；
3. 回到模板页，把业务变量填入常规模板或 JSON 模板。

本地开发与构建命令（以 package.json 为准）：

npm install # 安装依赖 npm run dev # predev 会自动执行 generate:site-data 与 generate:style-skill npm run build # prebuild 同样先重新生成站点数据与技能参考 npm run preview # 预览构建产物 npm test # 运行 api/_lib/*.test.js 单元测试

其中npm run generate:site-data从画廊文档重建 data/cases.json，npm run generate:style-skill从 data/style-library.json 重建技能参考文档——两个命令共同保证了网站、数据与 Agent 技能三者始终基于同一份数据源。

声明与许可

本项目仅整理公开可访问的社区提示词与示例图片，供学习与研究使用，不对任何第三方原创内容主张所有权；整理过程中参考了公开提示词库内容用于学习、总结与方法论研究，版权归原作者或平台所有。如需商业使用第三方内容，请先获得原始权利人的授权（详见 完整免责声明）。

仓库整体以 MIT License 开源，允许自由使用、修改、分发与二次构建，但需保留许可证声明。

综上，awesome-gpt-image-2 提供了一条从"案例 → 分类 → 模板 → Agent 技能 → 生产环境"的完整提示词工程链路：画廊负责供给视觉灵感，模板负责把灵感固化为可复制结构，Style Library 技能让 Agent 按同一套词表自动产出提示词，而网站与 API 则验证了这套体系在生产环境（鉴权、计费、生成代理）中的可运行性。

【免费下载链接】awesome-gpt-image-2Prompt as Code | GPT-Image2 工业级提示词引擎与模板库，530+ 个案例逆向工程，20+ 套工业级模板，并提炼出Skills，持续更新中项目地址: https://gitcode.com/GitHub_Trending/awe/awesome-gpt-image-2