# How to Use the JSON Template Format for GPT‑Image2 Prompts

> Learn to use the JSON template format for GPT-Image2 prompts. Select a template, populate fields, and submit for image generation.

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

---

**To use the JSON template format for prompts, select a structured template from [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md), populate its fields either manually or via the `gpt-image-2-style-library` skill, and submit the resulting JSON through [`shared/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/shared/apimart.js) to the APIMart generation endpoint.**

The **JSON template format for prompts** in the **freestylefly/awesome‑gpt‑image‑2** repository replaces free‑form text with machine‑readable schemas. This structured approach enables automated agents to validate inputs, enforce consistency, and programmatically assemble complex image generation requests for the GPT‑Image2 pipeline.

## Why Use JSON Template Format for Prompts?

The repository supports both plain‑text and JSON templates, but the JSON variants offer distinct advantages for production workflows:

- **Structured data integrity**. Each template defines explicit fields such as `type`, `platform`, `style`, and `content`, ensuring that automated scripts inject values without breaking prompt syntax.
- **Early validation**. The front‑end in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) and the API client in [`shared/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/shared/apimart.js) both enforce well‑formed JSON schemas, rejecting malformed prompts before they reach the APIMart endpoint.
- **Reusability across agents**. JSON templates are stored centrally in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) and consumed by the **style‑library** skill at `agents/skills/gpt-image-2-style-library/`, allowing multiple agents to share canonical prompt definitions.

## Architecture and Data Flow

The JSON template pipeline follows a four‑stage flow from documentation to image generation:

1. **Template storage**. Industrial‑grade JSON skeletons live in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) (see lines 24‑46 for UI templates and lines 107‑129 for infographics).
2. **Skill hydration**. The style‑library skill parses the selected JSON template, replaces placeholder values with user‑provided data, and outputs a complete JSON object.
3. **API serialization**. [`shared/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/shared/apimart.js) serializes the JSON payload and transmits it to the APIMart service.
4. **UI integration**. The React front‑end in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) provides a **Copy JSON Template** button that pulls raw JSON directly from the documentation for manual editing.

## Implementing JSON Prompt Templates

### Direct Construction from docs/templates.md

For one‑off generations, copy a JSON skeleton from [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) and populate it manually. Lines 24‑46 define the **UI Screenshot** template structure:

```javascript
// Example: generate a UI screenshot prompt for an iOS fitness app
const uiPrompt = {
  type: "UI Screenshot",
  platform: "iOS",
  product: "Fitness App",
  layout: "Card‑based feed with bottom tab bar",
  style: {
    theme: "Dark Mode",
    primary_color: "Neon Green",
    typography: "Clean sans‑serif"
  },
  content: {
    header: "Today's Activity",
    cards: [
      { title: "Running", data: "5.2 km", button: "Start" },
      { title: "Calories", data: "340 kcal" }
    ]
  },
  constraints: "High fidelity, readable text, 9:16 aspect ratio"
};

// Submit via APIMart client
import { submitPersonalGeneration } from "./shared/apimart.js";

submitPersonalGeneration(JSON.stringify(uiPrompt))
  .then(res => console.log("Image URL:", res.imageUrl))
  .catch(err => console.error("Generation error:", err));

```

### Programmatic Generation with the Style‑Library Skill

For dynamic applications, use the `gpt-image-2-style-library` skill to load and fill templates. The **Infographic** template at lines 107‑129 of [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) demonstrates nested structure support:

```javascript
import { loadSkill } from "gpt-image-2-style-library";

async function generateInfographic() {
  const skill = await loadSkill();                         // Initialize skill
  const template = skill.getTemplate("Infographic");       // Load JSON from docs
  const filled = skill.fill(template, {
    topic: "Urban Metabolism",
    audience: "General Public",
    structure: {
      title_area: "城市生命系统图谱",
      layout: "Isometric cutaway, 12 numbered panels",
      modules: [
        { title: "能源", icon: "lightning", text: "Power flows" },
        { title: "水循环", icon: "water_drop", text: "Water flows" }
      ]
    },
    style: {
      aesthetic: "Scientific atlas",
      colors: "Low saturation, color‑coded flows",
      background: "Light paper texture"
    },
    constraints: "No cyberpunk, no gibberish text, strict structural layout"
  });

  // filled contains the complete JSON prompt ready for submission
  await submitPersonalGeneration(JSON.stringify(filled));
}

```

### UI Copy‑and‑Paste Workflow

The web interface provides a no‑code pathway for template utilization:

1. Navigate to the **Templates** tab in the application served by [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx).
2. Click **Copy JSON Template** beside any listed template (e.g., UI Screenshot or Infographic). The handler for this button resides at lines 25‑27 of [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx).
3. Paste the JSON into your editor, modify the placeholder values, and click **Generate Test** to invoke `submitPersonalGeneration` with your custom payload.

## Critical Source Files in the JSON Pipeline

Understanding these four files is essential for debugging or extending the template system:

- **[`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md)**. Stores all canonical JSON templates. The UI Screenshot schema begins at line 24; the Infographic schema begins at line 107.
- **`agents/skills/gpt-image-2-style-library/`**. Implements the skill interface. The `loadSkill()` function retrieves templates from the documentation, while `getTemplate()` and `fill()` handle variable substitution.
- **[`shared/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/shared/apimart.js)**. Contains the API transport logic. The `submitPersonalGeneration()` function accepts a JSON‑stringified prompt and manages the POST request to APIMart.
- **[`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx)**. The React front‑end that exposes template selection UI. The `copyTemplatePrompt` function (lines 25‑27) extracts raw JSON from the documentation for clipboard copying.

## Summary

- The **JSON template format for prompts** provides a schema‑validated alternative to plain text in the **awesome‑gpt‑image‑2** repository.
- Templates are authored in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) and consumed by both manual workflows and the automated style‑library skill.
- Use **[`shared/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/shared/apimart.js)** and its `submitPersonalGeneration()` method to transmit finalized JSON payloads to the image generation API.
- The **[`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx)** front‑end offers a **Copy JSON Template** feature for rapid manual iteration without writing code.

## Frequently Asked Questions

### Where are the JSON templates defined in the repository?

All JSON templates are defined in **[`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md)**. The UI Screenshot template appears at lines 24‑46, while the Infographic template appears at lines 107‑129. These definitions serve as the single source of truth for both the web UI and the style‑library skill.

### How does the style-library skill fill templates programmatically?

The skill exposes three key methods: `loadSkill()` initializes the environment, `getTemplate(templateName)` retrieves the JSON skeleton from [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md), and `fill(template, variables)` performs recursive substitution of placeholder keys with your provided values, returning a complete JSON object ready for `submitPersonalGeneration()`.

### Can I use JSON templates without the skill loader?

Yes. You can manually copy the JSON structure from [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md), populate the fields in any text editor, and pass the resulting string to `submitPersonalGeneration()` in [`shared/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/shared/apimart.js). This bypasses the skill system entirely while maintaining the structural benefits of the JSON format.

### What happens if I submit malformed JSON to the API?

Both the front‑end in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) and the API client in [`shared/apimart.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/shared/apimart.js) perform schema validation before transmission. Malformed prompts are rejected locally with a console error, preventing wasted API calls and ensuring that only well‑structured JSON reaches the APIMart image generation service.