freestylefly/awesome-gpt-image-2 instruction manual

1. What this repository is and how it relates to Claude Code

`freestylefly/awesome-gpt-image-2` is a Prompt-as-Code library, visual gallery, template reference, website, and installable Agent Skill for GPT-Image2 prompt work. The README presents 544 reverse-engineered cases, 20+ industrial templates, and a website at [gpt-image2.canghe.ai](https://gpt-image2.canghe.ai/). Its goal is to replace loosely written image prompts with reusable blocks for subject, lighting, materials, composition, text, and constraints.

**Claude Code classification:** `context_injection`; install mode: `claude_extension`; setup effort: `low` for the skill itself. The evidence shows a native Claude Code marketplace installation and a copied `SKILL.md` package under `~/.claude/skills`. That skill injects a selection workflow and generated style reference into Claude Code. There is no repository-supported evidence of hooks, MCP tools, prompt interception, or multi-agent orchestration, so those mechanisms should not be assigned.

The repository also contains a standalone React/Vite website. That application is not itself a Claude Code extension: it provides gallery browsing, authentication, image-generation testing, favorites, credits, billing, community payment, and analytics. The only demonstrated Claude Code extension is `gpt-image-2-style-library`. None of the supplied catalog candidates is this repository, so it should be treated as a separate catalog entry rather than matched to an existing candidate.

2. Browse cases, choose templates, and use the visual website

The documented human workflow has three steps: choose the kind of output from featured cases; open the full gallery and find nearby cases, copying their **structure before style vocabulary**; then open `docs/templates.md` and fill a general or JSON template with your own business variables. Gallery Part 1 contains cases 1–165, and Part 2 contains cases 166–544.

The category navigation covers UI and interfaces; charts and infographics; posters and typography; products and e-commerce; brands and logos; architecture and spaces; photography and realism; illustration and art; characters and people; scenes and storytelling; history and classical themes; documents and publishing; and miscellaneous use cases. Templates add category-specific controls such as UI chrome, information flow, headline hierarchy, packaging, perspective, lenses, brushwork, pose consistency, narrative pacing, historical clothing, and publication grids.

The live website supports large previews, copying complete prompts, filtering by style or scenario, returning to a case’s GitHub source, and testing generation after Google sign-in. The community page provides joining information. These are web functions, not local CLI functions.

Treat each case as a reference rather than a commercial-use grant. The project says it incorporates public community material, particularly sources associated with YouMind and OpenNana, and does not guarantee that third-party material is commercially reusable. The README advertises 544 cases, while its displayed per-category counts add up to 541; use the gallery files as the operative index rather than assuming the category totals are perfectly synchronized.

3. Install the GPT-Image2 Style Library skill

The recommended multi-agent installation copies the named skill globally for Claude Code and Codex:

npx skills add freestylefly/awesome-gpt-image-2 --skill gpt-image-2-style-library --agent claude-code codex --global --yes --copy

To copy repository skills to every agent supported by that installer:

npx skills add freestylefly/awesome-gpt-image-2 --global --all --copy

Inside Claude Code, the documented marketplace route is:

/plugin marketplace add freestylefly/awesome-gpt-image-2
/plugin install gpt-image-2-style-library@awesome-gpt-image-2

The npm package provides another installer:

npm install -g gpt-image-2-style-library
gpt-image-2-style-library install all

Without a global package installation:

npx gpt-image-2-style-library install all

The documented GitHub Packages route is:

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` replaces and recopies the skill’s `SKILL.md`, `agents`, `assets`, and `references` entries into the selected skill folders. Supported targets are `all`, `codex`, `claude-code`, and `agents`; source code also recognizes `claude` as the Claude Code alias and `shared` as the shared-agent alias. Defaults are `~/.codex/skills`, `~/.claude/skills`, and `~/.agents/skills`, overridable through `CODEX_HOME`, `CLAUDE_HOME`, and `AGENTS_HOME`. Restart the agent session after installation.

4. Invoke the skill and understand its selection workflow

A source-supported request is:

Use gpt-image-2-style-library to create an infographic prompt about Codex.

The skill detects the request language and normally replies in that language. It first classifies the target as a product, poster, UI, infographic, brand, photograph, illustration, character, scene, historical image, document, or special task. It then matches in a fixed order: template category, visual-style tag, scene tag, and nearest example cases. Explicit product types therefore outweigh broad mood words.

When one template clearly fits, the skill uses it. When several fit, it should present two or three choices with brief reasons and ask for a selection. The finished prompt is organized into subject and task; composition and layout; style and materials; exact text and labels; aspect ratio and format; and constraints or negative details. It should identify the selected template and useful case IDs.

The default output puts the copyable prompt first. Constraints should be concrete, especially exact text, readable labels, hierarchy, ratio, and artifacts to avoid. Multiple concepts should reuse one template while varying subject, composition, palette, and scene. The skill’s generated `references/style-library.md` is authoritative for names, categories, covers, tags, and examples; it is generated from `data/style-library.json`, which is also shared with the website.

5. Template functions: interfaces, information graphics, and posters

The reference documents these template functions:

• **UI Screenshot System:** app screens, dashboards, social screenshots, and live-interface mockups. Fix the platform, ratio, hierarchy, visible text, status bars, tabs, actions, and comments; avoid generic UI and unreadable text.
• **Infographic Engine:** explainers, technical diagrams, timelines, and knowledge cards. Use three to five modules, short labels, visible flow, color groups, arrows, icons, and whitespace; do not place long paragraphs in the image.
• **Scientific Scale Diagram:** micro-to-macro comparisons with labeled detail windows. Use six to eight distinct scale frames and show units or magnification; avoid visually identical frames and generic magnifying-glass layouts.
• **Poster Layout System:** event or movie posters, covers, and campaign visuals. Lock subject, headline, layout, palette, and ratio; request one finished poster rather than a mood-board collage.
• **Sports Campaign Poster:** athlete- and product-led sports campaigns. Define sport, pose, hero prop, title, and brand palette with dramatic lighting and readable overlays; prevent wrong equipment or noisy collage.
• **Conceptual Typography Poster:** makes an exact title the central visual structure, with figures or scenery serving its meaning. Prevent misspellings, unrelated icons, default word art, and uncontrolled color.
• **Ink Double Exposure Poster:** poetic portraits combining silhouette, ink texture, atmosphere, and negative space. Keep the result restrained and readable, avoiding overloaded fantasy collage and unnecessary text.
• **Nature Science Poster:** premium, minimal science communication around a natural subject. Use short labels, soft shadows, and generous whitespace rather than advertising copy or dense encyclopedia text.

6. Template functions: commerce, brands, spaces, and photography

Commerce and environment templates provide the following documented behavior:

• **Product Commerce Visual:** product hero images, packaging, detail pages, and sales layouts. Separate the hero product, benefits, and supporting props; define material, scene, lighting, layout, packaging text, and claims.
• **Personalized Beauty Report:** beauty recommendations, skin reports, shopping assistants, and product cards. Organize diagnosis, recommendation, aligned products, labels, and ratings while avoiding medical claims and dense fine print.
• **Brand Identity Package:** logo systems, identity boards, kits, and application mockups. Supply brand name, positioning, palette, typography, logo usage, and touchpoints; require consistent applications and accurate brand text.
• **Brand Touchpoint Board:** previews one campaign across multiple touchpoints. Name the touchpoints and use one shared palette and typography system; reduce their number if readability suffers.
• **Architecture & Space:** interiors, architectural renders, city maps, plans, and environment concepts. Define viewpoint, scale, materials, lighting, and function. Maps additionally need landmarks, label language, placement, borders, and an accuracy level; avoid impossible perspective unless intentional.
• **Realistic Photography:** portraits, street photographs, products, and cinematic realism. Specify camera distance, lens, light source, textures, background, movement, and believable imperfections. Add negative constraints for anatomy, hands, or text where needed.
• **Street Accident Moment:** candid spills, street incidents, phone snapshots, and fast action. State the exact moment, camera height, motion blur, and context; reject staged posing, artificial advertising light, overly clean compositions, and implausible events.

7. Template functions: art, characters, stories, history, documents, and special tasks

The remaining documented templates are:

• **Illustration & Art Style:** anime, watercolor, ink, decorative art, and style experiments. Define composition, subject, palette, brush or material, mood, and rendering depth; for references, state exactly what must remain unchanged.
• **Character Design Sheet:** pose grids, action breakdowns, and identity references. Set identity anchors, clothing, proportions, pose count, and sheet layout; preserve face, hair, and costume across poses and reduce pose count if crowded.
• **3D Collectible Toy:** figures, avatar toys, blind-box characters, and display renders. Preserve facial and clothing anchors while specifying material, package, base, lighting, and scale; keep packaging text short and accurate.
• **Scene Storytelling:** storyboards, worldbuilding, livestream scenes, and emotional narrative frames. Define people, place, time, conflict, emotion, and camera framing, and make every detail support visible story cues.
• **History & Classical Themes:** ancient Chinese scenes, scrolls, dynasty clothing, poetry visuals, and historical imagery. Specify dynasty, clothing system, objects, format, and cultural tone; do not mix periods when accuracy matters or allow modern props.
• **Document & Publishing:** white papers, manuals, encyclopedia plates, reports, and publication systems. Set page size, columns, contents, figure system, grid, and typography; keep headings, tables, labels, charts, and captions readable and aligned.
• **Concept Product Breakdown:** experimental R&D boards, exploded diagrams, and unusual systems. Define the artifact, components, short labels, material logic, callouts, relationships, and final presentation format rather than combining unspecified tasks.

Style tags include UI, poster, product, realistic, illustration, classical, brand, character, 3D, and related index terms. Scene tags cover technology, commerce, education, social, fashion, food, travel, story, history, and creative contexts.

8. Configure website authentication, generation, billing, community access, and analytics

The website uses Supabase Auth and Postgres plus a Vercel Function proxy for GPT Image 2. Configure the documented Vercel variables: `VITE_SUPABASE_URL`, `VITE_SUPABASE_ANON_KEY`, server-only `SUPABASE_SERVICE_ROLE_KEY`, `SUPER_ADMIN_EMAILS`, `CIYUAN_API_KEY`, `CIYUAN_BASE_URL`, `APP_URL`, server-only Stripe secrets, GA4 IDs, and Google Analytics OAuth credentials and refresh token. Never expose the Supabase service-role key or Stripe secrets to client code.

Apply the supplied migrations for user credits; membership plans, packs, Stripe orders, and credit-adjustment RPCs; Google account summaries and forced super-admin charging; the `$5 / 300 credits` catalog and admin metrics; and per-user favorites. Apply the Alipay web-payment migration before enabling that payment path and assign reviewed CNY prices to packs. Apply the paid-community migration before launch, and keep `COMMUNITY_PAYMENT_ENABLED=false` until the protected QR code, Alipay onboarding, and production payment/refund checks are complete. The repository points operators to dedicated Alipay and paid-community runbooks; no SQL execution command is supplied here, so none should be invented.

Add the production URL and local URLs such as `http://127.0.0.1:5173` to Supabase Auth redirects. Add Google OAuth credentials and enable the Google provider; disable Email Provider if Google-only access is required. Stripe Checkout’s documented webhook is `https://gpt-image2.canghe.ai/api/billing/webhook`, subscribing to `checkout.session.completed`, `invoice.payment_succeeded`, `customer.subscription.updated`, and `customer.subscription.deleted`.

For GA4, create a property, place its measurement and numeric property IDs in the corresponding variables, and create a Google OAuth web client with `http://localhost:8080/oauth2callback`. Put the client ID and secret in local `.env.local`, then use the documented flow:

npm run ga4:oauth

Approve `analytics.readonly`, paste the callback URL into the terminal, and store the returned refresh token in Vercel as Sensitive.

9. Development scripts, maintenance, verification, licensing, and limits

For local skill-source maintenance, the README documents:

npm run generate:style-skill
npm run install:skill

The first regenerates the skill reference from repository data; the second runs the repository’s local style-skill installer. The root `package.json` also defines the application lifecycle precisely: `generate:site-data` builds site data; `ga4:oauth` runs the analytics authorization helper; `predev` and `prebuild` regenerate site data and the style skill; `dev` starts Vite; `build` creates a Vite build; `preview` serves its preview; `dev:alipay-sandbox` starts the supplied Alipay sandbox server; and `test` runs Node tests matching `api/_lib/*.test.js`. Packaging scripts dry-run the skill tarball, publish the public npm package, and publish lifecycle preparation through their exact npm definitions. These definitions establish function names, but operators should review release and payment code before using publication or financial workflows.

The installer validates that `SKILL.md`, `agents`, `assets`, and `references` exist, creates target roots, removes an existing same-named installation, recopies those entries, and prints each destination. An unknown target produces usage information and an error. This replacement behavior means local edits inside an installed skill folder can be lost during reinstall.

The repository metadata identifies the project as MIT-licensed, and the README permits use, modification, distribution, and derivative work while preserving the license notice. That license does not eliminate separate rights in collected third-party prompts or images. Obtain authorization before commercial use where needed, preserve source information, and use the repository’s issue tracker for removal requests. Additional practical limits include external service costs and policies, credential handling, model-dependent image quality, imperfect text or anatomy generation, and the absence of supplied evidence for a Claude Code version requirement or automated host-compatibility testing.