# How to Use freestylefly/awesome-gpt-image-2 for Prompt Engineering: A Complete Guide

> Master prompt engineering with freestylefly/awesome-gpt-image-2. Install the npm package and use its gallery to create structured Prompt-as-Code assets for automated image generation.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: how-to-guide
- Published: 2026-09-10

---

**Install the `gpt-image-2-style-library` npm package and leverage the 544-case gallery to convert GPT-Image 2 examples into reusable, structured Prompt-as-Code assets for automated image generation.**

The `freestylefly/awesome-gpt-image-2` repository is a full-stack visual workspace designed to scale GPT-Image 2 prompt engineering from manual copy-pasting to automated agent workflows. It combines a curated gallery of reverse-engineered prompts with JSON schemas and a CLI skill, enabling developers to generate high-fidelity images programmatically. Whether you are browsing the React-based gallery or integrating the style library into Claude Code, this toolkit provides the structured data and API interfaces required for industrial-grade prompt engineering.

## Architecture and Core Components

The repository organizes its functionality into three distinct pillars: static data storage, template definitions, and agent-facing skills.

### Case Gallery ([`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json))

The gallery layer stores 544 reverse-engineered generation cases in [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json). Each entry contains the raw prompt string, generated image URL, and category metadata (UI, Infographic, Poster, etc.). The React front-end loads this data via the Vite-built application entry point in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx), specifically through the `getSavedGeneration` function (lines 45-48), which retrieves case details for display and copying.

### Industrial Prompt Templates ([`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md))

Located at [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md), this layer provides both human-readable markdown and machine-readable JSON schemas for 20+ template families. Each template defines required fields such as `type`, `platform`, `style`, and `constraints`, along with placeholder syntax for dynamic value injection. The JSON blocks include validation rules that the skill layer uses to verify user inputs before submission.

### Agent Skill (`agents/skills/gpt-image-2-style-library`)

The CLI skill is distributed as the npm package `gpt-image-2-style-library`. It bundles the JSON templates and exposes a thin wrapper that prompts for template selection, fills placeholders, and submits completed prompts to the APIMart endpoint via `submitPersonalGeneration` or `submitPlatformGeneration`. The skill source resides in `agents/skills/gpt-image-2-style-library/src`, with documentation available in [`SKILL.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/SKILL.md).

## Four Methods to Use freestylefly/awesome-gpt-image-2 for Prompt Engineering

### 1. Browse the Gallery (No-Code Discovery)

Visit the live deployment at `https://gpt-image2.canghe.ai/` to explore the 544-case gallery without writing any code. Filter cases by category, style, or scene, then click **Copy Prompt** to capture the raw prompt string. The copy functionality is handled by the `copyPrompt` handler in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) (lines 124-126), which uses `navigator.clipboard.writeText` to store the prompt from `getSavedGeneration(caseId)`.

### 2. Leverage Industrial Templates (Copy-Paste Workflow)

Open [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) to access structured templates for specific use cases like UI screenshots, infographics, or posters. Each section contains a plain-text template with bracketed placeholders and a corresponding JSON schema.

**Example UI Template Structure:**

```text
为[产品类型]生成一张[平台，如 iOS/Android/Web]界面图。
核心功能：[功能点A]、[功能点B]、[功能点C]。
视觉风格：[极简/科技/拟物]，主色[颜色]，强调色[颜色]。
布局：[顶部导航/双栏/卡片流]，信息层级清晰，留白充足。
输出：高保真UI截图，文字清晰可读，比例[9:16/16:9]。

```

Replace the bracketed placeholders with concrete values and submit the result to any GPT-Image 2-compatible endpoint, including OpenAI or APIMart.

### 3. Run the Skill Locally (CLI Automation)

Install the style library as a global npm package to enable agent-driven generation:

```bash

# Install the style-library skill

npm i -g gpt-image-2-style-library

# Use with Claude Code

claude-code gpt-image-2-style-library "Create a dark‑mode dashboard for a fitness app with neon‑green accents."

```

The skill execution flow performs three operations: it parses the natural language request to select the appropriate template (e.g., UI → Dashboard), populates the JSON schema with extracted values, and submits the prompt to APIMart. The installation command is also accessible via the **Install for local agents** button in the React UI, which copies `npm i gpt-image-2-style-library` to the clipboard (referenced in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) lines 104-108).

