How the GPT-Image2 Prompt Engine Is Structured: A Layered Architecture Guide

The GPT-Image2 prompt engine employs a modular, data-driven architecture that separates prompt templates, style definitions, and generation logic into distinct layers connected by a lightweight API and reusable agent skill.

The freestylefly/awesome-gpt-image-2 repository implements a production-ready prompt engine for OpenAI's GPT-Image2 model. Understanding how this engine is structured reveals a deliberate separation of concerns that enables both interactive web usage and programmatic agent integration while maintaining a single source of truth for all style definitions.

Four-Layer Architecture

The engine organizes functionality into four distinct layers. This separation ensures that updates to styles or templates propagate instantly across all consumption endpoints.

Data Layer (Content Definitions)

This layer maintains the canonical prompt structures and style taxonomy. The data/style-library.json file contains a JSON catalog of 500+ style entries mapping each style to template tags. Complementing this, docs/templates.md stores the full "Prompt-as-Code" templates in Markdown format, defining structured prompt languages for subjects, lighting, and layout parameters.

Agent-Skill Layer (Programmatic Interface)

Exposing the catalog as a consumable skill for Claude Code, Codex, and Cursor, this layer includes agents/skills/gpt-image-2-style-library/SKILL.md for documentation and usage examples. The accompanying package.json defines the NPM package metadata, allowing agents to install the skill globally and generate prompts without manual copying.

Backend Service Layer (API Orchestration)

The api/generate-image.js Vercel serverless function handles the core generation workflow. It receives POST requests with a prompt payload, validates user credits via Supabase helpers in api/_lib/supabase.js, reserves a credit, and forwards the request to the external GPT-Image2 API through the generateImage() function.

Frontend UI Layer (User Interaction)

Entry point src/main.jsx initializes the React application, fetches the style library JSON, and renders the interactive gallery. The src/supabaseClient.js module manages authentication state and credit tracking, enabling signed-in users to interpolate templates with variables and trigger generation.

End-to-End Data Flow

The engine processes image generation through a coordinated pipeline:

1. Template Definition: Markdown files in docs/templates.md establish structured prompt languages with placeholders for variables.
2. Style Catalog: data/style-library.json provides machine-readable style entries with template tags, offering a single source of truth for both web and agent consumers.
3. User Selection: The frontend loads the JSON catalog, presents the style gallery, and interpolates user-provided variables into the selected template.
4. API Request: Upon generation, the UI POSTs the constructed prompt to /api/generate-image.
5. Validation & Forwarding: The API checks credit balances via Supabase, reserves a credit, and calls generateImage(prompt) to contact the external service.
6. Response Handling: The API returns the image URL to the UI while recording credit usage for analytics.

Because the style library and templates live in the same repository, any updates propagate immediately to both the web interface and agent skills.

Implementation Examples

Consuming the engine programmatically requires interacting with specific layers based on your use case.

Installing and using the agent skill:

# Install the skill globally

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

# Install into supported agents

gpt-image-2-style-library install all

# Example command to Claude-Code

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

Calling the generation endpoint:

import fetch from 'node-fetch';

async function generate(prompt) {
  const resp = await fetch('https://gpt-image2.canghe.ai/api/generate-image', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ prompt })
  });
  const { image } = await resp.json();
  console.log('Generated image URL:', image);
}

generate('A futuristic UI dashboard in pastel colors, 4K rendering');

Accessing style definitions directly:

import lib from './data/style-library.json';

const style = lib.find(s => s.id === 'infographic');
console.log('Template tags for infographic:', style.tags);

Summary

• The Data Layer in data/style-library.json and docs/templates.md serves as the single source of truth for all prompt structures.
• The Agent-Skill Layer packages these definitions as an NPM-installable skill for LLM agents.
• The Backend Service Layer (api/generate-image.js) handles credit validation and external API communication via Vercel serverless functions.
• The Frontend UI Layer (src/main.jsx) provides the interactive React interface for template interpolation and generation triggering.
• Updates to styles or templates automatically propagate to both web users and programmatic agents due to the shared repository structure.

Frequently Asked Questions

What file serves as the single source of truth for style definitions?

The data/style-library.json file contains the canonical catalog of 500+ style entries. Because both the React frontend and the agent skill consume this JSON file directly from the repository, any modifications immediately propagate to all consumers.

How does the backend validate user credits before generating images?

The api/generate-image.js serverless function imports helpers from api/_lib/supabase.js to verify the user's credit balance against the Supabase database. It reserves a credit before calling generateImage() to contact the external GPT-Image2 API, ensuring atomic credit consumption.

Can I use the style library without the web interface?

Yes. The agents/skills/gpt-image-2-style-library/ directory packages the style definitions as an NPM module. You can install it globally with npm install -g gpt-image-2-style-library and invoke it within Claude Code, Codex, or Cursor to generate prompts programmatically.

Where are the prompt templates stored and how are they structured?

The docs/templates.md file contains the full "Prompt-as-Code" templates written in Markdown. These templates define structured prompt languages with specific placeholders for subjects, lighting, layout, and other image parameters that get interpolated with user variables at runtime.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}