)
English | ็ฎไฝไธญๆ
> Updated irregularly with new workflows. Stars are welcome. > This project is sponsored by [Ciyuan API](https://ciyuan.today/), an AI aggregation platform for cost-effective GPT Image 2 access. ## ๐ Visual Website Use the live site at [gpt-image2.canghe.ai](https://gpt-image2.canghe.ai/) to browse the gallery as a product experience: open large previews, copy full prompts, filter by style or scenario, test generation after Google sign-in, and jump back to the source case on GitHub.
|
๐งฉ 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 456 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/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 454: Travel-Food Chips Poster  A tourism-flavored product ad prompt with spiraling sauce ribbons, local landmarks, miniature travelers, and premium package layout. View Case |
Case 455: Oversized Comfort Clog Campaign  A clean commercial product prompt combining a giant shoe, athleisure model, reflective studio floor, and bold campaign typography. View Case |
Case 456: Historical Events 2x2 Visual Map A weighted prompt formula for turning famous historical events into diorama maps, first-person UI, and period newspaper panels. View Case |