)
| APIMart による本プロジェクトへのサポートに感謝します。APIMart は AI 画像/動画生成に特化した低価格 API プラットフォームで、GPT-Image-2 を `$0.006/image` から利用でき、1 ドルで 160 枚以上の画像を生成できます。画像と動画をひとつの非同期 API で扱い、タスク送信後に ID を受け取り、ポーリングまたはコールバックで結果を取得できます。数万枚規模のバッチ生成でもタイムアウトを抑え、モデル変更時もコードを書き換えずに対応できます。従量課金で月額料金はありません。[こちらから登録](https://apimart.ai/register?aff=oQgzUQ)して利用を始められます。 |
| 
| DolOffer による本プロジェクトへのサポートに感謝します。DolOffer は、デジタル製品のおすすめとお得情報の共有に特化したプラットフォームで、注目すべきツール、サービス、期間限定特典を素早く見つける手助けをします。YouTube Premium、Claude、ChatGPT Plus、Spotify、Apple Music などの人気サブスクリプションを、公式価格の 3 割程度またはそれ以下で利用できる場合があり、正規で安定したサービスと安心できるサポートを提供します。[専用リンク](https://doloffer.com/friend/HuHEKQOk)から登録し、チャージ時にクーポンコード `AI8888` を入力すると、さらに 10% オフになります。 |
| 
| プロジェクトスポンサー。PPToken は ChatGPT、Claude、Gemini など主要 AI モデル向けの API リレーとキー配布を提供し、低遅延、高可用性、従量課金、柔軟なサブスクリプションに対応しています。 |
| 
| プロジェクトスポンサー。Ciyuan API は、安定した低遅延の大規模モデル API サービスを提供する AI 集約プラットフォームで、本プロジェクトの GPT Image 2 ワークフロー探索を支援しています。 |
| 
| コミュニティスポンサー窓口。GitHub Sponsors は、事例収集、Web サイト保守、産業レベルテンプレートの整理、Agent Skill 更新の継続に使われます。 |
## ⚡️ プロジェクトビジョン
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-484](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 トイ表現。 ケースを見る |
|
🎬 シーンとストーリーテリング  絵コンテ、物語性のあるシーン、ライブ配信フレーム、世界観構築。 ケースを見る |
🏮 歴史と古典テーマ  古典絵巻、歴史人物、伝統題材、詩詞のビジュアル化。 ケースを見る |
📚 ドキュメントと出版物  ホワイトペーパー、マニュアル、百科図版、出版レイアウト。 ケースを見る |
|
🧪 その他のユースケース  クリエイティブ実験、特殊タスク、複合ワークフロー、実務ケース。 ケースを見る |
🖼️ フルギャラリー 全 484 件のケースをパートとカテゴリ別に閲覧できます。 ギャラリーを開く |
⭐ 最新の事例 リポジトリに新しく収録されたコミュニティ事例とワークフロー。 最新を見る |
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 477：Instagram ダイニングテーブルコンセプト  SNS 投稿レイアウトを、UI バンドと小物制約が明確な俯瞰のダイニングテーブルシーンへ変換した例。 ケースを見る |
Case 478：レイヤードブランド編集ポスター  幾何学的な遮蔽、抑えたカラーパレット、埋め込まれた商品ロジックを備えた 2x2 ブランドポスターシステム。 ケースを見る |
Case 479：雑誌風ペーパーコラージュリライト  質感、手描きアクセント、余白、避けるべき要素まで指定された温かみのあるペーパーカットコラージュ。 ケースを見る |
Case 480：ファンスケッチブックのキャラクターページ  キャラクターポーズ、ちびキャラ、クローズアップ、表情研究に向いた密度の高いスケッチブックページ。 ケースを見る |
|
Case 481：韓国風春のスクラップブックポスター  ステッカー、タイポグラフィ、パステルの庭園ムード、SNS カバー構図を組み合わせた春ファッションのスクラップブックポスター。 ケースを見る |
Case 482：シュルレアルな自己省察キャンペーン  巨大な自己頭部プロップ、背景タイポグラフィ、アイデンティティ主導のムードを使ったミニマルなシュルレアルポートレート。 ケースを見る |
Case 483：都市の鳥とストリートポートレート  飛ぶ鳥、グラフィティのシルエット、自然光、エディトリアルな仕上げを含むシネマティックなストリートポートレート。 ケースを見る |
Case 484：ネオングラフィティのモノクロポートレート ネオンの目、ペイントスプラッシュ、手描き要素、ストリートポスターのエネルギーを加えた高コントラストポートレート。 ケースを見る |