)
English | 简体中文
> 不定期更新最新的玩法，欢迎star。 > 本项目由 [词元 API](https://ciyuan.today/) 提供赞助支持。词元 API 是一个 AI 聚合平台，可以高性价比使用 GPT Image 2。 ## 🌐 可视化网站 访问 [gpt-image2.canghe.ai](https://gpt-image2.canghe.ai/) 可以用产品化方式浏览案例：查看大图、复制完整 Prompt、按风格或场景筛选、登录后测试生成，并快速跳回 GitHub 源案例。
|
🧩 UI与界面  App、网页、仪表盘、社媒截图与产品界面。 查看案例 |
📊 图表与信息可视化  信息图、知识图谱、技术解释与结构化图解。 查看案例 |
📰 海报与排版  活动海报、封面、字体视觉和强排版画面。 查看案例 |
|
🛍️ 商品与电商  商品图、详情页、包装卖点和商业广告。 查看案例 |
🏷️ 品牌与标志  Logo、VI、品牌触点和 Campaign 视觉系统。 查看案例 |
🏛️ 建筑与空间  建筑表现、室内空间、城市地图和空间概念。 查看案例 |
|
📷 摄影与写实  人像、手机纪实、胶片质感和商业摄影。 查看案例 |
🎨 插画与艺术  插画、艺术风格、材质实验和装饰画面。 查看案例 |
🧍 人物与角色  角色设定、动作参考、卡牌和 3D 玩具。 查看案例 |
|
🎬 场景与叙事  分镜、故事场景、直播画面和世界观叙事。 查看案例 |
🏮 历史与古风题材  古风长卷、历史人物、传统题材和诗词画面。 查看案例 |
📚 文档与出版物  白皮书、手册、百科图鉴和出版页设计。 查看案例 |
|
🧪 其他应用场景  创意实验、特殊任务、混合玩法和实用场景。 查看案例 |
🖼️ 完整画廊 按分册浏览全部 378 个案例和代表案例入口。 进入画廊 |
⭐ 最新新增 最近收录的 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/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 风格自然科普海报  极简棚拍、自然主体和科普信息排版。 查看案例 |
|
例 375：古希腊三哲时间轴城市图  历史人物、城市背景和时间轴叙事。 查看案例 |
例 376：泼洒抹茶街头手机照片 手机纪实、真实光影和负面约束。 查看案例 |
例 377：樱花咖啡户外人像  参考图编辑、身份保持和户外生活方式写真。 查看案例 |
例 378：高端 3D 收藏玩具头像 参考图转 3D 收藏玩具，保留身份锚点。 查看案例 |