)
| APIMart による本プロジェクトへのサポートに感謝します。APIMart は AI 画像/動画生成に特化した低価格 API プラットフォームで、GPT-Image-2 を `$0.006/image` から利用でき、1 ドルで 160 枚以上の画像を生成できます。画像と動画をひとつの非同期 API で扱い、タスク送信後に ID を受け取り、ポーリングまたはコールバックで結果を取得できます。数万枚規模のバッチ生成でもタイムアウトを抑え、モデル変更時もコードを書き換えずに対応できます。従量課金で月額料金はありません。[こちらから登録](https://apimart.ai/register?aff=oQgzUQ)して利用を始められます。 |
| 
| hiapi による本プロジェクトへのサポートに感謝します。hiapi は AI 画像/動画生成 API プラットフォームで、GPT-Image-2（テキストから画像、画像編集、1K–4K）に加えて Seedance、Kling、Wan などの動画モデルも、ひとつの統一非同期 API で扱えます。タスクを送信して `task_id` を受け取り、ポーリングまたはコールバックで結果を取得でき、バッチ処理でもタイムアウトしにくく、モデル変更時もコードを書き換えずに対応できます。生成結果は hiapi 独自 CDN に保存され、**永続ストレージ**に対応しているため、画像/動画 URL を長期的に利用でき、急いで自分でダウンロードしてバックアップする必要がありません。Remote MCP と Agent Skills をネイティブに備え、Claude Code と Cursor にそのまま接続できます。中国語 UI とドキュメント、WeChat Pay、従量課金、月額料金なし。新規ユーザーには $1 の無料クレジット（約 50 枚分）が付与されます。[こちらから登録](https://www.hiapi.ai/zh/register?aff=DzuH&utm_source=github&utm_medium=sponsor&utm_campaign=awesome-gpt-image-2)して利用を始められます。 |
| 
| PackyCode による本プロジェクトへのサポートに感謝します。PackyCode は Claude Code、Codex、Gemini などに対応する、安定性と処理性能に優れた API リレープロバイダーです。自動フェイルオーバー、スマートルーティング、無制限の同時実行により、AI コーディングの生産性を高めます。[こちらから登録](https://www.packyapi.ai/register?aff=CV0c)して利用を始められます。 |
| 
| プロジェクトスポンサー。PPToken は ChatGPT、Claude、Gemini など主要 AI モデル向けの API リレーとキー配布を提供し、低遅延、高可用性、従量課金、柔軟なサブスクリプションに対応しています。 |
## ⚡️ プロジェクトビジョン
GPT-Image2 が広く利用できるようになったことで、AI 画像生成の焦点は「画像を生成できるか」から「安定し、制御でき、再利用できる画像を生成できるか」へ移りました。本プロジェクトは、コミュニティに散在する事例を、Agent や自動化ワークフローから再利用しやすい Prompt-as-Code アセットへ整理することを目的としています。
中心となる目標は明快です。散文的なプロンプトを、構造化されたプロトコルへ圧縮すること。バッチ生成、テンプレートシステム、本番ワークフローへの組み込みが必要な場面では、個別事例を集めるだけよりも、この構造化のほうが大きな価値を持ちます。
- 🧱 アトミック Schema：主体、光、素材、レイアウト、視覚ディテールを組み合わせ可能な部品へ分解
- ⚙️ ワークフロー親和性：Agent、スクリプト、自動化システムで扱いやすい設計
- 🧬 構造化制御：レイアウト、コピー、情報階層の制御性を高める構成
## 📖 クイックリンク
- [ケースギャラリー全体](docs/gallery.md)
- [Gallery Part 1：ケース 1-165](docs/gallery-part-1.md)
- [Gallery Part 2：ケース 166-532](docs/gallery-part-2.md)
- [産業向けプロンプトテンプレートと落とし穴ガイド](docs/templates.md#section-templates)
- [Agent Skill：GPT-Image2 Style Library](agents/skills/gpt-image-2-style-library/SKILL.md)
- [MIT License](LICENSE)
- [免責事項全文](docs/disclaimer.md#section-disclaimer)
## 🗂️ カテゴリ概要
まずケースアルバムで目指すビジュアル方向を見つけ、その後プロンプトテンプレートのカテゴリを開いて、再利用可能な構造へ落とし込みます。
### 🖼️ ケースアルバム
|
🧩 UI とインターフェース  アプリ、Web サイト、ダッシュボード、SNS スクリーンショット、プロダクト UI。 ケースを見る |
📊 チャートとインフォグラフィック  インフォグラフィック、ナレッジマップ、技術解説、構造化図解。 ケースを見る |
📰 ポスターとタイポグラフィ  イベントポスター、カバー、文字主体のビジュアル、強いレイアウト構成。 ケースを見る |
|
🛍️ 商品と E コマース  商品カット、詳細ページ、パッケージ、訴求ポイント、広告表現。 ケースを見る |
🏷️ ブランドとロゴ  ロゴ、アイデンティティシステム、ブランド接点、キャンペーンビジュアル。 ケースを見る |
🏛️ 建築と空間  建築レンダリング、インテリア、都市地図、空間コンセプト。 ケースを見る |
|
📷 写真とリアリズム  ポートレート、スマートフォン写真、フィルム質感、商業写真。 ケースを見る |
🎨 イラストとアート  イラスト、アートスタイル、素材実験、装飾的な画面表現。 ケースを見る |
🧍 キャラクターと人物  キャラクターデザイン、ポーズ資料、カード、3D トイ表現。 ケースを見る |
|
🎬 シーンとストーリーテリング  絵コンテ、物語性のあるシーン、ライブ配信フレーム、世界観構築。 ケースを見る |
🏮 歴史と古典テーマ  古典絵巻、歴史人物、伝統題材、詩詞のビジュアル化。 ケースを見る |
📚 ドキュメントと出版物  ホワイトペーパー、マニュアル、百科図版、出版レイアウト。 ケースを見る |
|
🧪 その他のユースケース  クリエイティブ実験、特殊タスク、複合ワークフロー、実務ケース。 ケースを見る |
🖼️ フルギャラリー 全 532 件のケースをパートとカテゴリ別に閲覧できます。 ギャラリーを開く |
⭐ 最新の事例 リポジトリに新しく収録されたコミュニティ事例とワークフロー。 最新を見る |
Style Library Skill を使った city-life-system-map リクエストの出力例。
### Agent Skill のクイックインストール Claude Code、Codex、Cursor、および [`skills`](https://www.npmjs.com/package/skills) が対応するその他のツールには、次の方法を推奨します。 ```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 Plugin Marketplace 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 フォルダへ Skill を同期します。 ```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 で一般的に使われるローカル Skill ディレクトリへ書き込みます。対象には `~/.codex/skills`、`~/.claude/skills`、`~/.agents/skills` が含まれます。インストール後は Agent セッションを再起動してください。 次のようなリクエストで利用できます。 ```text gpt-image-2-style-library Skill を使って、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) に基づいており、Web サイトと Agent ワークフローは同じスタイルライブラリを共有しています。 ## 🔐 Web サイト認証と生成 ビジュアルサイトには、ログイン後にケース生成を試せる機能が含まれています。基盤には Supabase Auth、Supabase Postgres、GPT Image 2 API 向けの Vercel Function プロキシを使用しています。 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) を適用し、メンバーシッププラン、クレジットパック、Stripe 注文レコード、クレジット調整 RPC を追加します。 - [`supabase/migrations/20260512090000_google_account_center.sql`](supabase/migrations/20260512090000_google_account_center.sql) を適用し、アカウント利用サマリーとスーパー管理者向けの強制クレジット課金を追加します。 - [`supabase/migrations/20260512143000_pricing_admin_metrics.sql`](supabase/migrations/20260512143000_pricing_admin_metrics.sql) を適用し、`$5 / 300 credits` のカタログを更新して管理ダッシュボード指標を追加します。 - [`supabase/migrations/20260515090000_case_favorites.sql`](supabase/migrations/20260515090000_case_favorites.sql) を適用し、ユーザーごとのケースお気に入り機能を追加します。 - Supabase Auth の Redirect URLs に `https://gpt-image2.canghe.ai` と、`http://127.0.0.1:5173` などのローカル開発 URL を追加します。 - Supabase Dashboard に Google OAuth 認証情報を追加したうえで Google Provider を有効化します。 - Google ログインのみに制限したい場合は、Supabase Auth settings で Email Provider を無効化します。 - `SUPABASE_SERVICE_ROLE_KEY` は Vercel Environment Variables などのサーバーサイド環境にのみ保存してください。 - Stripe Checkout の Webhook URL に `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` を実行し、生成された URL を開いて `analytics.readonly` 権限を承認し、コールバック URL をターミナルへ貼り付けます。その後、返された `GOOGLE_ANALYTICS_REFRESH_TOKEN` を Vercel の Sensitive 環境変数として追加します。 ## 🖼️ 注目ケース ### Case 1：インフォグラフィック可視化 [](docs/gallery-part-1.md#case-1) モジュール構造、情報階層、バイリンガルラベルの設計を学ぶのに適した、エンジニアリングホワイトペーパー風のインフォグラフィック事例です。 [ケース全体を見る](docs/gallery-part-1.md#case-1) ### Case 2：SNS インターフェーススクリーンショット [](docs/gallery-part-1.md#case-2) 「プロダクト UI + SNS コンテンツスクリーンショット」を組み合わせた事例です。テキストブロック、UI フレーム、コンテンツカードの制御に向いています。 [ケース全体を見る](docs/gallery-part-1.md#case-2) ### Case 6：イラストレーションアート [](docs/gallery-part-1.md#case-6) 雰囲気、色彩、大規模シーン構図を研究するための、日系ファンタジーイラストの例です。 [ケース全体を見る](docs/gallery-part-1.md#case-6) ### Case 17：インタラクションデザイン図 [](docs/gallery-part-1.md#case-17) プロダクト図解やポスター風の技術解説に使いやすい、典型的な「構造分解 + 説明レイアウト」の事例です。 [ケース全体を見る](docs/gallery-part-1.md#case-17) ### Case 166：十二人の黄金聖闘士カードセット [](docs/gallery-part-2.md#case-166) バッチ生成とシリーズデザインを研究するための、複数カードを統一スタイルでまとめた事例です。 [ケース全体を見る](docs/gallery-part-2.md#case-166) ### Case 310：スナックブランド技術分解図 [](docs/gallery-part-2.md#case-310) ブランドナラティブ、構造分解、商業的プレゼンテーションを強く組み合わせた事例です。「インフォグラフィック + ブランドビジュアル」の参考として有用です。 [ケース全体を見る](docs/gallery-part-2.md#case-310) ### 苍何(Canghe)による新規テスト|
Case 330：月明かりのライブ配信シーン UI の雰囲気、弾幕コメント、リアルな人物表現を参照できる高精細ライブ配信スクリーンショット。 ケースを見る |
Case 334：RAG 技術解説図 技術概念、フロー矢印、中国語キャプションモジュールの構成参考。 ケースを見る |
Case 338：赤壁古典絵巻 絵巻形式、古典的なナラティブ、全文レイアウトを統合した完成度の高い例。 ケースを見る |
|
Case 331：手描き西安水彩マップ  都市地図、手描きルート、ランドマークラベルの軽量な参考例。 ケースを見る |
Case 332：茶π 商品ポスター  中国語の訴求ポイントと清潔感のある商業ポスター表現を組み合わせた飲料商品ビジュアル。 ケースを見る |
Case 339：Apple 風ネイチャーサイエンスポスター  ミニマルなスタジオ写真、自然物の主体、科学ポスター的な情報レイアウト。 ケースを見る |
|
Case 527：リオ旅行チケットの紙細工ジオラマ  旅行チケット、手描きメモ、都市のミニチュア景観を一枚のポップアップポストカードにまとめた例。 ケースを見る |
Case 528：実写ホリデー街並みのちびポートレート  実写の街並み背景を残し、人物だけを温かい手描きちびキャラクターへ変換する例。 ケースを見る |
Case 529：雲のバルーン山稜ポートレート  巨大な雲のバルーン、物理的な紐、山岳の奥行き、服装制約を組み合わせた旅行ファッション写真。 ケースを見る |
|
Case 530：実写背景の手描き人物置換  元写真の背景を保ったまま、人物だけを素朴な手描きキャラクターに置換する制御例。 ケースを見る |
Case 531：クリスタルフレームの国別旅行キャンペーン  透明なクリスタルフレーム、鏡面反射、国別ランドマーク、上品な編集タイポを組み合わせた旅行広告。 ケースを見る |
Case 532：6分割レモンドリンク広告 架空レモンドリンクの6分割広告。水平線、動作リズム、主役商品への盛り上げを統一した例。 ケースを見る |