# JSON Template Structure for GPT-Image2: Complete Schema and Examples

> Understand the GPT-Image2 JSON template structure. Explore the complete schema and examples for `type`, `platform`, `layout`, `style`, `content`, and `constraints` to generate high-fidelity images.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: api-reference
- Published: 2026-08-28

---

**GPT-Image2 utilizes a hierarchical JSON template structure with standardized fields including `type`, `platform`, `layout`, `style`, `content`, and `constraints` to convert structured data into high-fidelity image generation prompts.**

The `freestylefly/awesome-gpt-image-2` repository defines a machine-readable schema that replaces ambiguous text prompts with explicit JSON objects. Understanding the JSON template structure for GPT-Image2 enables developers to produce consistent, high-quality visuals across UI screenshots, infographics, and character concept art by encoding every visual attribute as a discrete key-value pair.

## Core Schema Components

The JSON template follows a strict hierarchy designed to eliminate ambiguity. Each template is a self-contained object where all necessary details for the image are expressed internally, allowing the backend pipeline to convert the structured data into natural-language prompts for the image model.

### The Type Field

The **`type`** field specifies the overall category of the image and determines which additional fields are expected. Common values include `UI Screenshot`, `Infographic`, and `Character Concept Art`. According to the source code in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md), different `type` values trigger different sub-object requirements—for example, `UI Screenshot` uses `layout` and `style` objects, while `Infographic` relies on `structure` and `audience` fields.

### Platform, Space, and Subject Fields

These fields indicate the target context:
- **`platform`**: Specifies the technical environment (e.g., `"iOS"`, `"Android"`, `"Web"`)
- **`space`** or **`subject`**: Defines the thematic domain (e.g., `"Fitness App"`, `"Urban Metabolism"`)

### Layout and Composition

The **`layout`** field describes visual arrangement, aspect ratio, and camera angles. For interface design, this might specify `"Card-based feed with bottom tab bar"` or `"9:16 aspect ratio"`. The `composition` key serves a similar role for artistic outputs, defining spatial relationships between elements.

### Style Configuration

The **`style`** object groups visual aesthetic details into a nested structure:
- **`theme`**: `"Dark Mode"`, `"Light Mode"`, `"Cyberpunk"`
- **`primary_color`**: Hex codes or named colors like `"Neon Green"`
- **`typography`**: Font classifications such as `"Clean sans-serif"`
- **`aesthetic`**: High-level descriptors like `"Scientific atlas"`

For reusable style tokens, the repository maintains [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json), a JSON catalogue of predefined style values that templates can reference.

### Content Objects

The **`content`** field holds an object or array describing core elements that must appear in the final image. For UI templates, this includes `header` strings and `cards` arrays with title/data/button properties. For character art, this contains `appearance` and `attire` descriptors.

### Constraints for Quality Control

The **`constraints`** string establishes hard limits the model must obey, such as `"High fidelity, readable text, 9:16 aspect ratio"` or `"No cyberpunk, no gibberish text, strict structural layout"`. Including readability constraints like `"文字必须绝对可读"` (text must be absolutely readable) prevents the generation of garbled or nonsensical text artifacts.

## Implementation Files in the Repository

The template system is implemented across several key files in the `freestylefly/awesome-gpt-image-2` codebase:

- **[`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md)**: Contains the central collection of human-readable specifications and JSON template examples for every image category, including complete schemas for UI screenshots, infographics, and character concepts.

- **[`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json)**: Stores the canonical style tokens and color palettes that templates reference to ensure visual consistency across generations.

- **[`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx)**: The front-end React component that constructs and sends the JSON prompt object to the backend API endpoint.

- **[`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js)**: The server-side handler that receives the JSON template, converts it into an optimized textual prompt, and calls the image generation model.

## Complete Template Examples

### UI Screenshot Template

This example from [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) demonstrates a mobile fitness application interface:

```json
{
  "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"
}

```

### Infographic Template

Structured data visualization requires explicit structural definitions:

```json
{
  "type": "Infographic",
  "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"
}

```

### Character Concept Art Template

Artistic generation uses descriptive fields for pose and environment:

```json
{
  "type": "Character Concept Art",
  "character": {
    "identity": "Cybernetic Bounty Hunter",
    "appearance": "Short silver hair, glowing red synthetic left eye, athletic build",
    "attire": "Tactical trench coat with neon piping, holding a plasma rifle"
  },
  "pose": "Dynamic action stance, looking over shoulder with a smirk",
  "environment": "Rainy neon‑lit alleyway background (blurred)",
  "style": "Concept art, sharp linework, vibrant cyberpunk palette"
}

```

## Best Practices for Reliable Generation

To maximize output quality when constructing JSON templates for GPT-Image2, observe these principles as implemented in the repository's reference schemas:

- **Explicitness**: Every visual attribute should be a separate key. Vague wording in the JSON leads to inconsistent results, whereas discrete keys for `primary_color`, `typography`, and `background` produce predictable outputs.

- **Readability Constraints**: Always include explicit constraints regarding text legibility, especially for UI screenshots and infographics where textual content must remain crisp and readable.

- **Type-Driven Field Selection**: Tailor the sub-objects to match the `type` field value. A `UI Screenshot` requires `platform` and `product` identifiers, while `Character Concept Art` requires `pose` and `environment` descriptors.

## Summary

- The **JSON template structure for GPT-Image2** uses a hierarchical object with required fields: `type`, `layout`/`composition`, `style`, `content`, and `constraints`.
- **Type-specific fields** vary by category—UI templates use `platform` and `product`, while infographics use `topic` and `structure`.
- **Implementation** spans [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) (schema definitions), [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) (style tokens), [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) (frontend submission), and [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js) (backend prompt conversion).
- **Constraints strings** enforce critical quality controls like aspect ratios, color restrictions, and text readability requirements.
- **Explicit key-value pairs** significantly improve generation consistency compared to free-form text prompts.

## Frequently Asked Questions

### What are the required fields in a GPT-Image2 JSON template?

Every template must include the `type` field to categorize the image, a `style` object defining visual aesthetics, a `content` object describing elements to render, and a `constraints` string specifying quality limitations. Additional fields like `platform`, `layout`, or `environment` are required only for specific image types as defined in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md).

### How does the backend convert JSON templates into images?

The server-side handler in [`api/generate-image.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/api/generate-image.js) receives the JSON payload from the frontend ([`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx)), parses the structured data into an optimized natural-language prompt, and transmits that prompt to the image generation model. The JSON structure ensures all visual parameters are explicitly defined before prompt serialization occurs.

### Why is the `constraints` field important for UI screenshots?

The `constraints` field prevents common generation failures such as illegible text, incorrect aspect ratios, or unwanted stylistic elements. For interface designs, including constraints like `"High fidelity, readable text, 9:16 aspect ratio"` or Chinese readability requirements ensures the generated screenshots remain functional and visually coherent.

### Can I use predefined styles instead of defining colors manually?

Yes. The repository includes [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json), which contains a catalogue of predefined style tokens including color palettes, typography classifications, and aesthetic descriptors. Templates can reference these standardized values to maintain consistency across multiple image generations and team members.