### 4. Integrate Programmatically (JavaScript API)

For custom applications, import the library functions directly to build prompts dynamically and submit them via the APIMart client:

```javascript
import { getTemplate, renderPrompt } from 'gpt-image-2-style-library';
import { submitPersonalGeneration } from './src/apimartClient.js';

// Select template by ID
const tmpl = getTemplate('ui_screenshot');

// Render with specific parameters
const prompt = renderPrompt(tmpl, {
  platform: 'iOS',
  product: 'Fitness App',
  layout: 'Card‑based feed with bottom tab bar',
  style: { theme: 'Dark Mode', primary_color: 'Neon Green' },
  constraints: 'High fidelity, readable text, 9:16 aspect ratio'
});

// Submit generation task
submitPersonalGeneration({ prompt })
  .then(res => console.log('Task ID:', res.taskId));

```

The `getTemplate` and `renderPrompt` helpers validate inputs against the constraints defined in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md), while `submitPersonalGeneration` (defined in [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js)) handles API key authentication, credit checking, and task polling via the constants defined in [`shared/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/shared/apimart.js).

## Working with APIMart Integration

The repository includes a dedicated client for APIMart API interactions. The [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js) file exports `submitPersonalGeneration` and `submitPlatformGeneration` functions that manage the full lifecycle of an image generation request: authentication header injection, payload serialization, and asynchronous task status polling. Credit handling and error code mapping are centralized in [`shared/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/shared/apimart.js), ensuring consistent price calculation and size limit enforcement across both the React UI and CLI skill.

## Key Files Reference

| File | Purpose | Critical Functions |
|------|---------|-------------------|
| [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json) | Structured storage of 544 gallery cases | Data source for `getSavedGeneration` |
| [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) | Human and machine-readable prompt schemas | Template definitions with JSON constraints |
| [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) | React gallery UI and copy handlers | `copyPrompt`, `getSavedGeneration` |
| [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js) | APIMart API integration | `submitPersonalGeneration`, `submitPlatformGeneration` |
| [`shared/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/shared/apimart.js) | API constants and error codes | Price limits, size constraints |
| `agents/skills/gpt-image-2-style-library/` | CLI skill implementation | `getTemplate`, `renderPrompt` |

## Summary

- **Browse first**: Use the live gallery at `gpt-image2.canghe.ai` to discover high-quality prompts from 544 reverse-engineered cases stored in [`data/cases.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/cases.json).
- **Template second**: Copy industrial-grade templates from [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) with validated JSON schemas to ensure consistent output quality.
- **Automate third**: Install the `gpt-image-2-style-library` npm package to enable Claude Code or Cursor to generate images via the skill layer in `agents/skills/`.
- **Integrate fully**: Use `getTemplate` and `renderPrompt` in JavaScript applications, submitting via `submitPersonalGeneration` from [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js) for programmatic workflows.

## Frequently Asked Questions

### How do I install the GPT-Image 2 style library for local agent use?

Run the command `npm i gpt-image-2-style-library` to install the package globally or locally in your project. Alternatively, use the npx skills installer: `npx skills add freestylefly/awesome-gpt-image-2 --skill gpt-image-2-style-library --agent claude-code --global --yes --copy`. This makes the `gpt-image-2-style-library` command available to Claude Code, enabling natural language prompt generation directly from your terminal.

### What is the structure of the prompt templates in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md)?

Each template includes a human-readable markdown section with bracketed placeholders (e.g., `[产品类型]`) and a machine-readable JSON block defining the schema. The JSON specifies required fields like `type`, `platform`, `style`, and `constraints`, which the skill uses to validate user inputs before rendering the final prompt string.

### How does the repository handle API authentication for image generation?

Authentication is managed through [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js), which reads APIMart API keys from environment variables or configuration files. The client exports `submitPersonalGeneration` for individual use and `submitPlatformGeneration` for shared platform credits, handling header injection, task polling, and error responses defined in [`shared/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/shared/apimart.js).

### Can I use this repository without coding?

Yes. The React application in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) provides a complete no-code interface. You can browse the 544 cases, filter by category, view full prompts and generated images, and click **Copy Prompt** to use the text in any GPT-Image 2 interface without writing JavaScript or using the CLI.