# GPT-Image2 Template Structure: The 3-Part Format for Consistent AI Image Generation

> Understand the GPT-Image2 template structure. Learn the 3-part format: prompt, JSON schema, and pitfalls guide for consistent AI image generation.

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

---

**A GPT-Image2 template follows a strict three-part structure consisting of a human-readable prompt body, a machine-readable JSON schema, and a pitfalls guide that prevents common generation errors.** This standardized format lives in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) and powers both the web interface and programmatic agent skills in the `freestylefly/awesome-gpt-image-2` repository.

Every visual category in the library—from UI screenshots to product photography—uses this identical skeleton to ensure that Large Language Models and image generators receive unambiguous, constraint-rich instructions. Whether you are building a React gallery or automating image generation via an AI agent, understanding this structural pattern is essential for reliable output.

## The Three-Part Anatomy of a GPT-Image2 Template

According to the source code in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md), each template is a self-contained markdown section delimited by an HTML anchor (e.g., `<a name="tpl-ui"></a>`). Inside every section, content is organized into three distinct blocks that serve different consumption patterns.

### 1. Prompt Body (Human-Readable Description)

The first block provides a plain-text template wrapped in triple backticks with the `text` specifier. It uses bracketed placeholders (e.g., `[产品名]`, `[卖点1]`) to indicate where users should inject variables.

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

```

This portion targets manual copy-paste workflows where a human reads the template, substitutes variables, and sends the result to an image model.

### 2. JSON Advanced Schema (Machine-Readable Definition)

Immediately following the text block, the template provides a JSON schema wrapped in `\`\`\`json` fences. This structured definition is consumed by agents (Claude Code, Codex, etc.) and the website's gallery component in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx).

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

```

The JSON enforces type safety and allows programmatic validation before the prompt ever reaches the image generation endpoint.

### 3. Pitfalls Guide (Avoid-Mistake Constraints)

The final block, introduced by the heading **避坑指南** (Pitfalls Guide), contains bullet-point rules that prevent hallucinations and layout failures. These constraints are concatenated to the final prompt sent to the model.

- **不要给模糊指令**：明确"平台 + 比例 + 布局"，否则模型会乱排版。
- **强制文字锁定**：要求"文字绝对可读，必须显示指定的中文"，避免乱码。

According to the source code at lines 86–90 of [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md), this section ensures the model respects hard constraints like "文字必须准确显示指定的中文" (text must accurately display the specified Chinese characters).

## How the Template Structure Is Consumed

The repository implements a dual-use architecture where the same three-part definition serves both interactive users and automated agents.

**Website Rendering**: The React application in [`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) (lines 2632–2651) reads [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json)—a compiled export of the markdown templates—and maps each entry into a card component:

```jsx
// src/main.jsx – template gallery rendering
{templates.map((item) => (
  <article className="caseCard templateVisualCard" key={item.id}>
    <img
      className="caseImage imageButton templateImage"
      src={item.thumbnail}
      alt={item.title}
    />
    <h3>{item.title}</h3>
    <p>{item.description}</p>
    <pre>{item.prompt}</pre>            {/* plain‑text part */}
    <pre>{item.jsonPrompt}</pre>        {/* JSON part */}
    <ul>{item.pitfalls.map(p => <li>{p}</li>)}</ul>
  </article>
))}

```

**Agent Skill Integration**: The skill located at `agents/skills/gpt-image-2-style-library` parses the JSON definitions to supply agents with ready-to-call template objects. Instead of free-form text, the agent receives a validated schema:

```javascript
// agents/skills/gpt-image-2-style-library/index.js
import styleLib from '../../data/style-library.json';

export function getTemplate(category) {
  const tpl = styleLib.templates.find(t => t.id === category);
  return {
    prompt: tpl.prompt,          // plain‑text part
    json: JSON.parse(tpl.json), // machine‑readable part
    pitfalls: tpl.pitfalls,
  };
}

```

## Example: Assembled Prompt Sent to the Model

When all three parts are combined for the final API call, the payload looks like this:

```text
生成一张iOS界面图，核心功能：日程管理、任务提醒。视觉风格：极简，主色蓝，强调色橙。布局：卡片流，信息层级清晰，留白充足。输出：高保真UI截图，文字清晰可读，比例9:16。

{
  "type": "UI Screenshot",
  "platform": "iOS",
  "product": "Scheduler",
  "layout": "Card‑based feed",
  "style": {"theme":"Minimal","primary_color":"#0057FF","accent_color":"#FF8800"},
  "constraints":"Readable text, 9:16 aspect"
}

/* Avoid pitfalls */
- 不要给模糊指令：明确"平台 + 比例 + 布局"
- 强制文字锁定：文字必须可读且显示指定中文

```

This concatenated string ensures the image model receives descriptive context, structural schema, and negative constraints in a single prompt.

## Summary

- **Three-part skeleton**: Every GPT-Image2 template in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) contains a human-readable text block, a machine-readable JSON schema, and a pitfalls guide.
- **Dual consumption**: The same structure renders in the React frontend ([`src/main.jsx`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx)) and powers the `gpt-image-2-style-library` agent skill via [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json).
- **Constraint enforcement**: The pitfalls section is appended to final prompts to prevent hallucinations and ensure text readability, particularly for Chinese characters.
- **Variable substitution**: Text templates use bracketed placeholders (`[产品名]`) while JSON templates provide typed fields for programmatic population.

## Frequently Asked Questions

### What file contains the canonical GPT-Image2 template definitions?

The master definitions reside in [`docs/templates.md`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/docs/templates.md) at the repository root. This markdown file is the single source of truth that gets compiled into [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json) for application consumption.

### Why do templates include both text and JSON versions?

The text version serves manual workflows where humans copy-paste prompts into chat interfaces, while the JSON version provides type-safe schemas for agents and automated pipelines. This dual format ensures compatibility with both human and machine consumers.

### How does the pitfalls guide prevent generation errors?

The pitfalls section (避坑指南) contains explicit "do not" rules that are concatenated to the final prompt. By mandating constraints like "文字绝对可读" (text must be absolutely readable), it reduces the likelihood of the model producing blurry text or incorrect layouts.

### Can I use these templates outside of the awesome-gpt-image-2 website?

Yes. The `agents/skills/gpt-image-2-style-library` directory exports a reusable Node.js interface that loads templates from [`data/style-library.json`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/data/style-library.json). You can import `getTemplate(category)` in any JavaScript project to retrieve structured prompts for programmatic use.