)
| Thanks to APIMart for sponsoring this project! APIMart is a low-cost API platform for AI image & video generation — GPT-Image-2 from `$0.006/image`, 160+ images per dollar. One async API covers both image and video: submit a task, get an ID, fetch results via polling or callback. Batch tens of thousands of images without timeouts, switch models without changing code. Pay-as-you-go with no monthly fee — [sign up here](https://apimart.ai/register?aff=oQgzUQ) to get started. |
| 
| Thanks to hiapi for sponsoring this project! hiapi is an AI image & video generation API platform — GPT-Image-2 (text-to-image, image edit, 1K–4K) alongside video models like Seedance, Kling and Wan, all through one unified async API: submit a task, get a `task_id`, fetch results by polling or callback, batch without timeouts, switch models without code changes. Every result is stored on hiapi's own CDN with **persistent storage**, so your image/video URLs stay available long-term and can be fetched anytime — no rushing to download and back them up yourself. Native Remote MCP and Agent Skills plug straight into Claude Code & Cursor. Chinese UI & docs, WeChat Pay, pay-as-you-go with no monthly fee — new users get $1 free credit (~50 images). [Sign up here](https://www.hiapi.ai/en/register?aff=DzuH&utm_source=github&utm_medium=sponsor&utm_campaign=awesome-gpt-image-2). |
| 
| Thanks to PackyCode for sponsoring this project! PackyCode is a stable, high-performance API relay provider for Claude Code, Codex, Gemini, and more. Automatic failover, smart routing, and unlimited concurrency help turn AI coding into a reliable productivity tool. [Register here](https://www.packyapi.ai/register?aff=CV0c) to get started. |
| 
| Project sponsor. PPToken provides API relay and key distribution for ChatGPT, Claude, Gemini, and other mainstream AI models, with low-latency access, high availability, pay-as-you-go billing, and flexible subscription plans. |
## ⚡️ Project Vision
After GPT-Image2 became widely available, AI image generation moved from "can it make an image?" to "can it make stable, controllable, reusable images?" This project turns scattered community examples into Prompt-as-Code assets that are easier for agents and automation workflows to reuse.
The core goal is simple: compress prose-style prompts into structured protocols. When you need batch generation, template systems, or production workflows, this structure is more valuable than a pile of isolated examples.
- 🧱 Atomic schema: split subjects, lighting, materials, layout, and visual details into composable parts
- ⚙️ Workflow friendly: designed for agents, scripts, and automation systems
- 🧬 Structured control: improve controllability for layout, copy, and information hierarchy
## 📖 Quick Links
- [Full case gallery](docs/gallery.md)
- [Gallery Part 1: cases 1-165](docs/gallery-part-1.md)
- [Gallery Part 2: cases 166-532](docs/gallery-part-2.md)
- [Industrial prompt templates and pitfalls guide](docs/templates.md)
- [Agent skill: GPT-Image2 Style Library](agents/skills/gpt-image-2-style-library/SKILL.md)
- [MIT License](LICENSE)
- [Full disclaimer](docs/disclaimer.md#section-disclaimer)
## 🗂️ Category Overview
Start with the case album to find a visual direction, then open the prompt template categories to turn that direction into reusable structure.
### 🖼️ Case Album
|
🧩 UI & Interfaces  Apps, websites, dashboards, social screenshots, and product interfaces. View Cases |
📊 Charts & Infographics  Infographics, knowledge maps, technical explainers, and structured diagrams. View Cases |
📰 Posters & Typography  Event posters, covers, type-driven visuals, and strong layout compositions. View Cases |
|
🛍️ Products & E-commerce  Product shots, detail pages, packaging, selling points, and ads. View Cases |
🏷️ Brand & Logos  Logos, identity systems, brand touchpoints, and campaign visuals. View Cases |
🏛️ Architecture & Spaces  Architecture renders, interiors, city maps, and spatial concepts. View Cases |
|
📷 Photography & Realism  Portraits, phone photography, film texture, and commercial photography. View Cases |
🎨 Illustration & Art  Illustration, art styles, material experiments, and decorative images. View Cases |
🧍 Characters & People  Character design, pose references, cards, and 3D toys. View Cases |
|
🎬 Scenes & Storytelling  Storyboards, narrative scenes, livestream frames, and worldbuilding. View Cases |
🏮 History & Classical Chinese Themes  Classical scrolls, historical figures, traditional themes, and poetry visuals. View Cases |
📚 Documents & Publishing  White papers, manuals, encyclopedic plates, and publishing layouts. View Cases |
|
🧪 Other Use Cases  Creative experiments, special tasks, mixed workflows, and practical cases. View Cases |
🖼️ Full Gallery Browse all 532 cases by gallery part and category. Open Gallery |
⭐ Latest Additions The newest community cases and workflows collected in the repo. View Latest |
Example output from a city-life-system-map request using the style library skill.
### Quick Install for Agent Skills Recommended for Claude Code, Codex, Cursor, and other tools supported by [`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 ``` Install to every supported local agent: ```bash npx skills add freestylefly/awesome-gpt-image-2 --global --all --copy ``` ### Claude Code Plugin Marketplace Run these commands inside Claude Code: ```text /plugin marketplace add freestylefly/awesome-gpt-image-2 /plugin install gpt-image-2-style-library@awesome-gpt-image-2 ``` ### npm CLI If you prefer npm, install the CLI and then sync the skill into local agent folders: ```bash npm install -g gpt-image-2-style-library gpt-image-2-style-library install all ``` You can also run it without a global install: ```bash npx gpt-image-2-style-library install all ``` Install from 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` writes the skill to the common local folders used by Codex and Claude Code, including `~/.codex/skills`, `~/.claude/skills`, and `~/.agents/skills`. Restart the agent session after installing. Use it with a request like: ```text Use gpt-image-2-style-library to create an infographic prompt about Codex. ``` For local source development: ```bash npm run generate:style-skill npm run install:skill ``` The skill source lives at [`agents/skills/gpt-image-2-style-library`](agents/skills/gpt-image-2-style-library/SKILL.md). Its generated reference comes from [`data/style-library.json`](data/style-library.json), so the website and Agent workflow share one style library. ## 🔐 Website Auth & Generation The visual site includes login-gated case generation powered by Supabase Auth, Supabase Postgres, and a Vercel Function proxy for the GPT Image 2 API. Required Vercel environment variables: ```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= ``` Setup checklist: - Apply [`supabase/migrations/202605090001_user_credits.sql`](supabase/migrations/202605090001_user_credits.sql) to the Supabase project. - Apply [`supabase/migrations/20260509090000_membership_billing.sql`](supabase/migrations/20260509090000_membership_billing.sql) to add membership plans, credit packs, Stripe order records, and credit adjustment RPCs. - Apply [`supabase/migrations/20260721090000_alipay_webpay.sql`](supabase/migrations/20260721090000_alipay_webpay.sql) before enabling Alipay website payments, then configure each credit pack's reviewed CNY price. See [Alipay website payment setup](docs/alipay-web-payment.md). - Apply [`supabase/migrations/20260722090000_paid_community.sql`](supabase/migrations/20260722090000_paid_community.sql) before enabling the paid community. Keep `COMMUNITY_PAYMENT_ENABLED=false` until the protected QR, Alipay onboarding, and production payment/refund checks are complete. See the [paid community runbook](docs/paid-community.md). - Apply [`supabase/migrations/20260512090000_google_account_center.sql`](supabase/migrations/20260512090000_google_account_center.sql) to add account usage summaries and forced credit charging for super admins. - Apply [`supabase/migrations/20260512143000_pricing_admin_metrics.sql`](supabase/migrations/20260512143000_pricing_admin_metrics.sql) to update the `$5 / 300 credits` catalog and add admin dashboard metrics. - Apply [`supabase/migrations/20260515090000_case_favorites.sql`](supabase/migrations/20260515090000_case_favorites.sql) to add per-user case favorites. - Add `https://gpt-image2.canghe.ai` and local dev URLs such as `http://127.0.0.1:5173` to Supabase Auth redirect URLs. - Enable the Google Provider after adding Google OAuth credentials in the Supabase Dashboard. - To force Google-only sign-in, disable the Email Provider in Supabase Auth settings. - Keep `SUPABASE_SERVICE_ROLE_KEY` only in server-side environments such as Vercel Environment Variables. - Configure Stripe Checkout with the webhook URL `https://gpt-image2.canghe.ai/api/billing/webhook`. - Subscribe the Stripe webhook to `checkout.session.completed`, `invoice.payment_succeeded`, `customer.subscription.updated`, and `customer.subscription.deleted`. - Keep `STRIPE_SECRET_KEY` and `STRIPE_WEBHOOK_SECRET` only in server-side Vercel Environment Variables. - Create a GA4 property for `gpt-image2.canghe.ai`, add the measurement ID to `VITE_GA_MEASUREMENT_ID`, and copy the numeric property ID to `GA4_PROPERTY_ID`. - Create a Google OAuth Web Client with `http://localhost:8080/oauth2callback` as an authorized redirect URI, then add `GOOGLE_ANALYTICS_CLIENT_ID` and `GOOGLE_ANALYTICS_CLIENT_SECRET` to local `.env.local`. - Run `npm run ga4:oauth`, open the generated URL, approve the `analytics.readonly` permission, paste the callback URL into the terminal, then add the returned `GOOGLE_ANALYTICS_REFRESH_TOKEN` to Vercel as a Sensitive environment variable. ## 🖼️ Featured Cases ### Case 1: Infographic Visualization [](docs/gallery-part-1.md#case-1) An engineering-whitepaper-style infographic case for studying modular structure, information hierarchy, and bilingual labels. [View full case](docs/gallery-part-1.md#case-1) ### Case 2: Social Media Interface Screenshot [](docs/gallery-part-1.md#case-2) A mixed "product interface + social content screenshot" case for controlling text blocks, UI frames, and content cards. [View full case](docs/gallery-part-1.md#case-2) ### Case 6: Illustration Art [](docs/gallery-part-1.md#case-6) A Japanese fantasy illustration example for studying atmosphere, color, and large-scene composition. [View full case](docs/gallery-part-1.md#case-6) ### Case 17: Interaction Design Diagram [](docs/gallery-part-1.md#case-17) A classic "structured breakdown + explanatory layout" case for product diagrams and poster-like technical explainers. [View full case](docs/gallery-part-1.md#case-17) ### Case 166: Twelve Gold Saints Card Set [](docs/gallery-part-2.md#case-166) A multi-card, unified-style case for studying batch generation and series design. [View full case](docs/gallery-part-2.md#case-166) ### Case 310: Snack Brand Technical Breakdown [](docs/gallery-part-2.md#case-310) A strong hybrid of brand narrative, structural breakdown, and commercial presentation. Useful as an "infographic + brand visual" reference. [View full case](docs/gallery-part-2.md#case-310) ### Canghe Original Tests|
Case 330: Moonlit Livestream Scene A high-fidelity livestream screenshot reference for UI atmosphere, comments, and realistic people. View Case |
Case 334: RAG Technical Explainer A reference for technical concepts, process arrows, and Chinese explanation modules. View Case |
Case 338: Red Cliff Classical Scroll A complete example of scroll format, classical Chinese narrative, and full-text layout. View Case |
|
Case 331: Hand-Drawn Xi'an Watercolor Map  A lightweight reference for city maps, hand-drawn routes, and landmark labels. View Case |
Case 332: Tea Pi Product Poster  A beverage product image combining Chinese selling points and a clean commercial poster style. View Case |
Case 339: Apple-Style Nature Science Poster  Minimal studio photography, a natural subject, and science-poster information layout. View Case |
|
Case 527: Rio Travel Ticket Pop-Up Diorama  A vintage travel-ticket prompt that turns Rio landmarks, map notes, and miniature streets into one pop-up postcard. View Case |
Case 528: Chibi Portrait on a Real Holiday Street  A photo-editing prompt that keeps the real city background while turning the subject into a warm hand-drawn chibi character. View Case |
Case 529: Cloud-Balloon Mountain Ridge Portrait  A travel-fashion portrait prompt with a giant cloud balloon, believable strings, mountain depth, and modest wardrobe control. View Case |
|
Case 530: Doodle Characters on Photo Background  A controlled edit prompt that preserves the original photographic background and replaces only people with naive doodle characters. View Case |
Case 531: Crystal-Frame Country Travel Campaign  A luxury travel campaign prompt using a transparent crystal frame, mirrored reflection, national landmarks, and refined editorial type. View Case |
Case 532: Six-Panel Lemon Drink Micro Campaign A fictional lemon-drink campaign with a strict six-panel grid, consistent horizon, action rhythm, and a hero product climax. View Case |