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

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)

The gallery layer stores 544 reverse-engineered generation cases in 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, specifically through the getSavedGeneration function (lines 45-48), which retrieves case details for display and copying.

Industrial Prompt Templates (docs/templates.md)

Located at 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.

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 (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 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:

为[产品类型]生成一张[平台，如 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:

# 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 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:

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, while submitPersonalGeneration (defined in src/apimartClient.js) handles API key authentication, credit checking, and task polling via the constants defined in shared/apimart.js.

Working with APIMart Integration

The repository includes a dedicated client for APIMart API interactions. The 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, 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	Structured storage of 544 gallery cases	Data source for getSavedGeneration
docs/templates.md	Human and machine-readable prompt schemas	Template definitions with JSON constraints
src/main.jsx	React gallery UI and copy handlers	copyPrompt, getSavedGeneration
src/apimartClient.js	APIMart API integration	submitPersonalGeneration, submitPlatformGeneration
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.
• Template second: Copy industrial-grade templates from 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 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?

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, 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.

Can I use this repository without coding?

Yes. The React application in 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.

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