)
| 感谢 APIMart 赞助了本项目！APIMart 是专注 AI 图片/视频生成的低价 API 平台，GPT-Image-2 低至 `$0.006/张`，1 美元可出图 160+ 张。图片、视频一套异步 API 通吃，提交任务拿 ID、回调取结果，跑批万张不超时、换模型不改代码。按量付费、无月费，通过此[注册链接](https://apimart.ai/register?aff=oQgzUQ)注册即可开用。 |
| 
| 感谢 hiapi 赞助了本项目！hiapi 是聚焦 AI 图片/视频生成的 API 平台——GPT-Image-2 全系（文生图、图生图、1K–4K）加 Seedance、可灵、万相等视频模型，统一异步 API 通吃：提交任务拿 `task_id`，轮询或回调取结果，跑批不超时、换模型不改代码。生成结果转存自有 CDN 并**支持持久化存储**——图片/视频链接长期有效、随时回取，免去自行下载备份。原生 Remote MCP 与 Agent Skills，一行接入 Claude Code、Cursor。中文界面与文档、支持微信支付，按量付费无月费，新用户注册即送 $1（约 50 张图）。通过此[注册链接](https://www.hiapi.ai/zh/register?aff=DzuH&utm_source=github&utm_medium=sponsor&utm_campaign=awesome-gpt-image-2)即可开用。 |
| 
| 感谢 PackyCode 赞助本项目！PackyCode 是一家稳定、高效的 API 中转服务商，提供 Claude Code、Codex、Gemini 等多种中转服务，具备自动故障转移、智能路由和无限并发等功能，帮助 AI 编程提升生产效率。通过此[注册链接](https://www.packyapi.ai/register?aff=CV0c)即可开始使用。 |
| 
| 项目赞助方。PPToken 提供 ChatGPT、Claude、Gemini 等主流 AI 模型的 API 中转和 Key 分发能力，支持低延迟、高可用、按量付费和灵活订阅。 |
## ⚡️ 项目愿景
GPT-Image2 全量开放后，AI 画图从“能不能出图”变成了“能不能稳定、可控、可复用地出图”。这个项目关注的是把零散案例逆向整理成一套更适合 Agent 和自动化工作流调用的 Prompt-as-Code 资产，而非单纯堆提示词。
核心目标只有一个：把“散文式提示词”压缩成“结构化协议”。当你需要批量出图、做模板系统、接进生产流程时，这种整理方式比单纯堆案例更有价值。
- 🧱 原子化 Schema：把主体、光影、材质、排版等视觉要素拆成可组合组件
- ⚙️ 工作流友好：面向 Agent、脚本和自动化系统，而不是只给人肉复制
- 🧬 结构化控制：尽量提高版式、文案、信息层级的可控性
## 📖 快速入口
- [完整案例总览](docs/gallery.md)
- [案例画廊 Part 1：例 1-165](docs/gallery-part-1.md)
- [案例画廊 Part 2：例 166-532](docs/gallery-part-2.md)
- [工业级提示词模板与防坑指南](docs/templates.md#section-templates)
- [Agent Skill：GPT-Image2 风格库](agents/skills/gpt-image-2-style-library/SKILL.md)
- [MIT License](LICENSE)
- [完整声明页](docs/disclaimer.md#section-disclaimer)
## 🗂️ 分类概览
先看案例画册，快速找到你想参考的视觉类型；再看提示词模板，把对应类型拆成可复用结构。
### 🖼️ 案例分类画册
|
🧩 UI与界面  App、网页、仪表盘、社媒截图与产品界面。 查看案例 |
📊 图表与信息可视化  信息图、知识图谱、技术解释与结构化图解。 查看案例 |
📰 海报与排版  活动海报、封面、字体视觉和强排版画面。 查看案例 |
|
🛍️ 商品与电商  商品图、详情页、包装卖点和商业广告。 查看案例 |
🏷️ 品牌与标志  Logo、VI、品牌触点和 Campaign 视觉系统。 查看案例 |
🏛️ 建筑与空间  建筑表现、室内空间、城市地图和空间概念。 查看案例 |
|
📷 摄影与写实  人像、手机纪实、胶片质感和商业摄影。 查看案例 |
🎨 插画与艺术  插画、艺术风格、材质实验和装饰画面。 查看案例 |
🧍 人物与角色  角色设定、动作参考、卡牌和 3D 玩具。 查看案例 |
|
🎬 场景与叙事  分镜、故事场景、直播画面和世界观叙事。 查看案例 |
🏮 历史与古风题材  古风长卷、历史人物、传统题材和诗词画面。 查看案例 |
📚 文档与出版物  白皮书、手册、百科图鉴和出版页设计。 查看案例 |
|
🧪 其他应用场景  创意实验、特殊任务、混合玩法和实用场景。 查看案例 |
🖼️ 完整画廊 按分册浏览全部 532 个案例和代表案例入口。 进入画廊 |
⭐ 最新新增 最近收录的 X 社区案例和新玩法。 查看最新 |
示例：用 gpt-image-2-style-library 生成“城市生命系统图谱”。
### Agent 一键安装 推荐给 Claude Code、Codex、Cursor，以及其他 [`skills`](https://www.npmjs.com/package/skills) 支持的本地 Agent： ```bash npx skills add freestylefly/awesome-gpt-image-2 --skill gpt-image-2-style-library --agent claude-code codex --global --yes --copy ``` 安装到所有支持的本地 Agent： ```bash npx skills add freestylefly/awesome-gpt-image-2 --global --all --copy ``` ### Claude Code 插件市场 在 Claude Code 中运行： ```text /plugin marketplace add freestylefly/awesome-gpt-image-2 /plugin install gpt-image-2-style-library@awesome-gpt-image-2 ``` ### npm CLI 如果你习惯 npm，可以先安装 CLI，再同步到本地 Agent 技能目录： ```bash npm install -g gpt-image-2-style-library gpt-image-2-style-library install all ``` 也可以不全局安装，直接运行： ```bash npx gpt-image-2-style-library install all ``` 从 GitHub Packages 安装： ```bash 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 会话。 这样调用： ```text 使用 gpt-image-2-style-library 技能，帮我生成介绍 Codex 的信息图 ``` 本地源码开发时使用： ```bash npm run generate:style-skill npm run install:skill ``` skill 源码位于 [`agents/skills/gpt-image-2-style-library`](agents/skills/gpt-image-2-style-library/SKILL.md)。生成索引来自 [`data/style-library.json`](data/style-library.json)，网站和 Agent 工作流共用这一份风格库。 ## 🔐 网站登录与生成测试 可视化网站已经接入登录后生成测试图能力，底层使用 Supabase Auth、Supabase Postgres，以及 Vercel Function 代理 GPT Image 2 API。 Vercel 需要配置这些环境变量： ```bash VITE_SUPABASE_URL= VITE_SUPABASE_ANON_KEY= SUPABASE_SERVICE_ROLE_KEY= SUPER_ADMIN_EMAILS=2689458656@qq.com,canghe0818@gmail.com CIYUAN_API_KEY= CIYUAN_BASE_URL=https://ciyuan.today APP_URL=https://gpt-image2.canghe.ai STRIPE_SECRET_KEY= STRIPE_WEBHOOK_SECRET= VITE_GA_MEASUREMENT_ID= GA4_PROPERTY_ID= GOOGLE_ANALYTICS_CLIENT_ID= GOOGLE_ANALYTICS_CLIENT_SECRET= GOOGLE_ANALYTICS_REFRESH_TOKEN= ``` 配置清单： - 将 [`supabase/migrations/202605090001_user_credits.sql`](supabase/migrations/202605090001_user_credits.sql) 应用到 Supabase 项目。 - 将 [`supabase/migrations/20260509090000_membership_billing.sql`](supabase/migrations/20260509090000_membership_billing.sql) 应用到 Supabase 项目，添加会员套餐、积分包、Stripe 订单记录和积分调整 RPC。 - 启用支付宝网站支付前，应用 [`supabase/migrations/20260721090000_alipay_webpay.sql`](supabase/migrations/20260721090000_alipay_webpay.sql)，并为需要销售的积分包配置经业务确认的人民币价格。详见[支付宝网站支付接入说明](docs/alipay-web-payment.md)。 - 启用付费交流群前，应用 [`supabase/migrations/20260722090000_paid_community.sql`](supabase/migrations/20260722090000_paid_community.sql)。在新群码、支付宝签约和生产付款退款验收完成前，保持 `COMMUNITY_PAYMENT_ENABLED=false`。详见[付费交流群上线手册](docs/paid-community.md)。 - 将 [`supabase/migrations/20260512090000_google_account_center.sql`](supabase/migrations/20260512090000_google_account_center.sql) 应用到 Supabase 项目，添加账户用量统计和超级管理员强制扣积分逻辑。 - 将 [`supabase/migrations/20260512143000_pricing_admin_metrics.sql`](supabase/migrations/20260512143000_pricing_admin_metrics.sql) 应用到 Supabase 项目，更新 `$5 / 300 credits` 价格体系，并添加管理员数据看板指标。 - 将 [`supabase/migrations/20260515090000_case_favorites.sql`](supabase/migrations/20260515090000_case_favorites.sql) 应用到 Supabase 项目，添加用户案例收藏表。 - 在 Supabase Auth Redirect URLs 里加入 `https://gpt-image2.canghe.ai`，以及 `http://127.0.0.1:5173` 等本地开发地址。 - 在 Supabase Dashboard 填入 Google OAuth 凭据并启用 Google Provider。 - 如需强制只允许 Google 登录，可以在 Supabase Auth settings 里关闭 Email Provider。 - `SUPABASE_SERVICE_ROLE_KEY` 只放在 Vercel Environment Variables 这类服务端环境里。 - 配置 Stripe Checkout Webhook：`https://gpt-image2.canghe.ai/api/billing/webhook`。 - Stripe Webhook 订阅 `checkout.session.completed`、`invoice.payment_succeeded`、`customer.subscription.updated`、`customer.subscription.deleted`。 - `STRIPE_SECRET_KEY` 和 `STRIPE_WEBHOOK_SECRET` 只放在 Vercel Environment Variables 这类服务端环境里。 - 为 `gpt-image2.canghe.ai` 创建 GA4 property，把 measurement ID 填到 `VITE_GA_MEASUREMENT_ID`，把数字版 property ID 填到 `GA4_PROPERTY_ID`。 - 创建 Google OAuth Web Client，Authorized redirect URI 填 `http://localhost:8080/oauth2callback`，然后把 `GOOGLE_ANALYTICS_CLIENT_ID` 和 `GOOGLE_ANALYTICS_CLIENT_SECRET` 写入本地 `.env.local`。 - 运行 `npm run ga4:oauth`，打开脚本生成的授权链接，同意 `analytics.readonly` 权限，把回跳 URL 粘贴回终端，再把得到的 `GOOGLE_ANALYTICS_REFRESH_TOKEN` 作为 Sensitive 环境变量加到 Vercel。 ## 🖼️ 首页精选 ### 例 1：信息图可视化设计 [](docs/gallery-part-1.md#case-1) 工程白皮书气质的信息图案例，适合看结构化信息图如何组织模块、层级和双语标签。 [查看完整案例](docs/gallery-part-1.md#case-1) ### 例 2：社媒界面截图 [](docs/gallery-part-1.md#case-2) 偏“产品界面 + 社媒内容截图”的混合场景，适合看文字区域、UI 框架和内容卡片的控制方式。 [查看完整案例](docs/gallery-part-1.md#case-2) ### 例 6：插画艺术创作图 [](docs/gallery-part-1.md#case-6) 日系奇幻插画范例，适合观察氛围、色彩和大场景构图的描述方式。 [查看完整案例](docs/gallery-part-1.md#case-6) ### 例 17：界面交互设计图 [](docs/gallery-part-1.md#case-17) 典型的“结构分解图 + 说明排版”场景，适合做产品示意图、海报化技术讲解图。 [查看完整案例](docs/gallery-part-1.md#case-17) ### 例 166：十二黄金圣斗士卡牌合集 [](docs/gallery-part-2.md#case-166) 多卡面、多元素统一风格的案例，适合参考批量生成与系列化设计。 [查看完整案例](docs/gallery-part-2.md#case-166) ### 例 310：零食品牌技术分解图 [](docs/gallery-part-2.md#case-310) 品牌叙事、分解结构和商业化呈现结合得比较完整，适合作为“信息图 + 品牌视觉”混合参考。 [查看完整案例](docs/gallery-part-2.md#case-310) ### 苍何新增实测|
例 330：月下美女直播画面 高仿直播截图，适合参考界面氛围、弹幕和人物写实结合。 查看案例 |
例 334：RAG 技术详解图 技术概念、流程箭头和中文说明模块的结构参考。 查看案例 |
例 338：《赤壁怀古》长卷图 长卷尺寸、古风叙事和整篇文字排版结合完整。 查看案例 |
|
例 331：西安手绘水彩城市地图  城市地图、手绘路线和地标标注的轻量参考。 查看案例 |
例 332：茶π产品宣传海报  饮品商品图、中文卖点和清爽商业海报组合。 查看案例 |
例 339：Apple 风格自然科普海报  极简棚拍、自然主体和科普信息排版。 查看案例 |
|
例 527：Rio 旅行票据纸雕立体海报  把旅行票据、手绘注释和城市微缩景观合成一张复古旅行海报。 查看案例 |
例 528：圣诞街景 Chibi 真实背景人像  保留真实城市夜景背景，只把人物转成温暖的手绘 chibi 角色。 查看案例 |
例 529：云朵气球山脊旅行人像  山脊旅拍人像里加入一朵由细绳牵引的巨大云朵气球。 查看案例 |
|
例 530：实拍背景涂鸦人物替换  严格保留原照片背景，把人物替换成儿童涂鸦式小角色。 查看案例 |
例 531：水晶框国家旅行广告海报  用透明水晶拱框、镜面反射和国家地标组织高端旅行广告视觉。 查看案例 |
例 532：六宫格柠檬饮料微缩广告 虚构柠檬饮料品牌的六宫格广告，靠统一地平线、动作节奏和产品高潮串联画面。 查看案例 |